document.addEventListener('DOMContentLoaded', () => {
    const selectMaterias = document.getElementById('materias');
    const btnVoz = document.getElementById('btn-voz');
    const progreso = document.getElementById('progreso');
    const progresoTexto = document.getElementById('progreso-texto');
    const btnVerPDF = document.getElementById('btn-ver-pdf');
    const visorPdf = document.getElementById('visor-pdf');
    const pdfFrame = document.getElementById('pdf-frame');
    const btnCerrarPDF = document.getElementById('cerrar-pdf');
    const btnVerMSA = document.getElementById('btn-ver-msa');
  
    let preguntas = [];
    let indice = 0;
    let speaking = false;
  
    console.log('🔧 Elementos encontrados:');
    console.log('- Selector materias:', selectMaterias ? 'Sí' : 'No');
    console.log('- Botón voz:', btnVoz ? 'Sí' : 'No');
    console.log('- Progreso:', progreso ? 'Sí' : 'No');
    console.log('- Función leerTexto disponible:', typeof leerTexto === 'function' ? 'Sí' : 'No');
  
    // 🔹 Cargar materias
    fetch('get_materias.php')
      .then(response => response.text())
      .then(data => {
        selectMaterias.innerHTML += data;
        console.log('✅ Materias cargadas');
      })
      .catch(err => console.error('❌ Error al cargar materias:', err));
  
    // 🔹 Limpiar numeración tipo "45. pregunta" => "pregunta"
    function limpiarPregunta(texto) {
      return texto.replace(/^\s*\d+\.\s*/, '');
    }
  
    // ✅ FUNCIÓN ACTUALIZADA: Construir pregunta completa CON SOPORTE DE IMÁGENES
    function construirPreguntaCompleta(pregunta) {
      let textoCompleto = pregunta.pregunta || '';
      
      if (pregunta.pregunta_a && pregunta.pregunta_a.trim() !== '') {
        textoCompleto += ' ' + pregunta.pregunta_a.trim();
      }
      
      if (pregunta.pregunta_b && pregunta.pregunta_b.trim() !== '') {
        textoCompleto += ' ' + pregunta.pregunta_b.trim();
      }
      
      return textoCompleto;
    }
  
    // ✅ FUNCIÓN NUEVA: Generar HTML para imágenes
    function generarHTMLImagenes(pregunta) {
      let imagenesHTML = '';
      
      // Imagen principal
      if (pregunta.imagen_pregunta && pregunta.imagen_pregunta.trim() !== '') {
        imagenesHTML += `
          <div class="pregunta-imagen-audio">
            <img src="${pregunta.imagen_pregunta}" 
                 alt="Imagen de la pregunta" 
                 class="img-pregunta-audio"
                 onerror="this.style.display='none'">
          </div>`;
      }
      
      // Imagen A
      if (pregunta.imagen_pregunta_a && pregunta.imagen_pregunta_a.trim() !== '') {
        imagenesHTML += `
          <div class="pregunta-imagen-audio">
            <img src="${pregunta.imagen_pregunta_a}" 
                 alt="Imagen de la pregunta A" 
                 class="img-pregunta-audio"
                 onerror="this.style.display='none'">
          </div>`;
      }
      
      // Imagen B
      if (pregunta.imagen_pregunta_b && pregunta.imagen_pregunta_b.trim() !== '') {
        imagenesHTML += `
          <div class="pregunta-imagen-audio">
            <img src="${pregunta.imagen_pregunta_b}" 
                 alt="Imagen de la pregunta B" 
                 class="img-pregunta-audio"
                 onerror="this.style.display='none'">
          </div>`;
      }
      
      return imagenesHTML;
    }
  
    // ✅ FUNCIÓN ACTUALIZADA: Leer con voz centralizada + MOSTRAR SEPARADO
    function leerPregunta() {
      if (!speaking || indice >= preguntas.length) {
        console.log('⏸️ Lectura detenida o completada');
        return;
      }
  
      const p = preguntas[indice];
      const correcta = parseInt(p.correcta_rpta);
      
      // Construir pregunta completa (texto)
      const preguntaCompleta = construirPreguntaCompleta(p);
      const preguntaLimpia = limpiarPregunta(preguntaCompleta);
      
      // Obtener respuesta correcta
      const respuestaTexto = p["opcion" + correcta] || 'Sin respuesta';
      
      // ✅ TEXTO COMPLETO PARA LECTURA (sin cambios en la funcionalidad)
      const textoParaLeer = `Pregunta ${indice + 1}: ${preguntaLimpia}. Respuesta correcta: ${respuestaTexto}`;
  
      // ✅ SEPARAR VISUALMENTE PREGUNTA Y RESPUESTA
      const divPreguntaTexto = document.querySelector('.pregunta-texto');
      const divRespuesta = document.getElementById('respuesta-actual');
      
      if (divPreguntaTexto && divRespuesta) {
        // Generar HTML de imágenes
        const imagenesHTML = generarHTMLImagenes(p);
        
        // Mostrar pregunta con imágenes
        divPreguntaTexto.innerHTML = `
          <div class="numero-pregunta">Pregunta ${indice + 1}:</div>
          <div class="texto-pregunta">${preguntaLimpia}</div>
          ${imagenesHTML}
        `;
        
        // Mostrar respuesta separada
        divRespuesta.innerHTML = `<strong>Respuesta correcta:</strong> ${respuestaTexto}`;
        divRespuesta.style.display = 'block';
      }
  
      console.log(`📖 Leyendo pregunta ${indice + 1}/${preguntas.length}`);
  
      // ✅ LEER TEXTO COMPLETO (sin cambios)
      leerTexto(textoParaLeer, () => {
        indice++;
        if (indice < preguntas.length) {
          progreso.value = indice;
          progresoTexto.textContent = `${indice + 1} / ${preguntas.length}`;
          guardarProgreso();
          leerPregunta();
        } else {
          console.log('✅ Lectura completa');
          speaking = false;
          habilitarControles();
          actualizarBotonReproduccion();
        }
      });
    }
  
    // 🔹 Guardar progreso por materia
    function guardarProgreso() {
      const materia = selectMaterias.value;
      if (materia) {
        localStorage.setItem(`progreso_${materia}`, indice);
      }
    }
  
    // 🔹 Obtener progreso guardado
    function obtenerProgreso(materia) {
      return parseInt(localStorage.getItem(`progreso_${materia}`)) || 0;
    }
  
    // 🔹 Deshabilitar controles durante lectura
    function deshabilitarControles() {
      selectMaterias.disabled = true;
      btnVoz.disabled = false;
    }
  
    // 🔹 Habilitar controles después de lectura
    function habilitarControles() {
      selectMaterias.disabled = false;
      btnVoz.disabled = false;
    }
  
    // 🔹 Cambiar texto y color del botón
    function actualizarBotonReproduccion() {
      if (speaking) {
        btnVoz.textContent = "Stop";
        btnVoz.classList.remove("azul");
        btnVoz.classList.add("rojo");
      } else {
        btnVoz.textContent = "Play";
        btnVoz.classList.remove("rojo");
        btnVoz.classList.add("azul");
      }
    }
  
    // 🔹 Click en el botón (Play / Stop) - CON VALIDACIÓN
    btnVoz?.addEventListener('click', () => {
      console.log('🔘 Botón clickeado. Speaking:', speaking);
      
      if (!speaking) {
        const materia = selectMaterias.value;
        if (!materia) {
          Swal.fire({
            icon: 'warning',
            title: 'Seleccione una materia',
            text: 'Debe seleccionar una materia antes de reproducir el audio.',
            width: '400px'
          });
          return;
        }
  
        const guardado = obtenerProgreso(materia);
        if (guardado > 0) {
          Swal.fire({
            title: 'Progreso guardado',
            text: `Tienes un avance guardado. ¿Deseas continuar desde la pregunta ${guardado + 1}?`,
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Sí, continuar',
            cancelButtonText: 'No, reiniciar',
            width: '400px'
          }).then((result) => {
            indice = result.isConfirmed ? guardado : 0;
            iniciarLectura(materia);
          });
        } else {
          indice = 0;
          iniciarLectura(materia);
        }
      } else {
        console.log('⏹️ Deteniendo lectura');
        speaking = false;
        window.speechSynthesis.cancel();
        habilitarControles();
        actualizarBotonReproduccion();
      }
    });
  
    // 🔹 Función que arranca la lectura
    function iniciarLectura(materia) {
      console.log('🚀 Iniciando lectura para materia:', materia);
      
      fetch(`obtener_preguntasM2.php?materia_id=${materia}`)
        .then(res => res.json())
        .then(data => {
          console.log('📦 Preguntas recibidas:', data.length);
          
          if (!data.length) {
            Swal.fire({
              icon: 'error',
              title: 'Sin preguntas',
              text: 'No hay preguntas disponibles para esta materia.',
              width: '400px'
            });
            return;
          }
  
          preguntas = data;
          speaking = true;
  
          progreso.max = preguntas.length - 1;
          progreso.value = indice;
          progreso.disabled = false;
          progresoTexto.textContent = `${indice + 1} / ${preguntas.length}`;
  
          deshabilitarControles();
          actualizarBotonReproduccion();
          leerPregunta();
        })
        .catch(error => {
          console.error('❌ Error al cargar preguntas:', error);
          Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'Hubo un problema al cargar las preguntas.',
            width: '400px'
          });
        });
    }
  
    // 🔹 Cambiar valor con la barra de progreso
    progreso?.addEventListener('input', () => {
      indice = parseInt(progreso.value);
      progresoTexto.textContent = `${indice + 1} / ${preguntas.length}`;
      guardarProgreso();
      if (speaking) {
        window.speechSynthesis.cancel();
        leerPregunta();
      }
    });
  
    // 🔹 Mostrar PDF
    btnVerPDF?.addEventListener('click', () => {
      const materia = selectMaterias.value;
      if (!materia) {
        Swal.fire({
          icon: 'warning',
          title: 'Seleccione una materia',
          text: 'Debe seleccionar una materia para visualizar el PDF.',
          width: '400px'
        });
        return;
      }
  
      const rutaPDF = `doc_pdf/${materia}.pdf`;
      pdfFrame.src = rutaPDF;
      visorPdf.style.display = 'block';
    });
  
    // 🔹 Cerrar visor PDF
    btnCerrarPDF?.addEventListener('click', () => {
      visorPdf.style.display = 'none';
      pdfFrame.src = '';
    });
  
    // 🔹 Cambiar de materia: actualizar PDF y progreso
    selectMaterias?.addEventListener('change', () => {
      const materia = selectMaterias.value;
  
      if (visorPdf.style.display === 'block' && materia) {
        const nuevaRuta = `doc_pdf/${materia}.pdf`;
        pdfFrame.src = nuevaRuta;
      }
  
      if (materia) {
        fetch(`obtener_preguntasM2.php?materia_id=${materia}`)
          .then(res => res.json())
          .then(data => {
            const totalPreguntas = data.length;
            progreso.max = totalPreguntas - 1;
            progreso.value = 0;
            progresoTexto.textContent = `0 / ${totalPreguntas}`;
          })
          .catch(error => {
            console.error('Error al cargar información de la materia:', error);
          });
      } else {
        progresoTexto.textContent = `0 / 0`;
        progreso.value = 0;
        progreso.max = 0;
      }
    });
  
    // 🔹 Mostrar archivo MSA (solo si el botón existe)
    btnVerMSA?.addEventListener('click', () => {
      const rutaMSA = 'doc_pdf/MSA 2025.pdf';
      pdfFrame.src = rutaMSA;
      visorPdf.style.display = 'block';
    });
  });