// src/features/legislativas/nacionales/components/MiniMapaSvg.tsx
import { useQuery } from '@tanstack/react-query';
import axios from 'axios';
import { useMemo } from 'react';
import { assetBaseUrl } from '../../../../apiService';
// 1. Importamos el archivo de estilos como un módulo CSS
import styles from '../ResultadosNacionalesCardsWidget.module.css';

interface MiniMapaSvgProps {
    provinciaNombre: string;
    fillColor: string;
}

const normalizarNombreParaUrl = (nombre: string) => 
    nombre
        .toLowerCase()
        .replace(/ /g, '_')
        .normalize("NFD")
        .replace(/[\u0300-\u036f]/g, "");

export const MiniMapaSvg = ({ provinciaNombre, fillColor }: MiniMapaSvgProps) => {
    const nombreNormalizado = normalizarNombreParaUrl(provinciaNombre);
    const mapFileUrl = `${assetBaseUrl}/maps/provincias-svg/${nombreNormalizado}.svg`;

    const { data: svgContent, isLoading, isError } = useQuery<string>({
        queryKey: ['svgMapa', nombreNormalizado],
        queryFn: async () => {
            const response = await axios.get(mapFileUrl, { responseType: 'text' });
            return response.data;
        },
        staleTime: Infinity,
        gcTime: Infinity,
        retry: false,
    });

    const modifiedSvg = useMemo(() => {
        if (!svgContent) return '';
        return svgContent.replace(/<path/g, `<path fill="${fillColor}"`);
    }, [svgContent, fillColor]);

    if (isLoading) {
        // 2. Usamos el objeto 'styles' para las clases
        return <div className={styles.mapPlaceholder} />;
    }

    if (isError || !modifiedSvg) {
        // 3. Combinamos clases del módulo para el estado de error
        return <div className={`${styles.mapPlaceholder} ${styles.error}`} />;
    }

    return (
        <div 
            className={styles.mapSvgContainer} 
            dangerouslySetInnerHTML={{ __html: modifiedSvg }} 
        />
    );
};