{% extends "dashboard/base.html" %}
{% load bangla_numbers %}
{% load static %}

{% block title %}All Results - PassMCQ{% endblock %}

{% block content %}
<div class="min-h-[90vh] p-4 md:p-6">
  <div class="max-w-6xl mx-auto">
    <turbo-frame id="mcqContent">
      <!-- Header -->
      <h2 class="text-2xl lg:text-3xl font-bold text-center mb-8 text-gray-800 dark:text-white">
        My Exam Results
      </h2>

      {% if all_exam_results %}
        <div class="bg-white dark:bg-slate-800 shadow-xl rounded-2xl overflow-hidden">
          <!-- Desktop Table -->
          <div class="hidden md:block overflow-x-auto">
            <table class="w-full">
              <thead>
                <tr class="bg-gray-100 dark:bg-slate-700 text-gray-700 dark:text-gray-300 uppercase text-sm">
                  <th class="py-4 px-6 text-left font-semibold">Exam Title</th>
                  <th class="py-4 px-6 text-left font-semibold">Subject</th>
                  <th class="py-4 px-6 text-center font-semibold">Score</th>
                  <th class="py-4 px-6 text-center font-semibold">Correct</th>
                  <th class="py-4 px-6 text-center font-semibold">Wrong</th>
                  <th class="py-4 px-6 text-center font-semibold">Time</th>
                  <th class="py-4 px-6 text-left font-semibold">Date</th>
                  <th class="py-4 px-6 text-center font-semibold">Action</th>
                </tr>
              </thead>
              <tbody class="divide-y divide-gray-200 dark:divide-slate-600">
                {% for result in all_exam_results %}
                  <tr class="hover:bg-gray-50 dark:hover:bg-slate-700/50 transition-colors">
                    <td class="py-4 px-6 text-left text-gray-800 dark:text-gray-200 font-medium">
                      {{ result.exam.title }}
                    </td>
                    <td class="py-4 px-6 text-left text-gray-600 dark:text-gray-400">
                      {{ result.exam.subject.name }}
                    </td>
                    <td class="py-4 px-6 text-center">
                      <span class="inline-flex items-center justify-center w-12 h-12 rounded-full 
                        {% if result.score >= 80 %}bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400
                        {% elif result.score >= 60 %}bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400
                        {% else %}bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400{% endif %} font-semibold">
                        {{ result.score }}
                      </span>
                    </td>
                    <td class="py-4 px-6 text-center text-emerald-600 dark:text-emerald-400 font-medium">
                      {{ result.correct_answers }}
                    </td>
                    <td class="py-4 px-6 text-center text-red-600 dark:text-red-400 font-medium">
                      {{ result.wrong_answers }}
                    </td>
                    <td class="py-4 px-6 text-center text-gray-600 dark:text-gray-400 whitespace-nowrap">
                      {% if result.time_taken_seconds < 60 %}
                        {{ result.time_taken_seconds }}s
                      {% else %}
                        {% with minutes=result.time_taken_seconds|div:60|floatformat:0 seconds=result.time_taken_seconds|mod:60 %}
                          {{ minutes }}m {{ seconds }}s
                        {% endwith %}
                      {% endif %}
                    </td>
                    <td class="py-4 px-6 text-left text-gray-600 dark:text-gray-400 whitespace-nowrap">
                      {{ result.completed_at|date:"d M Y" }}
                    </td>
                    <td class="py-4 px-6 text-center">
                      <a href="{% url 'app:exam_results' result.exam.id %}"
                         data-turbo-frame="mcqContent"
                         class="inline-flex items-center gap-1 text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 font-medium transition-colors">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                        </svg>
                        View
                      </a>
                    </td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>

          <!-- Mobile Cards -->
          <div class="md:hidden divide-y divide-gray-200 dark:divide-slate-600">
            {% for result in all_exam_results %}
              <div class="p-4">
                <div class="flex justify-between items-start mb-3">
                  <div>
                    <h3 class="font-semibold text-gray-800 dark:text-white">{{ result.exam.title }}</h3>
                    <span class="text-sm text-gray-500 dark:text-gray-400">{{ result.exam.subject.name }}</span>
                  </div>
                  <span class="inline-flex items-center justify-center w-10 h-10 rounded-full text-sm
                    {% if result.score >= 80 %}bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400
                    {% elif result.score >= 60 %}bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400
                    {% else %}bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400{% endif %} font-semibold">
                    {{ result.score }}
                  </span>
                </div>
                
                <div class="grid grid-cols-3 gap-3 text-sm mb-3">
                  <div class="bg-emerald-50 dark:bg-emerald-900/20 p-2 rounded-lg text-center">
                    <div class="text-emerald-600 dark:text-emerald-400 font-semibold">{{ result.correct_answers }}</div>
                    <div class="text-xs text-gray-500 dark:text-gray-400">Correct</div>
                  </div>
                  <div class="bg-red-50 dark:bg-red-900/20 p-2 rounded-lg text-center">
                    <div class="text-red-600 dark:text-red-400 font-semibold">{{ result.wrong_answers }}</div>
                    <div class="text-xs text-gray-500 dark:text-gray-400">Wrong</div>
                  </div>
                  <div class="bg-gray-50 dark:bg-slate-700 p-2 rounded-lg text-center">
                    <div class="text-gray-700 dark:text-gray-300 font-semibold">
                      {% if result.time_taken_seconds < 60 %}
                        {{ result.time_taken_seconds }}s
                      {% else %}
                        {% with minutes=result.time_taken_seconds|div:60|floatformat:0 %}
                          {{ minutes }}m
                        {% endwith %}
                      {% endif %}
                    </div>
                    <div class="text-xs text-gray-500 dark:text-gray-400">Time</div>
                  </div>
                </div>

                <div class="flex justify-between items-center">
                  <span class="text-xs text-gray-500 dark:text-gray-400">{{ result.completed_at|date:"d M Y" }}</span>
                  <a href="{% url 'app:exam_results' result.exam.id %}"
                     data-turbo-frame="mcqContent"
                     class="inline-flex items-center gap-1 text-indigo-600 dark:text-indigo-400 text-sm font-medium">
                    View Details
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                  </a>
                </div>
              </div>
            {% endfor %}
          </div>
        </div>
      {% else %}
        <!-- Empty State -->
        <div class="text-center py-16 bg-white dark:bg-slate-800 rounded-2xl shadow-lg">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto mb-4 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
          </svg>
          <p class="text-xl text-gray-500 dark:text-gray-400">No exam results found</p>
          <p class="text-sm text-gray-400 dark:text-gray-500 mt-2">Start practicing to see your results here!</p>
        </div>
      {% endif %}

      <!-- Start New Exam Button -->
      <div class="mt-8 text-center">
        <a href="{% url 'app:mcq_test' %}"
           data-turbo-frame="mcqContent"
           class="inline-flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white px-8 py-4 rounded-xl font-semibold text-lg transition-colors shadow-lg hover:shadow-xl">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
          </svg>
          Start New Exam
        </a>
      </div>
    </turbo-frame>
  </div>
</div>
{% endblock content %}