{% extends "base.html" %}

{% block title %}Modo Práctica - Balotario Licencia A-I{% endblock %}

{% block content %}
<div class="text-center mb-4">
    <h2 class="fw-bold text-success">
        <i class="fas fa-dumbbell me-2"></i>
        Modo Práctica
    </h2>
    <p class="text-muted">Practica con preguntas aleatorias y recibe retroalimentación inmediata</p>
</div>

<div class="row mb-4">
    <div class="col-md-8">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="mb-0">Configuración de Práctica</h6>
                    <button class="btn btn-sm btn-outline-success" id="new-session">
                        <i class="fas fa-refresh me-1"></i>Nueva Sesión
                    </button>
                </div>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Número de preguntas:</label>
                        <select class="form-select" id="question-count">
                            <option value="10">10 preguntas</option>
                            <option value="20" selected>20 preguntas</option>
                            <option value="30">30 preguntas</option>
                            <option value="50">50 preguntas</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">&nbsp;</label>
                        <button class="btn btn-success w-100" id="start-practice">
                            <i class="fas fa-play me-1"></i>Comenzar Práctica
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card stats-enhanced">
            <div class="card-body text-center position-relative">
                <h6 class="text-white mb-3">Estadísticas de Sesión</h6>
                <div class="row g-2">
                    <div class="col-6 col-sm-4">
                        <div class="stats-number" id="session-correct">0</div>
                        <small class="d-block">Correctas</small>
                    </div>
                    <div class="col-6 col-sm-4">
                        <div class="stats-number" id="session-incorrect">0</div>
                        <small class="d-block">Incorrectas</small>
                    </div>
                    <div class="col-12 col-sm-4">
                        <div class="stats-number" id="session-accuracy">0%</div>
                        <small class="d-block">Precisión</small>
                    </div>
                </div>
                <div class="mt-3">
                    <div class="progress" style="height: 8px;">
                        <div class="progress-bar bg-light" id="session-progress" style="width: 0%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="loading" class="loading">
    <div class="spinner"></div>
</div>

<div id="practice-content" style="display: none;">
    <div class="question-card fade-in" id="question-container">
        <!-- Question content is loaded here -->
    </div>

    <div class="d-flex justify-content-between mt-4">
        <div>
            <span class="badge bg-primary fs-6" id="question-counter">1 de 20</span>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-outline-secondary" id="skip-question">
                <i class="fas fa-forward me-2"></i>Saltar
            </button>
            <button class="btn btn-success" id="next-question" style="display: none;">
                Siguiente<i class="fas fa-chevron-right ms-2"></i>
            </button>
        </div>
    </div>
</div>

<div id="practice-complete" class="text-center" style="display: none;">
    <div class="card">
        <div class="card-body">
            <i class="fas fa-trophy fa-4x text-warning mb-4"></i>
            <h3 class="mb-3">¡Práctica Completada!</h3>
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="row text-center mb-4">
                        <div class="col-4">
                            <h4 class="text-success" id="final-correct">0</h4>
                            <p class="mb-0">Correctas</p>
                        </div>
                        <div class="col-4">
                            <h4 class="text-danger" id="final-incorrect">0</h4>
                            <p class="mb-0">Incorrectas</p>
                        </div>
                        <div class="col-4">
                            <h4 class="text-primary" id="final-accuracy">0%</h4>
                            <p class="mb-0">Precisión</p>
                        </div>
                    </div>
                    <div class="progress mb-4" style="height: 20px;">
                        <div class="progress-bar bg-success" id="final-progress" style="width: 0%"></div>
                    </div>
                    <div class="d-flex gap-2 justify-content-center">
                        <button class="btn btn-success" id="practice-again">
                            <i class="fas fa-redo me-2"></i>Practicar de Nuevo
                        </button>
                        <a href="/" class="btn btn-outline-primary">
                            <i class="fas fa-home me-2"></i>Volver al Inicio
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="welcome-message" class="text-center">
    <div class="card">
        <div class="card-body">
            <i class="fas fa-play-circle fa-4x text-success mb-4"></i>
            <h4>¡Listo para Practicar!</h4>
            <p class="text-muted">Configura tu sesión de práctica y comienza a responder preguntas aleatorias.</p>
            <p class="small text-muted">
                <i class="fas fa-lightbulb me-1"></i>
                Tip: Recibirás retroalimentación inmediata después de cada respuesta.
            </p>
        </div>
    </div>
</div>

<style>
/* Mobile-specific improvements for session statistics */
@media (max-width: 576px) {
    .stats-enhanced .card-body {
        padding: 1rem 0.75rem;
    }

    .stats-enhanced h6 {
        font-size: 0.9rem;
        margin-bottom: 1rem !important;
    }

    .stats-number {
        font-size: 1.5rem !important;
        font-weight: bold;
        line-height: 1.2;
        margin-bottom: 0.25rem;
    }

    .stats-enhanced small {
        font-size: 0.75rem;
        opacity: 0.9;
        line-height: 1.1;
    }

    .stats-enhanced .row {
        margin: 0 -0.25rem;
    }

    .stats-enhanced .row > div {
        padding: 0.5rem 0.25rem;
    }

    /* Better spacing for the accuracy stat when it's full width */
    .stats-enhanced .col-12 {
        margin-top: 0.5rem;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(255,255,255,0.2);
    }
}

/* Tablet improvements */
@media (min-width: 577px) and (max-width: 768px) {
    .stats-enhanced .stats-number {
        font-size: 1.75rem;
        font-weight: bold;
    }

    .stats-enhanced small {
        font-size: 0.8rem;
    }
}

/* General stats number styling */
.stats-number {
    font-size: 2rem;
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
</style>
{% endblock %}

{% block scripts %}
<script>
// Practice mode is now handled by the PracticeMode module
// The module auto-initializes when the DOM is ready
console.log('Practice mode template loaded - using modular JavaScript');
</script>
{% endblock %}