const ERROR_MESSAGES: Record<string, string> = {
  "2FA_REQUIRED": "Esta cuenta tiene 2FA activo. Ingresa el código del autenticador.",
  "Credenciales inválidas": "Correo o contraseña incorrectos.",
  "No autorizado": "Esa cuenta no es administrador.",
  "Token 2FA inválido": "Código 2FA inválido.",
  "Demasiados intentos. Espera unos minutos.": "Demasiados intentos. Espera unos minutos.",
};

export default async function AdminLoginPage({
  searchParams,
}: {
  searchParams: Promise<{ error?: string }>;
}) {
  const params = await searchParams;
  const rawError = params?.error ? String(params.error) : "";
  const error = rawError
    ? ERROR_MESSAGES[rawError] || decodeURIComponent(rawError)
    : "";

  return (
    <div className="theme-dark min-h-screen flex items-center justify-center p-4 bg-[#0a0a0a]">
      <div className="glass-panel w-full max-w-md p-8 relative overflow-hidden rounded-2xl">
        <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#7c3aed] to-[#0ea5c6]" />

        <h2 className="text-3xl font-bold text-center mb-8 text-white">Panel Admin</h2>

        {error ? (
          <div className="mb-6 p-3 bg-red-500/10 border border-red-500/50 rounded-lg text-red-400 text-sm text-center">
            {error}
          </div>
        ) : null}

        {/* Form HTML clásico: funciona aunque React no hidrate */}
        <form method="POST" action="/api/auth/admin-login" className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-400 mb-1" htmlFor="email">
              Correo
            </label>
            <input
              id="email"
              name="email"
              type="email"
              required
              autoComplete="username"
              placeholder="correo@ejemplo.com"
              className="w-full bg-black/50 border border-white/10 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-[#7c3aed] transition-colors"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-400 mb-1" htmlFor="password">
              Contraseña
            </label>
            <input
              id="password"
              name="password"
              type="password"
              required
              autoComplete="current-password"
              className="w-full bg-black/50 border border-white/10 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-[#7c3aed] transition-colors"
              placeholder="••••••••"
            />
          </div>

          <div>
            <label
              className="block text-sm font-medium text-gray-400 mb-1"
              htmlFor="twoFactorToken"
            >
              Código 2FA
            </label>
            <input
              id="twoFactorToken"
              name="twoFactorToken"
              type="text"
              inputMode="numeric"
              autoComplete="one-time-code"
              maxLength={6}
              className="w-full bg-black/50 border border-white/10 rounded-lg px-4 py-3 text-white tracking-[0.35em] text-center focus:outline-none focus:border-[#7c3aed] transition-colors"
              placeholder="6 dígitos (vacío la 1ª vez)"
            />
            <p className="mt-2 text-xs text-gray-500">
              Si aún no lo activaste, deja este campo vacío: entrarás y te pediremos configurarlo.
              Después de activarlo, este código será obligatorio en cada ingreso.
            </p>
          </div>

          <button
            type="submit"
            className="w-full py-4 rounded-xl bg-gradient-to-r from-[#7c3aed] to-[#0ea5c6] text-white font-bold transition-all mt-6"
          >
            Ingresar
          </button>
        </form>
      </div>
    </div>
  );
}