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

// Esta función limpia cualquier carácter no válido de un string de color.
const sanitizeColor = (color: string | null | undefined): string => {
    if (!color) return '#000000'; // Devuelve un color válido por defecto si es nulo
    // Usa una expresión regular para eliminar todo lo que no sea un '#' o un carácter hexadecimal
    const sanitized = color.replace(/[^#0-9a-fA-F]/g, '');
    return sanitized.startsWith('#') ? sanitized : `#${sanitized}`;
};

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

    useEffect(() => {
        // Solo procedemos si los datos de agrupaciones están disponibles
        if (agrupaciones && agrupaciones.length > 0) {
            // Inicializamos el estado de 'editedAgrupaciones' una sola vez.
            // Usamos una función en setState para asegurarnos de que solo se ejecute
            // si el estado está vacío, evitando sobreescribir ediciones del usuario.
            setEditedAgrupaciones(prev => {
                if (Object.keys(prev).length === 0) {
                    return Object.fromEntries(agrupaciones.map(a => [a.id, {}]));
                }
                return prev;
            });
        }

        // Hacemos lo mismo para los logos
        if (logos && logos.length > 0) {
            setEditedLogos(prev => {
                if (prev.length === 0) {
                    // Creamos una copia profunda para evitar mutaciones accidentales
                    return JSON.parse(JSON.stringify(logos));
                }
                return prev;
            });
        }
        // La dependencia ahora es el estado de carga. El hook se ejecutará cuando
        // isLoadingAgrupaciones o isLoadingLogos cambien de true a false.
    }, [agrupaciones, logos]);

    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" 
                                            // Usamos la función sanitizeColor para asegurarnos de que el valor sea siempre válido
                                            value={sanitizeColor(editedAgrupaciones[agrupacion.id]?.color ?? agrupacion.color)} 
                                            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>
    );
};