"use client";

import { useRef, useState, useEffect } from "react";
import { useSearchParams } from "next/navigation";
import ReCAPTCHA from "react-google-recaptcha";
import { CheckCircle, AlertCircle, Send, School, UserCircle, Users, Key, MailCheck } from "lucide-react";
import { submitContact, checkEmail } from "@/app/actions/contacto";

const RECAPTCHA_SITE_KEY = "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI";

export default function ContactoForm({ colegios }: { colegios: any[] }) {
  const searchParams = useSearchParams();
  const recaptchaRef = useRef<ReCAPTCHA>(null);
  
  const [captchaToken, setCaptchaToken] = useState<string | null>(null);
  const [status, setStatus] = useState<"idle" | "success" | "error">("idle");
  const [loading, setLoading] = useState(false);
  
  const initialTipo = searchParams.get("tipo") || "GENERAL";
  const initialColegioId = searchParams.get("colegioId") || "";
  
  const [tipo, setTipo] = useState<string>(initialTipo);
  const [colegioId, setColegioId] = useState<string>(initialColegioId);

  const [email, setEmail] = useState("");
  const [emailExists, setEmailExists] = useState<boolean | null>(null);
  const [password, setPassword] = useState("");
  const [isCheckingEmail, setIsCheckingEmail] = useState(false);

  useEffect(() => {
    const t = searchParams.get("tipo");
    const c = searchParams.get("colegioId");
    if (t) setTipo(t);
    if (c) setColegioId(c);
  }, [searchParams]);

  useEffect(() => {
    const check = async () => {
      if (email.includes("@") && email.includes(".")) {
        setIsCheckingEmail(true);
        const exists = await checkEmail(email);
        setEmailExists(exists);
        if (!exists && !password) {
          setPassword(Math.random().toString(36).slice(-8));
        }
        setIsCheckingEmail(false);
      } else {
        setEmailExists(null);
      }
    };
    const timeout = setTimeout(check, 600);
    return () => clearTimeout(timeout);
  }, [email]);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setLoading(true);
    const formData = new FormData(e.currentTarget);

    const result = await submitContact(formData);

    if (result.success) {
      recaptchaRef.current?.reset();
      setCaptchaToken(null);
      setStatus("success");
      setLoading(false);
      (e.target as HTMLFormElement).reset();
      setTipo("GENERAL");
      setColegioId("");
      setEmail("");
      setPassword("");
      setEmailExists(null);
    } else {
      setStatus("error");
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label className="text-[10px] font-bold text-gray-400 uppercase ml-1 mb-1 block">Nombre Completo</label>
          <input
            required
            name="nombre"
            type="text"
            placeholder="Ej: Juan Pérez"
            className="w-full bg-gray-50 border border-gray-200 p-4 rounded-lg outline-none focus:ring-2 focus:ring-[#43a047] focus:border-transparent transition-all text-sm"
          />
        </div>
        <div>
          <label className="text-[10px] font-bold text-gray-400 uppercase ml-1 mb-1 block">Correo Electrónico</label>
          <input
            required
            name="email"
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="ejemplo@correo.com"
            className="w-full bg-gray-50 border border-gray-200 p-4 rounded-lg outline-none focus:ring-2 focus:ring-[#43a047] focus:border-transparent transition-all text-sm"
          />
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label className="text-[10px] font-bold text-gray-400 uppercase ml-1 mb-1 block">Teléfono de Contacto</label>
          <input
            name="telefono"
            type="tel"
            placeholder="Ej: 04121234567"
            className="w-full bg-gray-50 border border-gray-200 p-4 rounded-lg outline-none focus:ring-2 focus:ring-[#43a047] focus:border-transparent transition-all text-sm"
          />
        </div>
        <div>
          <label className="text-[10px] font-bold text-gray-400 uppercase ml-1 mb-1 block">Tipo de Solicitud</label>
          <select
            name="tipo"
            required
            value={tipo}
            onChange={(e) => setTipo(e.target.value)}
            className="w-full bg-gray-50 border border-gray-200 p-4 rounded-lg outline-none focus:ring-2 focus:ring-[#43a047] focus:border-transparent transition-all text-sm appearance-none cursor-pointer"
          >
            <option value="GENERAL">Consulta General</option>
            <option value="COLEGIO">Registro de Institución / Colegio</option>
            <option value="PROFESOR">Registro de Profesor</option>
            <option value="ESTUDIANTE">Registro de Alumno / Estudiante</option>
          </select>
        </div>
      </div>

      {(tipo === "PROFESOR" || tipo === "ESTUDIANTE") && (
        <div className="animate-in fade-in slide-in-from-top-2 duration-300">
          <label className="text-[10px] font-bold text-[#f57c00] uppercase ml-1 mb-1 block">Seleccionar Colegio de Interés</label>
          <select
            name="colegioId"
            required
            value={colegioId}
            onChange={(e) => setColegioId(e.target.value)}
            className="w-full bg-orange-50 border border-orange-200 p-4 rounded-lg outline-none focus:ring-2 focus:ring-[#f57c00] focus:border-transparent transition-all text-sm appearance-none cursor-pointer font-bold text-[#3e2723]"
          >
            <option value="">-- Selecciona una Institución --</option>
            {colegios.map((c) => (
              <option key={c.id} value={c.id}>{c.nombre}</option>
            ))}
          </select>
          <p className="text-[10px] text-gray-400 mt-1 ml-1">Tu solicitud será enviada al administrador y al colegio seleccionado.</p>
        </div>
      )}

      {/* --- SECCIÓN DE CREDENCIALES (USUARIO / CONTRASEÑA) --- */}
      {email && email.includes("@") && (
        <div className="bg-[#f0f9ff] border-2 border-[#bae6fd] p-4 rounded-xl animate-in fade-in slide-in-from-top-2 duration-300">
          <h3 className="text-[#0284c7] font-bold flex items-center gap-2 mb-3">
            <MailCheck className="w-5 h-5" /> Datos de Acceso
          </h3>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="text-[10px] font-bold text-[#0284c7] uppercase ml-1 mb-1 block">Usuario</label>
              <input
                type="text"
                readOnly
                value={email}
                className="w-full bg-white border border-[#bae6fd] text-gray-500 p-3 rounded-lg outline-none text-sm cursor-not-allowed"
              />
            </div>

            <div>
              {isCheckingEmail ? (
                <div className="flex items-center h-full text-sm text-[#0284c7] font-medium pt-4">
                  <span className="animate-spin w-4 h-4 border-2 border-[#0284c7] border-t-transparent rounded-full mr-2" />
                  Verificando...
                </div>
              ) : emailExists ? (
                <div className="flex items-center h-full text-sm text-[#ea580c] bg-orange-50 p-3 rounded-lg border border-orange-200 font-medium">
                  El usuario ya existe. Al registrarse, se enviará una nueva clave aleatoria a su correo.
                </div>
              ) : (
                <div>
                  <label className="text-[10px] font-bold text-[#0284c7] uppercase ml-1 mb-1 block">Contraseña Generada</label>
                  <div className="relative">
                    <input
                      name="password"
                      type="text"
                      required
                      value={password}
                      onChange={(e) => setPassword(e.target.value)}
                      className="w-full bg-white border border-[#bae6fd] focus:ring-2 focus:ring-[#0284c7] focus:border-transparent p-3 pl-10 rounded-lg outline-none text-sm transition-all"
                    />
                    <Key className="w-4 h-4 text-[#0284c7] absolute left-3 top-3.5" />
                  </div>
                  <p className="text-[10px] text-[#0284c7] mt-1 ml-1 opacity-80">Puedes editarla o dejar esta clave autogenerada.</p>
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      <div>
        <label className="text-[10px] font-bold text-gray-400 uppercase ml-1 mb-1 block">Mensaje o Detalles</label>
        <textarea
          required
          name="mensaje"
          placeholder="Cuéntanos más sobre tu interés..."
          rows={4}
          className="w-full bg-gray-50 border border-gray-200 p-4 rounded-lg outline-none focus:ring-2 focus:ring-[#43a047] focus:border-transparent transition-all resize-none text-sm"
        />
      </div>
      
      <div className="flex justify-center py-1">
        <ReCAPTCHA
          ref={recaptchaRef}
          sitekey={RECAPTCHA_SITE_KEY}
          onChange={(token: string | null) => setCaptchaToken(token)}
          onExpired={() => setCaptchaToken(null)}
          theme="light"
          hl="es"
        />
      </div>

      {status === "success" && (
        <div className="flex items-center gap-2 bg-green-50 text-green-700 border border-green-200 p-4 rounded-lg font-semibold text-sm">
          <CheckCircle className="w-5 h-5 shrink-0" />
          ¡Registro enviado! Te contactaremos a la brevedad.
        </div>
      )}
      {status === "error" && (
        <div className="flex items-center gap-2 bg-red-50 text-red-700 border border-red-200 p-4 rounded-lg font-semibold text-sm">
          <AlertCircle className="w-5 h-5 shrink-0" />
          Ocurrió un error. Inténtalo de nuevo.
        </div>
      )}

      <button
        type="submit"
        disabled={loading}
        className="w-full bg-[#43a047] hover:bg-[#2e7d32] disabled:opacity-50 disabled:cursor-not-allowed text-white font-bold py-4 rounded-lg transition-all shadow-lg shadow-green-200 transform hover:-translate-y-0.5 flex items-center justify-center gap-2"
      >
        {loading ? (
          <>
            <span className="animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full" />
            Procesando...
          </>
        ) : (
          <>
            <Send className="w-4 h-4" />
            Enviar Solicitud
          </>
        )}
      </button>

      <p className="text-center text-[10px] text-gray-400 mt-2 italic">
        * Al enviar, aceptas que tus datos sean manejados bajo nuestra política de privacidad reservada.
      </p>
    </form>
  );
}