{% extends "base.html" %}

{% block content %}
<div class="text-center mb-5">
    <h1 class="display-4 fw-bold text-primary mb-3">
        <i class="fas fa-graduation-cap me-3"></i>
        Balotario Licencia Clase A - Categoría I
    </h1>
    <p class="lead text-muted">Prepárate para tu examen de manejo con {{ total_questions }} preguntas oficiales del MTC
    </p>
</div>

<div class="row g-4">
    <div class="col-md-6 col-lg-3">
        <div class="card h-100 text-center">
            <div class="card-body d-flex flex-column">
                <div class="mb-3">
                    <i class="fas fa-book fa-3x text-primary"></i>
                </div>
                <h5 class="card-title">Modo Estudio</h5>
                <p class="card-text flex-grow-1">
                    Revisa todas las preguntas con sus respuestas correctas. Perfecto para aprender.
                </p>
                <a href="/study" class="btn btn-primary">
                    <i class="fas fa-play me-2"></i>Comenzar a Estudiar
                </a>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-3">
        <div class="card h-100 text-center">
            <div class="card-body d-flex flex-column">
                <div class="mb-3">
                    <i class="fas fa-dumbbell fa-3x text-success"></i>
                </div>
                <h5 class="card-title">Modo Práctica</h5>
                <p class="card-text flex-grow-1">
                    Practica con preguntas aleatorias y recibe retroalimentación inmediata.
                </p>
                <a href="/practice" class="btn btn-success">
                    <i class="fas fa-play me-2"></i>Practicar Ahora
                </a>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-3">
        <div class="card h-100 text-center">
            <div class="card-body d-flex flex-column">
                <div class="mb-3">
                    <i class="fas fa-clipboard-check fa-3x text-warning"></i>
                </div>
                <h5 class="card-title">Examen Simulado</h5>
                <p class="card-text flex-grow-1">
                    Simula el examen real con tiempo limitado y obtén tu calificación final.
                </p>
                <a href="/exam" class="btn btn-warning">
                    <i class="fas fa-clock me-2"></i>Tomar Examen
                </a>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-3">
        <div class="card h-100 text-center stats-card">
            <div class="card-body d-flex flex-column">
                <div class="mb-3">
                    <i class="fas fa-chart-line fa-3x text-white"></i>
                </div>
                <h5 class="card-title text-white">Estadísticas</h5>
                <div class="flex-grow-1">
                    <div id="stats-content">
                        <div class="row text-center">
                            <div class="col-6">
                                <h4 id="total-answered">0</h4>
                                <small>Respondidas</small>
                            </div>
                            <div class="col-6">
                                <h4 id="accuracy">0%</h4>
                                <small>Precisión</small>
                            </div>
                        </div>
                        <div class="mt-3">
                            <div class="progress">
                                <div class="progress-bar bg-success" id="accuracy-bar" style="width: 0%"></div>
                            </div>
                        </div>
                        <div class="mt-3">
                            <button class="btn btn-outline-light btn-sm" id="reset-stats-btn"
                                title="Restablecer estadísticas">
                                <i class="fas fa-redo me-1"></i>Restablecer
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mt-5">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">
                    <i class="fas fa-info-circle me-2"></i>
                    Información del Balotario
                </h5>
                <div class="row">
                    <div class="col-md-6">
                        <ul class="list-unstyled">
                            <li><i class="fas fa-check text-success me-2"></i>{{ total_questions }} preguntas oficiales
                            </li>
                            <li><i class="fas fa-check text-success me-2"></i>Respuestas correctas marcadas</li>
                            <li><i class="fas fa-check text-success me-2"></i>Imágenes de señales de tránsito</li>
                            <li><i class="fas fa-check text-success me-2"></i>Seguimiento de progreso</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <ul class="list-unstyled">
                            <li><i class="fas fa-check text-success me-2"></i>Interfaz intuitiva y moderna</li>
                            <li><i class="fas fa-check text-success me-2"></i>Modo examen con cronómetro</li>
                            <li><i class="fas fa-check text-success me-2"></i>Estadísticas detalladas</li>
                            <li><i class="fas fa-check text-success me-2"></i>Responsive para móviles</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Statistics reset confirmation modal -->
