// src/components/BancasProvincialesManager.tsx
import { useState } from 'react';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { getBancadas, getAgrupaciones, updateBancada, type UpdateBancadaData } from '../services/apiService';
import type { Bancada, AgrupacionPolitica } from '../types';
import { OcupantesModal } from './OcupantesModal';
import './AgrupacionesManager.css';

const ELECCION_ID_PROVINCIAL = 1;
const camaras = ['diputados', 'senadores'] as const;

export const BancasProvincialesManager = () => {
  const [activeTab, setActiveTab] = useState<'diputados' | 'senadores'>('diputados');
  const [modalVisible, setModalVisible] = useState(false);
  const [bancadaSeleccionada, setBancadaSeleccionada] = useState<Bancada | null>(null);
  const queryClient = useQueryClient();

  const { data: agrupaciones = [] } = useQuery<AgrupacionPolitica[]>({
    queryKey: ['agrupaciones'],
    queryFn: getAgrupaciones
  });

  // --- CORRECCIÓN CLAVE ---
  // 1. La queryKey ahora incluye el eleccionId para ser única.
  // 2. La función queryFn ahora pasa el ELECCION_ID_PROVINCIAL a getBancadas.
  const { data: bancadas = [], isLoading, error } = useQuery<Bancada[]>({
    queryKey: ['bancadas', activeTab, ELECCION_ID_PROVINCIAL],
    queryFn: () => getBancadas(activeTab, ELECCION_ID_PROVINCIAL),
  });

  const handleAgrupacionChange = async (bancadaId: number, nuevaAgrupacionId: string | null) => {
    const bancadaActual = bancadas.find(b => b.id === bancadaId);
    if (!bancadaActual) return;

    const payload: UpdateBancadaData = {
      agrupacionPoliticaId: nuevaAgrupacionId,
      nombreOcupante: nuevaAgrupacionId ? (bancadaActual.ocupante?.nombreOcupante ?? null) : null,
      fotoUrl: nuevaAgrupacionId ? (bancadaActual.ocupante?.fotoUrl ?? null) : null,
      periodo: nuevaAgrupacionId ? (bancadaActual.ocupante?.periodo ?? null) : null,
    };

    try {
      await updateBancada(bancadaId, payload);
      queryClient.invalidateQueries({ queryKey: ['bancadas', activeTab, ELECCION_ID_PROVINCIAL] });
    } catch (err) {
      alert("Error al guardar el cambio de agrupación.");
    }
  };

  const handleOpenModal = (bancada: Bancada) => {
    setBancadaSeleccionada(bancada);
    setModalVisible(true);
  };

  if (error) return <p style={{ color: 'red' }}>Error al cargar las bancas provinciales.</p>;

  return (
    <div className="admin-module">
      <h3>Gestión de Bancas (Provinciales)</h3>
      <p>Asigne partidos y ocupantes a las bancas de la legislatura provincial.</p>

      <div className="chamber-tabs">
        {camaras.map(camara => (
          <button
            key={camara}
            className={activeTab === camara ? 'active' : ''}
            onClick={() => setActiveTab(camara)}
          >
            {camara === 'diputados' ? 'Diputados Provinciales (92)' : 'Senadores Provinciales (46)'}
          </button>
        ))}
      </div>

      {isLoading ? <p>Cargando bancas...</p> : (
        <table>
          <thead>
            <tr>
              <th style={{ width: '15%' }}>Banca #</th>
              <th style={{ width: '35%' }}>Partido Asignado</th>
              <th style={{ width: '30%' }}>Ocupante Actual</th>
              <th style={{ width: '20%' }}>Acciones</th>
            </tr>
          </thead>
          <tbody>
            {bancadas.map((bancada) => (
              <tr key={bancada.id}>
                <td>{`${activeTab.charAt(0).toUpperCase()}-${bancada.numeroBanca}`}</td>
                <td>
                  <select
                    value={bancada.agrupacionPoliticaId || ''}
                    onChange={(e) => handleAgrupacionChange(bancada.id, e.target.value || null)}
                  >
                    <option value="">-- Vacante --</option>
                    {agrupaciones.map(a => <option key={a.id} value={a.id}>{a.nombre}</option>)}
                  </select>
                </td>
                <td>{bancada.ocupante?.nombreOcupante || 'Sin asignar'}</td>
                <td>
                  <button disabled={!bancada.agrupacionPoliticaId} onClick={() => handleOpenModal(bancada)}>
                    Editar Ocupante
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}

      {modalVisible && bancadaSeleccionada && (
        <OcupantesModal
          bancada={bancadaSeleccionada}
          onClose={() => setModalVisible(false)}
          activeTab={activeTab}
        />
      )}
    </div>
  );
};