{% extends "base.html" %}

{% block title %}Resultados del Simulacro AVANZO | MINEDUCYT El Salvador{% endblock %}

{% block content %}
<div class="container py-4">

  <!-- RESUMEN DE CALIFICACIÓN -->
  <div class="card border-0 shadow-sm rounded-4 p-4 p-md-5 bg-white mb-4">
    <div class="row align-items-center g-4">
      <div class="col-md-3 text-center border-end">
        <div class="mx-auto rounded-circle bg-primary text-white d-flex flex-column align-items-center justify-content-center shadow-sm" style="width: 130px; height: 130px;">
          <span class="display-5 fw-bold lh-1">{{ attempt.score }}</span>
          <span class="small text-uppercase tracking-wide opacity-75">Escala 10</span>
        </div>
        <div class="mt-3 fw-bold text-dark fs-6">
          {{ attempt.correct_count }} de {{ attempt.total_questions }} Aciertos
        </div>
      </div>

      <div class="col-md-6">
        <div class="d-flex align-items-center gap-2 mb-2">
          <span class="badge {% if attempt.nivel_logro == 'Avanzado' %}bg-success{% elif attempt.nivel_logro == 'Intermedio' %}bg-primary{% else %}bg-warning text-dark{% endif %} px-3 py-2 fs-6 fw-bold">
            <i class="bi bi-award-fill me-1"></i> NIVEL {{ attempt.nivel_logro | upper }}
          </span>
          <span class="text-muted small">Folio #{{ "%05d" | format(attempt.id) }}</span>
        </div>

        <h3 class="fw-bold text-dark mb-1">{{ attempt.student_name }}</h3>
        <p class="text-muted small mb-3">
          NIE: <strong class="text-primary font-monospace">{{ attempt.nie }}</strong> &bull; {{ attempt.institution }}
        </p>

        {% if attempt.nivel_logro == 'Avanzado' %}
        <p class="text-success small mb-0">
          <i class="bi bi-check-circle-fill me-1"></i> <strong>Excelente desempeño:</strong> Demuestras un dominio profundo y sobresaliente de las competencias de bachillerato. Estás preparado para la prueba real.
        </p>
        {% elif attempt.nivel_logro == 'Intermedio' %}
        <p class="text-primary small mb-0">
          <i class="bi bi-info-circle-fill me-1"></i> <strong>Buen desempeño:</strong> Cumples con el perfil de egreso requerido. Te recomendamos repasar los ítems marcados como incorrectos abajo para alcanzar el nivel Avanzado.
        </p>
        {% else %}
        <p class="text-warning-emphasis small mb-0">
          <i class="bi bi-exclamation-triangle-fill me-1"></i> <strong>Refuerzo prioritario:</strong> Es fundamental que estudies las justificaciones paso a paso de tus fallos y practiques con las flashcards de fórmulas y fechas.
        </p>
        {% endif %}
      </div>

      <div class="col-md-3 text-center text-md-end">
        <a href="{{ url_for('boleta_view', attempt_id=attempt.id) }}" target="_blank" class="btn btn-primary btn-lg fw-bold w-100 shadow-sm mb-2">
          <i class="bi bi-file-earmark-pdf-fill me-1"></i> Boleta Oficial (PDF)
        </a>
        <a href="{{ url_for('exam_view') }}" class="btn btn-outline-secondary w-100 fw-semibold btn-sm">
          <i class="bi bi-arrow-repeat me-1"></i> Repetir Simulacro
        </a>
      </div>
    </div>
  </div>

  <!-- REVISIÓN DETALLADA PREGUNTA POR PREGUNTA -->
  <div class="card border-0 shadow-sm rounded-4 p-4 bg-white mb-4">
    <h4 class="fw-bold text-dark mb-3 border-bottom pb-2">
      <i class="bi bi-ui-checks text-primary me-2"></i> Revisión Pedagógica Ítem por Ítem
    </h4>
    <p class="text-muted small mb-4">
      Analiza cada una de tus respuestas para entender el razonamiento matemático, científico o literario de cada problema:
    </p>

    <div class="accordion" id="reviewAccordion">
      {% for item in review_list %}
      <div class="accordion-item border rounded-3 mb-3 overflow-hidden shadow-none">
        <h2 class="accordion-header" id="heading-{{ item.id }}">
          <button class="accordion-button {% if not item.is_correct %}collapsed bg-danger-subtle text-danger-emphasis{% else %}bg-success-subtle text-success-emphasis{% endif %}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ item.id }}">
            <div class="d-flex align-items-center justify-content-between w-100 pe-3 flex-wrap gap-2">
              <span>
                {% if item.is_correct %}
                <i class="bi bi-check-circle-fill text-success fs-5 me-2"></i>
                {% else %}
                <i class="bi bi-x-circle-fill text-danger fs-5 me-2"></i>
                {% endif %}
                <strong>Pregunta {{ loop.index }}:</strong> {{ item.curricular_unit }}
              </span>
              <span class="badge {% if item.is_correct %}bg-success{% else %}bg-danger{% endif %} px-2 py-1">
                Tu respuesta: {{ item.user_option }} {% if not item.is_correct %}(Correcta: {{ item.correct_option }}){% endif %}
              </span>
            </div>
          </button>
        </h2>
        <div id="collapse-{{ item.id }}" class="accordion-collapse collapse" data-bs-parent="#reviewAccordion">
          <div class="accordion-body p-4 bg-white">
            <h6 class="fw-bold text-dark mb-3 lh-base" style="white-space: pre-line;">
              {{ item.question }}
            </h6>

            <!-- OPCIONES -->
            <div class="row g-2 mb-3">
              {% for opt in [('A', item.option_a), ('B', item.option_b), ('C', item.option_c), ('D', item.option_d)] %}
              <div class="col-12">
                <div class="p-2 rounded border small d-flex align-items-center gap-2
                  {% if opt[0] == item.correct_option %}border-success bg-success-subtle text-success-emphasis fw-bold
                  {% elif opt[0] == item.user_option and not item.is_correct %}border-danger bg-danger-subtle text-danger-emphasis
                  {% else %}bg-light text-muted{% endif %}">
                  <span class="badge {% if opt[0] == item.correct_option %}bg-success{% elif opt[0] == item.user_option %}bg-danger{% else %}bg-secondary{% endif %}">
                    {{ opt[0] }}
                  </span>
                  <span>{{ opt[1] }}</span>
                  {% if opt[0] == item.correct_option %}
                  <span class="ms-auto badge bg-success text-uppercase">Respuesta Correcta</span>
                  {% elif opt[0] == item.user_option and not item.is_correct %}
                  <span class="ms-auto badge bg-danger text-uppercase">Tu Elección</span>
                  {% endif %}
                </div>
              </div>
              {% endfor %}
            </div>

            <!-- EXPLICACIÓN PASO A PASO -->
            <div class="p-3 bg-light rounded-3 border">
              <strong class="text-dark small text-uppercase d-block mb-1">
                <i class="bi bi-lightbulb-fill text-warning me-1"></i> Resolución y Justificación Pedagógica:
              </strong>
              <p class="text-secondary small mb-2">{{ item.justification }}</p>

              <strong class="text-dark small text-uppercase d-block mb-1">
                <i class="bi bi-exclamation-octagon text-danger me-1"></i> Análisis de Distractores:
              </strong>
              <p class="text-muted small mb-0">{{ item.distractors_analysis }}</p>
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>

</div>
{% endblock %}