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

// src/components/ConcejalesWidget.tsx
import { useState, useEffect, useMemo } from 'react';
import { useQuery } from '@tanstack/react-query';
import { getSeccionesElectorales, getResultadosConcejales, getConfiguracionPublica } from '../apiService';
import type { MunicipioSimple, ResultadoTicker } from '../types/types';
import { ImageWithFallback } from './ImageWithFallback';
import './TickerWidget.css'; // Reutilizamos los estilos del ticker

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

export const ConcejalesWidget = () => {
  const [secciones, setSecciones] = useState<MunicipioSimple[]>([]);
  const [seccionActualId, setSeccionActualId] = useState<string>('');

  // Query para la configuración (para saber cuántos resultados mostrar)
  const { data: configData } = useQuery({
    queryKey: ['configuracionPublica'],
    queryFn: getConfiguracionPublica,
    staleTime: 0,
  });

  // Calculamos la cantidad a mostrar desde la configuración
  const cantidadAMostrar = useMemo(() => {
    return parseInt(configData?.TickerResultadosCantidad || '5', 10) + 1;
  }, [configData]);

  useEffect(() => {
    getSeccionesElectorales().then(seccionesData => {
      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);
        // Al estar los datos ya ordenados, el [0] será "Sección Capital"
        setSeccionActualId(seccionesData[0].id);
      }
    });
  }, []); // El array de dependencias vacío asegura que esto solo se ejecute una vez

  // Query para obtener los resultados de la sección seleccionada
  const { data: resultados, isLoading } = useQuery<ResultadoTicker[]>({
    queryKey: ['resultadosConcejales', seccionActualId],
    queryFn: () => getResultadosConcejales(seccionActualId),
    enabled: !!seccionActualId,
  });

  // --- INICIO DE LA LÓGICA DE PROCESAMIENTO "OTROS" ---
  let displayResults: ResultadoTicker[] = resultados || [];
  if (resultados && resultados.length > cantidadAMostrar) {
    const topParties = resultados.slice(0, cantidadAMostrar - 1);
    const otherParties = resultados.slice(cantidadAMostrar - 1);
    const otrosPorcentaje = otherParties.reduce((sum, party) => sum + party.votosPorcentaje, 0);

    const otrosEntry: ResultadoTicker = {
      id: `otros-concejales-${seccionActualId}`,
      nombre: 'Otros',
      nombreCorto: 'Otros',
      color: '#888888',
      logoUrl: null,
      votos: 0, // No es relevante para la visualización del porcentaje
      votosPorcentaje: otrosPorcentaje,
    };
    displayResults = [...topParties, otrosEntry];
  } else if (resultados) {
    displayResults = resultados.slice(0, cantidadAMostrar);
  }
  // --- FIN DE LA LÓGICA DE PROCESAMIENTO "OTROS" ---

  return (
    <div className="ticker-card" style={{ gridColumn: '1 / -1' }}>
      <div className="ticker-header">
        <h3>CONCEJALES POR SECCIÓN ELECTORAL</h3>
        <select value={seccionActualId} onChange={e => setSeccionActualId(e.target.value)} disabled={secciones.length === 0}>
          {secciones.map(s => <option key={s.id} value={s.id}>{s.nombre}</option>)}
        </select>
      </div>
      <div className="ticker-results">
        {isLoading ? <p>Cargando...</p> :
          displayResults.map(partido => (
            <div key={partido.id} className="ticker-party">
              <div className="party-logo">
                <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc="/default-avatar.png" alt={`Logo de ${partido.nombre}`} />
              </div>
              <div className="party-details">
                <div className="party-info">
                  <span className="party-name">{partido.nombreCorto || partido.nombre}</span>
                  <span className="party-percent">{formatPercent(partido.votosPorcentaje)}</span>
                </div>
                <div className="party-bar-background">
                  <div className="party-bar-foreground" style={{ width: `${partido.votosPorcentaje}%`, backgroundColor: partido.color || '#888' }}></div>
                </div>
              </div>
            </div>
          ))
        }
      </div>
    </div>
  );
};