import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { redirectSignedIn } from "~/lib/route-guards";
import { returnSearch, safeReturnPath } from "~/lib/return-to";
import { getAuthOptions, signIn } from "~/fns/auth";
import { finishPasskeyLogin, startPasskeyLogin } from "~/fns/login";
import { useAction } from "~/hooks/use-action";
import { useTurnstile } from "~/hooks/use-turnstile";
import { usePasskeyAssertion } from "~/hooks/use-passkey";
import { AuthCard } from "~/components/AuthCard";
import { SignupConsent } from "~/components/SignupConsent";
import { Button, buttonClass } from "~/ui/Button";
import { TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { TextLink } from "~/ui/TextLink";

export const Route = createFileRoute("/login")({
  validateSearch: returnSearch,
  beforeLoad: redirectSignedIn,
  loader: () => getAuthOptions(),
  component: LoginPage,
});

function LoginPage() {
  const options = 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 action = useAction(signIn);
  const turnstile = useTurnstile(options.turnstileSiteKey, "login");
  const passkey = usePasskeyAssertion(startPasskeyLogin, finishPasskeyLogin);

  async function submit(event: React.SubmitEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = new FormData(event.currentTarget);
    const result = await action.run({
      data: {
        login: String(form.get("login") ?? ""),
        password: String(form.get("password") ?? ""),
        turnstileToken: turnstile.token,
      },
    });
    if (result?.twoFactor) await navigate({ to: "/login/two-factor", search: { next } });
    else if (result) await navigate({ href: next ?? "/" });
    else turnstile.reset();
  }

  async function signInWithPasskey() {
    if (await passkey.run(undefined)) await navigate({ href: next ?? "/", reloadDocument: true });
  }

  return (
    <AuthCard title="Sign in" subtitle="Sign in to your gitfor account.">
      <form method="post" onSubmit={submit} className="space-y-4">
        <ErrorBanner message={action.error ?? passkey.error} />
        <TextField label="Username or email" name="login" autoComplete="username" required />
        <TextField label="Password" name="password" type="password" autoComplete="current-password" required />
        <div className="-mt-2 text-right text-xs">
          <Link to="/forgot-password" className="text-kumo-subtle hover:text-accent-400">
            Forgot password?
          </Link>
        </div>
        {turnstile.widget}
        {turnstile.failed && (
          <p className="text-xs text-kumo-danger">
            The verification check failed to load. Reload the page to try again.
          </p>
        )}
        <Button type="submit" variant="primary" className="w-full" pending={action.pending} disabled={!turnstile.ready}>
          Sign in
        </Button>
        <Button className="w-full" pending={passkey.pending} onClick={signInWithPasskey}>
          Sign in with a passkey
        </Button>
        {options.githubEnabled && (
          <a
            href={next ? `/auth/github?next=${encodeURIComponent(next)}` : "/auth/github"}
            className={buttonClass("secondary", "md", "w-full")}
          >
            Continue with GitHub
          </a>
        )}
        {options.githubEnabled && options.signupsEnabled && (
          <SignupConsent action="continuing with GitHub as a new user" />
        )}
        {options.signupsEnabled && (
          <p className="text-center text-xs text-kumo-subtle">
            New here?{" "}
            <TextLink to="/signup" search={next ? { next } : {}}>
              Create an account
            </TextLink>
          </p>
        )}
      </form>
    </AuthCard>
  );
}