{% extends "base.html" %}
{% load static %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-10">

            <!-- Header -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h4>Question <span id="current-q">{{ current_index|add:1|default:1 }}</span> of {{ total_questions|default:0 }}</h4>
                </div>
                <div class="text-end">
                    <button class="btn btn-outline-danger btn-sm"
                            hx-post="{% url 'cbt:end_attempt' attempt.pk %}"
                            hx-confirm="Are you sure you want to end the test early?">
                        <i class="bi bi-x-circle"></i> End Test
                    </button>
                </div>
            </div>

            <!-- Progress Bar -->
            <div class="progress mb-4" style="height: 10px;">
                <div class="progress-bar" style="width: {% widthratio current_index total_questions 100 %}%"></div>
            </div>

            {% if completed %}
                <div class="alert alert-success text-center py-5">
                    <h3>Test Completed!</h3>
                    <a href="{% url 'cbt:attempt_review' attempt.pk %}" class="btn btn-success mt-3">View Results →</a>
                </div>
            {% elif question %}
                <div class="card shadow-sm">
                    <div class="card-header bg-light">
                        <strong>{{ question.get_question_type_display }}</strong>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title mb-4">{{ question.prompt }}</h5>

                        <form id="answer-form"
                              hx-post="{% url 'cbt:take_test' attempt.pk %}"
                              hx-trigger="change delay:800ms from:#answer-form, submit"
                              hx-swap="outerHTML"
                              hx-indicator="#saving">
                            {% csrf_token %}
                            <input type="hidden" name="question_id" value="{{ question.id }}">
                            <input type="hidden" name="next" value="{{ current_index|add:1 }}">

                            {{ form|safe }}

                            <div class="d-flex justify-content-between align-items-center mt-4">
                                <small id="saving" class="text-muted" style="display:none;">
                                    <i class="bi bi-cloud-check"></i> Saving...
                                </small>
                                <button type="submit" class="btn btn-primary px-5">
                                    Next Question →
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</div>


<script>
document.addEventListener('DOMContentLoaded', function() {
    const attemptId = {{ attempt.pk }};
    const endpoint = "{% url 'cbt:proctor_event' %}";
    let warnings = 0;
    const autoSubmitThreshold = 3;

    function getCsrf() {
        return document.querySelector('[name=csrfmiddlewaretoken]')?.value;
    }

    function sendProctorEvent(event_type, meta = {}) {
        if (!attemptId) return;
        fetch(endpoint, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRFToken": getCsrf()
            },
            body: JSON.stringify({ event_type, meta })
        }).catch(() => {});
    }

    // === Warning System ===
    function showWarning(message, isCritical = false) {
        let banner = document.getElementById('proctor-warning');
        if (!banner) {
            banner = document.createElement('div');
            banner.id = 'proctor-warning';
            banner.className = 'alert alert-warning rounded-3 mb-3';
            document.querySelector('.card').prepend(banner);
        }
        banner.className = isCritical ? 'alert alert-danger rounded-3 mb-3' : 'alert alert-warning rounded-3 mb-3';
        banner.textContent = message;
    }

    // Tab switching
    document.addEventListener('visibilitychange', () => {
        if (document.hidden) {
            warnings++;
            sendProctorEvent('tab_switch', { count: warnings });
            showWarning(`Tab switch detected (${warnings}/${autoSubmitThreshold})`, warnings >= autoSubmitThreshold);
        }
    });

    // Blur / focus loss
    window.addEventListener('blur', () => {
        warnings++;
        sendProctorEvent('blur', { count: warnings });
        showWarning(`Window lost focus (${warnings}/${autoSubmitThreshold})`);
    });

    // Copy / Paste / Right-click
    ['copy', 'paste', 'contextmenu'].forEach(evt => {
        document.addEventListener(evt, () => sendProctorEvent(evt));
    });

    // Camera (optional but recommended)
    function startCamera() {
        if (!navigator.mediaDevices?.getUserMedia) {
            sendProctorEvent('camera_unavailable');
            return;
        }
        navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" } })
            .then(stream => {
                sendProctorEvent('camera_granted');
                // Optional: show small preview
            })
            .catch(err => {
                sendProctorEvent('camera_denied', { error: err.message });
            });
    }

    // Auto-submit on too many violations
    if (warnings >= autoSubmitThreshold) {
        sendProctorEvent('auto_submit');
        setTimeout(() => {
            document.getElementById('answer-form')?.submit();
        }, 1200);
    }

    // Start monitoring
    setTimeout(startCamera, 1500);
});
</script>
{% endblock %}