"use client";
import { useEffect, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { Notice } from "@/components/ui";
export function MfaView() {
  const [st, setSt] = useState<{ enrolled: boolean; fresh: boolean; setup: { base32: string; uri: string } | null } | null>(null); const [code, setCode] = useState(""); const [err, setErr] = useState<string | null>(null); const router = useRouter(); const sp = useSearchParams();
  useEffect(() => { fetch("/api/admin/mfa").then((r) => r.json()).then(setSt); }, []);
  const submit = async () => { setErr(null); const r = await fetch("/api/admin/mfa", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ code, base32: st?.setup?.base32 }) }); if (!r.ok) { setErr("Code invalide"); return; } const next = sp.get("next") && sp.get("next")!.startsWith("/admin") ? sp.get("next")! : "/admin"; router.push(next); router.refresh(); };
  if (!st) return <p className="text-sm text-ink-3">Chargement…</p>;
  return (
    <div className="max-w-md space-y-4">
      <h1 className="text-2xl font-extrabold tracking-tight">Vérification forte</h1>
      {!st.enrolled && st.setup && (<div className="tv-card p-4 space-y-2 text-sm"><p className="font-semibold">Activer l'application d'authentification</p><p className="text-ink-2">Ajoutez cette clé dans votre application TOTP (1Password, Google Authenticator, Authy…), puis entrez le code généré.</p><p className="font-mono text-xs break-all bg-surface-2 p-2 rounded-sm">{st.setup.base32}</p><a href={st.setup.uri} className="text-xs underline text-brand-dark">Ouvrir dans l'application (otpauth://)</a></div>)}
      <div className="tv-card p-4 space-y-3"><label className="block text-sm"><span className="tv-label">Code à 6 chiffres</span><input inputMode="numeric" maxLength={6} value={code} onChange={(e) => setCode(e.target.value.replace(/\D/g, ""))} className="tv-input !pl-4 mt-1 text-center text-2xl tracking-[.4em] font-bold" /></label>{err && <Notice tone="warn">{err}</Notice>}<button type="button" onClick={submit} disabled={code.length !== 6} className="tv-btn tv-btn-primary w-full">{st.enrolled ? "Vérifier" : "Activer et vérifier"}</button></div>
      <Notice>Le code courriel seul ne suffit pas pour les actions d'administration : un second facteur TOTP est exigé et renouvelé toutes les 30 minutes. Chaque action est journalisée (append-only).</Notice>
    </div>
  );
}