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;
let marcadoresActuales = []; // Para limpiar el mapa al cambiar de línea
let rutaActual = null;       // Para limpiar la línea trazada

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. LÓGICA DEL MAPA ---
function inicializarMapa() {
  const mapContainer = get('map');
  if (mapContainer && !mapa) {
    mapa = L.map('map', { 
      zoomControl: false,
      attributionControl: 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);
  }
}

function actualizarMapa(paradas) {
  // 1. Limpiar elementos previos
  marcadoresActuales.forEach(m => mapa.removeLayer(m));
  marcadoresActuales = [];
  if (rutaActual) mapa.removeLayer(rutaActual);

  const puntos = [];

  // 2. Crear nuevos marcadores
  paradas.forEach(p => {
    if (p.coords) {
      const marker = L.circleMarker(p.coords, {
        radius: 8,
        fillColor: "#6d5e00",
        color: "#ffffff",
        weight: 2,
        opacity: 1,
        fillOpacity: 0.8
      }).addTo(mapa).bindPopup(`<b>${p.nombre}</b>`);

      marcadoresActuales.push(marker);
      puntos.push(p.coords);
    }
  });

  // 3. Dibujar la línea de trayecto
  if (puntos.length > 0) {
    rutaActual = L.polyline(puntos, {
      color: '#6d5e00',
      weight: 4,
      opacity: 0.6,
      dashArray: '10, 10'
    }).addTo(mapa);

    // 4. Ajustar vista para que quepa toda la línea
    mapa.fitBounds(L.latLngBounds(puntos), { padding: [50, 50] });
  }
}

// --- 3. INICIO Y CARGA DE DATOS ---
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
    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
    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';
    setTimeout(() => { if (mapa) mapa.invalidateSize(); }, 250);
  }
}

// --- 4. EVENTOS PANEL 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;
    
    // Actualizar Waypoints en el mapa
    actualizarMapa(linea.paradas);
  }
});

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";

  // Mover el mapa a la parada anunciada
  if (paradaData.coords) {
    mapa.flyTo(paradaData.coords, 16);
  }

  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');
});

// --- 5. EVENTOS PANEL EXTERIOR ---
get('btn-abrir-exterior').onclick = () => get('dialog-exterior').show();

get('ext-linea')?.addEventListener('change', (e) => {
  const lineaId = e.target.value;
  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;
  }
});

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

  if (!linea || !destino || !coche) return;

  const destFile = destino.toLowerCase().replace(/ /g, "_");
  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');
});

// --- 6. BOTONES ESPECIALES ---
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();