const selector = document.getElementById("selector");
const quiz = document.getElementById("quiz");
const resultado = document.getElementById("resultado");
const feedback = document.getElementById("feedback");
const preguntaActualContenedor = document.getElementById("pregunta-actual");

let preguntasCargadas = [];
let estado = {
    indiceActual: 0,
    aciertos: 0,
    fallos: 0
};

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

    const datos = await fetch(url).then(r => r.json());
    // Ajustamos por si el JSON viene con una propiedad .preguntas o es un array directo
    preguntasCargadas = datos.preguntas || datos; 
    
    reiniciarEstadisticas();
    mostrarSiguientePregunta();
});

function reiniciarEstadisticas() {
    estado.indiceActual = 0;
    estado.aciertos = 0;
    estado.fallos = 0;
    quiz.innerHTML = ""; // Limpiamos el modo "lista completa"
    resultado.textContent = "";
}

// --- MOSTRAR UNA POR UNA ---
function mostrarSiguientePregunta() {
    feedback.textContent = "";
    
    if (estado.indiceActual >= preguntasCargadas.length) {
        finalizarExamen();
        return;
    }

    const p = preguntasCargadas[estado.indiceActual];
    actualizarMarcador();

    preguntaActualContenedor.innerHTML = `
        <div class="pregunta">
            <p><strong>Pregunta ${estado.indiceActual + 1} de ${preguntasCargadas.length}</strong></p>
            <p>${p.pregunta}</p>
            ${Object.entries(p.opciones).map(([letra, texto]) => `
                <label class="opcion">
                    <input type="radio" name="respuesta" value="${letra}">
                    ${letra}) ${texto}
                </label>
            `).join("")}
            <br>
            <button id="comprobar">Comprobar y Siguiente</button>
        </div>
    `;

    document.getElementById("comprobar").onclick = () => validarRespuesta(p);
}

function validarRespuesta(p) {
    const marcada = document.querySelector(`input[name="respuesta"]:checked`);
    
    if (!marcada) {
        feedback.textContent = "⚠️ Por favor, selecciona una opción.";
        feedback.style.color = "orange";
        return;
    }

    if (marcada.value === p.correcta) {
        estado.aciertos++;
        alert("✔ ¡Correcto!"); // Opcional, puedes usar el div feedback
    } else {
        estado.fallos++;
        alert(`✘ Incorrecto. La respuesta era la ${p.correcta.toUpperCase()}`);
    }

    estado.indiceActual++;
    mostrarSiguientePregunta();
}

function actualizarMarcador() {
    // Calculamos la puntuación estilo TAI (Aciertos - Fallos/3)
    const puntos = (estado.aciertos - (estado.fallos / 3)).toFixed(2);
    resultado.innerHTML = `
        <div>
            Aciertos: <span style="color: green">${estado.aciertos}</span> | 
            Fallos: <span style="color: red">${estado.fallos}</span> | 
            <strong>Puntuación neta: ${puntos}</strong>
        </div>
    `;
}

function finalizarExamen() {
    preguntaActualContenedor.innerHTML = "<h2>¡Examen finalizado!</h2>";
    const notaFinal = ((estado.aciertos - (estado.fallos / 3)) / preguntasCargadas.length * 10).toFixed(2);
    
    resultado.innerHTML = `
        <div style="font-size: 1.2em; border: 2px solid #333; padding: 20px;">
            <h3>Resumen Final:</h3>
            <p>Aciertos: ${estado.aciertos}</p>
            <p>Fallos: ${estado.fallos}</p>
            <p>Nota sobre 10: <strong>${notaFinal}</strong></p>
        </div>
    `;
}