import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { redirectSignedIn } from "~/lib/route-guards";
import { returnSearch, safeReturnPath } from "~/lib/return-to";
import { useState } from "react";
import { finishTwoFactorPasskey, getTwoFactorChallenge, startTwoFactorPasskey, verifyTwoFactorCode } from "~/fns/login";
import { useAction } from "~/hooks/use-action";
import { usePasskeyAssertion } from "~/hooks/use-passkey";
import { AuthCard } from "~/components/AuthCard";
import { Button } from "~/ui/Button";
import { TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { TextLink } from "~/ui/TextLink";

export const Route = createFileRoute("/login_/two-factor")({
  validateSearch: returnSearch,
  beforeLoad: redirectSignedIn,
  loader: () => getTwoFactorChallenge(),
  head: () => ({ meta: [{ title: "Two-factor authentication · gitfor" }] }),
  component: TwoFactorPage,
});

function TwoFactorPage() {
  const challenge = Route.useLoaderData();
  // Validated again here: router search state can still carry the raw value during SSR.
  const next = safeReturnPath(Route.useSearch().next) ?? undefined;
  const navigate = useNavigate();
  const [kind, setKind] = useState<"totp" | "recovery">(challenge.totp ? "totp" : "recovery");
  const verify = useAction(verifyTwoFactorCode);
  const passkey = usePasskeyAssertion(startTwoFactorPasskey, finishTwoFactorPasskey);

  if (!challenge.pending) {
    return (
      <AuthCard title="Sign-in expired" subtitle="Enter your password again to continue.">
        <TextLink to="/login" className="text-sm">
          Back to sign in
        </TextLink>
      </AuthCard>
    );
  }

  async function submit(event: React.SubmitEvent<HTMLFormElement>) {
    event.preventDefault();
    const code = String(new FormData(event.currentTarget).get("code") ?? "");
    if (await verify.run({ data: { code, kind } })) await navigate({ href: next ?? "/" });
  }

  return (
    <AuthCard title="Two-factor authentication" subtitle="Confirm it's you to finish signing in.">
      <div className="space-y-4">
        <ErrorBanner message={verify.error ?? passkey.error} />
        {challenge.passkey && (
          <Button
            variant={challenge.totp ? "secondary" : "primary"}
            className="w-full"
            pending={passkey.pending}
            onClick={async () => {
              if (await passkey.run(undefined)) await navigate({ href: next ?? "/", reloadDocument: true });
            }}
          >
            Use a passkey
          </Button>
        )}
        <form onSubmit={submit} className="space-y-4">
          <TextField
            key={kind}
            label={kind === "totp" ? "Authentication code" : "Recovery code"}
            name="code"
            autoComplete="one-time-code"
            inputMode={kind === "totp" ? "numeric" : "text"}
            placeholder={kind === "totp" ? "123456" : "xxxxxx-xxxxxx"}
            autoFocus
            required
          />
          <Button type="submit" variant="primary" className="w-full" pending={verify.pending}>
            Verify
          </Button>
        </form>
        <button
          type="button"
          className="w-full text-center text-xs text-kumo-subtle hover:text-accent-400"
          onClick={() => setKind(kind === "totp" ? "recovery" : "totp")}
        >
          {kind === "totp" ? "Use a recovery code instead" : challenge.totp ? "Use your authenticator app" : ""}
        </button>
      </div>
    </AuthCard>
  );
}