{% extends 'base.html' %}
{% block content %}
<div class="container mx-auto py-8 max-w-4xl">
  <div class="text-center mb-8">
    <h1 class="text-3xl font-bold mb-2">Quiz Results</h1>
    <h2 class="text-xl text-gray-600">{{ quiz.title }}</h2>
    <p class="text-sm text-gray-500">Attempted on {{ attempt.attempted_at.strftime('%B %d, %Y at %I:%M %p') }}</p>
  </div>

  <!-- Score Summary -->
  <div class="card bg-base-100 shadow-lg mb-8">
    <div class="card-body text-center">
      <div class="stats stats-vertical lg:stats-horizontal shadow">
        <div class="stat">
          <div class="stat-title">Your Score</div>
          <div class="stat-value text-primary">{{ attempt.score }}/{{ attempt.total_questions }}</div>
          <div class="stat-desc">{{ "%.1f"|format(attempt.percentage) }}%</div>
        </div>

        <div class="stat">
          <div class="stat-title">Performance</div>
          <div class="stat-value
            {% if attempt.percentage >= 80 %}text-success
            {% elif attempt.percentage >= 60 %}text-warning
            {% else %}text-error{% endif %}">
            {% if attempt.percentage >= 80 %}Excellent
            {% elif attempt.percentage >= 60 %}Good
            {% elif attempt.percentage >= 40 %}Fair
            {% else %}Needs Improvement{% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Detailed Results -->
  <div class="space-y-4">
    <h3 class="text-xl font-semibold mb-4">Question Review</h3>

    {% for question in quiz.questions %}
    <div class="card bg-base-100 shadow-lg">
      <div class="card-body">
        <div class="flex justify-between items-start mb-4">
          <h4 class="card-title text-lg">
            Question {{ loop.index }}
            <span class="badge badge-ghost ml-2">{{ question.question_type.upper() }}</span>
          </h4>
          {% set student_answer = answers[question.id] %}
          {% if question.question_type == 'mcq' %}
            {% if student_answer and student_answer == question.correct_answer %}
            <span class="badge badge-success">Correct</span>
            {% else %}
            <span class="badge badge-error">Incorrect</span>
            {% endif %}
          {% elif question.question_type == 'qa' %}
            {% if student_answer and student_answer.lower() == question.expected_answer.lower() %}
            <span class="badge badge-success">Correct</span>
            {% else %}
            <span class="badge badge-error">Incorrect</span>
            {% endif %}
          {% endif %}
        </div>

        <p class="mb-4">{{ question.question_text }}</p>

        {% if question.question_type == 'mcq' %}
        <div class="space-y-2">
          <p class="font-semibold">Options:</p>
          {% for option in question.get_options() %}
          <div class="flex items-center space-x-3
            {% if option == question.correct_answer %}text-green-600 font-semibold
            {% elif option == student_answer and option != question.correct_answer %}text-red-600{% endif %}">
            <span class="{% if option == question.correct_answer %}✓{% elif option == student_answer %}✗{% endif %}">
              {{ option }}
            </span>
            {% if option == question.correct_answer %}
            <span class="badge badge-success badge-sm">Correct Answer</span>
            {% elif option == student_answer and option != question.correct_answer %}
            <span class="badge badge-error badge-sm">Your Answer</span>
            {% endif %}
          </div>
          {% endfor %}
        </div>
        {% elif question.question_type == 'qa' %}
        <div class="space-y-3">
          <div>
            <p class="font-semibold">Your Answer:</p>
            <p class="bg-gray-100 p-3 rounded">{{ student_answer or 'No answer provided' }}</p>
          </div>
          <div>
            <p class="font-semibold">Expected Answer:</p>
            <p class="bg-green-100 p-3 rounded">{{ question.expected_answer }}</p>
          </div>
        </div>
        {% endif %}
      </div>
    </div>
    {% endfor %}
  </div>

  <div class="text-center mt-8">
    <a href="{{ url_for('student.quiz_list') }}" class="btn btn-primary">
      Back to Quizzes
    </a>
    <a href="{{ url_for('student.dashboard') }}" class="btn btn-secondary ml-4">
      Back to Dashboard
    </a>
  </div>
</div>
{% endblock %}