"use client";

import { useState, type FormEvent } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { useToast } from "@/components/ui/toast";
import { IconArrowRight, IconAlertTriangle } from "@/components/icons";

type Step = "credentials" | "totp";

export function LoginForm({ next }: { next?: string }) {
  const router = useRouter();
  const { toast } = useToast();
  const [step, setStep] = useState<Step>("credentials");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [totpCode, setTotpCode] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [pending, setPending] = useState(false);

  async function handleCredentials(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setError(null);
    setPending(true);

    try {
      const res = await fetch("/api/auth/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, password }),
      });
      const body = (await res.json().catch(() => ({}))) as {
        error?: string;
        requires_totp?: boolean;
      };

      if (!res.ok) {
        setError(body.error ?? "Identifiants invalides");
        setPending(false);
        return;
      }

      // Branche 2FA : le serveur a posé un cookie httpOnly avec le
      // challenge_token. On passe au 2e écran pour saisir le code.
      if (body.requires_totp) {
        setStep("totp");
        setPassword("");
        setPending(false);
        return;
      }

      toast({
        title: "Connexion réussie",
        description: "Bienvenue sur le panel.",
        tone: "success",
        duration: 2500,
      });

      const target = next && next.startsWith("/") ? next : "/dashboard";
      router.replace(target);
      router.refresh();
    } catch {
      setError("Erreur réseau, réessayez.");
      setPending(false);
    }
  }

  async function handleTotp(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setError(null);
    setPending(true);

    try {
      const res = await fetch("/api/auth/totp/challenge", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ code: totpCode }),
      });
      const body = (await res.json().catch(() => ({}))) as {
        error?: string;
        success?: boolean;
      };

      if (!res.ok || !body.success) {
        // Si 410, le challenge_token est expiré ou consommé — on revient
        // à l'écran credentials.
        if (res.status === 410) {
          setStep("credentials");
          setTotpCode("");
          setError("Session de connexion expirée. Recommence.");
          setPending(false);
          return;
        }
        setError(body.error ?? "Code invalide");
        setPending(false);
        return;
      }

      toast({
        title: "Connexion réussie",
        description: "Bienvenue sur le panel.",
        tone: "success",
        duration: 2500,
      });

      const target = next && next.startsWith("/") ? next : "/dashboard";
      router.replace(target);
      router.refresh();
    } catch {
      setError("Erreur réseau, réessayez.");
      setPending(false);
    }
  }

  if (step === "totp") {
    return (
      <form onSubmit={handleTotp} className="space-y-4">
        <div>
          <p className="mb-1.5 text-xs font-medium text-white/85">
            Code d&apos;authentification
          </p>
          <p className="mb-3 text-[11px] text-white/55">
            Ouvre ton application d&apos;authentification et saisis le code à 6 chiffres.
          </p>
          <input
            id="totp-code"
            type="text"
            inputMode="numeric"
            pattern="\d{6}"
            maxLength={6}
            required
            autoFocus
            autoComplete="one-time-code"
            value={totpCode}
            onChange={(e) => setTotpCode(e.target.value.replace(/\D/g, ""))}
            placeholder="123456"
            className="w-full rounded-md border border-white/15 bg-white/5 px-3 py-2 text-center text-2xl tracking-[0.4em] text-white shadow-sm placeholder:text-white/30 focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent-ring/40 tabular-nums"
          />
        </div>
        {error && (
          <div
            role="alert"
            className="flex items-start gap-2 rounded-md border border-red-400/40 bg-red-500/15 px-3 py-2 text-sm text-red-200 mf-fade-in"
          >
            <IconAlertTriangle size={14} className="mt-0.5 shrink-0" />
            <span>{error}</span>
          </div>
        )}
        <Button
          type="submit"
          loading={pending}
          className="w-full"
          iconRight={!pending ? <IconArrowRight size={14} /> : undefined}
          disabled={totpCode.length !== 6}
        >
          {pending ? "Vérification…" : "Valider"}
        </Button>
        <button
          type="button"
          onClick={() => {
            setStep("credentials");
            setTotpCode("");
            setError(null);
          }}
          className="block w-full text-center text-[11px] text-white/55 hover:text-white/80 transition-colors"
        >
          ← Revenir à la saisie de l&apos;email
        </button>
      </form>
    );
  }

  return (
    <form onSubmit={handleCredentials} className="space-y-4">
      <div>
        <label
          htmlFor="email"
          className="mb-1.5 block text-xs font-medium text-white/85"
        >
          Email
        </label>
        <input
          id="email"
          type="email"
          name="email"
          required
          autoComplete="email"
          autoFocus
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="prenom.nom@missioflow.fr"
          className="w-full rounded-md border border-white/15 bg-white/5 px-3 py-2 text-sm text-white shadow-sm placeholder:text-white/35 focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent-ring/40"
        />
      </div>
      <div>
        <label
          htmlFor="password"
          className="mb-1.5 block text-xs font-medium text-white/85"
        >
          Mot de passe
        </label>
        <input
          id="password"
          type="password"
          name="password"
          required
          autoComplete="current-password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="••••••••"
          className="w-full rounded-md border border-white/15 bg-white/5 px-3 py-2 text-sm text-white shadow-sm placeholder:text-white/35 focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent-ring/40"
        />
      </div>
      {error && (
        <div
          role="alert"
          className="flex items-start gap-2 rounded-md border border-red-400/40 bg-red-500/15 px-3 py-2 text-sm text-red-200 mf-fade-in"
        >
          <IconAlertTriangle size={14} className="mt-0.5 shrink-0" />
          <span>{error}</span>
        </div>
      )}
      <Button
        type="submit"
        loading={pending}
        className="w-full"
        iconRight={!pending ? <IconArrowRight size={14} /> : undefined}
      >
        {pending ? "Connexion…" : "Se connecter"}
      </Button>
    </form>
  );
}