"use client";

import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { Check, X, Loader2 } from "lucide-react";
import { STARTING_BALANCE, USERNAME_RE, formatSC } from "@spinza/shared";
import { api, ApiClientError } from "@/lib/api";
import { useSession } from "@/lib/store";
import { Button, Input } from "@/components/ui";
import { RecoveryCodePanel } from "@/components/shell/recovery-code";
import { cn } from "@/lib/utils";

type Availability = { state: "idle" | "checking" | "ok" | "bad"; message?: string };

const REASONS: Record<string, string> = {
  length: "Use 3 to 24 characters.",
  charset: "Lowercase letters, numbers, _ and - only.",
  reserved: "This username is reserved.",
  profanity: "This username is not allowed.",
  taken: "That username is already taken.",
};

interface RegisterResponse {
  user: { id: string; username: string; isNew: boolean };
  balance: number;
  recoveryCode: string;
  notice: string;
}

export default function RegisterPage() {
  const router = useRouter();
  const refresh = useSession((s) => s.refresh);
  const status = useSession((s) => s.status);
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [confirm, setConfirm] = useState("");
  const [age, setAge] = useState(false);
  /** Result of the last server-side availability check, tagged with the username it was for. */
  const [checked, setChecked] = useState<{ for: string; available: boolean; reason?: string; failed?: boolean } | null>(null);
  const [submitting, setSubmitting] = useState(false);
  const [formError, setFormError] = useState<string | null>(null);
  const [result, setResult] = useState<RegisterResponse | null>(null);
  const [continuing, setContinuing] = useState(false);
  const seq = useRef(0);

  // Already signed in → lobby (unless we are mid-flow showing the recovery code).
  useEffect(() => {
    if (status === "authenticated" && !result) router.replace("/");
  }, [status, result, router]);

  // Availability is derived: local rules synchronously, server check debounced.
  const normalized = username.trim().toLowerCase();
  const localError = !normalized ? null : normalized.length < 3 || normalized.length > 24 ? REASONS.length : !USERNAME_RE.test(normalized) ? REASONS.charset : null;
  const serverResult = checked && checked.for === normalized ? checked : null;
  const avail: Availability = !normalized
    ? { state: "idle" }
    : localError
      ? { state: "bad", message: localError }
      : !serverResult || serverResult.failed
        ? { state: serverResult?.failed ? "idle" : "checking" }
        : serverResult.available
          ? { state: "ok", message: "Available" }
          : { state: "bad", message: REASONS[serverResult.reason ?? ""] ?? "Not available." };

  useEffect(() => {
    if (!normalized || localError) return;
    const my = ++seq.current;
    const t = setTimeout(async () => {
      try {
        const res = await api<{ available: boolean; reason?: string }>("/api/auth/check-username", { json: { username: normalized } });
        if (my !== seq.current) return;
        setChecked({ for: normalized, available: res.available, reason: res.reason });
      } catch {
        if (my !== seq.current) return;
        setChecked({ for: normalized, available: false, failed: true });
      }
    }, 350);
    return () => clearTimeout(t);
  }, [normalized, localError]);

  const pwError = password && password.length < 8 ? "At least 8 characters." : null;
  const confirmError = confirm && confirm !== password ? "Passwords do not match." : null;
  const canSubmit = avail.state === "ok" && password.length >= 8 && confirm === password && age && !submitting;

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!canSubmit) return;
    setSubmitting(true);
    setFormError(null);
    try {
      const res = await api<RegisterResponse>("/api/auth/register", { json: { username: username.trim().toLowerCase(), password, confirmPassword: confirm, ageConfirmed: true } });
      setResult(res);
    } catch (err) {
      if (err instanceof ApiClientError) {
        if (err.code === "USERNAME_TAKEN") setChecked({ for: normalized, available: false, reason: "taken" });
        setFormError(err.message);
      } else setFormError("Something went wrong. Please try again.");
    } finally {
      setSubmitting(false);
    }
  };

  const finish = async () => {
    setContinuing(true);
    await refresh();
    router.push("/?welcome=1");
    router.refresh();
  };

  if (result) {
    return (
      <div className="surface rounded-xl p-6 sm:p-8">
        <div className="mb-5 rounded-md border border-success/30 bg-success/10 px-4 py-3 text-sm text-success">
          Account created — <span className="font-semibold">@{result.user.username}</span> starts with {formatSC(result.balance)}.
        </div>
        <RecoveryCodePanel code={result.recoveryCode} notice={result.notice} onContinue={finish} loading={continuing} continueLabel="Continue to Spinza" />
      </div>
    );
  }

  return (
    <div className="surface rounded-xl p-6 sm:p-8">
      <div className="mb-6">
        <div className="eyebrow mb-2">Create account</div>
        <h1 className="text-2xl font-semibold tracking-tight">Pick a username. That&apos;s it.</h1>
        <p className="mt-1.5 text-sm text-fg-3">No email, no phone number, no card. You receive {formatSC(STARTING_BALANCE)} — fictional credits with no cash value.</p>
      </div>

      <form onSubmit={submit} className="space-y-4" noValidate>
        <div className="relative">
          <Input label="Username" value={username} onChange={(e) => setUsername(e.target.value.toLowerCase())} autoComplete="username" autoCapitalize="none" autoCorrect="off" spellCheck={false} maxLength={24} placeholder="e.g. neon_spinner" error={avail.state === "bad" ? avail.message : null} hint={avail.state === "ok" ? undefined : "3–24 lowercase letters, numbers, _ or -"} aria-describedby="username-status" />
          <span id="username-status" className={cn("pointer-events-none absolute right-4 top-[38px] flex items-center gap-1 text-[12px] font-medium", avail.state === "ok" && "text-success", avail.state === "bad" && "text-danger", avail.state === "checking" && "text-fg-3")} aria-live="polite">
            {avail.state === "checking" ? <Loader2 className="h-4 w-4 animate-spin" /> : avail.state === "ok" ? (
              <>
                <Check className="h-4 w-4" /> Available
              </>
            ) : avail.state === "bad" ? (
              <X className="h-4 w-4" />
            ) : null}
          </span>
        </div>
        <Input label="Password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} autoComplete="new-password" placeholder="At least 8 characters" error={pwError} />
        <Input label="Confirm password" type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} autoComplete="new-password" placeholder="Repeat your password" error={confirmError} />

        <label className="flex cursor-pointer items-start gap-3 rounded-md border border-line p-3.5 tap hover:bg-surface">
          <input type="checkbox" checked={age} onChange={(e) => setAge(e.target.checked)} className="mt-0.5 h-5 w-5 shrink-0 accent-[#c9a961]" />
          <span className="text-[14px] leading-snug">I confirm that I am 18 years of age or older.</span>
        </label>

        {formError ? (
          <p className="rounded-md border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-danger" role="alert">
            {formError}
          </p>
        ) : null}

        <Button type="submit" size="lg" variant="accent" className="w-full" disabled={!canSubmit} loading={submitting}>
          Create account
        </Button>

        <p className="text-center text-[12px] leading-relaxed text-fg-4">
          By continuing you accept the{" "}
          <Link href="/legal/terms" className="text-fg-3 underline-offset-4 hover:underline">
            Terms
          </Link>{" "}
          and{" "}
          <Link href="/legal/privacy" className="text-fg-3 underline-offset-4 hover:underline">
            Privacy Policy
          </Link>
          . Spinza Credits are fictional and cannot be purchased or withdrawn.
        </p>
      </form>

      <p className="mt-6 text-center text-sm text-fg-3">
        Already have an account?{" "}
        <Link href="/login" className="font-medium text-accent-2 underline-offset-4 hover:underline">
          Sign in
        </Link>
      </p>
    </div>
  );
}