"use client";

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

function UploadINEContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  
  // Estado para el ID que puede venir de URL o LocalStorage
  const [militantId, setMilitantId] = useState<string | null>(null);

  const [files, setFiles] = useState<{ front: File | null; back: File | null }>({
    front: null,
    back: null,
  });
  const [previews, setPreviews] = useState<{ front: string; back: string }>({
    front: "",
    back: "",
  });
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState("");

  // Lógica de recuperación de ID al cargar la página
  useEffect(() => {
    const idFromUrl = searchParams.get("id");
    const idFromStorage = localStorage.getItem("last_militant_id");

    if (idFromUrl) {
      setMilitantId(idFromUrl);
    } else if (idFromStorage) {
      setMilitantId(idFromStorage);
    }
  }, [searchParams]);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>, side: "front" | "back") => {
    const file = e.target.files?.[0];
    if (file) {
      setFiles((prev) => ({ ...prev, [side]: file }));
      setPreviews((prev) => ({ ...prev, [side]: URL.createObjectURL(file) }));
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    // Si no hay ID en ningún lado, mostramos el error
    if (!militantId) {
      alert("Error: No se encontró el ID del militante. Por favor, intenta el registro nuevamente.");
      return;
    }

    setLoading(true);
    const formData = new FormData();
    formData.append("militant_id", militantId); 
    
    if (files.front) formData.append("front", files.front);
    if (files.back) formData.append("back", files.back);

    try {
      const res = await fetch("/api/militants/upload-ine", {
        method: "POST",
        body: formData,
      });

      if (!res.ok) {
        const errorData = await res.json();
        throw new Error(errorData.error || "Error al subir las imágenes");
      }

      setMessage("✅ Registro completado exitosamente.");
      
      // Limpiamos el storage después de un éxito
      localStorage.removeItem("last_militant_id");

      setTimeout(() => router.push("/admin/dashboard"), 1500);
    } catch (err: any) {
      setMessage(`❌ ${err.message}`);
    } finally {
      setLoading(false);
    }
  };

  const labelClass = "flex flex-col items-center justify-center w-full h-56 border-2 border-dashed border-gray-800 rounded-3xl bg-[#0a0a0a] hover:bg-[#121212] cursor-pointer transition-all overflow-hidden group";

  return (
    <div className="p-8 max-w-4xl mx-auto bg-black min-h-screen text-white text-center">
      <header className="mb-10">
        <h1 className="text-3xl font-black uppercase tracking-tighter">Paso Final: Identificación</h1>
        <p className="text-gray-500 mt-2 italic">
            {militantId ? `Cargando documentos para el militante #${militantId}` : "Carga de INE (Opcional)"}
        </p>
      </header>

      <form onSubmit={handleSubmit} className="space-y-8">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          {/* FRENTE */}
          <div className="space-y-3">
            <span className="text-[10px] font-black text-blue-500 uppercase tracking-widest">Vista Frontal</span>
            <label className={labelClass}>
              {previews.front ? (
                <img src={previews.front} className="w-full h-full object-cover" alt="Preview Front" />
              ) : (
                <div className="text-center p-4">
                  <div className="text-3xl mb-2 group-hover:scale-110 transition-transform">🪪</div>
                  <p className="text-xs text-gray-500">Haz clic para subir el frente</p>
                </div>
              )}
              <input type="file" accept="image/*" className="hidden" onChange={(e) => handleFileChange(e, "front")} />
            </label>
          </div>

          {/* VUELTA */}
          <div className="space-y-3">
            <span className="text-[10px] font-black text-blue-500 uppercase tracking-widest">Vista Posterior</span>
            <label className={labelClass}>
              {previews.back ? (
                <img src={previews.back} className="w-full h-full object-cover" alt="Preview Back" />
              ) : (
                <div className="text-center p-4">
                  <div className="text-3xl mb-2 group-hover:scale-110 transition-transform">🔄</div>
                  <p className="text-xs text-gray-500">Haz clic para subir el reverso</p>
                </div>
              )}
              <input type="file" accept="image/*" className="hidden" onChange={(e) => handleFileChange(e, "back")} />
            </label>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-10">
          <button 
            type="button" 
            onClick={() => {
                localStorage.removeItem("last_militant_id");
                router.push("/admin/dashboard");
            }}
            className="w-full p-5 rounded-2xl border border-gray-900 text-gray-500 font-bold hover:bg-gray-900 transition-all uppercase text-xs"
          >
            Omitir y terminar
          </button>
          <button 
            type="submit" 
            disabled={loading || !militantId}
            className="w-full p-5 rounded-2xl bg-white text-black font-black hover:bg-gray-200 transition-all shadow-xl uppercase text-xs disabled:bg-gray-700"
          >
            {loading ? "Subiendo..." : "Finalizar Registro"}
          </button>
        </div>
      </form>

      {message && <div className="mt-10 p-4 rounded-2xl bg-[#111] border border-gray-800 text-sm font-medium animate-pulse">{message}</div>}
    </div>
  );
}

export default function UploadINEPage() {
  return (
    <Suspense fallback={<div className="p-8 text-white">Cargando sistema de archivos...</div>}>
      <UploadINEContent />
    </Suspense>
  );
}