<div id="resetStatsModal" style="display: none;">
    <div id="resetStatsBackdrop" style="
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.6);
        z-index: 1050;
        backdrop-filter: blur(3px);
    "></div>
    <div id="resetStatsDialog" style="
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1055;
        background: white;
        border-radius: 20px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        min-width: 400px;
        max-width: 500px;
        max-height: 90vh;
        overflow-y: auto;
        animation: modalSlideIn 0.3s ease-out;
    ">
        <div style="
            padding: 25px 30px 20px 30px;
            border-bottom: 1px solid #dee2e6;
            display: flex;
            justify-content: space-between;
            align-items: center;
        ">
            <div style="display: flex; align-items: center;">
                <i class="fas fa-exclamation-triangle text-warning me-3" style="font-size: 24px;"></i>
                <h5 style="margin: 0; color: #333; font-weight: 600;">Restablecer Estadísticas</h5>
            </div>
            <button id="resetStatsModalClose" style="
                background: none;
                border: none;
                font-size: 28px;
                cursor: pointer;
                color: #666;
                padding: 0;
                width: 35px;
                height: 35px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                transition: all 0.2s ease;
            " onmouseover="this.style.background='#f8f9fa'" onmouseout="this.style.background='none'">&times;</button>
        </div>
        <div style="padding: 25px 30px;">
            <div style="text-align: center; margin-bottom: 20px;">
                <i class="fas fa-chart-line text-primary" style="font-size: 48px; opacity: 0.7;"></i>
            </div>
            <p style="margin: 0 0 15px 0; color: #333; font-size: 16px; text-align: center;">
                ¿Estás seguro de que quieres restablecer todas tus estadísticas?
            </p>
            <div
                style="background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 10px; padding: 15px; margin-bottom: 20px;">
                <div style="display: flex; align-items: flex-start;">
                    <i class="fas fa-info-circle text-warning me-2" style="margin-top: 2px;"></i>
                    <div style="font-size: 14px; color: #856404;">
                        <strong>Esta acción eliminará:</strong>
                        <ul style="margin: 8px 0 0 0; padding-left: 20px;">
                            <li>Preguntas respondidas</li>
                            <li>Porcentaje de precisión</li>
                            <li>Racha de respuestas correctas</li>
                            <li>Tiempo de estudio</li>
                            <li>Historial de exámenes</li>
                        </ul>
                    </div>
                </div>
            </div>
            <p style="margin: 0; color: #666; font-size: 14px; text-align: center;">
                <strong>Esta acción no se puede deshacer.</strong>
            </p>
        </div>
        <div style="
            padding: 20px 30px 25px 30px;
            border-top: 1px solid #dee2e6;
            display: flex;
            gap: 12px;
            justify-content: flex-end;
        ">
            <button id="resetStatsModalCancel" class="btn btn-secondary" style="min-width: 100px;">
                <i class="fas fa-times me-1"></i>Cancelar
            </button>
            <button id="confirmResetStats" class="btn btn-danger" style="min-width: 120px;">
                <i class="fas fa-trash-alt me-1"></i>Restablecer
            </button>
        </div>
    </div>
</div>

<style>
    @keyframes modalSlideIn {
        from {
            opacity: 0;
            transform: translate(-50%, -60%);
        }

        to {
            opacity: 1;
            transform: translate(-50%, -50%);
        }
    }

    @keyframes modalSlideOut {
        from {
            opacity: 1;
            transform: translate(-50%, -50%);
        }

        to {
            opacity: 0;
            transform: translate(-50%, -40%);
        }
    }

    .modal-closing {
        animation: modalSlideOut 0.2s ease-in forwards;
    }
</style>
{% endblock %}

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