// src/features/legislativas/nacionales/components/ProvinciaCard.tsx
import type { ResumenProvincia } from '../../../../types/types';
import { MiniMapaSvg } from './MiniMapaSvg';
import { ImageWithFallback } from '../../../../components/common/ImageWithFallback';
import { assetBaseUrl } from '../../../../apiService';

interface ProvinciaCardProps {
    data: ResumenProvincia;
}

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

export const ProvinciaCard = ({ data }: ProvinciaCardProps) => {
    // Determinamos el color del ganador para pasárselo al mapa.
    // Si no hay ganador, usamos un color gris por defecto.
    const colorGanador = data.resultados[0]?.color || '#d1d1d1';

    return (
        <div className="provincia-card">
            <header className="card-header">
                <div className="header-info">
                    <h3 style={{ whiteSpace: 'normal' }}>{data.provinciaNombre}</h3>
                    <span>DIPUTADOS NACIONALES</span>
                </div>
                <div className="header-map">
                    <MiniMapaSvg provinciaNombre={data.provinciaNombre} fillColor={colorGanador} />
                </div>
            </header>
            <div className="card-body">
                {data.resultados.map(res => (
                    <div key={res.agrupacionId} className="candidato-row">
                        <ImageWithFallback src={res.fotoUrl ?? undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={res.nombreCandidato ?? res.nombreAgrupacion} className="candidato-foto" />

                        <div className="candidato-data">
                            {res.nombreCandidato && (
                                <span className="candidato-nombre">{res.nombreCandidato}</span>
                            )}

                            <span className={`candidato-partido ${!res.nombreCandidato ? 'main-title' : ''}`}>
                                {res.nombreAgrupacion}
                            </span>

                            <div className="progress-bar-container">
                                <div className="progress-bar" style={{ width: `${res.porcentaje}%`, backgroundColor: res.color || '#ccc' }} />
                            </div>
                        </div>

                        <div className="candidato-stats">
                            <span className="stats-percent">{formatPercent(res.porcentaje)}</span>
                            <span className="stats-votos">{formatNumber(res.votos)} votos</span>
                        </div>
                        <div className="stats-bancas">
                            +{res.bancasObtenidas}
                            <span>Bancas</span>
                        </div>
                    </div>
                ))}
            </div>
            <footer className="card-footer">
                <div>
                    <span>Participación</span>
                    {/* Usamos los datos reales del estado de recuento */}
                    <strong>{formatPercent(data.estadoRecuento?.participacionPorcentaje ?? 0)}</strong>
                </div>
                <div>
                    <span>Mesas escrutadas</span>
                    <strong>{formatPercent(data.estadoRecuento?.mesasTotalizadasPorcentaje ?? 0)}</strong>
                </div>
                <div>
                    <span>Votos totales</span>
                    {/* Usamos el nuevo campo cantidadVotantes */}
                    <strong>{formatNumber(data.estadoRecuento?.cantidadVotantes ?? 0)}</strong>
                </div>
            </footer>
        </div>
    );
};