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

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

{% block content %}
<turbo-frame id="mcqContent">
<div class="max-w-5xl mx-auto p-4 md:p-6 bg-white dark:bg-slate-800 rounded-2xl shadow-lg">
  
  <!-- Header -->
  <div class="text-center mb-8">
    <h1 class="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">Exam Results</h1>
    <p class="text-gray-500 dark:text-gray-400 mt-2">{{ exam.mcq.name }}</p>
  </div>

  <!-- Score Card -->
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
    <div class="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-4 rounded-xl text-center shadow-md">
      <div class="text-3xl font-bold">{{ total_questions }}</div>
      <div class="text-sm opacity-90">Total Questions</div>
    </div>
    <div class="bg-gradient-to-br from-emerald-500 to-emerald-600 text-white p-4 rounded-xl text-center shadow-md">
      <div class="text-3xl font-bold">{{ correct_answers }}</div>
      <div class="text-sm opacity-90">Correct</div>
    </div>
    <div class="bg-gradient-to-br from-red-500 to-red-600 text-white p-4 rounded-xl text-center shadow-md">
      <div class="text-3xl font-bold">{{ incorrect_answers }}</div>
      <div class="text-sm opacity-90">Wrong</div>
    </div>
    <div class="bg-gradient-to-br from-amber-500 to-amber-600 text-white p-4 rounded-xl text-center shadow-md">
      <div class="text-3xl font-bold">{{ unanswered }}</div>
      <div class="text-sm opacity-90">Unanswered</div>
    </div>
  </div>

  <!-- Score & Time -->
  <div class="flex flex-wrap justify-center gap-6 mb-8 text-center">
    <div class="bg-gray-50 dark:bg-slate-700 px-6 py-4 rounded-xl">
      <span class="text-gray-500 dark:text-gray-400 text-sm">Score</span>
      <div class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">{{ score|floatformat:2 }}%</div>
    </div>
    <div class="bg-gray-50 dark:bg-slate-700 px-6 py-4 rounded-xl">
      <span class="text-gray-500 dark:text-gray-400 text-sm">Time Taken</span>
      <div class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">{{ time_taken }}</div>
    </div>
  </div>

  <!-- Questions Detail Section -->
  <div class="mb-6">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4 flex items-center gap-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-500" 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 2" />
      </svg>
      Question & Answer Details
    </h2>
  </div>

  <!-- Questions List -->
  <div x-data="{ 
    showModal: false, 
    currentQuestion: '', 
    currentExplanation: '',
    openModal(question, explanation) {
      this.currentQuestion = question;
      this.currentExplanation = explanation;
      this.showModal = true;
    },
    closeModal() {
      this.showModal = false;
    }
  }" class="space-y-4">
    
    {% for detail in exam_result_details %}
    <div class="border dark:border-slate-600 rounded-xl p-4 
      {% if not detail.selected_choice %}
        bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-700
      {% elif detail.is_correct %}
        bg-emerald-50 dark:bg-emerald-900/20 border-emerald-200 dark:border-emerald-700
      {% else %}
        bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-700
      {% endif %}
    ">
      <!-- Question Header -->
      <div class="flex flex-wrap items-center justify-between gap-2 mb-3">
        <div class="flex items-center gap-2">
          <span class="bg-gray-200 dark:bg-slate-600 text-gray-700 dark:text-gray-200 text-sm font-medium px-2 py-1 rounded">
            Q{{ forloop.counter }}
          </span>
          <span class="text-xs text-gray-500 dark:text-gray-400">
            {% if detail.exam_question.question.chapter %}
              {{ detail.exam_question.question.chapter.title }}
            {% endif %}
          </span>
        </div>
        <div class="flex items-center gap-2">
          {% if not detail.selected_choice %}
            <span class="bg-yellow-100 dark:bg-yellow-800 text-yellow-700 dark:text-yellow-200 text-xs font-medium px-2 py-1 rounded-full">Unanswered</span>
          {% elif detail.is_correct %}
            <span class="bg-emerald-100 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-200 text-xs font-medium px-2 py-1 rounded-full">Correct</span>
          {% else %}
            <span class="bg-red-100 dark:bg-red-800 text-red-700 dark:text-red-200 text-xs font-medium px-2 py-1 rounded-full">Wrong</span>
          {% endif %}
        </div>
      </div>

      <!-- Question Text -->
      <div class="prose prose-sm dark:prose-invert max-w-none mb-3 text-gray-800 dark:text-gray-200">
        {{ detail.exam_question.question.text|safe }}
      </div>

      <!-- Answer Info -->
      <div class="flex flex-wrap gap-4 text-sm">
        <div>
          <span class="text-gray-500 dark:text-gray-400">Your Answer:</span>
          {% if detail.selected_choice %}
            <span class="ml-1 font-medium {% if detail.is_correct %}text-emerald-600 dark:text-emerald-400{% else %}text-red-600 dark:text-red-400{% endif %}">
              {{ detail.selected_choice.text }}
            </span>
          {% else %}
            <span class="ml-1 font-medium text-yellow-600 dark:text-yellow-400">Not answered</span>
          {% endif %}
        </div>
        
        {% if not detail.is_correct or detail.selected_choice == None %}
        <div>
          <span class="text-gray-500 dark:text-gray-400">Correct Answer:</span>
          {% if detail.correct_choice %}
            <span class="ml-1 font-medium text-emerald-600 dark:text-emerald-400">{{ detail.correct_choice.text }}</span>
          {% else %}
            <span class="ml-1 font-medium text-emerald-600 dark:text-emerald-400">Unavailable</span>
          {% endif %}
        </div>
        {% endif %}
      </div>

      <!-- Explanation Button -->
      {% if detail.exam_question.question.explanation %}
      <button 
        @click="openModal('{{ detail.exam_question.question.text|escapejs }}', '{{ detail.exam_question.question.explanation|escapejs }}')"
        class="mt-3 inline-flex items-center gap-1 text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 text-sm 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        View Explanation
      </button>
      {% endif %}
    </div>
    {% endfor %}

    <!-- Explanation Modal -->
    <div x-show="showModal" x-cloak 
         class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50"
         @click.self="closeModal"
         x-transition:enter="ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0">
      <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-xl max-w-2xl w-full max-h-[80vh] overflow-hidden"
           x-transition:enter="ease-out duration-300"
           x-transition:enter-start="opacity-0 scale-95"
           x-transition:enter-end="opacity-100 scale-100"
           x-transition:leave="ease-in duration-200"
           x-transition:leave-start="opacity-100 scale-100"
           x-transition:leave-end="opacity-0 scale-95">
        
        <!-- Modal Header -->
        <div class="flex items-center justify-between p-4 border-b dark:border-slate-600">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
            </svg>
            Explanation
          </h3>
          <button @click="closeModal" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors">
            <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="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
        
        <!-- Modal Content -->
        <div class="p-4 overflow-y-auto max-h-[60vh]">
          <div class="mb-4">
            <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Question:</span>
            <p class="mt-1 text-gray-800 dark:text-gray-200" x-text="currentQuestion"></p>
          </div>
          <div>
            <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Explanation:</span>
            <div class="mt-1 prose prose-sm dark:prose-invert max-w-none" x-html="currentExplanation"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Action Buttons -->
  <div class="mt-8 flex flex-wrap justify-center gap-4">
    <a href="{% url 'app:retake_exam' exam.id %}"
       data-turbo-frame="mcqContent"
       class="inline-flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-xl font-medium transition-colors shadow-md hover:shadow-lg">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
      </svg>
      Retake Exam
    </a>
    <a href="{% url 'app:total_results_page' %}" 
       data-turbo-frame="dashboardContent" 
       data-turbo-action="advance"
       class="inline-flex items-center gap-2 bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-xl font-medium transition-colors shadow-md hover:shadow-lg">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
      </svg>
      View All Results
    </a>
  </div>
</div>
</turbo-frame>

{% block extra_css %}
<style>
  .prose img {
    max-width: 100%;
    height: auto;
  }
  .prose iframe {
    max-width: 100%;
  }
  [x-cloak] {
    display: none !important;
  }
</style>
{% endblock extra_css %}
{% endblock content %}