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

// src/components/BancasWidget.tsx
import { useState, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';
import { ResponsiveBar } from '@nivo/bar';
import { getBancasPorSeccion, getSeccionesElectorales } from '../apiService';
import type { ProyeccionBancas, MunicipioSimple } from '../types/types';
import './BancasWidget.css';

const NIVO_COLORS = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"];

export const BancasWidget = () => {
    const [secciones, setSecciones] = useState<MunicipioSimple[]>([]);
    const [seccionActual, setSeccionActual] = useState<string>('');

    // useEffect para cargar la lista de secciones una sola vez (esto está bien)
    useEffect(() => {
        const fetchSecciones = async () => {
            try {
                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);
                    setSeccionActual(seccionesData[0].id);
                }
            } catch (err) {
                console.error("Error cargando secciones electorales:", err);
                // Opcional: manejar el error en la UI si la carga de secciones falla
            }
        };
        fetchSecciones();
    }, []);

    // --- CÓDIGO REFACTORIZADO ---
    // Eliminamos los useState para data, loading y error

    // useQuery ahora es la única fuente de verdad para los datos de bancas
    const { 
        data, 
        isLoading, 
        error 
    } = useQuery<ProyeccionBancas, Error>({
        queryKey: ['bancasPorSeccion', seccionActual],
        queryFn: () => getBancasPorSeccion(seccionActual),
        enabled: !!seccionActual,
        retry: (failureCount, error: any) => {
            if (error.response?.status === 404) return false;
            return failureCount < 3;
        },
    });

    const barData = data ? [...data.proyeccion].reverse() : [];

    const getErrorMessage = () => {
        if (error) {
            if ((error as any).response?.status === 404) {
                return "La proyección de bancas para esta sección aún no está disponible.";
            }
            return "No se pudo conectar para obtener los datos de bancas.";
        }
        return null;
    };

    const errorMessage = getErrorMessage();

    return (
        <div className="bancas-widget-container">
            <div className="bancas-header">
                <h4>Distribución de Bancas</h4>
                <select value={seccionActual} onChange={e => setSeccionActual(e.target.value)} disabled={secciones.length === 0}>
                    {secciones.map(s => <option key={s.id} value={s.id}>{s.nombre}</option>)}
                </select>
            </div>
            <div className="waffle-chart-container">
                {isLoading ? <p>Cargando...</p> : errorMessage ? <p>{errorMessage}</p> :
                <ResponsiveBar
                    data={barData}
                    keys={['bancas']}
                    indexBy="agrupacionNombre"
                    layout="horizontal"
                    margin={{ top: 10, right: 30, bottom: 25, left: 160 }}
                    padding={0.3}
                    valueScale={{ type: 'linear' }}
                    indexScale={{ type: 'band', round: true }}
                    colors={({ index }) => NIVO_COLORS[index % NIVO_COLORS.length]}
                    borderColor={{ from: 'color', modifiers: [['darker', 1.6]] }}
                    axisTop={null}
                    axisRight={null}
                    axisBottom={{
                        tickSize: 5,
                        tickPadding: 5,
                        tickRotation: 0,
                        legend: 'Cantidad de Bancas',
                        legendPosition: 'middle',
                        legendOffset: 20,
                        format: (value) => Math.floor(value) === value ? value : ''
                    }}
                    axisLeft={{
                        tickSize: 5,
                        tickPadding: 5,
                        tickRotation: 0,
                    }}
                    labelSkipWidth={12}
                    labelSkipHeight={12}
                    labelTextColor={{ from: 'color', modifiers: [['darker', 3]] }}
                    animate={true}
                    legends={[]}
                />}
            </div>
        </div>
    );
};