// src/features/legislativas/nacionales/components/PanelResultados.tsx
import type { ResultadoTicker, EstadoRecuentoTicker } from '../../../../types/types';
import { ImageWithFallback } from '../../../../components/common/ImageWithFallback';
import { assetBaseUrl } from '../../../../apiService';
import { AnimatedNumber } from './AnimatedNumber';

const formatPercent = (num: number) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
const formatVotes = (num: number) => Math.round(num).toLocaleString('es-AR');

interface PanelResultadosProps {
  resultados: ResultadoTicker[];
  estadoRecuento: EstadoRecuentoTicker;
}

export const PanelResultados = ({ resultados, estadoRecuento }: PanelResultadosProps) => {
  return (
    <div className="panel-resultados">
      <div className="panel-partidos-container">
        {resultados.map(partido => (
          <div key={partido.id} className="partido-fila">
            <div className="partido-logo">
              <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={partido.nombre} />
            </div>
            <div className="partido-info-wrapper">
              <span className="partido-nombre">{partido.nombreCorto || partido.nombre}</span>
              {partido.nombreCandidato && <span className="candidato-nombre">{partido.nombreCandidato}</span>}
              <div className="partido-barra-background">
                <div className="partido-barra-foreground" style={{ width: `${partido.porcentaje}%`, backgroundColor: partido.color || '#888' }} />
              </div>
            </div>
            <div className="partido-stats">
              <span className="partido-porcentaje">
                <AnimatedNumber value={partido.porcentaje} formatter={formatPercent} />
              </span>
              <span className="partido-votos">
                <AnimatedNumber value={partido.votos} formatter={formatVotes} /> votos
              </span>
            </div>
          </div>
        ))}
      </div>

      <div className="panel-estado-recuento">
        <div className="estado-item">
          <span>Participación</span>
          <strong><AnimatedNumber value={estadoRecuento.participacionPorcentaje} formatter={formatPercent} /></strong>
        </div>
        <div className="estado-item">
          <span>Mesas Escrutadas</span>
          <strong><AnimatedNumber value={estadoRecuento.mesasTotalizadasPorcentaje} formatter={formatPercent} /></strong>
        </div>
      </div>
    </div>
  );
};