// 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';
import styles from '../PanelNacional.module.css';

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

const SvgDefs = () => (
  <svg style={{ height: 0, width: 0, position: 'absolute' }}>
    <defs>
      <linearGradient id="participationGradient" gradientTransform="rotate(90)">
        <stop offset="0%" stopColor="#e0f3ffff" />
        <stop offset="100%" stopColor="#007bff" />
      </linearGradient>
      <linearGradient id="scrutinizedGradient" gradientTransform="rotate(90)">
        <stop offset="0%" stopColor="#e0f3ffff" />
        <stop offset="100%" stopColor="#007bff" />
      </linearGradient>
    </defs>
  </svg>
);

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

export const PanelResultados = ({ resultados, estadoRecuento }: PanelResultadosProps) => {
  return (
    <div className={styles.panelResultados}>
      <SvgDefs />
      <div className={styles.panelEstadoRecuento}>
        <div className={styles.estadoItem}>
          <CircularProgressbar
            value={estadoRecuento.participacionPorcentaje}
            text={formatPercent(estadoRecuento.participacionPorcentaje)}
            strokeWidth={12}
            circleRatio={0.75}
            styles={buildStyles({ textColor: '#333', pathColor: 'url(#participationGradient)', trailColor: '#e9ecef', textSize: '22px', rotation: 0.625, })}
          />
          <span>Participación</span>
        </div>
        <div className={styles.estadoItem}>
          <CircularProgressbar
            value={estadoRecuento.mesasTotalizadasPorcentaje}
            text={formatPercent(estadoRecuento.mesasTotalizadasPorcentaje)}
            strokeWidth={12}
            circleRatio={0.75}
            styles={buildStyles({ textColor: '#333', pathColor: 'url(#scrutinizedGradient)', trailColor: '#e9ecef', textSize: '22px', rotation: 0.625, })}
          />
          <span>Escrutado</span>
        </div>
      </div>

      <div className={styles.panelPartidosContainer}>
        {resultados.map(partido => (
          <div key={partido.id} className={styles.partidoFila} style={{ borderLeftColor: partido.color || '#ccc' }}>
            <div className={styles.partidoLogo} style={{ backgroundColor: partido.color || '#e9ecef' }}>
              <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={partido.nombre} />
            </div>
            <div className={styles.partidoMainContent}>
              <div className={styles.partidoTopRow}>
                <div className={styles.partidoInfoWrapper}>
                  {partido.nombreCandidato ? (
                    <>
                      <span className={styles.candidatoNombre}>{partido.nombreCandidato}</span>
                      <span className={styles.partidoNombreNormal}>{partido.nombreCorto || partido.nombre}</span>
                    </>
                  ) : (
                    <span className={styles.partidoNombre}>{partido.nombreCorto || partido.nombre}</span>
                  )}
                </div>
                <div className={styles.partidoStats}>
                  <span className={styles.partidoPorcentaje}>
                    <AnimatedNumber value={partido.porcentaje} formatter={formatPercent} />
                  </span>
                </div>
              </div>

              <div className={styles.partidoBarraConVotos}>
                <div
                  className={styles.partidoBarraForeground}
                  style={{ width: `${partido.porcentaje}%`, backgroundColor: partido.color || '#888' }}
                />
                <span className={styles.partidoVotosEnBarra}>
                  <span className={styles.animatedNumberWrapper}>
                    <AnimatedNumber value={partido.votos} formatter={formatVotes} />
                  </span>
                  Votos
                </span>

              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};