"use client";

import { useState, useEffect, Suspense } from "react";
import { useRouter, useSearchParams } from "next/navigation";
// AGREGADO: ArrowRight en el import para solucionar el ReferenceError
import { Camera, CheckCircle, XCircle, ArrowLeft, ArrowRight } 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");
    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();
    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 los archivos");

      setMessage("✅ Registro territorial completado.");
      localStorage.removeItem("last_militant_id");
      
      setTimeout(() => router.push("/brigadist/dashboard"), 1500);
    } catch (err: any) {
      setMessage(`❌ ${err.message}`);
    } finally {
      setLoading(false);
    }
  };

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

  return (
    <div className="min-h-screen bg-[#050505] text-white font-sans p-6">
      <div className="max-w-md mx-auto">
        
        <header className="mb-10 text-center">
          <div className="w-16 h-16 bg-blue-600/10 text-blue-500 rounded-full flex items-center justify-center mx-auto mb-4 border border-blue-500/20">
            <Camera size={28} />
          </div>
          <h1 className="text-3xl font-black uppercase italic tracking-tighter">Evidencia INE</h1>
          <p className="text-[9px] text-gray-500 mt-2 font-black uppercase tracking-[0.2em]">
              Militante ID: <span className="text-blue-500">#{militantId || "---"}</span>
          </p>
        </header>

        <form onSubmit={handleSubmit} className="space-y-8">
          <div className="space-y-6">
            <div className="space-y-2">
              <label className="text-[10px] font-black text-blue-500 uppercase tracking-widest ml-4 italic">Anverso (Frente)</label>
              <label className={labelClass}>
                {previews.front ? (
                  <img src={previews.front} className="w-full h-full object-cover" alt="Frontal" />
                ) : (
                  <div className="text-center">
                    <Camera size={24} className="mx-auto text-gray-700 mb-2" />
                    <p className="text-[10px] font-black uppercase text-gray-500">Subir Frente</p>
                  </div>
                )}
                <input type="file" accept="image/*" className="hidden" onChange={(e) => handleFileChange(e, "front")} />
              </label>
            </div>

            <div className="space-y-2">
              <label className="text-[10px] font-black text-blue-500 uppercase tracking-widest ml-4 italic">Reverso (Atrás)</label>
              <label className={labelClass}>
                {previews.back ? (
                  <img src={previews.back} className="w-full h-full object-cover" alt="Trasera" />
                ) : (
                  <div className="text-center">
                    <Camera size={24} className="mx-auto text-gray-700 mb-2" />
                    <p className="text-[10px] font-black uppercase text-gray-500">Subir Reverso</p>
                  </div>
                )}
                <input type="file" accept="image/*" className="hidden" onChange={(e) => handleFileChange(e, "back")} />
              </label>
            </div>
          </div>

          <div className="flex flex-col gap-4 pt-4">
            <button 
              type="submit" 
              disabled={loading || !militantId}
              className="w-full p-5 rounded-2xl bg-white text-black font-black uppercase text-xs italic tracking-widest shadow-xl active:scale-95 transition-all disabled:opacity-50"
            >
              {loading ? "Sincronizando..." : "Finalizar Expediente"}
            </button>
            <button 
              type="button" 
              onClick={() => router.push("/brigadist/dashboard")}
              className="w-full p-5 rounded-2xl border border-gray-900 text-gray-600 font-black uppercase text-[10px] tracking-widest hover:text-white transition-all flex items-center justify-center gap-2"
            >
              Omitir foto por ahora <ArrowRight size={14} />
            </button>
          </div>
        </form>

        {message && (
          <div className="mt-8 p-4 rounded-2xl bg-blue-600/10 border border-blue-500/20 text-blue-500 text-[10px] font-black uppercase text-center animate-pulse">
            {message}
          </div>
        )}
      </div>
    </div>
  );
}

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