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;

  // 🔹 Cargar materias
  fetch('get_materias.php')
    .then(response => response.text())
    .then(data => {
      selectMaterias.innerHTML += data;
    });

  // 🔹 Limpiar numeración tipo "45. pregunta" => "pregunta"
  function limpiarPregunta(texto) {
    return texto.replace(/^\s*\d+\.\s*/, '');
  }

  // 🔹 Leer con voz centralizada
  function leerPregunta() {
    if (!speaking || indice >= preguntas.length) return;

    const p = preguntas[indice];
    const correcta = parseInt(p.correcta_rpta);
    const preguntaLimpia = limpiarPregunta(p.pregunta);
    const texto = `Pregunta ${indice + 1}: ${preguntaLimpia}. Respuesta correcta: ${p["opcion" + correcta]}`;

    // 🟢 Mostrar en pantalla
    const divPregunta = document.getElementById('pregunta-actual');
    if (divPregunta) {
      divPregunta.textContent = texto;
    }

    // 🗣️ Leer la pregunta con callback
    leerTexto(texto, () => {
      indice++;
      if (indice < preguntas.length) {
        progreso.value = indice;
        progresoTexto.textContent = `${indice + 1} / ${preguntas.length}`;
        guardarProgreso();
        leerPregunta();
      } else {
        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)
  btnVoz.addEventListener('click', () => {
    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 en esta materia. ¿Deseas continuar desde la pregunta ${guardado + 1} ?`,
          icon: 'question',
          showCancelButton: true,
          confirmButtonText: 'Sí, continuar',
          cancelButtonText: 'No, empezar de nuevo',
          width: '400px'
        }).then((result) => {
          indice = result.isConfirmed ? guardado : 0;
          iniciarLectura(materia);
        });
      } else {
        indice = 0;
        iniciarLectura(materia);
      }
    } else {
      speaking = false;
      window.speechSynthesis.cancel();
      habilitarControles();
      actualizarBotonReproduccion();
    }
  });

  // 🔹 Función que arranca la lectura
  function iniciarLectura(materia) {
    fetch(`obtener_preguntasM2.php?materia_id=${materia}`)
      .then(res => res.json())
      .then(data => {
        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();
      });
  }

  // 🔹 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}`;
        });
    } else {
      progresoTexto.textContent = `0 / 0`;
      progreso.value = 0;
      progreso.max = 0;
    }
  });

  // 🔹 Mostrar archivo MSA
  btnVerMSA.addEventListener('click', () => {
    const rutaMSA = 'doc_pdf/MSA 2025.pdf';
    pdfFrame.src = rutaMSA;
    visorPdf.style.display = 'block';
  });
});
