// src/features/legislativas/nacionales/HomeCarouselWidget.tsx
import { useQuery } from '@tanstack/react-query';
import { getHomeResumen } from '../../../apiService';
import { ImageWithFallback } from '../../../components/common/ImageWithFallback';
import { assetBaseUrl } from '../../../apiService';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, A11y } from 'swiper/modules';

// @ts-ignore
import 'swiper/css';
// @ts-ignore
import 'swiper/css/navigation';
import styles from './HomeCarouselWidget.module.css';

interface Props {
    eleccionId: number;
    distritoId: string;
    categoriaId: number;
    titulo: string;
}

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

const formatDateTime = (dateString: string | undefined | null) => {
    if (!dateString) return '...';
    try {
        const date = new Date(dateString);
        if (isNaN(date.getTime())) {
            return dateString;
        }
        const day = String(date.getDate()).padStart(2, '0');
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const year = date.getFullYear();
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        return `${day}/${month}/${year}, ${hours}:${minutes} hs.`;
    } catch (e) {
        return dateString;
    }
};

export const HomeCarouselWidget = ({ eleccionId, distritoId, categoriaId, titulo }: Props) => {
    const { data, isLoading, error } = useQuery({
        queryKey: ['homeResumen', eleccionId, distritoId, categoriaId],
        queryFn: () => getHomeResumen(eleccionId, distritoId, categoriaId),
    });

    if (isLoading) return <div>Cargando widget...</div>;
    if (error || !data) return <div>No se pudieron cargar los datos.</div>;

    return (
        <div className={styles.homeCarouselWidget}>
            <h2 className={styles.widgetTitle}>{titulo}</h2>

            <div className={styles.topStatsBar}>
                <div>
                    <span>Participación</span>
                    <strong>{formatPercent(data.estadoRecuento?.participacionPorcentaje)}</strong>
                </div>
                <div>
                    <span className={styles.longText}>Mesas escrutadas</span>
                    <span className={styles.shortText}>Escrutado</span>
                    <strong>{formatPercent(data.estadoRecuento?.mesasTotalizadasPorcentaje)}</strong>
                </div>
                <div>
                    <span className={styles.longText}>Votos en blanco</span>
                    <span className={styles.shortText}>En blanco</span>
                    <strong>{formatPercent(data.votosEnBlancoPorcentaje)}</strong>
                </div>
                <div>
                    <span className={styles.longText}>Votos totales</span>
                    <span className={styles.shortText}>Votos</span>
                    <strong>{formatNumber(data.votosTotales)}</strong>
                </div>
            </div>

            <div className={styles.carouselContainer}>
                <Swiper
                    modules={[Navigation, A11y]}
                    spaceBetween={16}
                    slidesPerView={1.3}
                    navigation={{
                        prevEl: `.${styles.navButtonPrev}`,
                        nextEl: `.${styles.navButtonNext}`,
                    }}
                    breakpoints={{
                        320: { slidesPerView: 1.25, spaceBetween: 10 },
                        430: { slidesPerView: 1.4, spaceBetween: 12 },
                        640: { slidesPerView: 2.5 },
                        1024: { slidesPerView: 3 },
                        1200: { slidesPerView: 3.5 }
                    }}
                >
                    {data.resultados.map(candidato => (
                        <SwiperSlide key={candidato.agrupacionId}>
                            <div className={styles.candidateCard} style={{ '--candidate-color': candidato.color || '#ccc' } as React.CSSProperties}>

                                <div className={styles.candidatePhotoWrapper}>
                                    <ImageWithFallback
                                        src={candidato.fotoUrl ?? undefined}
                                        fallbackSrc={`${assetBaseUrl}/default-avatar.png`}
                                        alt={candidato.nombreCandidato ?? ''}
                                        className={styles.candidatePhoto}
                                    />
                                </div>

                                <div className={styles.candidateDetails}>
                                    <div className={styles.candidateInfo}>
                                        {candidato.nombreCandidato ? (
                                            <>
                                                <span className={styles.candidateName}>
                                                    {candidato.nombreCandidato}
                                                </span>
                                                <span className={styles.partyName}>
                                                    {candidato.nombreCortoAgrupacion || candidato.nombreAgrupacion}
                                                </span>
                                            </>
                                        ) : (
                                            <span className={styles.candidateName}>
                                                {candidato.nombreCortoAgrupacion || candidato.nombreAgrupacion}
                                            </span>
                                        )}
                                    </div>
                                    <div className={styles.candidateResults}>
                                        <span className={styles.percentage}>{formatPercent(candidato.porcentaje)}</span>
                                        <span className={styles.votes}>{formatNumber(candidato.votos)} votos</span>
                                    </div>
                                </div>

                            </div>
                        </SwiperSlide>
                    ))}
                </Swiper>

                <div className={`${styles.navButton} ${styles.navButtonPrev}`}></div>
                <div className={`${styles.navButton} ${styles.navButtonNext}`}></div>
            </div>

            <div className={styles.widgetFooter}>
                Última actualización: {formatDateTime(data.ultimaActualizacion)}
            </div>
        </div>
    );
};