"use client";

import { useState } from "react";
import { authClient } from "@/lib/auth-client";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export function TwoFactorSettings({ enabled }: { enabled: boolean }) {
  const [password, setPassword] = useState("");
  const [totpUri, setTotpUri] = useState<string | null>(null);
  const [backupCodes, setBackupCodes] = useState<string[]>([]);
  const [code, setCode] = useState("");
  const [message, setMessage] = useState<string | null>(null);
  const [pending, setPending] = useState(false);

  async function enable() {
    setPending(true);
    setMessage(null);
    const result = await authClient.twoFactor.enable({ password });
    setPending(false);
    if (result.error || !result.data || result.data.method !== "totp") {
      return setMessage(result.error?.message ?? "Activation impossible");
    }
    setTotpUri(result.data.totpURI);
    setBackupCodes(result.data.backupCodes);
  }

  async function confirm() {
    setPending(true);
    setMessage(null);
    const result = await authClient.twoFactor.verifyTotp({ code });
    setPending(false);
    setMessage(result.error ? "Code invalide" : "2FA activée. Rechargez la page.");
  }

  async function disable() {
    setPending(true);
    setMessage(null);
    const result = await authClient.twoFactor.disable({ password });
    setPending(false);
    setMessage(
      result.error
        ? (result.error.message ?? "Désactivation impossible")
        : "2FA désactivée. Rechargez la page.",
    );
  }

  return (
    <div className="max-w-md space-y-4">
      <div className="space-y-2">
        <Label htmlFor="password">Mot de passe (requis)</Label>
        <Input
          id="password"
          type="password"
          autoComplete="current-password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </div>
      {enabled ? (
        <Button variant="destructive" disabled={pending} onClick={disable}>
          Désactiver la 2FA
        </Button>
      ) : (
        <Button disabled={pending} onClick={enable}>
          Activer la 2FA
        </Button>
      )}
      {totpUri ? (
        <div className="space-y-2">
          <p className="text-sm">Ajoutez cette clé dans votre application d'authentification :</p>
          <code className="block break-all text-xs">{totpUri}</code>
          <p className="text-sm">Codes de secours : {backupCodes.join(", ")}</p>
          <Label htmlFor="code">Code de confirmation</Label>
          <Input
            id="code"
            inputMode="numeric"
            autoComplete="one-time-code"
            value={code}
            onChange={(e) => setCode(e.target.value)}
          />
          <Button disabled={pending} onClick={confirm}>
            Confirmer
          </Button>
        </div>
      ) : null}
      {message ? <p className="text-sm">{message}</p> : null}
    </div>
  );
}