Elecciones-2025/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/PanelResultados.tsx

// 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';
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';

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-estado-recuento">
        <div className="estado-item">
          <CircularProgressbar
            value={estadoRecuento.participacionPorcentaje}
            text={formatPercent(estadoRecuento.participacionPorcentaje)}
            strokeWidth={10}
            styles={buildStyles({
              textColor: '#333',
              pathColor: '#28a745',
              trailColor: '#e9ecef',
              textSize: '24px',
            })}
          />
          <span>Participación</span>
        </div>
        <div className="estado-item">
          <CircularProgressbar
            value={estadoRecuento.mesasTotalizadasPorcentaje}
            text={formatPercent(estadoRecuento.mesasTotalizadasPorcentaje)}
            strokeWidth={10}
            styles={buildStyles({
              textColor: '#333',
              pathColor: '#007bff',
              trailColor: '#e9ecef',
              textSize: '24px',
            })}
          />
          <span>Escrutado</span>
        </div>
      </div>

      <div className="panel-partidos-container">
        {resultados.map(partido => (
          <div key={partido.id} className="partido-fila" style={{ borderLeftColor: partido.color || '#888' }}>
            <div className="partido-logo">
              <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={partido.nombre} />
            </div>
            <div className="partido-main-content">
              <div className="partido-top-row">
                <div className="partido-info-wrapper">
                  <span className="partido-nombre">{partido.nombreCorto || partido.nombre}</span>
                  {partido.nombreCandidato && <span className="candidato-nombre">{partido.nombreCandidato}</span>}
                </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 className="partido-barra-background">
                <div className="partido-barra-foreground" style={{ width: `${partido.porcentaje}%`, backgroundColor: partido.color || '#888' }} />
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};