// src/features/legislativas/nacionales/components/ProvinciaCard.tsx
import type { ResumenProvincia, CategoriaResumen } from '../../../../types/types';
import { MiniMapaSvg } from './MiniMapaSvg';
import { ImageWithFallback } from '../../../../components/common/ImageWithFallback';
import { assetBaseUrl } from '../../../../apiService';
// 1. Importamos el archivo de estilos como un módulo CSS
import styles from '../ResultadosNacionalesCardsWidget.module.css';

interface CategoriaDisplayProps {
    categoria: CategoriaResumen;
    mostrarBancas?: boolean;
}

interface ProvinciaCardProps {
    data: ResumenProvincia;
    mostrarBancas?: boolean;
}

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

// 2. Todas las props 'className' en este sub-componente ahora usan el objeto 'styles'
const CategoriaDisplay = ({ categoria, mostrarBancas }: CategoriaDisplayProps) => {
    return (
        <div className={styles.categoriaBloque}>
            <h4 className={styles.categoriaTitulo}>{categoria.categoriaNombre}</h4>

            {categoria.resultados.map(res => (
                <div 
                    key={res.agrupacionId} 
                    className={styles.candidatoRow}
                    style={{ borderLeftColor: res.color || '#ccc' }}
                >
                    <div className={styles.candidatoFotoWrapper} style={{ backgroundColor: res.color || '#e9ecef' }}>
                        <ImageWithFallback
                            src={res.fotoUrl ?? undefined}
                            fallbackSrc={`${assetBaseUrl}/default-avatar.png`}
                            alt={res.nombreCandidato ?? res.nombreAgrupacion}
                            className={styles.candidatoFoto}
                        />
                    </div>

                    <div className={styles.candidatoData}>
                        {res.nombreCandidato ? (
                            <>
                                <span className={styles.candidatoNombre}>{res.nombreCandidato}</span>
                                <span className={styles.candidatoPartido}>{res.nombreCortoAgrupacion || res.nombreAgrupacion}</span>
                            </>
                        ) : (
                            <span className={styles.candidatoNombre}>{res.nombreCortoAgrupacion || res.nombreAgrupacion}</span>
                        )}
                        <div className={styles.progressBarContainer}>
                            <div className={styles.progressBar} style={{ width: `${res.porcentaje}%`, backgroundColor: res.color || '#ccc' }} />
                        </div>
                    </div>
                    <div className={styles.candidatoStats}>
                        <span className={styles.statsPercent}>{formatPercent(res.porcentaje)}</span>
                        <span className={styles.statsVotos}>{formatNumber(res.votos)} votos</span>
                    </div>

                    {mostrarBancas && (
                        <div className={styles.statsBancas}>
                            +{res.bancasObtenidas}
                            <span>Bancas</span>
                        </div>
                    )}
                </div>
            ))}

            <footer className={styles.cardFooter}>
                <div>
                    <span>Participación</span>
                    <strong>{formatPercent(categoria.estadoRecuento?.participacionPorcentaje ?? 0)}</strong>
                </div>
                <div>
                    <span>Mesas escrutadas</span>
                    <strong>{formatPercent(categoria.estadoRecuento?.mesasTotalizadasPorcentaje ?? 0)}</strong>
                </div>
                <div>
                    <span>Votos totales</span>
                    <strong>{formatNumber(categoria.estadoRecuento?.cantidadVotantes ?? 0)}</strong>
                </div>
            </footer>
        </div>
    );
};

export const ProvinciaCard = ({ data, mostrarBancas }: ProvinciaCardProps) => {
    const colorGanador = data.categorias[0]?.resultados[0]?.color || '#d1d1d1';

    // 3. Y también las clases del componente principal
    return (
        <div className={styles.provinciaCard}>
            <header className={styles.cardHeader}>
                <div className={styles.headerInfo}>
                    <h3 style={{ whiteSpace: 'normal' }}>{data.provinciaNombre}</h3>
                </div>
                <div className={styles.headerMap}>
                    <MiniMapaSvg provinciaNombre={data.provinciaNombre} fillColor={colorGanador} />
                </div>
            </header>
            <div className={styles.cardBody}>
                {data.categorias.map(categoria => (
                    <CategoriaDisplay
                        key={categoria.categoriaId}
                        categoria={categoria}
                        mostrarBancas={mostrarBancas}
                    />
                ))}
            </div>
        </div>
    );
};