"use client";

import { useState, useEffect, Suspense } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { Camera, CheckCircle, XCircle } from "lucide-react";

function UploadINEContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  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("");

  useEffect(() => {
    const idFromUrl = searchParams.get("id");
    const idFromStorage = localStorage.getItem("last_militant_id");
    setMilitantId(idFromUrl || 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();
    if (!militantId) return alert("ID no encontrado.");
    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) throw new Error("Error al subir");
      setMessage("✅ Registro completado exitosamente.");
      localStorage.removeItem("last_militant_id");
      setTimeout(() => router.push("/leader/dashboard"), 1500);
    } catch (err: any) { setMessage(`❌ ${err.message}`); } finally { setLoading(false); }
  };

  const labelClass = "flex flex-col items-center justify-center w-full h-64 border-2 border-dashed border-gray-800 rounded-[2.5rem] bg-[#0a0a0a] hover:bg-[#111] cursor-pointer transition-all overflow-hidden group relative";

  return (
    <div className="min-h-screen bg-[#050505] text-white p-6 lg:p-10 font-sans">
      <div className="max-w-4xl mx-auto">
        <header className="mb-12 text-center">
          <Camera size={32} className="mx-auto text-blue-500 mb-4" />
          <h1 className="text-4xl font-black uppercase italic tracking-tighter">Documentación JAMPA</h1>
          <p className="text-gray-500 mt-3 font-medium uppercase text-[10px] tracking-widest">
              ID Vinculado: #{militantId || "---"}
          </p>
        </header>
        <form onSubmit={handleSubmit} className="space-y-10">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="space-y-4">
              <label className={labelClass}>
                {previews.front ? <img src={previews.front} className="w-full h-full object-cover" /> : <div className="text-center"><Camera size={24} className="mx-auto mb-2 text-blue-500" /><p className="text-xs font-black uppercase">INE FRENTE</p></div>}
                <input type="file" accept="image/*" className="hidden" onChange={(e) => handleFileChange(e, "front")} />
              </label>
            </div>
            <div className="space-y-4">
              <label className={labelClass}>
                {previews.back ? <img src={previews.back} className="w-full h-full object-cover" /> : <div className="text-center"><Camera size={24} className="mx-auto mb-2 text-blue-500" /><p className="text-xs font-black uppercase">INE REVERSO</p></div>}
                <input type="file" accept="image/*" className="hidden" onChange={(e) => handleFileChange(e, "back")} />
              </label>
            </div>
          </div>
          <div className="flex flex-col md:flex-row gap-4">
            <button type="button" onClick={() => router.push("/leader/dashboard")} className="flex-1 p-5 rounded-2xl border border-gray-900 text-gray-500 font-black uppercase text-[10px]">Omitir <XCircle size={14} className="inline ml-1" /></button>
            <button type="submit" disabled={loading} className="flex-1 p-5 rounded-2xl bg-blue-600 text-white font-black uppercase text-[10px] shadow-xl">{loading ? "Subiendo..." : "Finalizar"}</button>
          </div>
        </form>
        {message && <div className="mt-8 text-center text-blue-500 text-[10px] font-black uppercase animate-pulse">{message}</div>}
      </div>
    </div>
  );
}

export default function UploadINEPage() {
  return <Suspense fallback={<div className="bg-black min-h-screen"></div>}><UploadINEContent /></Suspense>;
}