// src/components/TelegramaWidget.tsx
import { useState, useEffect } from 'react';
import { 
    getSecciones, 
    getMunicipiosPorSeccion, 
    getCircuitosPorMunicipio,
    getEstablecimientosPorCircuito,
    getMesasPorEstablecimiento,
    getTelegramaPorId 
} from '../apiService';
import type { TelegramaData, CatalogoItem } from '../types/types';
import './TelegramaWidget.css';

export const TelegramaWidget = () => {
  // Estados para los filtros geográficos
  const [secciones, setSecciones] = useState<CatalogoItem[]>([]);
  const [municipios, setMunicipios] = useState<CatalogoItem[]>([]);
  const [circuitos, setCircuitos] = useState<CatalogoItem[]>([]);
  const [establecimientos, setEstablecimientos] = useState<CatalogoItem[]>([]);
  const [mesas, setMesas] = useState<CatalogoItem[]>([]);

  // Estados para los valores seleccionados
  const [selectedSeccion, setSelectedSeccion] = useState('');
  const [selectedMunicipio, setSelectedMunicipio] = useState('');
  const [selectedCircuito, setSelectedCircuito] = useState('');
  const [selectedEstablecimiento, setSelectedEstablecimiento] = useState('');
  const [selectedMesa, setSelectedMesa] = useState('');
  
  // Estados para la visualización del telegrama
  const [telegrama, setTelegrama] = useState<TelegramaData | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // Cargar secciones iniciales
  useEffect(() => {
    getSecciones().then(setSecciones);
  }, []);

  // Cargar municipios cuando cambia la sección
  useEffect(() => {
    if (selectedSeccion) {
      setMunicipios([]); setCircuitos([]); setEstablecimientos([]); setMesas([]);
      setSelectedMunicipio(''); setSelectedCircuito(''); setSelectedEstablecimiento(''); setSelectedMesa('');
      getMunicipiosPorSeccion(selectedSeccion).then(setMunicipios);
    }
  }, [selectedSeccion]);
  
  // Y así sucesivamente para los demás filtros...
  useEffect(() => {
    if (selectedMunicipio) {
      setCircuitos([]); setEstablecimientos([]); setMesas([]);
      setSelectedCircuito(''); setSelectedEstablecimiento(''); setSelectedMesa('');
      getCircuitosPorMunicipio(selectedMunicipio).then(setCircuitos);
    }
  }, [selectedMunicipio]);

  useEffect(() => {
    if (selectedCircuito) {
      setEstablecimientos([]); setMesas([]);
      setSelectedEstablecimiento(''); setSelectedMesa('');
      getEstablecimientosPorCircuito(selectedCircuito).then(setEstablecimientos);
    }
  }, [selectedCircuito]);

  useEffect(() => {
    if (selectedEstablecimiento) {
      setMesas([]);
      setSelectedMesa('');
      getMesasPorEstablecimiento(selectedEstablecimiento).then(setMesas);
    }
  }, [selectedEstablecimiento]);

  // Buscar el telegrama cuando se selecciona una mesa
  useEffect(() => {
    if (selectedMesa) {
      setLoading(true);
      setError(null);
      setTelegrama(null);
      getTelegramaPorId(selectedMesa)
        .then(setTelegrama)
        .catch(() => setError(`No se encontró el telegrama para la mesa seleccionada.`))
        .finally(() => setLoading(false));
    }
  }, [selectedMesa]);

  return (
    <div className="telegrama-container">
      <h4>Consulta de Telegramas por Ubicación</h4>
      <div className="filters-grid">
        <select value={selectedSeccion} onChange={e => setSelectedSeccion(e.target.value)}>
          <option value="">1. Sección</option>
          {secciones.map(s => <option key={s.id} value={s.id}>{s.nombre}</option>)}
        </select>
        <select value={selectedMunicipio} onChange={e => setSelectedMunicipio(e.target.value)} disabled={!municipios.length}>
          <option value="">2. Municipio</option>
          {municipios.map(m => <option key={m.id} value={m.id}>{m.nombre}</option>)}
        </select>
        <select value={selectedCircuito} onChange={e => setSelectedCircuito(e.target.value)} disabled={!circuitos.length}>
          <option value="">3. Circuito</option>
          {circuitos.map(c => <option key={c.id} value={c.id}>{c.nombre}</option>)}
        </select>
        <select value={selectedEstablecimiento} onChange={e => setSelectedEstablecimiento(e.target.value)} disabled={!establecimientos.length}>
          <option value="">4. Establecimiento</option>
          {establecimientos.map(e => <option key={e.id} value={e.id}>{e.nombre}</option>)}
        </select>
        <select value={selectedMesa} onChange={e => setSelectedMesa(e.target.value)} disabled={!mesas.length}>
          <option value="">5. Mesa</option>
          {mesas.map(m => <option key={m.id} value={m.id}>{m.nombre}</option>)}
        </select>
      </div>

      <div className="telegrama-viewer">
        {loading && <div className="spinner"></div>}
        {error && <p className="message error">{error}</p>}
        {telegrama && (
          <div className="telegrama-content">
            <div className="telegrama-image-wrapper">
              <img src={`data:image/jpeg;base64,${telegrama.contenidoBase64}`} alt={`Telegrama ${telegrama.id}`} />
            </div>
            {/* Metadata (opcional, se puede añadir aquí si se desea) */}
          </div>
        )}
        {!loading && !telegrama && !error && <p className="message">Seleccione una mesa para visualizar el telegrama.</p>}
      </div>
    </div>
  );
};