Elecciones-2025/Elecciones-Web/frontend/src/components/ResultadosTablaDetalladaWidget.tsx

import { useState, useMemo, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';
import Select from 'react-select';
import { getSeccionesElectorales, getResultadosTablaDetallada } from '../apiService';
import type { MunicipioSimple, ApiResponseTablaDetallada } from '../types/types';
import './ResultadosTablaSeccionWidget.css';

const customSelectStyles = {
  control: (base: any) => ({ ...base, minWidth: '200px', border: '1px solid #ced4da', boxShadow: 'none', '&:hover': { borderColor: '#86b7fe' } }),
  menu: (base: any) => ({ ...base, zIndex: 10 }),
};

const formatPercent = (porcentaje: number) => `${porcentaje.toFixed(2).replace('.', ',')}%`;

export const ResultadosTablaDetalladaWidget = () => {
  const [secciones, setSecciones] = useState<MunicipioSimple[]>([]);
  const [selectedSeccion, setSelectedSeccion] = useState<{ value: string; label: string } | null>(null);

  useEffect(() => {
    const fetchSecciones = async () => {
      const seccionesData = await getSeccionesElectorales();
      if (seccionesData && seccionesData.length > 0) {
        const orden = new Map([
          ['Capital', 0], ['Primera', 1], ['Segunda', 2], ['Tercera', 3],
          ['Cuarta', 4], ['Quinta', 5], ['Sexta', 6], ['Séptima', 7]
        ]);
        const getOrden = (nombre: string) => {
          const match = nombre.match(/Capital|Primera|Segunda|Tercera|Cuarta|Quinta|Sexta|Séptima/);
          return match ? orden.get(match[0]) ?? 99 : 99;
        };
        seccionesData.sort((a, b) => getOrden(a.nombre) - getOrden(b.nombre));
        setSecciones(seccionesData);
        if (!selectedSeccion) {
          setSelectedSeccion({ value: seccionesData[0].id, label: seccionesData[0].nombre });
        }
      }
    };
    fetchSecciones();
  }, [selectedSeccion]);

  const seccionOptions = useMemo(() => secciones.map(s => ({ value: s.id, label: s.nombre })), [secciones]);

  const { data: tablaData, isLoading } = useQuery<ApiResponseTablaDetallada>({
    queryKey: ['resultadosTablaDetallada', selectedSeccion?.value],
    queryFn: () => getResultadosTablaDetallada(selectedSeccion!.value),
    enabled: !!selectedSeccion,
  });

  return (
    <div className="tabla-resultados-widget">
      <div className="tabla-header">
        <h3>Resultados por Sección Electoral</h3>
        <Select
          options={seccionOptions}
          value={selectedSeccion}
          onChange={(option) => setSelectedSeccion(option)}
          isLoading={secciones.length === 0}
          styles={customSelectStyles}
          isSearchable={false}
        />
      </div>

      <div className="tabla-container">
        {isLoading ? <p>Cargando...</p> : !tablaData || tablaData.categorias.length === 0 ? <p>No hay datos disponibles.</p> : (
          <table>
            <thead>
              <tr>
                <th rowSpan={2} className="sticky-col municipio-header">Municipio</th>
                {tablaData.categorias.map(cat => (
                  <th key={cat.id} colSpan={tablaData.partidosPorCategoria[cat.id]?.length || 1} className="categoria-header">
                    {cat.nombre}
                  </th>
                ))}
              </tr>
              <tr>
                {tablaData.categorias.flatMap(cat =>
                  (tablaData.partidosPorCategoria[cat.id] || []).map(partido => (
                    <th key={`header-${cat.id}-${partido.id}`} className="partido-header">
                      <span>{partido.puesto}° {partido.nombre}</span>
                      <span className="porcentaje-total">{formatPercent(partido.porcentajeTotalSeccion)}</span>
                    </th>
                  ))
                )}
              </tr>
            </thead>
            <tbody>
              {tablaData.resultadosPorMunicipio.map(municipio => (
                <tr key={municipio.municipioId}>
                  <td className="sticky-col">{municipio.municipioNombre}</td>
                  {tablaData.categorias.flatMap(cat =>
                    (tablaData.partidosPorCategoria[cat.id] || []).map(partido => {
                      const porcentaje = municipio.celdas[cat.id]?.[partido.id];
                      return (
                        <td key={`${municipio.municipioId}-${cat.id}-${partido.id}`}>
                          {typeof porcentaje === 'number' ? formatPercent(porcentaje) : '-'}
                        </td>
                      );
                    })
                  )}
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
};