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

// src/components/BancasWidget.tsx
import { useState, useEffect } from 'react';
// Se cambia la importación: de ResponsiveWaffle a ResponsiveBar
import { ResponsiveBar } from '@nivo/bar';
import { getBancasPorSeccion, getSeccionesElectorales } from '../apiService';
import type { ProyeccionBancas, MunicipioSimple } from '../types/types';
import './BancasWidget.css';

// La paleta de colores se mantiene para consistencia visual
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>('');
    const [data, setData] = useState<ProyeccionBancas | null>(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);

    // useEffect para cargar la lista de secciones una sola vez
    useEffect(() => {
        const fetchSecciones = async () => {
            try {
                const seccionesData = await getSeccionesElectorales();
                if (seccionesData && seccionesData.length > 0) {
                    
                    // --- INICIO DE LA LÓGICA DE ORDENAMIENTO ---
                    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));
                    // --- FIN DE LA LÓGICA DE ORDENAMIENTO ---

                    setSecciones(seccionesData);
                    setSeccionActual(seccionesData[0].id);
                } else {
                    setError("No se encontraron secciones electorales.");
                }
            } catch (err) {
                console.error("Error cargando secciones electorales:", err);
                setError("No se pudo cargar la lista de secciones.");
            }
        };
        fetchSecciones();
    }, []);

    // useEffect para cargar los datos de bancas cuando cambia la sección
    useEffect(() => {
        if (!seccionActual) return;

        const fetchData = async () => {
            setLoading(true);
            setError(null);
            try {
                const result = await getBancasPorSeccion(seccionActual);
                setData(result);
            } catch (err) {
                console.error(`Error cargando datos de bancas para sección ${seccionActual}:`, err);
                setData(null);
                setError("No hay datos de bancas disponibles para esta sección.");
            } finally {
                setLoading(false);
            }
        };
        fetchData();
    }, [seccionActual]);

    // Se preparan los datos para el gráfico de barras.
    // Se invierte el array para que el partido con más bancas aparezca arriba.
    const barData = data ? [...data.proyeccion].reverse() : [];

    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">
                {loading ? <p>Cargando...</p> : error ? <p>{error}</p> :
                // --- SE REEMPLAZA EL GRÁFICO WAFFLE POR EL GRÁFICO DE BARRAS ---
                <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,
                        // Asegura que los ticks del eje sean números enteros
                        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}
                    // Se elimina la leyenda, ya que las etiquetas en el eje son suficientes
                    legends={[]}
                />}
            </div>
        </div>
    );
};