import {
  parseConfirmTarget,
  requestOrigin,
  SIGN_IN_CALLBACK_PATH,
} from "@/lib/signin-link";
import type { Metadata } from "next";
import { headers } from "next/headers";
import { Suspense } from "react";
import { AuthShell, primaryButton } from "../../_components/auth-shell";

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

export default function ConfirmPage({
  searchParams,
}: PageProps<"/signin/confirm">) {
  return (
    <AuthShell>
      <Suspense
        fallback={
          <h1 className="text-3xl leading-tight font-extrabold tracking-tight">
            Sign in to SchemaTax
          </h1>
        }
      >
        <Confirm searchParams={searchParams} />
      </Suspense>
    </AuthShell>
  );
}

async function Confirm({
  searchParams,
}: Pick<PageProps<"/signin/confirm">, "searchParams">) {
  const { url } = await searchParams;
  const target = parseConfirmTarget(
    typeof url === "string" ? url : undefined,
    requestOrigin(await headers()),
  );

  if (!target) {
    return (
      <>
        <h1 className="text-3xl leading-tight font-extrabold tracking-tight">
          This link can&rsquo;t be used
        </h1>
        <p className="text-ink-soft mt-3">
          It may have been cut off when it was copied. Open the link straight
          from the email, or ask for a new one.
        </p>
        <a
          href="/signin"
          className={`mt-8 inline-block text-center ${primaryButton}`}
        >
          Ask for a new link
        </a>
      </>
    );
  }

  return (
    <>
      <h1 className="text-3xl leading-tight font-extrabold tracking-tight">
        Sign in to SchemaTax as{" "}
        <span className="block text-2xl [overflow-wrap:anywhere]">
          {target.email}
        </span>
      </h1>
      <p className="text-ink-soft mt-3">
        Nothing happens until you press the button.
      </p>
      {/* A form, not a link: only a person pressing it spends the single-use token. */}
      <form action={SIGN_IN_CALLBACK_PATH} method="get" className="mt-8">
        {target.params.map(([name, value]) => (
          <input key={name} type="hidden" name={name} value={value} />
        ))}
        <button type="submit" className={primaryButton}>
          Sign in
        </button>
      </form>
    </>
  );
}