"use client";
import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { Logo } from "@/components/logo";
import { Notice } from "@/components/ui";

export function LoginView() {
  const sp = useSearchParams(); const router = useRouter(); const next = sp.get("next") && sp.get("next")!.startsWith("/") ? sp.get("next")! : "/membre";
  const [step, setStep] = useState<"email" | "code">("email");
  const [email, setEmail] = useState(""); const [accept, setAccept] = useState(false); const [challengeId, setChallengeId] = useState<string | null>(null);
  const [code, setCode] = useState(""); const [err, setErr] = useState<string | null>(null); const [busy, setBusy] = useState(false); const [cooldown, setCooldown] = useState(0);
  const [needTerms, setNeedTerms] = useState(false);
  const codeRef = useRef<HTMLInputElement>(null);
  useEffect(() => { if (cooldown <= 0) return; const t = setTimeout(() => setCooldown((c) => c - 1), 1000); return () => clearTimeout(t); }, [cooldown]);
  const request = async () => {
    setBusy(true); setErr(null);
    const r = await fetch("/api/auth/request-code", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ email }) }); const d = await r.json(); setBusy(false);
    if (r.status === 400) { setErr(d.error?.message ?? "Adresse invalide"); return; }
    if (r.status === 429) { setErr(d.message); setCooldown(d.retryAfterSec ?? 60); if (challengeId) setStep("code"); return; }
    setChallengeId(d.challengeId); setCooldown(d.retryAfterSec ?? 60); setStep("code"); setTimeout(() => codeRef.current?.focus(), 50);
  };
  const verify = async (c = code) => {
    if (!challengeId || c.length !== 6) return;
    setBusy(true); setErr(null);
    const r = await fetch("/api/auth/verify-code", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ challengeId, code: c, acceptTerms: accept }) }); const d = await r.json(); setBusy(false);
    if (r.status === 409) { setNeedTerms(true); setErr(d.error?.message ?? "Acceptez les conditions puis confirmez le code."); return; }
    if (!r.ok) { setErr(d.error?.message ?? "Erreur"); if (["expired", "too_many_attempts", "not_found"].includes(d.error?.code)) { setStep("email"); setChallengeId(null); setCode(""); } return; }
    router.push(next); router.refresh();
  };
  return (
    <div className="mx-auto max-w-md px-4 py-10 md:py-16">
      <div className="text-center"><Logo /><h1 className="mt-4 text-2xl font-extrabold tracking-tight">{step === "email" ? "Connexion ou création de compte" : "Entrez votre code"}</h1><p className="mt-1 text-sm text-ink-2">{step === "email" ? "Une seule identité pour chercher, publier, échanger. Sans mot de passe : un code à usage unique vous est envoyé par courriel." : <>Un code à 6 chiffres a été envoyé à <strong>{email}</strong> s'il s'agit d'une adresse valide. Valable 10 minutes.</>}</p></div>
      <div className="tv-card p-5 mt-6">
        {step === "email" ? (
          <form onSubmit={(e) => { e.preventDefault(); request(); }} className="space-y-4">
            <label className="block"><span className="tv-label">Adresse courriel</span><input type="email" autoComplete="email" inputMode="email" required value={email} onChange={(e) => setEmail(e.target.value)} className="tv-input !pl-4 mt-1" placeholder="vous@exemple.ca" /></label>
            <label className="flex gap-2 text-xs text-ink-2 items-start"><input type="checkbox" checked={accept} onChange={(e) => setAccept(e.target.checked)} className="mt-0.5 accent-[#e0263c]" /><span>Si je crée un compte, j'accepte les <Link href="/conditions" className="underline" target="_blank">conditions d'utilisation</Link> et la <Link href="/confidentialite" className="underline" target="_blank">politique de confidentialité</Link>. (Facultatif si vous avez déjà un compte.)</span></label>
            {err && <Notice tone="warn">{err}</Notice>}
            <button type="submit" disabled={busy || cooldown > 0 && !!challengeId} className="tv-btn tv-btn-primary w-full">{busy ? "Envoi…" : "Recevoir mon code"}</button>
          </form>
        ) : (
          <form onSubmit={(e) => { e.preventDefault(); verify(); }} className="space-y-4">
            <label className="block"><span className="tv-label">Code à 6 chiffres</span><input ref={codeRef} type="text" inputMode="numeric" autoComplete="one-time-code" pattern="[0-9]{6}" maxLength={6} value={code} onChange={(e) => { const v = e.target.value.replace(/\D/g, "").slice(0, 6); setCode(v); if (v.length === 6) verify(v); }} className="tv-input !pl-4 mt-1 text-center text-2xl tracking-[.4em] font-bold" placeholder="••••••" /></label>
            {needTerms && <label className="flex gap-2 text-xs text-ink-2 items-start"><input type="checkbox" checked={accept} onChange={(e) => setAccept(e.target.checked)} className="mt-0.5 accent-[#e0263c]" /><span>J'accepte les <Link href="/conditions" className="underline" target="_blank">conditions</Link> et la <Link href="/confidentialite" className="underline" target="_blank">politique de confidentialité</Link>.</span></label>}
            {err && <Notice tone="warn">{err}</Notice>}
            <button type="submit" disabled={busy || code.length !== 6} className="tv-btn tv-btn-primary w-full">{busy ? "Vérification…" : "Me connecter"}</button>
            <div className="flex justify-between text-xs text-ink-3"><button type="button" onClick={() => { setStep("email"); setCode(""); setErr(null); }} className="underline">Changer d'adresse</button><button type="button" disabled={cooldown > 0 || busy} onClick={request} className="underline disabled:no-underline disabled:opacity-60">{cooldown > 0 ? `Renvoyer dans ${cooldown} s` : "Renvoyer un code"}</button></div>
          </form>
        )}
      </div>
      <p className="mt-4 text-xs text-ink-3 text-center">Si vous n'avez rien demandé, ignorez le courriel : personne ne peut se connecter sans le code.</p>
    </div>
  );
}