const preguntas = [
  {
    pregunta: "¿Cuál es la diferencia entre let y const?",
    opciones: [
      "No hay diferencia, son equivalentes",
      "let permite reasignar el valor, const no",
      "Depende del tipo de datos",
      "let solo funciona dentro de funciones"
    ],
    correcta: 1
  },
  {
    pregunta: "¿Qué retorna querySelector si no encuentra ningún elemento?",
    opciones: ["undefined", "false", "null", "0"],
    correcta: 2
  },
  {
    pregunta: "¿Qué hace el método filter?",
    opciones: [
      "Modifica los elementos del array original",
      "Retorna el primer elemento que cumple la condición",
      "Retorna un nuevo array con los elementos que cumplen la condición",
      "Elimina elementos duplicados del array"
    ],
    correcta: 2
  },
  {
    pregunta: "¿Cuál es el operador de igualdad estricta en JavaScript?",
    opciones: ["=", "==", "===", "!="],
    correcta: 2
  },
  {
    pregunta: "¿Para qué sirve event.preventDefault()?",
    opciones: [
      "Detiene la propagación del evento hacia elementos padre",
      "Evita el comportamiento por defecto del navegador",
      "Elimina el event listener del elemento",
      "Pausa la ejecución del código hasta que el evento termine"
    ],
    correcta: 1
  }
];

let indiceActual = 0;
let puntaje = 0;

const pantalla      = document.querySelector("#pantalla-quiz");
const resultadoEl   = document.querySelector("#resultado");
const preguntaEl    = document.querySelector("#pregunta");
const opcionesEl    = document.querySelector("#opciones");
const feedbackEl    = document.querySelector("#feedback");
const btnSiguiente  = document.querySelector("#siguiente");
const progresoEl    = document.querySelector("#progreso");
const progressFill  = document.querySelector("#progress-fill");
const puntajeNumEl  = document.querySelector("#puntaje-num");
const resultadoMsg  = document.querySelector("#resultado-msg");
const btnReiniciar  = document.querySelector("#reiniciar");

function mensajeFinal(p, total) {
  if (p === total) return "¡Perfecto! Todo bien.";
  if (p >= total * 0.8) return "¡Muy bien!";
  if (p >= total * 0.6) return "Bien, pero hay margen para mejorar.";
  return "Vale la pena repasar los temas.";
}

function mostrarPregunta() {
  const actual = preguntas[indiceActual];

  // Actualizamos el encabezado y la barra de progreso.
  progresoEl.textContent = `${indiceActual + 1} / ${preguntas.length}`;
  progressFill.style.width = `${(indiceActual / preguntas.length) * 100}%`;

  preguntaEl.textContent = actual.pregunta;
  opcionesEl.innerHTML = "";
  feedbackEl.textContent = "";
  btnSiguiente.style.display = "none";

  for (let i = 0; i < actual.opciones.length; i++) {
    const boton = document.createElement("button");
    boton.className = "opcion";
    boton.textContent = actual.opciones[i];
    boton.addEventListener("click", () => responder(i));
    opcionesEl.appendChild(boton);
  }
}

function responder(indiceRespuesta) {
  const actual  = preguntas[indiceActual];
  const botones = opcionesEl.querySelectorAll(".opcion");

  // Deshabilitamos todos los botones para que no se pueda responder dos veces.
  for (const boton of botones) {
    boton.disabled = true;
  }

  if (indiceRespuesta === actual.correcta) {
    botones[indiceRespuesta].classList.add("correcta");
    feedbackEl.textContent = "¡Correcto!";
    puntaje++;
  } else {
    botones[indiceRespuesta].classList.add("incorrecta");
    botones[actual.correcta].classList.add("correcta");
    feedbackEl.textContent = `Incorrecto. La correcta era: "${actual.opciones[actual.correcta]}"`;
  }

  btnSiguiente.style.display = "inline-block";
}

btnSiguiente.addEventListener("click", () => {
  indiceActual++;

  if (indiceActual < preguntas.length) {
    mostrarPregunta();
  } else {
    // Actualizamos la barra al 100% antes de mostrar el resultado.
    progressFill.style.width = "100%";

    pantalla.style.display    = "none";
    resultadoEl.style.display = "block";
    puntajeNumEl.textContent  = `${puntaje} / ${preguntas.length}`;
    resultadoMsg.textContent  = mensajeFinal(puntaje, preguntas.length);
  }
});

btnReiniciar.addEventListener("click", () => {
  indiceActual = 0;
  puntaje      = 0;
  resultadoEl.style.display = "none";
  pantalla.style.display    = "block";
  mostrarPregunta();
});

mostrarPregunta();