"use client";

import { useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";

export default function SecurityPage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [qrCode, setQrCode] = useState<string | null>(null);
  const [secret, setSecret] = useState<string | null>(null);
  const [token, setToken] = useState("");
  const [message, setMessage] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
  const required = searchParams.get("required") === "1";

  const generate2FA = async () => {
    setLoading(true);
    setError("");
    setMessage("");
    try {
      const res = await fetch("/api/auth/2fa/generate", { method: "POST" });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "No se pudo generar el 2FA");
      setQrCode(data.qrCode);
      setSecret(data.secret);
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : "Error al generar 2FA");
    } finally {
      setLoading(false);
    }
  };

  const verify2FA = async () => {
    setLoading(true);
    setError("");
    setMessage("");
    try {
      const res = await fetch("/api/auth/2fa/verify", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ token }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "No se pudo verificar");
      setMessage(data.message || "2FA activado correctamente");
      setQrCode(null);
      setSecret(null);
      setToken("");
      // Ir al panel con la sesión ya actualizada
      setTimeout(() => {
        router.push(data.redirectTo || "/admin");
        router.refresh();
      }, 800);
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : "Error al verificar");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <h1 className="text-3xl font-bold mb-6 text-neon-blue">Seguridad (2FA)</h1>

      <div className="bg-white/5 p-6 rounded-lg border border-white/10 max-w-xl">
        <h2 className="text-xl font-semibold mb-4">Autenticación de Dos Factores</h2>

        {required ? (
          <div className="bg-yellow-500/10 text-yellow-300 border border-yellow-500/20 p-4 rounded mb-6 text-sm space-y-2">
            <p className="font-semibold">Primera vez: activa el 2FA ahora</p>
            <ol className="list-decimal list-inside space-y-1 text-yellow-200/90">
              <li>Pulsa «Configurar 2FA» y escanea el QR con Google Authenticator o Authy.</li>
              <li>Ingresa el código de 6 dígitos que muestra la app.</li>
              <li>Al verificar, el panel se desbloquea. En los próximos ingresos te pedirá ese código.</li>
            </ol>
          </div>
        ) : (
          <p className="text-gray-400 mb-6">
            Protege tu cuenta de administrador con un código temporal además de tu contraseña.
          </p>
        )}

        {error && <div className="bg-red-500/10 text-red-500 p-3 rounded mb-4">{error}</div>}
        {message && <div className="bg-green-500/10 text-green-500 p-3 rounded mb-4">{message}</div>}

        {!qrCode && (
          <button
            onClick={generate2FA}
            disabled={loading}
            className="bg-neon-blue text-black font-bold py-2 px-4 rounded hover:bg-blue-400 transition"
          >
            {loading ? "Generando..." : "Configurar 2FA"}
          </button>
        )}

        {qrCode && (
          <div className="mt-4 space-y-4">
            <p className="text-sm text-gray-300">
              1. Escanea este código QR con Google Authenticator o Authy.
            </p>
            <div className="bg-white p-4 inline-block rounded">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src={qrCode} alt="Código QR 2FA" />
            </div>

            {secret && (
              <p className="text-xs text-gray-500 break-all">
                Si no puedes escanear, ingresa esta clave manualmente:{" "}
                <span className="text-gray-300 font-mono">{secret}</span>
              </p>
            )}

            <div>
              <p className="text-sm text-gray-300 mb-2">
                2. Ingresa el código de 6 dígitos de la app para activar el 2FA.
              </p>
              <div className="flex gap-2">
                <input
                  type="text"
                  inputMode="numeric"
                  autoComplete="one-time-code"
                  value={token}
                  onChange={(e) => setToken(e.target.value.replace(/\D/g, "").slice(0, 6))}
                  placeholder="123456"
                  maxLength={6}
                  className="bg-black border border-white/20 rounded px-3 py-2 text-white tracking-[0.35em] text-center focus:outline-none focus:border-neon-blue w-36"
                />
                <button
                  onClick={verify2FA}
                  disabled={loading || token.length !== 6}
                  className="bg-neon-purple text-white font-bold py-2 px-4 rounded hover:bg-purple-600 transition disabled:opacity-50"
                >
                  {loading ? "Verificando..." : "Verificar y Activar"}
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}