// src/features/legislativas/provinciales/DipSenTickerWidget.tsx
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';
import { useMemo } from 'react';

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

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

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

  const cantidadAMostrar = useMemo(() => {
    return parseInt(configData?.TickerResultadosCantidad || '5', 10);
  }, [configData]);

  if (isLoading) return <div className="ticker-wrapper loading">Cargando resumen...</div>;
  if (error || !categorias) return <div className="ticker-wrapper error">No hay datos disponibles.</div>;

  const categoriasFiltradas = categorias.filter(c => c.categoriaId !== 7);

  return (
    <div className="ticker-wrapper">
      {categoriasFiltradas.map(categoria => {

        let displayResults: ResultadoTicker[] = categoria.resultados.map((r: any) => ({
          id: r.id ?? r.candidatoId ?? '',
          nombre: r.nombre ?? r.candidatoNombre ?? '',
          nombreCorto: r.nombreCorto ?? r.candidatoNombreCorto ?? r.nombre ?? '',
          color: r.color ?? '#888888',
          logoUrl: r.logoUrl ?? null,
          votos: r.votos ?? 0,
          porcentaje: r.porcentaje ?? 0,
        }));

        if (categoria.resultados.length > cantidadAMostrar) {
          const topParties = categoria.resultados.slice(0, cantidadAMostrar - 1).map((r: any) => ({
            id: r.id ?? r.candidatoId ?? '',
            nombre: r.nombre ?? r.candidatoNombre ?? '',
            nombreCorto: r.nombreCorto ?? r.candidatoNombreCorto ?? r.nombre ?? '',
            color: r.color ?? '#888888',
            logoUrl: r.logoUrl ?? null,
            votos: r.votos ?? 0,
            porcentaje: r.porcentaje ?? 0,
          }));
          const otherParties = categoria.resultados.slice(cantidadAMostrar - 1);
          const otrosPorcentaje = otherParties.reduce((sum, party) => sum + party.porcentaje, 0);

          const otrosEntry: ResultadoTicker = {
            id: `otros-${categoria.categoriaId}`,
            nombre: 'Otros',
            nombreCorto: 'Otros',
            color: '#888888',
            logoUrl: null,
            votos: 0,
            porcentaje: otrosPorcentaje,
          };

          displayResults = [...topParties, otrosEntry];
        } else {
          displayResults = categoria.resultados.slice(0, cantidadAMostrar).map((r: any) => ({
            id: r.id ?? r.candidatoId ?? '',
            nombre: r.nombre ?? r.candidatoNombre ?? '',
            nombreCorto: r.nombreCorto ?? r.candidatoNombreCorto ?? r.nombre ?? '',
            color: r.color ?? '#888888',
            logoUrl: r.logoUrl ?? null,
            votos: r.votos ?? 0,
            porcentaje: r.porcentaje ?? 0,
          }));
        }

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