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

const SENADORES_ID = 5;
const DIPUTADOS_ID = 6;
const CONCEJALES_ID = 7;

export const AgrupacionesManager = () => {
    const queryClient = useQueryClient();

    const [editedAgrupaciones, setEditedAgrupaciones] = useState<Record<string, Partial<AgrupacionPolitica>>>({});
    const [editedLogos, setEditedLogos] = useState<LogoAgrupacionCategoria[]>([]);

    // Query 1: Obtener agrupaciones
    const { data: agrupaciones = [], isLoading: isLoadingAgrupaciones } = useQuery<AgrupacionPolitica[]>({
        queryKey: ['agrupaciones'],
        queryFn: getAgrupaciones,
    });

    // Query 2: Obtener logos
    const { data: logos = [], isLoading: isLoadingLogos } = useQuery<LogoAgrupacionCategoria[]>({
        queryKey: ['logos'],
        queryFn: getLogos,
    });

    // Usamos useEffect para reaccionar cuando los datos de 'logos' se cargan o cambian.
    useEffect(() => {
        if (logos) {
            setEditedLogos(logos);
        }
    }, [logos]);

    // Usamos otro useEffect para reaccionar a los datos de 'agrupaciones'.
    useEffect(() => {
        if (agrupaciones) {
            const initialEdits = Object.fromEntries(agrupaciones.map(a => [a.id, {}]));
            setEditedAgrupaciones(initialEdits);
        }
    }, [agrupaciones]);

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

    const handleLogoChange = (agrupacionId: string, categoriaId: number, value: string) => {
        setEditedLogos(prev => {
            const newLogos = [...prev];
            const existing = newLogos.find(l =>
                l.agrupacionPoliticaId === agrupacionId &&
                l.categoriaId === categoriaId &&
                l.ambitoGeograficoId == null
            );

            if (existing) {
                existing.logoUrl = value;
            } else {
                newLogos.push({
                    id: 0,
                    agrupacionPoliticaId: agrupacionId,
                    categoriaId,
                    logoUrl: value,
                    ambitoGeograficoId: null
                });
            }
            return newLogos;
        });
    };

    const handleSaveAll = async () => {
        try {
            const agrupacionPromises = Object.entries(editedAgrupaciones).map(([id, changes]) => {
                if (Object.keys(changes).length > 0) {
                    const original = agrupaciones.find(a => a.id === id);
                    if (original) { // Chequeo de seguridad
                        return updateAgrupacion(id, { ...original, ...changes });
                    }
                }
                return Promise.resolve();
            });

            const logoPromise = updateLogos(editedLogos);

            await Promise.all([...agrupacionPromises, logoPromise]);

            queryClient.invalidateQueries({ queryKey: ['agrupaciones'] });
            queryClient.invalidateQueries({ queryKey: ['logos'] });

            alert('¡Todos los cambios han sido guardados!');
        } catch (err) {
            console.error("Error al guardar todo:", err);
            alert("Ocurrió un error al guardar los cambios.");
        }
    };

    const isLoading = isLoadingAgrupaciones || isLoadingLogos;

    const getLogoUrl = (agrupacionId: string, categoriaId: number) => {
        return editedLogos.find(l =>
            l.agrupacionPoliticaId === agrupacionId &&
            l.categoriaId === categoriaId &&
            l.ambitoGeograficoId == null
        )?.logoUrl || '';
    };

    return (
        <div className="admin-module">
            <h3>Gestión de Agrupaciones y Logos</h3>
            {isLoading ? <p>Cargando...</p> : (
                <>
                    <table>
                        <thead>
                            <tr>
                                <th>Nombre</th>
                                <th>Nombre Corto</th>
                                <th>Color</th>
                                <th>Logo Senadores</th>
                                <th>Logo Diputados</th>
                                <th>Logo Concejales</th>
                            </tr>
                        </thead>
                        <tbody>
                            {agrupaciones.map(agrupacion => (
                                <tr key={agrupacion.id}>
                                    <td>{agrupacion.nombre}</td>
                                    <td><input type="text" value={editedAgrupaciones[agrupacion.id]?.nombreCorto ?? agrupacion.nombreCorto ?? ''} onChange={(e) => handleInputChange(agrupacion.id, 'nombreCorto', e.target.value)} /></td>
                                    <td><input type="color" value={editedAgrupaciones[agrupacion.id]?.color ?? agrupacion.color ?? '#000000'} onChange={(e) => handleInputChange(agrupacion.id, 'color', e.target.value)} /></td>
                                    <td><input type="text" placeholder="URL de la imagen" value={getLogoUrl(agrupacion.id, SENADORES_ID)} onChange={(e) => handleLogoChange(agrupacion.id, SENADORES_ID, e.target.value)} /></td>
                                    <td><input type="text" placeholder="URL de la imagen" value={getLogoUrl(agrupacion.id, DIPUTADOS_ID)} onChange={(e) => handleLogoChange(agrupacion.id, DIPUTADOS_ID, e.target.value)} /></td>
                                    <td><input type="text" placeholder="URL de la imagen" value={getLogoUrl(agrupacion.id, CONCEJALES_ID)} onChange={(e) => handleLogoChange(agrupacion.id, CONCEJALES_ID, e.target.value)} /></td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                    <button onClick={handleSaveAll} style={{ marginTop: '1rem' }}>
                        Guardar Todos los Cambios
                    </button>
                </>
            )}
        </div>
    );
};