// src/features/legislativas/nacionales/HomeCarouselProvincialWidget.tsx

import { useState, useMemo, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';
import Select, { type SingleValue, type StylesConfig } from 'react-select';
import { getHomeResumen, getProvincias } from '../../../apiService';
import type { CatalogoItem } from '../../../types/types';
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;
  categoriaId: number | string;
  titulo: string;
}

interface OptionType {
  value: string;
  label: string;
}

const PROVINCIAS_QUE_RENUEVAN_SENADORES = new Set(['01', '06', '08', '15', '16', '17', '22', '24']);
const CATEGORIA_SENADORES = 2;

const customSelectStyles: StylesConfig<OptionType, false> = {
  menuList: (provided) => ({
    ...provided,
    maxHeight: '180px',
  }),
};

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);
    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 HomeCarouselProvincialWidget = ({ eleccionId, categoriaId, titulo }: Props) => {
  const [selectedProvince, setSelectedProvince] = useState<OptionType | null>({ value: '01', label: 'CABA' });

  const { data: provincias = [], isLoading: isLoadingProvincias } = useQuery<CatalogoItem[]>({
    queryKey: ['provincias'],
    queryFn: getProvincias,
  });

  const provinceOptions: OptionType[] = useMemo(() => {
    const allOptions = provincias.map(p => ({ value: p.id, label: p.nombre }));
    if (Number(categoriaId) === CATEGORIA_SENADORES) {
      return allOptions.filter(opt => PROVINCIAS_QUE_RENUEVAN_SENADORES.has(opt.value));
    }
    return allOptions;
  }, [provincias, categoriaId]);

  useEffect(() => {
    if (provinceOptions.length > 0) {
      if (!selectedProvince) {
        const defaultOption = provinceOptions.find(opt => opt.value === '01');
        setSelectedProvince(defaultOption || provinceOptions[0]);
      } else {
        const isSelectedStillValid = provinceOptions.some(opt => opt.value === selectedProvince.value);
        if (!isSelectedStillValid) {
          setSelectedProvince(provinceOptions[0]);
        }
      }
    }
  }, [provinceOptions, selectedProvince]);

  const { data, isLoading, error } = useQuery({
    queryKey: ['homeResumen', eleccionId, selectedProvince?.value, categoriaId],
    queryFn: () => getHomeResumen(eleccionId, selectedProvince!.value, Number(categoriaId)),
    enabled: !!selectedProvince,
    refetchInterval: 180000,
  });

  const uniqueId = `swiper-${Math.random().toString(36).substring(2, 9)}`;
  const prevButtonClass = `prev-${uniqueId}`;
  const nextButtonClass = `next-${uniqueId}`;

  return (
    <div className={styles.homeCarouselWidget}>
      <div className={styles.widgetHeader}>
        <h2 className={styles.widgetTitle}>{`${titulo} - ${selectedProvince?.label || '...'}`}</h2>
        <div className={styles.provinceSelector}>
          <Select
            value={selectedProvince}
            options={provinceOptions}
            onChange={(option: SingleValue<OptionType>) => option && setSelectedProvince(option)}
            isLoading={isLoadingProvincias}
            isSearchable={true}
            placeholder="Seleccionar provincia..."
            styles={customSelectStyles}
          />
        </div>
      </div>

      {(isLoading || !selectedProvince) && <div>Cargando resultados...</div>}
      {error && <div>No se pudieron cargar los datos.</div>}
      {data && selectedProvince && (
        <>
          <div className={styles.carouselContainer}>
            <Swiper
              modules={[Navigation, A11y]}
              spaceBetween={16}
              slidesPerView={1.3}
              navigation={{
                prevEl: `.${prevButtonClass}`,
                nextEl: `.${nextButtonClass}`,
              }}
              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} ${prevButtonClass}`}></div>
            <div className={`${styles.navButton} ${styles.navButtonNext} ${nextButtonClass}`}></div>
          </div>

          <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.widgetFooter}>
            Última actualización: {formatDateTime(data.ultimaActualizacion)}
          </div>
        </>
      )}
    </div>
  );
};