import { useState } from "react";
import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { redirectSignedIn } from "~/lib/route-guards";
import { returnSearch, safeReturnPath } from "~/lib/return-to";
import { getAuthOptions, signUp } from "~/fns/auth";
import { getSignupGate } from "~/fns/waitlist";
import { WaitlistForm } from "~/components/WaitlistForm";
import { useStripSearchParam } from "~/hooks/use-strip-search-param";
import { useAction } from "~/hooks/use-action";
import { useTurnstile } from "~/hooks/use-turnstile";
import { useBootstrapToken } from "~/hooks/use-bootstrap-token";
import { AuthCard } from "~/components/AuthCard";
import { SignupConsent } from "~/components/SignupConsent";
import { Button, buttonClass } from "~/ui/Button";
import { TextField } from "~/ui/Field";
import { Callout, ErrorBanner } from "~/ui/Callout";
import { TextLink } from "~/ui/TextLink";

export const Route = createFileRoute("/signup")({
  // `bootstrap` is read straight from the address bar by useBootstrapToken, so it must survive search validation.
  validateSearch: (search: Record<string, unknown>) => ({
    ...returnSearch(search),
    ...(typeof search.bootstrap === "string" ? { bootstrap: search.bootstrap } : {}),
    ...(typeof search.invite === "string" ? { invite: search.invite } : {}),
  }),
  beforeLoad: redirectSignedIn,
  loaderDeps: ({ search }) => ({ invite: search.invite }),
  loader: async ({ deps }) => {
    const [options, gate] = await Promise.all([getAuthOptions(), getSignupGate({ data: { invite: deps.invite } })]);
    return { ...options, gate, inviteToken: gate.invitedEmail ? (deps.invite ?? null) : null };
  },
  component: SignupPage,
});

function SignupPage() {
  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(signUp);
  const turnstile = useTurnstile(options.turnstileSiteKey, "signup");
  const bootstrapToken = useBootstrapToken();
  // Kept in loader data; the address bar copy goes so the token doesn't linger in history or analytics.
  useStripSearchParam("invite");
  // Captured once: stripping the parameter re-runs the loader without it, which must not drop the invite.
  const [invite] = useState(() => ({ token: options.inviteToken, email: options.gate.invitedEmail }));
  const { gate } = options;
  const inviteToken = invite.token;

  if (gate.full && !inviteToken) {
    return (
      <AuthCard
        title="Join the waitlist"
        subtitle="We're at capacity right now. Leave your email and we'll let you know as soon as a spot opens."
      >
        {gate.inviteExpired && (
          <Callout tone="warning" className="mb-4">
            That invite has expired and the spot went to the next person. Join again to get back in line.
          </Callout>
        )}
        <WaitlistForm turnstileSiteKey={options.turnstileSiteKey} />
      </AuthCard>
    );
  }

  async function submit(event: React.SubmitEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = new FormData(event.currentTarget);
    const result = await action.run({
      data: {
        username: String(form.get("username") ?? ""),
        email: String(form.get("email") ?? ""),
        password: String(form.get("password") ?? ""),
        turnstileToken: turnstile.token,
        bootstrapToken: bootstrapToken.current,
        inviteToken: inviteToken ?? undefined,
        acceptTerms: true,
      },
    });
    if (result) await navigate({ href: next ?? "/" });
    else turnstile.reset();
  }

  return (
    <AuthCard
      title="Create your account"
      subtitle="Once you sign up, you can create a repository or import one with its full history."
    >
      <form method="post" onSubmit={submit} className="space-y-4">
        <ErrorBanner message={action.error} />
        {invite.email && <Callout tone="success">You're off the waitlist. Welcome in.</Callout>}
        <TextField label="Username" name="username" autoComplete="username" required />
        <TextField
          label="Email"
          name="email"
          type="email"
          autoComplete="email"
          defaultValue={invite.email ?? undefined}
          readOnly={Boolean(invite.email)}
          hint={invite.email ? "Your spot is reserved for the address on the waitlist" : undefined}
          required
        />
        <TextField
          label="Password"
          name="password"
          type="password"
          autoComplete="new-password"
          minLength={8}
          hint="At least 8 characters"
          required
        />
        {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}>
          Create account
        </Button>
        {options.githubEnabled && (
          <a href="/auth/github" className={buttonClass("secondary", "md", "w-full")}>
            Sign up with GitHub
          </a>
        )}
        <SignupConsent
          action={options.githubEnabled ? "creating an account or signing up with GitHub" : "creating an account"}
        />
        <p className="text-center text-xs text-kumo-subtle">
          Already have an account? <TextLink to="/login">Sign in</TextLink>
        </p>
      </form>
    </AuthCard>
  );
}