// src/features/legislativas/provinciales/DiputadosTickerWidget.tsx
import { useMemo } from 'react';
import { useQuery } from '@tanstack/react-query';
import { getResumenProvincial, getConfiguracionPublica, assetBaseUrl } from '../../../apiService';
import type { CategoriaResumen, ResultadoTicker } from '../../../types/types';
import { ImageWithFallback } from '../../../components/common/ImageWithFallback';
import './TickerWidget.css';

const formatPercent = (num: number) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
const CATEGORIA_ID = 6; // ID para Diputados

export const DiputadosTickerWidget = () => {
  const { data: categorias, isLoading, error } = useQuery<CategoriaResumen[]>({
    queryKey: ['resumenProvincial'],
    queryFn: () => getResumenProvincial(1),
    refetchInterval: 30000,
  });

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

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

  // Usamos useMemo para encontrar los datos específicos de Diputados
  const diputadosData = useMemo(() => {
    return categorias?.find(c => c.categoriaId === CATEGORIA_ID);
  }, [categorias]);

  if (isLoading) return <div className="ticker-card loading"><p>Cargando...</p></div>;
  if (error || !diputadosData) return <div className="ticker-card error"><p>Datos de Diputados no disponibles.</p></div>;

  // Lógica para "Otros"
  let displayResults: ResultadoTicker[] = diputadosData.resultados.map((r: any) => ({
    id: r.id ?? '',
    nombre: r.nombre ?? '',
    nombreCorto: r.nombreCorto ?? r.nombre ?? '',
    color: r.color ?? '#888888',
    logoUrl: r.logoUrl ?? null,
    votos: r.votos ?? 0,
    porcentaje: r.porcentaje ?? 0,
  }));
  if (diputadosData.resultados.length > cantidadAMostrar) {
    const topParties = diputadosData.resultados.slice(0, cantidadAMostrar - 1);
    const otherParties = diputadosData.resultados.slice(cantidadAMostrar - 1);
    const otrosPorcentaje = otherParties.reduce((sum, party) => sum + party.porcentaje, 0);
    const otrosEntry: ResultadoTicker = {
      id: `otros-diputados`,
      nombre: 'Otros',
      nombreCorto: 'Otros',
      color: '#888888',
      logoUrl: null,
      votos: 0,
      porcentaje: otrosPorcentaje,
    };
    displayResults = [
      ...topParties.map(party => ({
        id: party.agrupacionId ?? '',
        nombre: party.nombreCandidato ?? '',
        nombreCorto: party.nombreCortoAgrupacion ?? party.nombreCortoAgrupacion ?? '',
        color: party.color ?? '#888888',
        logoUrl: party.fotoUrl ?? null,
        votos: party.votos ?? 0,
        porcentaje: party.porcentaje ?? 0,
      })),
      otrosEntry
    ];
  } else {
    displayResults = diputadosData.resultados.slice(0, cantidadAMostrar).map((r: any) => ({
      id: r.id ?? '',
      nombre: r.nombre ?? '',
      nombreCorto: r.nombreCorto ?? r.nombre ?? '',
      color: r.color ?? '#888888',
      logoUrl: r.logoUrl ?? null,
      votos: r.votos ?? 0,
      porcentaje: r.porcentaje ?? 0,
    }));
  }

  return (
    <div className="ticker-card">
      <div className="ticker-header">
        <h3>RESUMEN DE {diputadosData.categoriaNombre}</h3>
        <div className="ticker-stats">
          <span>Mesas: <strong>{formatPercent(diputadosData.estadoRecuento?.mesasTotalizadasPorcentaje || 0)}</strong></span>
          <span>Part: <strong>{formatPercent(diputadosData.estadoRecuento?.participacionPorcentaje || 0)}</strong></span>
        </div>
      </div>
      <div className="ticker-results">
        {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>
  );
};