{% extends "base.html" %}
{% block title %}Quiz Result: {{ module_name }} — Python 108{% endblock %}
{% block content %}
<div class="quiz-page">

  <!-- Result hero -->
  <div class="result-hero {% if passed %}result-pass{% else %}result-fail{% endif %}">
    <div class="result-icon">{{ '🏆' if passed else '📚' }}</div>
    <div class="result-score">{{ score }}/{{ total }}</div>
    <div class="result-pct">{{ pct }}%</div>
    <div class="result-verdict">
      {% if passed %}
        You passed! Well done 🎉
      {% else %}
        Not quite —
        {{ pass_mark - score }} more correct answer{{ 's' if (pass_mark - score) != 1 else '' }}
        needed to pass. Keep studying!
      {% endif %}
    </div>
    <div class="result-module">{{ module_name }}</div>
    <div class="result-actions">
      <a href="{{ url_for('quiz', slug=slug) }}"
         class="btn btn-outline" style="color:#fff;border-color:rgba(255,255,255,.5)">
        ↺ Retake quiz
      </a>
      <a href="{{ url_for('dashboard') }}"
         class="btn btn-ghost" style="color:#fff;border-color:rgba(255,255,255,.4)">
        Dashboard
      </a>
      <a href="{{ url_for('profile') }}"
         class="btn btn-ghost" style="color:#fff;border-color:rgba(255,255,255,.4)">
        🎖️ My badges
      </a>
    </div>
    {% if xp_earned %}
    <div class="result-xp-earned">+{{ xp_earned }} XP earned!</div>
    {% endif %}
  </div>

  <!-- Score breakdown -->
  <div class="result-breakdown">
    <div class="rb-stat rb-correct">
      <div class="rb-val">{{ score }}</div>
      <div class="rb-lbl">Correct ✓</div>
    </div>
    <div class="rb-stat rb-wrong">
      <div class="rb-val">{{ total - score }}</div>
      <div class="rb-lbl">Wrong ✗</div>
    </div>
    <div class="rb-stat rb-pct">
      <div class="rb-val">{{ pct }}%</div>
      <div class="rb-lbl">Score</div>
    </div>
    <div class="rb-stat rb-pass">
      <div class="rb-val">{{ pass_mark * 10 }}%</div>
      <div class="rb-lbl">Pass mark</div>
    </div>
  </div>

  <!-- Answer review -->
  <div class="review-section">
    <h2 class="review-title">Answer Review</h2>

    {% for q in questions %}
    {% set i = loop.index0 %}
    {% set chosen = answers[i] if i < answers|length else -1 %}
    {% set is_correct = (chosen == q.answer) %}

    <div class="review-card {% if is_correct %}review-correct{% else %}review-wrong{% endif %}">
      <div class="review-header">
        <span class="review-num">Q{{ i + 1 }}</span>
        <span class="review-verdict">{{ '✓ Correct' if is_correct else '✗ Wrong' }}</span>
      </div>
      <div class="review-q">{{ q.q }}</div>
      <div class="review-opts">
        {% for opt in q.options %}
        {% set j = loop.index0 %}
        <div class="review-opt
          {% if j == q.answer %}review-opt-correct{% endif %}
          {% if j == chosen and not is_correct %}review-opt-chosen{% endif %}">
          <span class="opt-letter">{{ ['A','B','C','D'][j] }}</span>
          {{ opt }}
          {% if j == q.answer %}
            <span class="opt-tag">✓ correct</span>
          {% endif %}
          {% if j == chosen and not is_correct %}
            <span class="opt-tag opt-tag-wrong">your answer</span>
          {% endif %}
        </div>
        {% endfor %}
      </div>
      <div class="review-explain">💡 {{ q.explanation }}</div>
    </div>
    {% endfor %}

  </div>

  <!-- Bottom nav -->
  <div class="prog-nav" style="margin-top:1.5rem">
    <a href="{{ url_for('quiz', slug=slug) }}" class="btn btn-primary">↺ Retake quiz</a>
    <a href="{{ url_for('dashboard') }}"       class="btn btn-outline">← Dashboard</a>
  </div>

</div>
{% endblock %}

{% if new_badges %}
<!-- Badge unlock overlay -->
<div class="badge-overlay" id="badge-overlay">
  <div class="badge-overlay-card">
    <div class="badge-overlay-title">🎉 New Badge{{ 's' if new_badges|length > 1 else '' }} Unlocked!</div>
    <div class="badge-overlay-list">
      {% for b in new_badges %}
      <div class="badge-overlay-item">
        <span class="badge-overlay-icon">{{ b.icon }}</span>
        <span class="badge-overlay-name">{{ b.name }}</span>
      </div>
      {% endfor %}
    </div>
    <button class="btn btn-primary" onclick="closeBadgeOverlay()">Awesome!</button>
  </div>
  <canvas id="confetti-canvas"></canvas>
</div>
<script src="{{ url_for('static', filename='js/gamification.js') }}"></script>
<script>
  window.addEventListener('load', function() {
    showBadgeOverlay();
    startConfetti();
  });
</script>
{% endif %}