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

{% block scriptcode %}
<script src="https://cdn.skypack.dev/@hotwired/turbo"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const examForm = document.getElementById('exam-form');
    const timerDisplay = document.getElementById('timer');
    const warningModal = document.getElementById('warning-modal');
    const warningCount = document.getElementById('warning-count');
    let totalSeconds = {{ exam.duration_minutes }} * 60;
    let timerInterval;
    let warningCountValue = 3;
    let isWindowFocused = true;
    const examStartTime = new Date(); // Track exact start time

    // Format time display
    function formatTime(seconds) {
        const m = Math.floor(seconds / 60);
        const s = seconds % 60;
        return `${m}:${s < 10 ? '0' + s : s}`;
    }

    // Start countdown timer
    function startTimer() {
        timerDisplay.textContent = formatTime(totalSeconds);
        
        timerInterval = setInterval(function() {
            if (isWindowFocused) {
                totalSeconds--;
                timerDisplay.textContent = formatTime(totalSeconds);
                
                if (totalSeconds <= 0) {
                    autoSubmitExam();
                }
                
                // Visual warning when time is running out
                if (totalSeconds <= 60) {
                    timerDisplay.classList.add('text-red-600', 'font-bold', 'animate-pulse');
                    timerDisplay.classList.remove('text-blue-600');
                }
            }
        }, 1000);
    }

    // Auto-submit when time expires
    function autoSubmitExam() {
        clearInterval(timerInterval);
        // Add hidden field to indicate auto-submission
        const autoSubmitField = document.createElement('input');
        autoSubmitField.type = 'hidden';
        autoSubmitField.name = 'auto_submitted';
        autoSubmitField.value = 'true';
        examForm.appendChild(autoSubmitField);
        examForm.submit();
    }

    // Warning modal for tab switching
    function showWarningModal() {
        warningCountValue = 3;
        warningCount.textContent = warningCountValue;
        warningModal.classList.remove('hidden');
        
        const warningInterval = setInterval(function() {
            warningCountValue--;
            warningCount.textContent = warningCountValue;
            
            if (warningCountValue <= 0) {
                clearInterval(warningInterval);
                warningModal.classList.add('hidden');
                autoSubmitExam();
            }
        }, 1000);
    }

    // Window focus/blur detection
    window.addEventListener('blur', function() {
        isWindowFocused = false;
        showWarningModal();
    });

    window.addEventListener('focus', function() {
        isWindowFocused = true;
        warningModal.classList.add('hidden');
    });

    // Prevent going back
    history.pushState(null, null, location.href);
    window.onpopstate = function() {
        history.go(1);
        autoSubmitExam();
    };

    // Start timer when page loads
    startTimer();
});
</script>
{% endblock scriptcode %}

{% block content %}
<turbo-frame id="mcqContent">
<div class="bg-gray-50 dark:bg-slate-900 min-h-screen pb-20 md:pb-5 transition-colors">
  <div class="max-w-3xl mx-auto py-6 px-4 relative">
    <!-- Warning Modal -->
    <div id="warning-modal" class="hidden fixed inset-0 bg-black/70 flex items-center justify-center z-50">
      <div class="bg-white dark:bg-slate-800 p-8 rounded-2xl max-w-md text-center shadow-2xl">
        <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
          <svg class="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
          </svg>
        </div>
        <h3 class="text-xl font-bold text-red-600 dark:text-red-400 mb-3">Warning!</h3>
        <p class="text-gray-600 dark:text-gray-400 mb-4">You have left the exam window. This exam is proctored.</p>
        <p class="font-semibold text-gray-800 dark:text-white">Your exam will be submitted in <span id="warning-count" class="text-red-600 dark:text-red-400 text-2xl">3</span> seconds...</p>
      </div>
    </div>

    <div class="flex justify-between items-center mb-6">
      <h2 class="text-xl md:text-2xl font-bold text-gray-800 dark:text-white">{{ exam.title }}</h2>
      <div class="items-center gap-4 hidden lg:flex">
        <div id="timer" class="text-xl font-medium text-green-600 dark:text-green-400 px-4 py-2 rounded-xl bg-white dark:bg-slate-800 shadow-md border border-gray-200 dark:border-slate-700 fixed top-4 right-4">
          {{ exam.duration_minutes }}:00
        </div>
      </div>
    </div>

    <form id="exam-form" method="POST" action="{% url 'app:finish_exam' exam.id %}" data-turbo="false">
      {% csrf_token %}
      <ol class="space-y-4">
        {% for eq in exam_questions %}
          <li class="bg-white dark:bg-slate-800 p-5 rounded-xl shadow-sm border border-gray-200 dark:border-slate-700">
            <p class="font-medium mb-4 text-gray-800 dark:text-white">
              <span class="inline-flex items-center justify-center w-7 h-7 rounded-lg bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 text-sm font-bold mr-2">{{ forloop.counter }}</span>
              {{ eq.question.text }}
            </p>
            <div class="space-y-2 ml-9">
              {% for choice in eq.question.choices.all %}
                <label class="flex items-center gap-3 p-3 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-slate-700 border border-transparent hover:border-gray-200 dark:hover:border-slate-600 transition-all">
                  <input type="radio"
                         name="q_{{ eq.question.id }}"
                         value="{{ choice.id }}"
                         class="w-4 h-4 text-green-600 border-gray-300 dark:border-slate-600 focus:ring-green-500">
                  <span class="text-gray-700 dark:text-gray-300">{{ choice.text }}</span>
                </label>
              {% endfor %}
            </div>
          </li>
        {% endfor %}
      </ol>

      <!-- Mobile Footer -->
      <div class="mt-6 lg:hidden fixed bottom-16 lg:bottom-0 left-0 right-0 bg-white dark:bg-slate-800 shadow-2xl py-4 px-4 border-t border-gray-200 dark:border-slate-700">
        <div class="flex items-center justify-between">
          <div id="timer" class="text-lg font-semibold text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-900/30 px-4 py-2 rounded-lg">
            {{ exam.duration_minutes }}:00
          </div>
          <button type="submit" id="finish-btn"
                  class="px-6 py-2.5 bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white font-medium rounded-xl shadow-lg shadow-green-500/30 transition-all">
            Finish Exam
          </button>
        </div>
      </div>
      
      <!-- Desktop Submit Button -->
      <div class="hidden lg:block mt-8 text-center">
        <button type="submit" id="finish-btn-desktop"
                class="px-10 py-3 bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white text-lg font-medium rounded-xl shadow-lg shadow-green-500/30 transition-all hover:scale-105">
          Finish Exam
        </button>
      </div>
    </form>
  </div>
</div>
<turbo-frame>
{% endblock content %}