// EN: src/components/AgrupacionesManager.tsx
import { useState, useEffect } from 'react';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import Select from 'react-select';
import { getAgrupaciones, updateAgrupacion, getLogos, updateLogos } from '../services/apiService';
import type { AgrupacionPolitica, LogoAgrupacionCategoria, UpdateAgrupacionData } from '../types';
import './AgrupacionesManager.css';

const GLOBAL_ELECTION_ID = 0;

const ELECCION_OPTIONS = [
    { value: GLOBAL_ELECTION_ID, label: 'Global (Logo por Defecto)' },
    { value: 2, label: 'Elecciones Nacionales (Override General)' },
    { value: 1, label: 'Elecciones Provinciales (Override General)' }
];

const sanitizeColor = (color: string | null | undefined): string => {
    if (!color) return '#000000';
    return color.startsWith('#') ? color : `#${color}`;
};

export const AgrupacionesManager = () => {
    const queryClient = useQueryClient();
    const [selectedEleccion, setSelectedEleccion] = useState(ELECCION_OPTIONS[0]);
    const [editedAgrupaciones, setEditedAgrupaciones] = useState<Record<string, { nombreCorto: string | null; color: string | null; }>>({});
    const [editedLogos, setEditedLogos] = useState<Record<string, string | null>>({});

    const { data: agrupaciones = [], isLoading: isLoadingAgrupaciones } = useQuery<AgrupacionPolitica[]>({
        queryKey: ['agrupaciones'], queryFn: getAgrupaciones,
    });
    
    const { data: logos = [], isLoading: isLoadingLogos } = useQuery<LogoAgrupacionCategoria[]>({
        queryKey: ['allLogos'],
        queryFn: () => Promise.all([getLogos(0), getLogos(1), getLogos(2)]).then(res => res.flat()),
    });

    useEffect(() => {
        if (agrupaciones.length > 0) {
            const initialEdits = Object.fromEntries(
                agrupaciones.map(a => [a.id, { nombreCorto: a.nombreCorto, color: a.color }])
            );
            setEditedAgrupaciones(initialEdits);
        }
    }, [agrupaciones]);

    useEffect(() => {
        if (logos) {
            const logoMap = Object.fromEntries(
                logos
                    // --- CORRECCIÓN CLAVE 1: Comprobar contra `null` en lugar de `0` ---
                    .filter(l => l.categoriaId === 0 && l.ambitoGeograficoId === null)
                    .map(l => [`${l.agrupacionPoliticaId}-${l.eleccionId}`, l.logoUrl])
            );
            setEditedLogos(logoMap);
        }
    }, [logos]);

    const handleInputChange = (id: string, field: 'nombreCorto' | 'color', value: string | null) => {
        setEditedAgrupaciones(prev => ({ ...prev, [id]: { ...prev[id], [field]: value } }));
    };

    const handleLogoInputChange = (agrupacionId: string, value: string | null) => {
        const key = `${agrupacionId}-${selectedEleccion.value}`;
        setEditedLogos(prev => ({ ...prev, [key]: value }));
    };
    
    const handleSaveAll = async () => {
        try {
            const agrupacionPromises = agrupaciones.map(agrupacion => {
                const changes = editedAgrupaciones[agrupacion.id] || {};
                const payload: UpdateAgrupacionData = {
                    nombreCorto: changes.nombreCorto ?? agrupacion.nombreCorto,
                    color: changes.color ?? agrupacion.color,
                };
                return updateAgrupacion(agrupacion.id, payload);
            });
            
            // --- CORRECCIÓN CLAVE 2: Enviar `null` a la API en lugar de `0` ---
            const logosPayload = Object.entries(editedLogos)
                .map(([key, logoUrl]) => {
                    const [agrupacionPoliticaId, eleccionIdStr] = key.split('-');
                    return { id: 0, eleccionId: parseInt(eleccionIdStr), agrupacionPoliticaId, categoriaId: 0, logoUrl: logoUrl || null, ambitoGeograficoId: null };
                });

            const logoPromise = updateLogos(logosPayload);

            await Promise.all([...agrupacionPromises, logoPromise]);
            
            await queryClient.invalidateQueries({ queryKey: ['agrupaciones'] });
            await queryClient.invalidateQueries({ queryKey: ['allLogos'] });
            alert('¡Todos los cambios han sido guardados!');
        } catch (err) { console.error("Error al guardar todo:", err); alert("Ocurrió un error."); }
    };
    
    const getLogoValue = (agrupacionId: string): string => {
        const key = `${agrupacionId}-${selectedEleccion.value}`;
        return editedLogos[key] ?? '';
    };

    const isLoading = isLoadingAgrupaciones || isLoadingLogos;

    return (
        <div className="admin-module">
            <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
                <h3>Gestión de Agrupaciones y Logos</h3>
                <div style={{width: '350px', zIndex: 100 }}>
                    <Select options={ELECCION_OPTIONS} value={selectedEleccion} onChange={(opt) => setSelectedEleccion(opt!)} />
                </div>
            </div>

            {isLoading ? <p>Cargando...</p> : (
                <>
                    <div className="table-container">
                        <table>
                            <thead>
                                <tr>
                                    <th>Nombre</th>
                                    <th>Nombre Corto</th>
                                    <th>Color</th>
                                    <th>Logo</th>
                                </tr>
                            </thead>
                            <tbody>
                                {agrupaciones.map(agrupacion => (
                                    <tr key={agrupacion.id}>
                                        <td>{agrupacion.nombre}</td>
                                        <td><input type="text" value={editedAgrupaciones[agrupacion.id]?.nombreCorto ?? ''} onChange={(e) => handleInputChange(agrupacion.id, 'nombreCorto', e.target.value)} /></td>
                                        <td><input type="color" value={sanitizeColor(editedAgrupaciones[agrupacion.id]?.color)} onChange={(e) => handleInputChange(agrupacion.id, 'color', e.target.value)} /></td>
                                        <td>
                                            <input 
                                                type="text" 
                                                placeholder="URL..." 
                                                value={getLogoValue(agrupacion.id)} 
                                                onChange={(e) => handleLogoInputChange(agrupacion.id, e.target.value)} 
                                            />
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                    <button onClick={handleSaveAll} style={{ marginTop: '1rem' }}>
                        Guardar Todos los Cambios
                    </button>
                </>
            )}
        </div>
    );
};