// src/features/legislativas/nacionales/HomeCarouselNacionalWidget.tsx
import { useQuery } from '@tanstack/react-query';
import { getHomeResumenNacional } 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';

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;
    }
};

// Las props ya no incluyen distritoId
interface Props {
  eleccionId: number;
  categoriaId: number;
  titulo: string;
}

export const HomeCarouselNacionalWidget = ({ eleccionId, categoriaId, titulo }: Props) => {
  const { data, isLoading, error } = useQuery({
    // La queryKey ahora no necesita distritoId
    queryKey: ['homeResumenNacional', eleccionId, categoriaId],
    // Llama a la nueva función de la API
    queryFn: () => getHomeResumenNacional(eleccionId, 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>
  );
};