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

// src/components/DiputadosPorSeccionWidget.tsx
import { useState, useMemo, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';
import Select from 'react-select';
import { getSeccionesElectorales, getResultadosPorSeccion, getConfiguracionPublica } from '../apiService';
import type { MunicipioSimple, ResultadoTicker, ApiResponseResultadosPorSeccion } from '../types/types';
import { ImageWithFallback } from './ImageWithFallback';
import './TickerWidget.css';

const formatPercent = (num: number) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
const customSelectStyles = {
  control: (base: any) => ({ ...base, minWidth: '220px', border: '1px solid #ced4da' }),
  menu: (base: any) => ({ ...base, zIndex: 10 }),
};

const CATEGORIA_ID = 6; // ID para Diputados

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

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

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

  // Ahora usamos useQuery para obtener las secciones filtradas
  const { data: secciones = [], isLoading: isLoadingSecciones } = useQuery<MunicipioSimple[]>({
    queryKey: ['seccionesElectorales', CATEGORIA_ID], // Key única para la caché
    queryFn: () => getSeccionesElectorales(CATEGORIA_ID), // Pasamos el ID de la categoría
  });

  // useEffect para establecer la primera sección por defecto
  useEffect(() => {
    if (secciones.length > 0 && !selectedSeccion) {
      // Ordenamos aquí solo para la selección inicial
      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;
      };
      const seccionesOrdenadas = [...secciones].sort((a, b) => getOrden(a.nombre) - getOrden(b.nombre));
      
      setSelectedSeccion({ value: seccionesOrdenadas[0].id, label: seccionesOrdenadas[0].nombre });
    }
  }, [secciones, selectedSeccion]);

  const seccionOptions = useMemo(() =>
    secciones
      .map(s => ({ value: s.id, label: s.nombre }))
      .sort((a, b) => { // Mantenemos el orden en el dropdown
          const orden = new Map([
              ['Sección Capital', 0], ['Sección Primera', 1], ['Sección Segunda', 2], ['Sección Tercera', 3],
              ['Sección Cuarta', 4], ['Sección Quinta', 5], ['Sección Sexta', 6], ['Sección Séptima', 7]
          ]);
          return (orden.get(a.label) ?? 99) - (orden.get(b.label) ?? 99);
      }),
  [secciones]);

  const { data, isLoading: isLoadingResultados } = useQuery<ApiResponseResultadosPorSeccion>({
    queryKey: ['resultadosPorSeccion', selectedSeccion?.value, CATEGORIA_ID],
    queryFn: () => getResultadosPorSeccion(selectedSeccion!.value, CATEGORIA_ID),
    enabled: !!selectedSeccion,
  });

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

  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-diputados-${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>DIPUTADOS POR SECCIÓN</h3>
        <Select
          options={seccionOptions}
          value={selectedSeccion}
          onChange={(option) => setSelectedSeccion(option)}
          isLoading={isLoadingSecciones}
          placeholder="Seleccionar sección..."
          styles={customSelectStyles}
        />
      </div>
      <div className="ticker-results">
        {(isLoadingResultados && selectedSeccion) && <p>Cargando...</p>}
        {!selectedSeccion && !isLoadingSecciones && <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="/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>
  );
};