import 'https://cdn.jsdelivr.net/npm/@material/web/all.js/+esm';
import L from 'leaflet';

let dbInt = {};
let dbExt = { lineas: {} };
let audioActual = null;
let mapa = null;

const get = (id) => document.getElementById(id);

// --- 1. MOTOR DE AUDIO ---
function play(cola, volId = 'vol') {
  if (audioActual) {
    audioActual.pause();
    audioActual.currentTime = 0;
  }
  if (!cola || cola.length === 0) return;

  const item = cola.shift();
  const sonido = new Audio(`${item.file}?cb=${Date.now()}`);
  const slider = get(volId);
  sonido.volume = slider ? slider.value : 0.8;
  audioActual = sonido;

  sonido.onended = () => {
    if (item.gap && item.gap > 0) {
      setTimeout(() => play(cola, volId), item.gap);
    } else {
      play(cola, volId);
    }
  };

  sonido.play().catch(e => {
    console.warn("Audio no encontrado:", item.file);
    play(cola, volId); 
  });
}

// --- 2. INICIO Y MAPA ---
function inicializarMapa() {
  if (get('map') && !mapa) {
    mapa = L.map('map', { zoomControl: false }).setView([37.2614, -6.9447], 14);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(mapa);
    L.control.zoom({ position: 'bottomright' }).addTo(mapa);
  }
}

async function init() {
  try {
    const [resInt, resExt] = await Promise.all([
      fetch('data/lineas.json'), 
      fetch('data/exterior.json')
    ]);
    dbInt = await resInt.json();
    dbExt = await resExt.json();

    // Rellenar selector de línea INTERIOR (desde lineas.json)
    const lineasIntHTML = Object.keys(dbInt).map(id => 
      `<md-select-option value="${id}"><div slot="headline">${id}</div></md-select-option>`).join('');
    if (get('int-linea')) get('int-linea').innerHTML = lineasIntHTML;

    // Rellenar selector de línea EXTERIOR (desde exterior.json exclusivamente)
    // Esto arregla que no se lean las líneas L3, L3CE, etc.
    if (get('ext-linea')) {
      const lineasExtHTML = Object.keys(dbExt.lineas).map(id => 
        `<md-select-option value="${id}"><div slot="headline">${id}</div></md-select-option>`).join('');
      get('ext-linea').innerHTML = lineasExtHTML;
    }

    // Rellenar números de coche (Huelva)
    const coches = [...Array(20).keys()].map(i => i + 315).concat([...Array(10).keys()].map(i => i + 400));
    if (get('ext-coche')) {
      get('ext-coche').innerHTML = coches.map(c => 
        `<md-select-option value="${c}"><div slot="headline">${c}</div></md-select-option>`).join('');
    }

    inicializarMapa();
  } catch (e) { 
    console.error("Error cargando archivos JSON:", e); 
  } finally {
    get('loading-screen').style.display = 'none';
    get('app').style.display = 'flex';
    if (mapa) mapa.invalidateSize();
  }
}

// --- 3. LÓGICA DE INTERIOR ---
get('int-linea')?.addEventListener('change', (e) => {
  const linea = dbInt[e.target.value];
  if (linea && get('int-parada')) {
    get('int-parada').innerHTML = linea.paradas.map(p => 
      `<md-select-option value="${p.id}"><div slot="headline">${p.nombre}</div></md-select-option>`).join('');
    get('int-parada').disabled = false;
  }
});

get('btn-int')?.addEventListener('click', () => {
  const lId = get('int-linea').value;
  const pId = get('int-parada').value;
  if (!lId || !pId) return;

  const paradaData = dbInt[lId].paradas.find(p => p.id === pId);
  const tipo = document.querySelector('md-radio[name="tipo"][checked]')?.value || "actual";

  let cola = [
    { file: `audio/parada_${tipo}.wav`, gap: 150 },
    { file: `audio/${pId}.wav`, gap: 350 }
  ];

  if (paradaData.enlaces && paradaData.enlaces.length > 0) {
    if (paradaData.enlaces.includes("todas")) {
      cola.push({ file: `audio/correspondencia_todas_las_lineas.wav`, gap: 0 });
    } else {
      const enlacesFiltrados = paradaData.enlaces.filter(en => en !== lId);
      if (enlacesFiltrados.length > 0) {
        const esVarios = enlacesFiltrados.length > 1;
        cola.push({ file: `audio/correspondencia_linea${esVarios ? 's' : ''}.wav`, gap: 0 });
        cola.push({ file: `audio/lineas_${pId}_${lId}.wav`, gap: 400 });
      }
    }
  }

  if (get('chk-regulacion')?.checked) cola.push({ file: `audio/parada_regulacion.wav`, gap: 0 });
  play(cola, 'vol');
});

// --- 4. LÓGICA DE EXTERIOR ---

get('ext-linea')?.addEventListener('change', (e) => {
  const lineaId = e.target.value; // Ejemplo: "L3"
  // Buscamos directamente en el objeto lineas del exterior.json
  const datosLinea = dbExt.lineas[lineaId];
  const selDest = get('ext-destino');
  
  if (selDest && datosLinea) {
    selDest.innerHTML = datosLinea.destinos.map(d => 
      `<md-select-option value="${d}"><div slot="headline">${d}</div></md-select-option>`).join('');
    selDest.disabled = false;
  } else {
    if (selDest) {
      selDest.innerHTML = "";
      selDest.disabled = true;
    }
  }
});

get('btn-reproducir-ext')?.addEventListener('click', () => {
  const linea = get('ext-linea').value; // Ejemplo: "L1"
  const destino = get('ext-destino').value;
  const coche = get('ext-coche').value;

  if (!linea || !destino || !coche) {
    alert("Por favor, selecciona línea, destino y coche");
    return;
  }

  const destFile = destino.toLowerCase().replace(/ /g, "_");
  // Quitamos la 'L' para el nombre del audio si tus audios son "linea_1.wav"
  const lineaNum = linea.replace('L', '');

  play([
    { file: `audio/exterior/linea_${lineaNum}.wav`, gap: 100 },
    { file: `audio/exterior/autobus_${coche}.wav`, gap: 100 },
    { file: `audio/exterior/destino_${destFile}.wav`, gap: 0 }
  ], 'vol-ext');
});

// --- 5. BOTONES ESPECIALES ---
get('btn-abrir-exterior').onclick = () => get('dialog-exterior').show();
get('btn-colision').onclick = () => play([{ file: `audio/colision.wav` }]);
get('btn-hora').onclick = () => play([{ file: `audio/hora_salida.wav` }]);
get('btn-saldo').onclick = () => play([{ file: `audio/atencion_saldo.wav` }]);
get('btn-insuficiente').onclick = () => play([{ file: `audio/saldo_insuficiente.wav` }]);

init();