"use client";

import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { RECOVERY_RE } from "@spinza/shared";
import { api } from "@/lib/api";
import { useSession } from "@/lib/store";
import { Button, Input } from "@/components/ui";
import { RecoveryCodePanel } from "@/components/shell/recovery-code";

/** Normalise user input to SPZ-XXXX-XXXX-XXXX while typing. */
function formatRecoveryCode(raw: string): string {
  const clean = raw.toUpperCase().replace(/[^A-Z0-9]/g, "");
  const body = clean.startsWith("SPZ") ? clean.slice(3) : clean;
  const groups = body.slice(0, 12).match(/.{1,4}/g) ?? [];
  return ["SPZ", ...groups].join("-");
}

interface RecoverResponse {
  user: { id: string; username: string };
  recoveryCode: string;
  notice: string;
}

export default function RecoverPage() {
  const router = useRouter();
  const refresh = useSession((s) => s.refresh);
  const [username, setUsername] = useState("");
  const [code, setCode] = useState("SPZ-");
  const [password, setPassword] = useState("");
  const [confirm, setConfirm] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const [result, setResult] = useState<RecoverResponse | null>(null);
  const [continuing, setContinuing] = useState(false);

  const codeOk = RECOVERY_RE.test(code);
  const pwError = password && password.length < 8 ? "At least 8 characters." : null;
  const confirmError = confirm && confirm !== password ? "Passwords do not match." : null;
  const canSubmit = username.trim().length >= 3 && codeOk && password.length >= 8 && confirm === password && !busy;

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!canSubmit) return;
    setBusy(true);
    setError(null);
    try {
      const res = await api<RecoverResponse>("/api/auth/recover", { json: { username: username.trim().toLowerCase(), recoveryCode: code, newPassword: password } });
      setResult(res);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Invalid username or recovery code.");
    } finally {
      setBusy(false);
    }
  };

  const finish = async () => {
    setContinuing(true);
    await refresh();
    router.push("/");
    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">Password updated. You are signed in as <span className="font-semibold">@{result.user.username}</span>. All other sessions were signed out.</div>
        <RecoveryCodePanel title="Your new recovery code" code={result.recoveryCode} notice={`${result.notice} The old code no longer works. Spinza does not collect your email address — if you lose your password and this code, your account cannot be recovered.`} 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">Account recovery</div>
        <h1 className="text-2xl font-semibold tracking-tight">Reset your password.</h1>
        <p className="mt-1.5 text-sm text-fg-3">Enter the recovery code you saved when you created your account. A new code will be issued afterwards.</p>
      </div>

      <form onSubmit={submit} className="space-y-4" noValidate>
        <Input label="Username" value={username} onChange={(e) => setUsername(e.target.value)} autoComplete="username" autoCapitalize="none" autoCorrect="off" spellCheck={false} placeholder="your username" required />
        <Input label="Recovery code" value={code} onChange={(e) => setCode(formatRecoveryCode(e.target.value))} onFocus={(e) => e.target.select()} autoComplete="one-time-code" autoCapitalize="characters" autoCorrect="off" spellCheck={false} placeholder="SPZ-XXXX-XXXX-XXXX" className="font-mono uppercase tracking-[0.08em]" error={code.length > 4 && code.length >= 18 && !codeOk ? "Format: SPZ-XXXX-XXXX-XXXX" : null} hint="Format: SPZ-XXXX-XXXX-XXXX" />
        <Input label="New password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} autoComplete="new-password" placeholder="At least 8 characters" error={pwError} />
        <Input label="Confirm new password" type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} autoComplete="new-password" placeholder="Repeat your new password" error={confirmError} />
        {error ? (
          <p className="rounded-md border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-danger" role="alert">
            {error}
          </p>
        ) : null}
        <Button type="submit" size="lg" className="w-full" disabled={!canSubmit} loading={busy}>
          Reset password
        </Button>
      </form>

      <div className="mt-6 space-y-3 text-center text-sm text-fg-3">
        <p>
          Remembered it?{" "}
          <Link href="/login" className="font-medium text-accent-2 underline-offset-4 hover:underline">
            Back to sign in
          </Link>
        </p>
        <p className="text-[12px] leading-relaxed text-fg-4">Spinza never stores an email address or phone number, so there is no reset link to send. Without the recovery code, the account cannot be recovered — you can always start fresh with a new username.</p>
      </div>
    </div>
  );
}