<?php
require_once 'includes/validar_sesion.php';
require_once 'config/conexion.php';

$stmt = $pdo->query("SELECT * FROM preguntas ORDER BY numero_original ASC");
$preguntas = $stmt->fetchAll();
$total_preguntas = count($preguntas);
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modo Repaso - Tarjetas de Estudio</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style> 
        body { background-color: #f4f6f9; } 
        .pregunta-card { border-top: 4px solid #198754; } /* Borde Verde para repaso */
        .img-senal { max-height: 150px; object-fit: contain; border-radius: 5px; }
        .paso-pregunta { display: none; }
        .opcion-correcta { background-color: #d1e7dd; border-color: #badbcc; color: #0f5132; }
    </style>
</head>
<body>

<nav class="navbar navbar-dark bg-dark mb-4 shadow-sm">
    <div class="container d-flex justify-content-between align-items-center">
        <a class="navbar-brand text-white fs-6" href="dashboard.php">⬅ Volver al Menú</a>
        <span class="text-success fw-bold small" id="texto-progreso">Cargando...</span>
    </div>
</nav>

<div class="container pb-5">
    <div class="row justify-content-center">
        <div class="col-lg-6 col-md-8">

            <?php foreach ($preguntas as $index => $pregunta): ?>
                <div class="paso-pregunta" id="paso-<?= $index ?>">
                    <div class="card shadow-sm mb-4 pregunta-card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between mb-3">
                                <h5 class="card-title fw-bold m-0">Pregunta #<?= $pregunta['numero_original'] ?></h5>
                                <span class="badge bg-success">Respuesta Visible</span>
                            </div>
                            
                            <p class="fs-5 fw-medium"><?= htmlspecialchars($pregunta['texto_pregunta']) ?></p>
                            
                            <?php if (!empty($pregunta['imagen_url'])): ?>
                                <div class="my-3 text-center">
                                    <img src="<?= htmlspecialchars($pregunta['imagen_url']) ?>" alt="Señal" class="img-senal border p-1 shadow-sm">
                                </div>
                            <?php endif; ?>
                            
                            <div class="mt-4">
                                <?php
                                $stmtAlt = $pdo->prepare("SELECT * FROM alternativas WHERE pregunta_id = ? ORDER BY letra ASC");
                                $stmtAlt->execute([$pregunta['id']]);
                                $alternativas = $stmtAlt->fetchAll();
                                
                                foreach ($alternativas as $alt): 
                                    $es_correcta = ($alt['letra'] === $pregunta['respuesta_correcta']);
                                    $clase_bg = $es_correcta ? 'opcion-correcta shadow-sm fw-bold' : 'bg-light text-muted';
                                ?>
                                    <div class="p-3 mb-2 border rounded <?= $clase_bg ?>">
                                        <strong><?= strtoupper($alt['letra']) ?>)</strong> <?= htmlspecialchars($alt['texto']) ?>
                                        <?= $es_correcta ? ' <span class="badge bg-success float-end">✓ CORRECTA</span>' : '' ?>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>

            <div class="d-flex justify-content-between mt-3">
                <button type="button" class="btn btn-secondary" id="btn-anterior">⬅ Anterior</button>
                <button type="button" class="btn btn-success fw-bold px-4 shadow" id="btn-siguiente">Siguiente ➡</button>
                <a href="dashboard.php" class="btn btn-dark fw-bold px-4 shadow" id="btn-terminar" style="display:none;">Terminar Repaso</a>
            </div>

        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        let pasoActual = 0;
        const totalPasos = <?= $total_preguntas ?>;
        const pasos = document.querySelectorAll('.paso-pregunta');
        const btnAnterior = document.getElementById('btn-anterior');
        const btnSiguiente = document.getElementById('btn-siguiente');
        const btnTerminar = document.getElementById('btn-terminar');
        const textoProgreso = document.getElementById('texto-progreso');

        function mostrarPaso(indice) {
            pasos.forEach((paso, i) => { paso.style.display = (i === indice) ? 'block' : 'none'; });

            btnAnterior.style.display = (indice === 0) ? 'none' : 'inline-block';
            
            if (indice === totalPasos - 1) {
                btnSiguiente.style.display = 'none';
                btnTerminar.style.display = 'inline-block';
            } else {
                btnSiguiente.style.display = 'inline-block';
                btnTerminar.style.display = 'none';
            }
            textoProgreso.innerText = `Tarjeta ${indice + 1} de ${totalPasos}`;
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }

        btnSiguiente.addEventListener('click', function() {
            pasoActual++; mostrarPaso(pasoActual);
        });

        btnAnterior.addEventListener('click', function() {
            pasoActual--; mostrarPaso(pasoActual);
        });

        mostrarPaso(pasoActual);
    });
</script>
</body>
</html>