{% extends "base.html" %}
{% block title %}Résultat — {{ quiz.title }}{% endblock %}

{% block content %}
{% set pct = (result.score / result.total * 100) | int %}
<div class="result-wrap">
  <div class="result-card">
    <span class="result-icon">
      {% if pct >= 80 %}🏆
      {% elif pct >= 60 %}👍
      {% elif pct >= 40 %}📚
      {% else %}💪{% endif %}
    </span>

    <h1>{{ quiz.title }}</h1>

    <div class="score-display">
      <span class="score-num">{{ result.score }}</span>
      <span class="score-sep">/</span>
      <span class="score-total">{{ result.total }}</span>
    </div>

    <div class="score-bar-wrap">
      <div class="score-bar score-bar-{% if pct >= 80 %}great{% elif pct >= 60 %}good{% elif pct >= 40 %}ok{% else %}low{% endif %}"
           style="width: {{ pct }}%"></div>
    </div>

    <p class="score-comment">
      {% if pct == 100 %}Score parfait ! 🎉
      {% elif pct >= 80 %}Excellent résultat !
      {% elif pct >= 60 %}Bon travail, continuez !
      {% elif pct >= 40 %}C'est un début, réessayez !
      {% else %}Pas de souci, la pratique fait le maître !
      {% endif %}
    </p>

    {% if user %}
      <p class="result-saved">✓ Résultat enregistré dans <a href="{{ url_for('protected.profil') }}">votre profil</a>.</p>
    {% else %}
      <p class="result-saved">
        <a href="{{ url_for('auth.login') }}">Connectez-vous</a> pour enregistrer vos scores.
      </p>
    {% endif %}

    <h2 class="detail-title">Détail des réponses</h2>
    <div class="answer-review">
      {% for i, q in quiz.questions | enumerate %}
      {% set user_ans = result.answers.get(i | string, result.answers.get(i, -1)) %}
      {% set correct = (user_ans == q.answer) %}
      <div class="answer-item {% if correct %}answer-correct{% else %}answer-wrong{% endif %}">
        <p class="answer-q">{{ i + 1 }}. {{ q.text }}</p>
        <p class="answer-given">
          Votre réponse :
          <strong>{% if user_ans >= 0 %}{{ q.choices[user_ans] }}{% else %}(sans réponse){% endif %}</strong>
          {% if correct %}<span class="tag-correct">✓ Correct</span>
          {% else %}<span class="tag-wrong">✗</span>{% endif %}
        </p>
        {% if not correct %}
        <p class="answer-correct-text">
          Bonne réponse : <strong>{{ q.choices[q.answer] }}</strong>
        </p>
        {% endif %}
      </div>
      {% endfor %}
    </div>

    <div class="result-actions">
      <a href="{{ url_for('public.quiz_play', quiz_id=quiz.id) }}" class="btn btn-outline">Recommencer</a>
      <a href="{{ url_for('public.quiz_list') }}" class="btn btn-primary">Autres quiz</a>
    </div>
  </div>
</div>
{% endblock %}