// src/components/OcupantesModal.tsx
import { useState } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import { updateBancada, type UpdateBancadaData } from '../services/apiService';
import type { Bancada } from '../types';
import './OcupantesModal.css'; // Crearemos este archivo

interface Props {
    bancada: Bancada;
    onClose: () => void;
    activeTab: 'diputados' | 'senadores';
}

export const OcupantesModal = ({ bancada, onClose, activeTab }: Props) => {
    const queryClient = useQueryClient();
    const [nombre, setNombre] = useState(bancada.ocupante?.nombreOcupante || '');
    const [fotoUrl, setFotoUrl] = useState(bancada.ocupante?.fotoUrl || '');
    const [periodo, setPeriodo] = useState(bancada.ocupante?.periodo || '');
    
    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        const payload: UpdateBancadaData = {
            agrupacionPoliticaId: bancada.agrupacionPoliticaId,
            nombreOcupante: nombre || null,
            fotoUrl: fotoUrl || null,
            periodo: periodo || null,
        };
        try {
            await updateBancada(bancada.id, payload);
            // Invalida la query para que la tabla principal se actualice
            queryClient.invalidateQueries({ queryKey: ['bancadas', activeTab] });
            onClose();
        } catch (err) {
            alert("Error al guardar el ocupante.");
        }
    };

    return (
        <div className="modal-overlay" onClick={onClose}>
            <div className="modal-content" onClick={e => e.stopPropagation()}>
                <button className="modal-close" onClick={onClose}>&times;</button>
                <h4>Ocupante de la Banca #{bancada.id}</h4>
                <h5>{bancada.agrupacionPolitica?.nombre || 'Banca Vacante'}</h5>
                <form onSubmit={handleSubmit}>
                    <div className="form-group">
                        <label htmlFor="nombre">Nombre Completo</label>
                        <input id="nombre" type="text" value={nombre} onChange={e => setNombre(e.target.value)} />
                    </div>
                    <div className="form-group">
                        <label htmlFor="fotoUrl">URL de la Foto</label>
                        <input id="fotoUrl" type="text" value={fotoUrl} onChange={e => setFotoUrl(e.target.value)} />
                    </div>
                    <div className="form-group">
                        <label htmlFor="periodo">Período (ej. 2023-2027)</label>
                        <input id="periodo" type="text" value={periodo} onChange={e => setPeriodo(e.target.value)} />
                    </div>
                    <div className="modal-actions">
                        <button type="submit">Guardar Cambios</button>
                    </div>
                </form>
            </div>
        </div>
    );
};