import { SIGN_IN_LINK_MINUTES } from "@/lib/signin-link";
import type { Metadata } from "next";
import { Suspense } from "react";
import { AuthShell, primaryButton } from "../_components/auth-shell";
import { requestSignInLink } from "./actions";

export const metadata: Metadata = {
  title: "Sign in — SchemaTax",
  robots: { index: false, follow: false },
};

const ERRORS: Record<string, string> = {
  InvalidEmail: "Enter a valid email address.",
  Verification:
    "That sign-in link has expired or was already used. Ask for a new one below.",
  AccessDenied: "That address can't sign in.",
};
const FALLBACK_ERROR =
  "We couldn't send the link just now. Try again in a moment.";

function first(value: string | string[] | undefined): string | undefined {
  return Array.isArray(value) ? value[0] : value;
}

export default function SignInPage({ searchParams }: PageProps<"/signin">) {
  return (
    <AuthShell>
      <Suspense fallback={<SignInForm error={null} />}>
        <SignInState searchParams={searchParams} />
      </Suspense>
    </AuthShell>
  );
}

async function SignInState({
  searchParams,
}: Pick<PageProps<"/signin">, "searchParams">) {
  const params = await searchParams;
  const sent = first(params.sent);
  // Auth.js's own verify-request redirect carries type=email and no address.
  if (sent || first(params.type) === "email")
    return <CheckInbox email={sent ?? null} />;
  const error = first(params.error);
  return (
    <SignInForm error={error ? (ERRORS[error] ?? FALLBACK_ERROR) : null} />
  );
}

function SignInForm({ error }: { error: string | null }) {
  return (
    <>
      <h1 className="text-3xl leading-tight font-extrabold tracking-tight">
        Sign in to SchemaTax
      </h1>
      <p className="text-ink-soft mt-3">
        We&rsquo;ll email you a link. No password needed.
      </p>
      {error && (
        <p
          role="alert"
          className="border-dropout bg-dropout-soft mt-6 border-l-4 px-4 py-3 text-sm"
        >
          {error}
        </p>
      )}
      <form action={requestSignInLink} className="mt-8 flex flex-col gap-4">
        <label htmlFor="email" className="text-sm font-semibold">
          Email address
        </label>
        <input
          id="email"
          name="email"
          type="email"
          required
          autoComplete="email"
          inputMode="email"
          maxLength={254}
          className="border-ink/20 bg-paper hover:border-ink -mt-2 w-full rounded-sm border px-3 py-3 text-base"
        />
        <button type="submit" className={primaryButton}>
          Email me a sign-in link
        </button>
      </form>
    </>
  );
}

function CheckInbox({ email }: { email: string | null }) {
  return (
    <>
      <h1 className="text-3xl leading-tight font-extrabold tracking-tight">
        Check your inbox
      </h1>
      <p className="text-ink-soft mt-3">
        We sent a link to{" "}
        {email ? (
          <strong className="text-ink font-semibold [overflow-wrap:anywhere]">
            {email}
          </strong>
        ) : (
          "your email address"
        )}
        . It works once and expires in {SIGN_IN_LINK_MINUTES} minutes.
      </p>
      <a
        href="/signin"
        className="text-dropout mt-8 inline-block text-sm font-semibold underline-offset-4 hover:underline"
      >
        Use a different address
      </a>
    </>
  );
}