"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { signIn } from "next-auth/react";
import { LuUser, LuLock, LuShield, LuEye, LuEyeOff } from "react-icons/lu";

export default function InitialSetupPage() {
  const router = useRouter();
  const [formData, setFormData] = useState({
    name: "",
    username: "",
    password: "",
    confirmPassword: "",
  });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);

const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault();
  setError("");

  // Validaciones frontend
  if (!formData.username?.trim() || !formData.password) {
    setError("Usuario y contraseña son requeridos");
    return;
  }

  if (formData.username.trim().length < 3) {
    setError("El usuario debe tener al menos 3 caracteres");
    return;
  }

  if (formData.password.length < 6) {
    setError("La contraseña debe tener al menos 6 caracteres");
    return;
  }

  if (formData.password !== formData.confirmPassword) {
    setError("Las contraseñas no coinciden");
    return;
  }

  setLoading(true);

  try {
    console.log("📤 Enviando solicitud de registro...");

    const response = await fetch("/api/initial-register", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        name: formData.name.trim() || undefined,
        username: formData.username.trim(),
        password: formData.password,
      }),
    });

    console.log("📥 Status recibido:", response.status);
    console.log("📥 Content-Type:", response.headers.get("content-type"));

    // Verificar si la respuesta es JSON
    const contentType = response.headers.get("content-type");
    if (!contentType || !contentType.includes("application/json")) {
      // La respuesta no es JSON, obtener el texto plano
      const textResponse = await response.text();
      console.error("❌ Respuesta no es JSON:", textResponse);
      setError(
        "Error del servidor. Por favor verifica que la API esté corriendo correctamente."
      );
      setLoading(false);
      return;
    }

    const data = await response.json();
    console.log("📥 Datos recibidos:", data);

    if (!response.ok) {
      setError(data.message || "Error al crear el administrador");
      setLoading(false);
      return;
    }

    console.log("✅ Administrador creado, iniciando sesión...");

    // Login automático
    const signInResult = await signIn("credentials", {
      username: formData.username.trim(),
      password: formData.password,
      redirect: false,
    });

    console.log("🔐 Resultado del login:", signInResult);

    if (signInResult?.error) {
      setError(
        "Cuenta creada exitosamente, pero hubo un error al iniciar sesión. Por favor, inicie sesión manualmente."
      );
      setLoading(false);
      setTimeout(() => {
        router.push("/login");
      }, 3000);
      return;
    }

    console.log("✅ Login exitoso, redirigiendo...");
    router.push("/dashboard");
    router.refresh();
  } catch (error) {
    console.error("❌ Error en handleSubmit:", error);
    setError(
      `Error de conexión: ${
        error instanceof Error ? error.message : "Error desconocido"
      }`
    );
    setLoading(false);
  }
};

  return (
    <div className="min-h-screen bg-background-subtle flex items-center justify-center p-4">
      <div className="max-w-md w-full">
        {/* Header */}
        <div className="text-center mb-8">
          <div className="inline-flex items-center justify-center w-16 h-16 bg-primary rounded-full mb-4 shadow-lg shadow-primary/20">
            <LuShield className="h-8 w-8 text-primary-foreground" />
          </div>
          <h1 className="text-3xl font-bold text-text mb-2">
            Configuración Inicial
          </h1>
          <p className="text-text-muted">
            Crea la cuenta de administrador para comenzar
          </p>
        </div>

        {/* Card */}
        <div className="bg-background rounded-2xl shadow-xl shadow-black/5 p-8 border border-border-subtle">
          <div className="bg-info-background border border-info-border rounded-lg p-4 mb-6">
            <div className="flex items-start gap-3">
              <LuShield className="h-5 w-5 text-info mt-0.5 flex-shrink-0" />
              <div className="text-sm text-info-foreground">
                <p className="font-semibold mb-1">
                  Primera configuración del sistema
                </p>
                <p>
                  Esta cuenta tendrá privilegios de administrador y podrá
                  gestionar todos los aspectos del sistema.
                </p>
              </div>
            </div>
          </div>

          <form onSubmit={handleSubmit} className="space-y-5">
            {error && (
              <div className="bg-destructive-background border border-destructive-border text-destructive-foreground px-4 py-3 rounded-lg text-sm">
                {error}
              </div>
            )}

            <div>
              <label className="block text-sm font-medium text-text mb-2">
                Nombre completo (opcional)
              </label>
              <div className="relative">
                <LuUser className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-text-subtle" />
                <input
                  type="text"
                  value={formData.name}
                  onChange={(e) =>
                    setFormData({ ...formData, name: e.target.value })
                  }
                  className="w-full pl-10 pr-4 py-3 border border-border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-background text-text placeholder-text-subtle transition-all outline-none"
                  placeholder="Juan Pérez"
                />
              </div>
            </div>

            <div>
              <label className="block text-sm font-medium text-text mb-2">
                Usuario <span className="text-destructive">*</span>
              </label>
              <div className="relative">
                <LuUser className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-text-subtle" />
                <input
                  type="text"
                  value={formData.username}
                  onChange={(e) =>
                    setFormData({ ...formData, username: e.target.value })
                  }
                  className="w-full pl-10 pr-4 py-3 border border-border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-background text-text placeholder-text-subtle transition-all outline-none"
                  placeholder="admin"
                  required
                  minLength={3}
                />
              </div>
              <p className="text-xs text-text-muted mt-1">Mínimo 3 caracteres</p>
            </div>

            <div>
              <label className="block text-sm font-medium text-text mb-2">
                Contraseña <span className="text-destructive">*</span>
              </label>
              <div className="relative">
                <LuLock className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-text-subtle" />
                <input
                  type={showPassword ? "text" : "password"}
                  value={formData.password}
                  onChange={(e) =>
                    setFormData({ ...formData, password: e.target.value })
                  }
                  className="w-full pl-10 pr-12 py-3 border border-border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-background text-text placeholder-text-subtle transition-all outline-none"
                  placeholder="••••••••"
                  required
                  minLength={6}
                />
                <button
                  type="button"
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute right-3 top-1/2 -translate-y-1/2 text-text-subtle hover:text-text transition-colors"
                >
                  {showPassword ? (
                    <LuEyeOff className="h-5 w-5" />
                  ) : (
                    <LuEye className="h-5 w-5" />
                  )}
                </button>
              </div>
              <p className="text-xs text-text-muted mt-1">Mínimo 6 caracteres</p>
            </div>

            <div>
              <label className="block text-sm font-medium text-text mb-2">
                Confirmar contraseña <span className="text-destructive">*</span>
              </label>
              <div className="relative">
                <LuLock className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-text-subtle" />
                <input
                  type={showConfirmPassword ? "text" : "password"}
                  value={formData.confirmPassword}
                  onChange={(e) =>
                    setFormData({
                      ...formData,
                      confirmPassword: e.target.value,
                    })
                  }
                  className="w-full pl-10 pr-12 py-3 border border-border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary bg-background text-text placeholder-text-subtle transition-all outline-none"
                  placeholder="••••••••"
                  required
                  minLength={6}
                />
                <button
                  type="button"
                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                  className="absolute right-3 top-1/2 -translate-y-1/2 text-text-subtle hover:text-text transition-colors"
                >
                  {showConfirmPassword ? (
                    <LuEyeOff className="h-5 w-5" />
                  ) : (
                    <LuEye className="h-5 w-5" />
                  )}
                </button>
              </div>
            </div>

            <button
              type="submit"
              disabled={loading}
              className="w-full py-3 px-4 bg-primary text-primary-foreground font-semibold rounded-lg hover:bg-primary-hover focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
            >
              {loading ? (
                <div className="flex items-center justify-center gap-2">
                  <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-primary-foreground"></div>
                  Creando administrador...
                </div>
              ) : (
                "Crear cuenta de administrador"
              )}
            </button>
          </form>

          <div className="mt-6 pt-6 border-t border-border-subtle">
            <p className="text-xs text-text-muted text-center">
              Esta configuración solo se mostrará cuando no existan usuarios en
              el sistema.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}