const selector = document.getElementById("selector");
const quiz = document.getElementById("quiz");
const resultado = document.getElementById("resultado");

let preguntasCargadas = []; // aquí guardamos el JSON cargado

// --- CARGAR EXAMEN ---
selector.addEventListener("change", async () => {
  const url = selector.value;
  if (!url) return;

  preguntasCargadas = await fetch(url).then(r => r.json());
  mostrarPreguntas(preguntasCargadas); // modo examen normal
});

// --- MOSTRAR TODAS LAS PREGUNTAS ---
function mostrarPreguntas(preguntas) {
  quiz.innerHTML = "";
  document.getElementById("pregunta-actual").innerHTML = "";
  document.getElementById("feedback").textContent = "";

  preguntas.forEach(p => {
    const div = document.createElement("div");
    div.className = "pregunta";

    div.innerHTML = `
      <p><strong>${p.id}.</strong> ${p.pregunta}</p>
      ${Object.entries(p.opciones).map(([letra, texto]) => `
        <label class="opcion">
          <input type="radio" name="p${p.id}" value="${letra}">
          ${letra}) ${texto}
        </label>
      `).join("")}
    `;

    quiz.appendChild(div);
  });

  document.getElementById("corregir").onclick = () => corregir(preguntas);
}

// --- CORREGIR EXAMEN COMPLETO ---
function corregir(preguntas) {
  let aciertos = 0;

  preguntas.forEach(p => {
    const marcada = document.querySelector(`input[name="p${p.id}"]:checked`);
    if (marcada && marcada.value === p.correcta) aciertos++;
  });

  resultado.textContent = `Has acertado ${aciertos} de ${preguntas.length}.`;
}

// --- MODO PREGUNTA ALEATORIA ---
document.getElementById("aleatoria").addEventListener("click", () => {
  if (preguntasCargadas.length === 0) {
    alert("Primero selecciona un examen");
    return;
  }

  const pregunta = preguntasCargadas[Math.floor(Math.random() * preguntasCargadas.length)];
  mostrarPreguntaAleatoria(pregunta);
});

// --- MOSTRAR UNA PREGUNTA ALEATORIA ---
function mostrarPreguntaAleatoria(p) {
  quiz.innerHTML = ""; // ocultamos el examen completo
  resultado.textContent = "";

  const cont = document.getElementById("pregunta-actual");
  const feedback = document.getElementById("feedback");
  feedback.textContent = "";

  cont.innerHTML = `
    <div class="pregunta">
      <p><strong>${p.id}.</strong> ${p.pregunta}</p>
      ${Object.entries(p.opciones).map(([letra, texto]) => `
        <label class="opcion">
          <input type="radio" name="respuesta" value="${letra}">
          ${letra}) ${texto}
        </label>
      `).join("")}
      <button id="comprobar">Comprobar</button>
    </div>
  `;

  document.getElementById("comprobar").onclick = () => {
    const marcada = document.querySelector(`input[name="respuesta"]:checked`);
    if (!marcada) {
      feedback.textContent = "Selecciona una respuesta";
      return;
    }

    if (marcada.value === p.correcta) {
      feedback.textContent = "✔ ¡Correcto!";
      feedback.style.color = "green";
    } else {
      feedback.textContent = `✘ Incorrecto. La correcta era: ${p.correcta}`;
      feedback.style.color = "red";
    }
  };
}