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

import { pdfjs, Document, Page } from 'react-pdf';
import 'react-pdf/dist/Page/AnnotationLayer.css';
import 'react-pdf/dist/Page/TextLayer.css';

pdfjs.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.mjs';

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]);

  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(`El telegrama para la mesa seleccionada, aún no se cargó en el sistema.`))
        .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-pdf-viewer">
              <Document
                file={`data:application/pdf;base64,${telegrama.contenidoBase64}`}
                onLoadError={(error) => setError(`Error al cargar el PDF: ${error.message}`)}
                loading={<div className="spinner"></div>}
              >
                <Page pageNumber={1} renderTextLayer={false} renderAnnotationLayer={false} />
              </Document>
            </div>
          </div>
        )}

        {!loading && !telegrama && !error && <p className="message">Seleccione una mesa para visualizar el telegrama.</p>}
      </div>
    </div>
  );
};