// src/components/CandidatoOverridesManager.tsx

import { useState, useMemo, useEffect } from 'react';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import Select from 'react-select';
import { getMunicipiosForAdmin, getAgrupaciones, getCandidatos, updateCandidatos } from '../services/apiService';
import type { MunicipioSimple, AgrupacionPolitica, CandidatoOverride } from '../types';

const CATEGORIAS_OPTIONS = [
    { value: 5, label: 'Senadores' },
    { value: 6, label: 'Diputados' },
    { value: 7, label: 'Concejales' }
];

export const CandidatoOverridesManager = () => {
    const queryClient = useQueryClient();
    const { data: municipios = [] } = useQuery<MunicipioSimple[]>({ queryKey: ['municipiosForAdmin'], queryFn: getMunicipiosForAdmin });
    const { data: agrupaciones = [] } = useQuery<AgrupacionPolitica[]>({ queryKey: ['agrupaciones'], queryFn: getAgrupaciones });
    const { data: candidatos = [] } = useQuery<CandidatoOverride[]>({ queryKey: ['candidatos'], queryFn: getCandidatos });

    const [selectedCategoria, setSelectedCategoria] = useState<{ value: number; label: string } | null>(null);
    const [selectedMunicipio, setSelectedMunicipio] = useState<{ value: string; label: string } | null>(null);
    const [selectedAgrupacion, setSelectedAgrupacion] = useState<{ value: string; label: string } | null>(null);
    const [nombreCandidato, setNombreCandidato] = useState('');

    const municipioOptions = useMemo(() => 
        // Añadimos la opción "General" que representará un ámbito nulo
        [{ value: 'general', label: 'General (Todos los Municipios)' }, ...municipios.map(m => ({ value: m.id, label: m.nombre }))]
    , [municipios]);
    
    const agrupacionOptions = useMemo(() => agrupaciones.map(a => ({ value: a.id, label: a.nombre })), [agrupaciones]);

    const currentCandidato = useMemo(() => {
        if (!selectedAgrupacion || !selectedCategoria) return '';
        
        // Determina si estamos buscando un override general (null) o específico (ID numérico)
        const ambitoIdBuscado = selectedMunicipio?.value === 'general' ? null : (selectedMunicipio ? parseInt(selectedMunicipio.value) : undefined);

        // Si no se ha seleccionado un municipio, no buscamos nada
        if (ambitoIdBuscado === undefined) return '';

        return candidatos.find(c => 
            c.ambitoGeograficoId === ambitoIdBuscado && 
            c.agrupacionPoliticaId === selectedAgrupacion.value &&
            c.categoriaId === selectedCategoria.value
        )?.nombreCandidato || '';
    }, [candidatos, selectedMunicipio, selectedAgrupacion, selectedCategoria]);
    
    useEffect(() => { setNombreCandidato(currentCandidato) }, [currentCandidato]);

    const handleSave = async () => {
        if (!selectedMunicipio || !selectedAgrupacion || !selectedCategoria) return;

        const ambitoIdParaEnviar = selectedMunicipio.value === 'general' 
            ? null 
            : parseInt(selectedMunicipio.value);

        const newCandidatoEntry: CandidatoOverride = {
            id: 0, // El backend no lo necesita para el upsert
            agrupacionPoliticaId: selectedAgrupacion.value,
            categoriaId: selectedCategoria.value,
            ambitoGeograficoId: ambitoIdParaEnviar,
            nombreCandidato: nombreCandidato || null
        };

        try {
            await updateCandidatos([newCandidatoEntry]);
            queryClient.invalidateQueries({ queryKey: ['candidatos'] });
            alert('Override de candidato guardado.');
        } catch (error) {
            console.error(error);
            alert('Error al guardar el override del candidato.');
        }
    };
    
    return (
        <div className="admin-module">
            <h3>Overrides de Nombres de Candidatos</h3>
            <p>Configure un nombre de candidato específico para un partido, categoría y municipio (o general).</p>
            <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-end', flexWrap: 'wrap' }}>
                <div style={{ flex: 1 }}>
                    <label>Categoría</label>
                    <Select options={CATEGORIAS_OPTIONS} value={selectedCategoria} onChange={setSelectedCategoria} isClearable placeholder="Seleccione..."/>
                </div>
                <div style={{ flex: 1 }}>
                    <label>Municipio (Opcional)</label>
                    <Select options={municipioOptions} value={selectedMunicipio} onChange={setSelectedMunicipio} isClearable placeholder="General..."/>
                </div>
                <div style={{ flex: 1 }}>
                    <label>Agrupación</label>
                    <Select options={agrupacionOptions} value={selectedAgrupacion} onChange={setSelectedAgrupacion} isClearable placeholder="Seleccione..."/>
                </div>
                <div style={{ flex: 2 }}>
                    <label>Nombre del Candidato</label>
                    <input type="text" value={nombreCandidato} onChange={e => setNombreCandidato(e.target.value)} style={{ width: '100%' }} disabled={!selectedAgrupacion || !selectedCategoria} />
                </div>
                <button onClick={handleSave} disabled={!selectedAgrupacion || !selectedCategoria}>Guardar</button>
            </div>
        </div>
    );
};