Elecciones-2025/Elecciones-Web/frontend/src/features/legislativas/provinciales/ConcejalesPorSeccionWidget.tsx

// src/features/legislativas/provinciales/ConcejalesPorSeccionWidget.tsx
import { useState, useMemo, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';
import Select from 'react-select';
import { getSeccionesElectorales, getResultadosPorSeccion, getConfiguracionPublica, assetBaseUrl } from '../../../apiService';
import type { MunicipioSimple, ResultadoTicker, ApiResponseResultadosPorSeccion } from '../../../types/types';
import { ImageWithFallback } from '../../../components/common/ImageWithFallback';
import './TickerWidget.css'; // Reutilizamos los estilos del ticker

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

// Estilos personalizados para que el selector se vea bien
const customSelectStyles = {
  control: (base: any) => ({ ...base, minWidth: '220px', border: '1px solid #ced4da' }),
  menu: (base: any) => ({ ...base, zIndex: 100 }), // Para que el menú se superponga
};

const CATEGORIA_ID = 7; // ID para Concejales

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

  const { data: configData } = useQuery({
    queryKey: ['configuracionPublica'],
    queryFn: getConfiguracionPublica,
    staleTime: 0,
  });

  const cantidadAMostrar = parseInt(configData?.TickerResultadosCantidad || '5', 10);

  // useEffect para obtener la lista de secciones una sola vez
  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);
        // Establecemos la primera sección de la lista ordenada como la por defecto
        if (!selectedSeccion) {
            setSelectedSeccion({ value: seccionesData[0].id, label: seccionesData[0].nombre });
        }
      }
    });
  }, [selectedSeccion]); // Dependencia para asegurar que no se resetee la selección del usuario

  // Transformamos los datos para react-select
  const seccionOptions = useMemo(() =>
    secciones.map(s => ({ value: s.id, label: s.nombre })),
  [secciones]);

  // Query para obtener los resultados de la sección seleccionada
  const { data, isLoading: isLoadingResultados } = useQuery<ApiResponseResultadosPorSeccion>({
    queryKey: ['resultadosPorSeccion', selectedSeccion?.value, CATEGORIA_ID],
    queryFn: () => getResultadosPorSeccion(1, selectedSeccion!.value, CATEGORIA_ID),
    enabled: !!selectedSeccion,
  });

  const resultados = data?.resultados || [];

  // Lógica para "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.porcentaje || 0), 0);
    const otrosEntry: ResultadoTicker = {
      id: `otros-concejales-${selectedSeccion?.value}`,
      nombre: 'Otros',
      nombreCorto: 'Otros',
      color: '#888888',
      logoUrl: null,
      votos: 0,
      porcentaje: otrosPorcentaje,
    };
    displayResults = [...topParties, otrosEntry];
  } else if (resultados) {
    displayResults = resultados.slice(0, cantidadAMostrar);
  }

  return (
    <div className="ticker-card">
      <div className="ticker-header">
        <h3>CONCEJALES POR SECCIÓN</h3>
        <Select
          options={seccionOptions}
          value={selectedSeccion}
          onChange={(option) => setSelectedSeccion(option)}
          isLoading={secciones.length === 0}
          placeholder="Seleccionar sección..."
          styles={customSelectStyles}
        />
      </div>
      <div className="ticker-results">
        {(isLoadingResultados && selectedSeccion) && <p>Cargando...</p>}
        {!selectedSeccion && <p style={{textAlign: 'center', color: '#666'}}>Seleccione una sección.</p>}
        {displayResults.map(partido => (
          <div key={partido.id} className="ticker-party">
            <div className="party-logo">
              <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/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.porcentaje)}</span>
              </div>
              <div className="party-bar-background">
                <div className="party-bar-foreground" style={{ width: `${partido.porcentaje}%`, backgroundColor: partido.color || '#888' }}></div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};