import { useQuery } from "@tanstack/react-query";
import { useState } from "react";
import { Navigate, useNavigate, useParams } from "react-router";

import { Button } from "@/client/components/ui/button";
import { Card } from "@/client/components/ui/card";
import { Input } from "@/client/components/ui/input";
import { PageError } from "@/client/components/ui/page-error";
import { TurnstileWidget } from "@/client/components/turnstile-widget";
import { useSession } from "@/client/lib/auth-client";
import { useClientConfig } from "@/client/lib/config";
import { apiJsonRequest, apiRequest, responseMessage } from "@/client/lib/http";
import { queryKeys } from "@/client/lib/query";

type LookupState =
  | { status: "loading" }
  | { status: "valid"; email: string; expiresAt: string }
  | { status: "not_found" }
  | { status: "expired" }
  | { status: "consumed" };

const TURNSTILE_UNAVAILABLE_MESSAGE =
  "Human verification is unavailable. Invite acceptance is disabled until this is fixed; contact an administrator.";

export const InviteAcceptPage = () => {
  const navigate = useNavigate();
  const { token } = useParams();
  const session = useSession();
  const { data: lookup = { status: "loading" } } = useQuery({
    queryKey: queryKeys.inviteLookup(token ?? null),
    queryFn: async (): Promise<LookupState> => {
      if (!token) return { status: "not_found" };
      try {
        const res = await apiRequest(`/api/invite/${encodeURIComponent(token)}`);
        if (res.ok) {
          const body = (await res.json()) as { email: string; expiresAt: string };
          return { status: "valid", email: body.email, expiresAt: body.expiresAt };
        }
        if (res.status === 410) {
          const body = (await res.json().catch(() => null)) as { error?: string } | null;
          return body?.error === "invite_expired" ? { status: "expired" } : { status: "consumed" };
        }
        return { status: "not_found" };
      } catch {
        return { status: "not_found" };
      }
    },
  });

  const [name, setName] = useState("");
  const [password, setPassword] = useState("");
  const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
  const [resetKey, setResetKey] = useState(0);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const config = useClientConfig();
  // Local widget-side failure (script load, runtime error) is tracked
  // separately from the /api/config signal: /api/config can succeed but
  // the Turnstile script can still fail to mount.
  const [widgetUnavailable, setWidgetUnavailable] = useState(false);
  const siteKey = config?.status === "ok" ? config.turnstileSiteKey : null;
  const turnstileUnavailable = config?.status === "unavailable" || widgetUnavailable;

  // Surface the turnstile-unavailable banner without round-tripping
  // through useState — the form is already disabled in that branch.
  const displayError = error ?? (turnstileUnavailable ? TURNSTILE_UNAVAILABLE_MESSAGE : null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);
    if (!turnstileToken) {
      setError("Please complete the verification challenge.");
      return;
    }
    setSubmitting(true);
    try {
      const res = await apiJsonRequest(
        `/api/invite/${encodeURIComponent(token!)}`,
        { name, password, turnstileToken },
        { method: "POST" },
      );
      if (res.status === 410) {
        // Mirrors the lookup path: an invite consumed/expired between
        // GET (form render) and POST (submit) routes the user to the
        // dedicated terminal page so the URL bar reflects a durable
        // shareable state instead of stranding them on a dead form.
        const body = (await res.json().catch(() => null)) as { error?: string } | null;
        const target = body?.error === "invite_expired" ? "/invite/expired" : "/invite/consumed";
        navigate(target, { replace: true });
        return;
      }
      if (!res.ok) {
        setError(await responseMessage(res, "Could not accept invite."));
        setResetKey((n) => n + 1);
        return;
      }
      // Better Auth's autoSignIn sets the cookie on this response, but the
      // nanostore behind useSession doesn't observe cookie changes — refetch
      // before navigating so /account doesn't bounce to /sign-in. Same
      // pattern as sign-in.tsx after a successful credential sign-in.
      // `replace: true` so Back doesn't return to /invite/<consumed-token>.
      await session.refetch();
      navigate("/account", { replace: true });
    } catch {
      setError("Network error. Please try again.");
      setResetKey((n) => n + 1);
    } finally {
      setSubmitting(false);
    }
  };

  if (lookup.status === "loading") {
    return (
      <div className="mx-auto max-w-md py-12">
        <p className="text-sm text-zinc-400">Validating invite…</p>
      </div>
    );
  }

  if (lookup.status === "expired" || lookup.status === "consumed") {
    // Dedicated editorial pages per the design doc — replace the URL so
    // the page-and-token combination is shareable in its terminal state.
    return <Navigate to={lookup.status === "expired" ? "/invite/expired" : "/invite/consumed"} replace />;
  }

  if (lookup.status === "not_found") {
    return (
      <div className="mx-auto max-w-md py-12">
        <h1 className="mb-2 font-display text-2xl font-bold tracking-tight text-zinc-100">Invite not found</h1>
        <p className="mb-6 text-sm text-zinc-400">
          We couldn&rsquo;t find that invite. The link may be malformed or revoked. Check it with the person who sent
          it.
        </p>
        <a className="text-sm text-accent-400 underline underline-offset-2" href="/sign-in">
          Back to sign in
        </a>
      </div>
    );
  }

  return (
    <div className="mx-auto max-w-md py-12">
      <h1 className="mb-2 font-display text-3xl font-bold tracking-tight text-zinc-100">Accept your invite</h1>
      <p className="mb-2 text-sm text-zinc-400">
        tessera is the single sign-on for the limic suite — anvil, bland, flamemail, and friends. Set up your
        credentials and you&rsquo;ll use them everywhere.
      </p>
      <p className="mb-6 text-sm text-zinc-500">You can link GitHub or Google after signing in.</p>

      <Card>
        <PageError message={displayError} onDismiss={() => setError(null)} />

        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
          <Input label="Email" type="email" autoComplete="email" value={lookup.email} disabled />
          <Input
            label="Name"
            type="text"
            autoComplete="name"
            required
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
          <Input
            label="Password"
            type="password"
            autoComplete="new-password"
            required
            minLength={12}
            helper="At least 12 characters."
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
          <div className="flex flex-col gap-1.5" aria-live="polite">
            <div className="grid min-h-[65px]">
              {turnstileUnavailable ? (
                <p className="place-self-center text-center text-xs text-zinc-500">
                  Verification is unavailable. Acceptance is disabled.
                </p>
              ) : siteKey ? (
                <TurnstileWidget
                  siteKey={siteKey}
                  action="accept_invite"
                  onTokenChange={setTurnstileToken}
                  onUnavailable={() => setWidgetUnavailable(true)}
                  resetKey={resetKey}
                />
              ) : (
                <p className="place-self-center text-center text-xs text-zinc-500">Loading verification…</p>
              )}
            </div>
          </div>
          <Button type="submit" loading={submitting} disabled={!turnstileToken || turnstileUnavailable}>
            Accept invite
          </Button>
        </form>
      </Card>
    </div>
  );
};