"use client";

import { useState } from "react";
import { Shield, ShieldOff, ShieldCheck, Copy, Smartphone } from "lucide-react";
import Button from "../ui/Button";
import Modal from "../ui/Modal";
import toast from "react-hot-toast";

interface TwoFactorSetupProps {
  enabled: boolean;
  onStatusChange: () => void;
}

export default function TwoFactorSetup({ enabled, onStatusChange }: TwoFactorSetupProps) {
  const [qrCode, setQrCode] = useState<string | null>(null);
  const [secret, setSecret] = useState<string | null>(null);
  const [token, setToken] = useState("");
  const [loading, setLoading] = useState(false);
  const [step, setStep] = useState<"idle" | "setup" | "verify">("idle");
  const [confirmDisable, setConfirmDisable] = useState(false);

  const startSetup = async () => {
    setLoading(true);
    try {
      const res = await fetch("/api/auth/2fa/setup", { method: "POST" });
      if (res.ok) {
        const data = await res.json();
        setQrCode(data.qrCodeUrl);
        setSecret(data.secret);
        setStep("setup");
      } else toast.error("Impossible de démarrer la configuration");
    } catch {
      toast.error("Erreur réseau");
    }
    setLoading(false);
  };

  const verifyAndEnable = async () => {
    setLoading(true);
    try {
      const res = await fetch("/api/auth/2fa/verify", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ token, enable: true }),
      });
      if (res.ok) {
        toast.success("Authentification à deux facteurs activée");
        setStep("idle");
        setQrCode(null);
        setToken("");
        onStatusChange();
      } else {
        const data = await res.json();
        toast.error(data.error || "Code invalide");
      }
    } catch {
      toast.error("Erreur réseau");
    }
    setLoading(false);
  };

  const disable2FA = async () => {
    setLoading(true);
    const res = await fetch("/api/auth/2fa/disable", { method: "POST" });
    setLoading(false);
    setConfirmDisable(false);
    if (res.ok) {
      toast.success("2FA désactivée");
      onStatusChange();
    } else toast.error("Erreur");
  };

  return (
    <div className="card p-4 sm:p-5">
      <div className="flex items-start gap-3">
        <div className={`w-10 h-10 rounded-2xl flex items-center justify-center shrink-0 ${enabled ? "bg-emerald-500/10 text-emerald-500" : "bg-gray-100 dark:bg-white/[0.06] text-gray-400"}`}>
          {enabled ? <ShieldCheck className="w-5 h-5" /> : <Shield className="w-5 h-5" />}
        </div>
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 flex-wrap">
            <h3 className="text-[15px] font-semibold text-gray-900 dark:text-white">Authentification à deux facteurs</h3>
            <span className={`text-[10.5px] font-semibold px-2 py-0.5 rounded-full uppercase tracking-wide ${enabled ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" : "bg-gray-100 dark:bg-white/10 text-gray-500"}`}>
              {enabled ? "Activée" : "Désactivée"}
            </span>
          </div>
          <p className="text-[13px] text-gray-500 dark:text-gray-400 mt-0.5">
            {enabled ? "Un code temporaire est demandé à chaque connexion." : "Ajoutez un code temporaire (TOTP) en plus de votre mot de passe."}
          </p>
        </div>
        {step === "idle" && (
          enabled ? (
            <Button size="sm" variant="danger" onClick={() => setConfirmDisable(true)} className="shrink-0">
              <ShieldOff className="w-4 h-4" /> Désactiver
            </Button>
          ) : (
            <Button size="sm" variant="accent" onClick={startSetup} loading={loading} className="shrink-0">
              <Smartphone className="w-4 h-4" /> Activer
            </Button>
          )
        )}
      </div>

      {step === "setup" && qrCode && (
        <div className="mt-5 grid sm:grid-cols-[auto_1fr] gap-5 items-center">
          <div className="mx-auto p-3 rounded-2xl bg-white shadow-card border border-line">
            <img src={qrCode} alt="QR Code 2FA" className="w-44 h-44 rounded-lg" />
          </div>
          <div className="space-y-3">
            <ol className="text-[13px] text-gray-600 dark:text-gray-300 space-y-1.5 list-decimal pl-4">
              <li>Ouvrez votre application d&apos;authentification (Google Authenticator, Authy, 1Password…).</li>
              <li>Scannez le QR code ou saisissez la clé manuelle.</li>
              <li>Entrez le code à 6 chiffres pour confirmer.</li>
            </ol>
            {secret && (
              <button
                onClick={() => { navigator.clipboard.writeText(secret); toast.success("Clé copiée"); }}
                className="flex items-center gap-2 max-w-full px-3 py-2 rounded-xl bg-gray-100 dark:bg-white/[0.06] text-[12px] font-mono text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-white/10 transition-colors"
                title="Copier la clé manuelle"
              >
                <span className="truncate">{secret}</span>
                <Copy className="w-3.5 h-3.5 shrink-0 text-gray-400" />
              </button>
            )}
            <div className="flex gap-2">
              <Button variant="ghost" size="sm" onClick={() => { setStep("idle"); setQrCode(null); }}>Annuler</Button>
              <Button size="sm" onClick={() => setStep("verify")}>Continuer</Button>
            </div>
          </div>
        </div>
      )}

      {step === "verify" && (
        <div className="mt-5 max-w-sm space-y-3">
          <p className="text-[13px] text-gray-600 dark:text-gray-300">Entrez le code à 6 chiffres affiché dans votre application.</p>
          <input
            type="text"
            inputMode="numeric"
            value={token}
            onChange={(e) => setToken(e.target.value.replace(/\D/g, "").slice(0, 6))}
            placeholder="000000"
            maxLength={6}
            className="field h-14 text-center text-2xl tracking-[0.4em] font-mono"
            autoFocus
            autoComplete="one-time-code"
          />
          <div className="flex gap-2">
            <Button variant="ghost" onClick={() => { setStep("setup"); setToken(""); }} className="flex-1">Retour</Button>
            <Button variant="accent" onClick={verifyAndEnable} loading={loading} disabled={token.length !== 6} className="flex-1">Vérifier et activer</Button>
          </div>
        </div>
      )}

      <Modal
        isOpen={confirmDisable}
        onClose={() => setConfirmDisable(false)}
        title="Désactiver la 2FA ?"
        description="Votre compte ne sera plus protégé que par votre mot de passe."
        footer={
          <>
            <Button variant="ghost" onClick={() => setConfirmDisable(false)}>Annuler</Button>
            <Button variant="danger" onClick={disable2FA} loading={loading}><ShieldOff className="w-4 h-4" /> Désactiver</Button>
          </>
        }
      >
        <p className="text-sm text-gray-600 dark:text-gray-300">Vous pourrez la réactiver à tout moment depuis cette page.</p>
      </Modal>
    </div>
  );
}