"use client";

import { useState, useEffect } from "react";
import dynamic from "next/dynamic";
import Link from "next/link";
import { 
  Zap, ChevronDown, ChevronUp, TrendingDown, LayoutDashboard, AlertCircle 
} from "lucide-react";

const HeatmapAdmin = dynamic(() => import("@/app/components/HeatmapAdmin"), { 
  ssr: false,
  loading: () => <div className="h-full w-full bg-[#0a0a0a] animate-pulse rounded-3xl flex items-center justify-center text-gray-500 font-black italic">CARGANDO...</div>
});

export default function PaginaEstrategia() {
  const [stats, setStats] = useState<any[]>([]);
  const [seccionesFaltantes, setSeccionesFaltantes] = useState<string[]>([]);
  const [geoData, setGeoData] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [seccionAbierta, setSeccionAbierta] = useState<number | null>(null);

  useEffect(() => {
    async function cargarDatosEstrategia() {
      try {
        // Solo llamamos a las rutas que SABEMOS que funcionan
        const [statsRes, geoRes] = await Promise.all([
          fetch("/api/admin/stats"),
          fetch("/maps/municipio8.json")
        ]);
        
        const statsData = await statsRes.json();
        const geoJson = await geoRes.json();

        if (statsRes.ok) {
          const datosOrdenados = (statsData.sectionsData || statsData || []).sort((a: any, b: any) => a.count - b.count);
          setStats(datosOrdenados);

          // LÓGICA DE EXCLUSIÓN USANDO EL GEOJSON (Sin depender de /api/strategy)
          // Sacamos todos los números de sección que existen en el mapa
          const todasLasSeccionesDelMapa = geoJson.features.map((f: any) => String(f.properties.seccion));
          
          // Sacamos los IDs de las secciones que ya tienen militantes
          const seccionesConAvance = new Set(datosOrdenados.map((s: any) => String(s.section)));
          
          // Filtramos: Las que están en el mapa pero NO tienen avance
          const faltantes = todasLasSeccionesDelMapa
            .filter((s: string) => !seccionesConAvance.has(s))
            .sort((a: string, b: string) => Number(a) - Number(b));

          setSeccionesFaltantes([...new Set(faltantes)] as string[]);
        }
        setGeoData(geoJson);
      } catch (err) {
        console.error("Error en la carga:", err);
      } finally {
        setLoading(false);
      }
    }
    cargarDatosEstrategia();
  }, []);

  return (
    <div className="min-h-screen bg-[#050505] text-white p-6 lg:p-10 font-sans">
      
      <header className="mb-10 flex flex-col gap-6 border-b border-gray-900 pb-8">
        <div className="flex justify-between items-center">
          <Link href="/admin/dashboard" className="flex items-center gap-2 bg-gray-900/50 hover:bg-cyan-600 hover:text-black transition-all px-4 py-2 rounded-full border border-gray-800 text-[10px] font-black uppercase italic">
            <LayoutDashboard size={14} /> Volver al Control Central
          </Link>
          <div className="text-[10px] font-black text-cyan-500 uppercase italic">
            {new Date().toLocaleDateString('es-MX', { day: 'numeric', month: 'long', year: 'numeric' })}
          </div>
        </div>
        <h1 className="text-4xl font-black uppercase italic tracking-tighter">Zapata: Análisis Territorial</h1>
      </header>

      {/* PANEL DE META DINÁMICO */}
      <div className="bg-purple-950/20 border border-purple-500/30 p-6 rounded-3xl mb-8">
         <h4 className="text-[10px] font-black uppercase text-purple-400 mb-2 tracking-[0.2em]">Sugerencia de Metas General</h4>
         <p className="text-2xl font-black italic uppercase">
            Zapata requiere captar en las secciones activas: <span className="text-red-500">{(stats.length * 150) - stats.reduce((a,b) => a + b.count, 0)}</span> Registros
         </p>
      </div>

      <div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
        
        <div className="flex flex-col gap-6">
          <div className="h-[550px] bg-[#0a0a0a] border border-gray-900 rounded-[2.5rem] p-2 overflow-hidden shadow-2xl">
             {geoData && <HeatmapAdmin geojson={geoData} stats={stats} seccionEnfocada={seccionAbierta} />}
          </div>

          {/* APARTADO DE SECCIONES QUE NO APARECEN EN EL LISTADO DERECHO */}
          <div className="bg-[#0a0a0a] border border-dashed border-red-900/30 p-6 rounded-3xl">
             <div className="flex items-center justify-between mb-4">
               <div className="flex items-center gap-2 text-red-500">
                 <AlertCircle size={18} />
                 <h3 className="text-xs font-black uppercase tracking-widest italic">Secciones sin registros (Excluidas)</h3>
               </div>
               <span className="text-[10px] font-black bg-red-500/20 text-red-500 px-2 py-1 rounded">
                 {seccionesFaltantes.length} PENDIENTES
               </span>
             </div>
             
             <div className="grid grid-cols-4 md:grid-cols-6 gap-2 max-h-[120px] overflow-y-auto pr-2 custom-scrollbar">
                {seccionesFaltantes.map((sec) => (
                  <div key={sec} className="bg-red-500/5 border border-red-900/20 p-2 rounded-lg text-center">
                    <p className="text-[10px] font-black text-red-400">{sec}</p>
                  </div>
                ))}
             </div>
          </div>
        </div>

        {/* LISTADO DERECHO CON AVANCE */}
        <div className="space-y-3">
          {stats.map((item) => (
            <div key={item.section} className={`bg-[#0a0a0a] border ${seccionAbierta === item.section ? 'border-purple-500' : 'border-gray-900'} rounded-2xl overflow-hidden`}>
              <button onClick={() => setSeccionAbierta(seccionAbierta === item.section ? null : item.section)} className="w-full p-5 flex items-center justify-between hover:bg-white/5">
                <div className="flex items-center gap-4">
                  <div className={`w-3 h-3 rounded-full ${item.count <= 20 ? 'bg-red-500 shadow-[0_0_10px_rgba(239,68,68,0.3)]' : 'bg-lime-500 shadow-[0_0_10px_rgba(132,204,22,0.3)]'}`}></div>
                  <div className="text-left">
                    <p className="text-[9px] font-black text-gray-500 uppercase italic">Sección</p>
                    <p className="text-xl font-black italic leading-none">{item.section}</p>
                  </div>
                </div>
                <div className="flex items-center gap-6">
                  <p className={`font-black italic ${item.count <= 20 ? 'text-red-500' : 'text-lime-500'}`}>{item.count} Reg.</p>
                  {seccionAbierta === item.section ? <ChevronUp size={20}/> : <ChevronDown size={20}/>}
                </div>
              </button>
              {seccionAbierta === item.section && (
                <div className="px-5 pb-5 pt-2 border-t border-gray-900 bg-purple-500/5 grid grid-cols-2 gap-4">
                  <div className="p-4 bg-black/40 rounded-xl border border-gray-800">
                    <p className="text-[9px] font-black text-gray-500 uppercase mb-1">Déficit</p>
                    <p className="text-xl font-black text-red-500">{150 - item.count}</p>
                  </div>
                  <div className="p-4 bg-black/40 rounded-xl border border-gray-800 flex flex-col justify-center">
                    <p className="text-[9px] font-black text-purple-400 uppercase">Estatus</p>
                    <p className="text-[10px] font-bold text-white uppercase italic">Movilización</p>
                  </div>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}