"use client";

import { useState, useEffect } from "react";
import { 
  ChevronRight, 
  ChevronDown, 
  ShieldCheck, 
  HardHat, 
  User, 
  Users, 
  MapPin, 
  ArrowLeft, 
  Search,
  Globe,
  UserCheck,
  Menu,
  X
} from "lucide-react";
import Link from "next/link";

interface StructureNode {
  id: number;
  full_name: string;
  role: string;
  neighborhood: string;
  brigadists: any[];
  directMilitants: any[];
}

export default function StructurePage() {
  const [data, setData] = useState<StructureNode[]>([]);
  const [loading, setLoading] = useState(true);
  const [scope, setScope] = useState<"all" | "mine">("all");
  const [searchTerm, setSearchTerm] = useState("");
  const [expanded, setExpanded] = useState<string[]>([]);
  const [isFiltersOpen, setIsFiltersOpen] = useState(false);
  
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 5;

  useEffect(() => {
    async function loadStructure() {
      setLoading(true);
      try {
        const res = await fetch(`/api/militants/structure?scope=${scope}`);
        const d = await res.json();
        setData(Array.isArray(d) ? d : []);
      } catch (err) {
        console.error("Error cargando estructura:", err);
      } finally {
        setLoading(false);
      }
    }
    loadStructure();
  }, [scope]);

  const toggle = (id: string) => {
    setExpanded(prev => 
      prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]
    );
  };

  const filteredLeaders = data.filter(leader => 
    leader.full_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
    leader.neighborhood?.toLowerCase().includes(searchTerm.toLowerCase())
  );

  const totalPages = Math.ceil(filteredLeaders.length / itemsPerPage);
  const paginatedLeaders = filteredLeaders.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);

  return (
    <div className="min-h-screen bg-[#050505] text-white p-4 md:p-10 font-sans overflow-x-hidden">
      
      {/* --- HEADER ADAPTADO --- */}
      <header className="mb-8 md:mb-12 flex flex-col lg:flex-row lg:items-end justify-between gap-6">
        <div className="space-y-4 w-full">
          <div className="flex items-center gap-2 text-blue-500">
            <Link href="/admin/dashboard" className="hover:bg-blue-500/10 p-2 rounded-lg transition-all">
              <ArrowLeft size={18} />
            </Link>
            <span className="text-[10px] font-black uppercase tracking-widest text-gray-500">Regresar</span>
          </div>
          
          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
            <div>
              <h1 className="text-2xl md:text-4xl font-black uppercase tracking-tighter italic text-white leading-tight">Estructura Piramidal</h1>
              <p className="text-gray-500 text-xs md:text-sm font-medium">Contabilidad de fuerza territorial por célula</p>
            </div>
            <button 
              onClick={() => setIsFiltersOpen(!isFiltersOpen)}
              className="lg:hidden p-3 bg-[#0a0a0a] border border-gray-900 rounded-xl text-blue-500 flex items-center justify-center gap-2 text-[10px] font-black uppercase"
            >
              {isFiltersOpen ? <X size={16}/> : <Menu size={16}/>} Filtros
            </button>
          </div>

          {/* SELECTOR DE ALCANCE */}
          <div className={`${isFiltersOpen ? 'flex' : 'hidden'} lg:flex bg-[#0a0a0a] p-1 rounded-2xl border border-gray-900 w-full sm:w-fit shadow-2xl animate-in slide-in-from-top-2`}>
            <button 
              onClick={() => { setScope("all"); setIsFiltersOpen(false); }}
              className={`flex-1 sm:flex-none flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl text-[10px] font-black uppercase transition-all duration-300 ${scope === 'all' ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/40' : 'text-gray-500 hover:text-white'}`}
            >
              <Globe size={14} /> Global
            </button>
            <button 
              onClick={() => { setScope("mine"); setIsFiltersOpen(false); }}
              className={`flex-1 sm:flex-none flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl text-[10px] font-black uppercase transition-all duration-300 ${scope === 'mine' ? 'bg-blue-600 text-white shadow-lg shadow-blue-900/40' : 'text-gray-500 hover:text-white'}`}
            >
              <UserCheck size={14} /> Mis Registros
            </button>
          </div>
        </div>

        <div className="relative group w-full lg:w-96">
          <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-600 group-focus-within:text-blue-500 transition-colors" size={18} />
          <input 
            type="text" 
            placeholder="Buscar líder o colonia..." 
            value={searchTerm}
            onChange={(e) => {setSearchTerm(e.target.value); setCurrentPage(1);}}
            className="bg-[#0a0a0a] border border-gray-900 rounded-2xl py-4 pl-12 pr-6 text-sm focus:border-blue-500 outline-none w-full transition-all shadow-2xl"
          />
        </div>
      </header>

      {/* --- LISTADO ADAPTADO --- */}
      <div className="max-w-5xl mx-auto space-y-6 mb-12">
        {loading ? (
          <div className="p-20 text-center animate-pulse text-[10px] font-black uppercase text-gray-600 tracking-[0.3em]">
            Desplegando red territorial...
          </div>
        ) : paginatedLeaders.length > 0 ? paginatedLeaders.map((leader) => {
          const totalMilitantesLider = leader.brigadists.reduce((acc, b) => acc + b.militants.length, 0) + (leader.directMilitants?.length || 0);

          return (
            <div key={leader.id} className="bg-[#0a0a0a] border border-gray-900 rounded-3xl md:rounded-[2.5rem] overflow-hidden shadow-2xl transition-all hover:border-blue-500/20">
              
              {/* LÍDER */}
              <div 
                onClick={() => toggle(`l-${leader.id}`)}
                className="p-5 md:p-8 flex flex-col sm:flex-row sm:items-center justify-between cursor-pointer hover:bg-blue-600/[0.03] transition-all gap-4"
              >
                <div className="flex items-center gap-4 md:gap-6">
                  <div className="w-12 h-12 md:w-16 md:h-16 bg-blue-500/10 text-blue-500 rounded-2xl md:rounded-[1.3rem] flex items-center justify-center border border-blue-500/20 shrink-0">
                    <ShieldCheck size={28} className="md:w-8 md:h-8" />
                  </div>
                  <div className="min-w-0">
                    <h3 className="font-black uppercase text-base md:text-lg tracking-tight text-white truncate">{leader.full_name}</h3>
                    <div className="flex flex-wrap items-center gap-2 mt-2">
                      <span className="bg-blue-500/10 text-blue-400 border border-blue-500/20 px-2.5 py-1 rounded-full text-[8px] font-black uppercase">
                        Líder
                      </span>
                      <span className="bg-white/5 text-gray-400 border border-white/10 px-2.5 py-1 rounded-full text-[8px] font-black uppercase flex items-center gap-1">
                        <Users size={10}/> {totalMilitantesLider}
                      </span>
                      <span className="text-[9px] text-gray-600 font-bold uppercase flex items-center gap-1.5 ml-1">
                        <MapPin size={10} className="text-blue-500/50"/> <span className="truncate max-w-[100px]">{leader.neighborhood || "S/C"}</span>
                      </span>
                    </div>
                  </div>
                </div>
                <div className="bg-[#111] p-3 rounded-xl md:rounded-2xl border border-gray-800 text-gray-700 self-end sm:self-center">
                  {expanded.includes(`l-${leader.id}`) ? <ChevronDown size={20} className="text-blue-500 md:w-6 md:h-6"/> : <ChevronRight size={20} className="md:w-6 md:h-6"/>}
                </div>
              </div>

              {/* CONTENIDO DEL LÍDER */}
              {expanded.includes(`l-${leader.id}`) && (
                <div className="px-4 md:px-8 pb-6 md:pb-8 space-y-4 bg-[#0d0d0d]/40 border-t border-gray-900/50 pt-6 md:pt-8 animate-in slide-in-from-top-4 duration-500">
                  
                  {leader.brigadists.map((brig: any) => (
                    <div key={brig.id} className="bg-[#111] border border-gray-800 rounded-2xl md:rounded-[1.8rem] overflow-hidden shadow-sm">
                      <div 
                        onClick={(e) => { e.stopPropagation(); toggle(`b-${brig.id}`); }}
                        className="p-4 md:p-5 flex items-center justify-between cursor-pointer hover:bg-purple-600/[0.05] transition-all"
                      >
                        <div className="flex items-center gap-3 md:gap-4">
                          <div className="p-2.5 bg-purple-500/10 rounded-xl border border-purple-500/10 text-purple-500 shrink-0">
                            <HardHat size={18} />
                          </div>
                          <div className="min-w-0">
                            <span className="text-xs md:text-[13px] font-black uppercase tracking-wider text-purple-400 truncate block">{brig.full_name}</span>
                            <div className="mt-1 flex gap-2">
                              <span className="bg-purple-500/10 text-purple-400 border border-purple-500/20 px-2 py-0.5 rounded-full text-[7px] font-black uppercase">
                                Brigadista
                              </span>
                              <span className="bg-white/5 text-purple-300 border border-white/5 px-2 py-0.5 rounded-full text-[7px] font-black uppercase">
                                {brig.militants.length} Personal
                              </span>
                            </div>
                          </div>
                        </div>
                        {expanded.includes(`b-${brig.id}`) ? <ChevronDown size={16} className="text-purple-500"/> : <ChevronRight size={16} className="text-gray-700"/>}
                      </div>

                      {/* MILITANTES */}
                      {expanded.includes(`b-${brig.id}`) && (
                        <div className="p-3 md:p-5 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 bg-[#080808] border-t border-gray-900/50">
                          {brig.militants.map((m: any) => (
                            <div key={m.id} className="flex items-center justify-between p-3.5 md:p-4 bg-[#0d0d0d] rounded-xl md:rounded-2xl border border-gray-800/40 group hover:border-blue-500/30 transition-all">
                              <div className="flex items-center gap-3 min-w-0">
                                <User size={14} className="text-gray-700 group-hover:text-blue-500 transition-colors shrink-0" />
                                <span className="text-[10px] md:text-[11px] font-bold text-gray-400 uppercase group-hover:text-white transition-colors truncate">
                                  {m.first_name} {m.last_name_paternal}
                                </span>
                              </div>
                              <span className="text-[8px] md:text-[9px] font-black text-gray-700 bg-white/5 px-1.5 py-0.5 rounded md:rounded-lg uppercase shrink-0 ml-2">S-{m.section_number}</span>
                            </div>
                          ))}
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </div>
          );
        }) : (
          <div className="p-16 md:p-32 text-center bg-[#0a0a0a] border border-dashed border-gray-900 rounded-3xl md:rounded-[3rem]">
            <Users size={48} className="mx-auto text-gray-900 mb-6 md:w-16 md:h-16" />
            <p className="text-gray-700 font-black uppercase text-xs md:text-sm tracking-widest italic text-center">Sin registros en esta vista</p>
          </div>
        )}
      </div>

      {/* --- PAGINACIÓN ADAPTADA --- */}
      <footer className="max-w-5xl mx-auto p-6 md:p-8 border-t border-gray-900 flex flex-col md:flex-row justify-between items-center bg-[#0a0a0a] rounded-3xl md:rounded-[2.5rem] shadow-2xl gap-6">
        <div className="flex flex-col text-center md:text-left">
          <p className="text-[10px] font-black text-gray-600 uppercase tracking-[0.2em]">
            Página {currentPage} de {totalPages || 1}
          </p>
          <p className="text-[9px] font-bold text-blue-900 uppercase">
            Sistema de Inteligencia Territorial ReMi
          </p>
        </div>
        
        <div className="flex gap-3 w-full md:w-fit">
          <button 
            disabled={currentPage === 1}
            onClick={() => { setCurrentPage(prev => prev - 1); window.scrollTo({top: 0, behavior: 'smooth'}); }}
            className="flex-1 md:flex-none px-6 md:px-8 py-3 bg-[#050505] border border-gray-800 rounded-xl md:rounded-2xl text-[10px] font-black uppercase hover:border-blue-500 hover:text-blue-500 disabled:opacity-20 transition-all tracking-widest shadow-xl"
          >
            Anterior
          </button>
          <button 
            disabled={currentPage >= totalPages}
            onClick={() => { setCurrentPage(prev => prev + 1); window.scrollTo({top: 0, behavior: 'smooth'}); }}
            className="flex-1 md:flex-none px-6 md:px-8 py-3 bg-[#050505] border border-gray-800 rounded-xl md:rounded-2xl text-[10px] font-black uppercase hover:border-blue-500 hover:text-blue-500 disabled:opacity-20 transition-all tracking-widest shadow-xl"
          >
            Siguiente
          </button>
        </div>
      </footer>
    </div>
  );
}