@extends('layouts.exam')

@section('title', 'Exam — ' . $attempt->post?->title)

@section('content')

@php
    $isReview           = $attempt->isInReview();
    $questionsPerExam   = config('exam.questions_per_exam');
    $secondsPerQuestion = config('exam.seconds_per_question');
    $heartbeatInterval  = config('exam.heartbeat_interval_seconds', 25);
    $maxTabSwitch       = config('exam.max_tab_switch_warnings', 3);
    $maxFullscreen      = config('exam.max_fullscreen_exit_warnings', 3);
@endphp

<div id="exam-root">

    {{-- Gradient timer bar (fills the top, drains as time passes) --}}
    <div id="timer-bar"><div id="timer-bar-fill"></div></div>

    {{-- ── TOP BAR ── --}}
    <div id="top-bar">
        <div class="brand">
            <div class="brand-icon">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L4 14h4v8h8v-8h4z"/></svg>
            </div>
            FDRS
        </div>

        <span class="mode-badge" id="mode-badge"
              @if($isReview) style="background: rgba(245,158,11,.18); color: var(--warning-400); border-color: rgba(245,158,11,.3);" @endif>
            @if($isReview)
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
            @else
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 113 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
            @endif
            {{ $isReview ? 'Review mode' : 'Exam mode' }}
        </span>

        <span class="post-title">{{ $attempt->post?->title }} — Roll {{ $attempt->application?->roll_number }}</span>

        <span class="conn-secure" id="connSecure" title="Connection secure — heartbeat active">
            <span class="dot"></span>Connection secure
        </span>

        {{-- Save-status chip.
             Mirrors the state of the localStorage answer queue in a glance:
               - synced      → green  "Saved ✓"
               - saving      → cyan   "Saving…"
               - pending:N   → amber  "Pending: N"  (answers queued, will retry)
               - offline:N   → red    "Offline — N held"  (2+ consecutive failures) --}}
        <span class="save-status save-status-synced" id="saveStatus" title="All answers saved to server">
            <span class="dot"></span><span class="label" id="saveStatusLabel">Saved ✓</span>
        </span>

        <span id="answered-counter">
            <span id="answered-num">{{ $answeredCount }}</span>/{{ $questionsPerExam }}
        </span>

        <span id="warning-counter" title="Security violations recorded">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12" style="vertical-align:-2px; margin-right:4px;"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M12 9v4M12 17h.01"/></svg>
            Warnings: <span id="warning-num">{{ $attempt->warning_count }}</span>
        </span>

        <span id="timer-display">00:00</span>
    </div>

    {{-- ── BODY ROW ── --}}
    <div id="body-row">

        {{-- ── PALETTE PANEL ── --}}
        <div id="palette-panel">
            <div id="palette-header">
                <h6>Question Palette</h6>
                <div class="palette-legend">
                    <div class="legend-item">
                        <div class="legend-dot" style="background:#198754;"></div> Answered
                    </div>
                    <div class="legend-item">
                        <div class="legend-dot" style="background:#ffc107;"></div> Current
                    </div>
                    <div class="legend-item">
                        <div class="legend-dot" style="background:#374151;"></div> Unanswered
                    </div>
                </div>
            </div>
            <div id="palette-grid">
                <div id="palette-grid-inner">
                    @for($i = 1; $i <= $questionsPerExam; $i++)
                        <button class="palette-q-btn palette-unanswered"
                                id="pq-{{ $i }}" data-order="{{ $i }}">{{ $i }}</button>
                    @endfor
                </div>
            </div>
        </div>

        {{-- ── MAIN AREA ── --}}
        <div id="main-area">

            {{-- Review banner --}}
            <div id="review-banner" style="{{ $isReview ? 'display:block;' : 'display:none;' }}">
                <i class="bi bi-eye-fill me-2"></i>
                <strong>Review Mode:</strong> You are in the 10-minute review window. Review time remaining:
                <strong id="review-timer-text">--:--</strong>
            </div>

            {{-- Question header --}}
            <div id="question-header-bar">
                <div class="d-flex align-items-center justify-content-between mb-1">
                    <span class="fw-semibold text-dark" id="q-counter-label">Question 1 of {{ $questionsPerExam }}</span>
                    <span class="text-muted" style="font-size:12px;">
                        <span id="progress-answered">0</span> of {{ $questionsPerExam }} answered
                    </span>
                </div>
                <div class="progress" style="height:6px;border-radius:3px;">
                    <div class="progress-bar bg-success" id="progress-bar"
                         role="progressbar" style="width:0%;transition:.3s;"></div>
                </div>
            </div>

            {{-- Question content --}}
            <div id="question-content">
                <div class="question-text-card" id="question-text">Loading...</div>

                <div id="options-container">
                    @foreach(['a','b','c','d'] as $opt)
                    <label class="option-label" id="opt-label-{{ $opt }}" for="opt-{{ $opt }}">
                        <div class="option-badge">{{ strtoupper($opt) }}</div>
                        <div class="option-text" id="opt-text-{{ $opt }}">Option {{ strtoupper($opt) }}</div>
                        <input type="radio" name="answer" value="{{ $opt }}"
                               id="opt-{{ $opt }}" class="answer-radio d-none">
                    </label>
                    @endforeach
                </div>

                <div class="mt-2">
                    <span class="clear-link" id="clear-selection-btn">
                        <i class="bi bi-x-circle me-1"></i>Clear Selection
                    </span>
                </div>
            </div>

            {{-- Nav footer --}}
            <div id="nav-footer">
                <button class="btn btn-outline-secondary btn-sm" id="prev-btn">
                    <i class="bi bi-arrow-left me-1"></i>Previous
                </button>
                <button class="btn btn-outline-primary btn-sm" id="next-btn">
                    Next <i class="bi bi-arrow-right ms-1"></i>
                </button>
                <button class="btn btn-primary btn-sm" id="save-next-btn">
                    Save &amp; Next <i class="bi bi-arrow-right ms-1"></i>
                </button>

                <div class="ms-auto d-flex gap-2 align-items-center">
                    <button class="btn btn-warning btn-sm fw-semibold" id="review-all-btn"
                            style="{{ $isReview ? 'display:none;' : '' }}">
                        <i class="bi bi-eye me-1"></i>Review All
                    </button>
                    <button class="btn btn-danger btn-sm fw-semibold" id="final-submit-btn"
                            data-bs-toggle="modal" data-bs-target="#submitModal">
                        <i class="bi bi-check2-all me-1"></i>Final Submit
                    </button>
                </div>
            </div>

        </div>{{-- /main-area --}}
    </div>{{-- /body-row --}}

</div>{{-- /exam-root --}}

{{-- ── WARNING TOAST ── --}}
<div id="warning-toast" role="alert">
    <span class="warning-icon"><i class="bi bi-exclamation-triangle-fill text-warning"></i></span>
    <span id="warning-toast-msg">Warning: Suspicious activity detected.</span>
    <span class="warning-close" onclick="$('#warning-toast').fadeOut(200);">&times;</span>
</div>

{{-- ── CONNECTION STATUS BAR ── --}}
<div id="connection-bar">
    <span class="connection-dot"></span>
    <span id="connection-bar-msg">Connection lost. Reconnecting... Your progress is auto-saved.</span>
</div>

{{-- ── SUBMIT LOCK OVERLAY ──
     Shown during the final-submit retry loop. Prevents the candidate from
     closing the tab while we're hammering the server to commit their answers.
     Disappears only on successful submit OR when the recovery modal takes over. --}}
<div id="submit-lock-cover" role="dialog" aria-modal="true" aria-live="assertive">
    <div class="submit-lock-panel">
        <div class="submit-lock-spinner"></div>
        <h2>Submitting your exam</h2>
        <p>Do not close this window. We're sending your answers to the server and will keep retrying until it succeeds.</p>
        <p class="submit-lock-meta" id="submitLockMeta">Attempt 1 · waiting for server response…</p>
    </div>
</div>

{{-- ── RECOVERY MODAL ──
     Last-resort fallback when CSRF is permanently dead / session is dead /
     the final submit has failed repeatedly. Shows the candidate a recovery
     payload (their attempt ID + answers from localStorage) so a supervisor
     can manually commit the exam. This is the safety net that prevents an
     answer from ever being silently lost to a network or auth failure. --}}
<div id="recovery-cover" role="dialog" aria-modal="true">
    <div class="recovery-panel">
        <h2>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><path d="M12 9v4M12 17h.01"/></svg>
            Session expired — your answers are safe
        </h2>
        <p>Your browser session has expired, but every answer you selected is stored locally in this browser. Contact the exam supervisor and share the recovery code and payload below so they can commit your exam manually.</p>
        <p><strong>Recovery code:</strong> <span class="recovery-code" id="recoveryCode">—</span></p>
        <p><strong>Recovery payload</strong> (select all and copy):</p>
        <textarea id="recoveryPayload" readonly onclick="this.select()"></textarea>
        <div class="recovery-actions">
            <button type="button" class="btn-recovery" id="recoveryCopyBtn">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
                Copy payload
            </button>
            <button type="button" class="btn-recovery-alt" id="recoveryRetryBtn">Retry submission</button>
        </div>
    </div>
</div>

{{-- ── SUBMIT CONFIRMATION MODAL ── --}}
<div class="modal fade" id="submitModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="background:#0f1923;border:1px solid #1e3a5f;color:#c9d1d9;">
            <div class="modal-header" style="border-color:#1e3a5f;">
                <h5 class="modal-title text-white">
                    <i class="bi bi-check2-all me-2 text-warning"></i>Confirm Submission
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="mb-3" style="font-size:13.5px; color:rgba(255,255,255,0.75);">Are you sure you want to submit your exam? This action <strong style="color:var(--warning);">cannot be undone</strong>.</p>
                <div class="row g-2 mb-3">
                    <div class="col-4">
                        <div class="submit-modal-stat">
                            <div class="submit-modal-stat-value success" id="modal-answered-count">0</div>
                            <div class="submit-modal-stat-label">Answered</div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="submit-modal-stat">
                            <div class="submit-modal-stat-value danger" id="modal-unanswered-count">0</div>
                            <div class="submit-modal-stat-label">Unanswered</div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="submit-modal-stat">
                            <div class="submit-modal-stat-value info" id="modal-total-count">{{ $questionsPerExam }}</div>
                            <div class="submit-modal-stat-label">Total</div>
                        </div>
                    </div>
                </div>
                <p class="mb-0" style="font-size:12.5px; color:rgba(255,255,255,0.55);">
                    <i class="bi bi-info-circle"></i> Unanswered questions will be marked as incorrect.
                </p>
            </div>
            <div class="modal-footer" style="border-color:#1e3a5f;">
                <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger btn-sm fw-semibold" id="confirm-submit-btn">
                    <i class="bi bi-check2-all me-1"></i>Submit Exam
                </button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
window.onerror = function(msg, src, line, col, err) {
    document.getElementById('question-text').textContent = 'JS Error: ' + msg + ' (line ' + line + ')';
    return false;
};

// ── Disable DevTools & inspection ─────────────────────────────────────────
// Block right-click context menu
document.addEventListener('contextmenu', function(e) { e.preventDefault(); });

// Block F12, F5, Ctrl+R, Ctrl+Shift+R, Ctrl+Shift+I/J/C, Ctrl+U
document.addEventListener('keydown', function(e) {
    var key = e.key || e.keyCode;
    if (key === 'F12' || key === 123)                                           { e.preventDefault(); return false; }
    if (key === 'F5'  || key === 116)                                           { e.preventDefault(); return false; }
    if (e.ctrlKey && (key === 'r' || key === 'R' || key === 82))                { e.preventDefault(); return false; }
    if (e.ctrlKey && e.shiftKey && (key === 'I' || key === 'i' || key === 73)) { e.preventDefault(); return false; }
    if (e.ctrlKey && e.shiftKey && (key === 'J' || key === 'j' || key === 74)) { e.preventDefault(); return false; }
    if (e.ctrlKey && e.shiftKey && (key === 'C' || key === 'c' || key === 67)) { e.preventDefault(); return false; }
    if (e.ctrlKey && (key === 'U' || key === 'u' || key === 85))               { e.preventDefault(); return false; }
    if (e.ctrlKey && (key === 'C' || key === 'c' || key === 67))               { e.preventDefault(); return false; }
    if (e.ctrlKey && (key === 'A' || key === 'a' || key === 65))               { e.preventDefault(); return false; }
});

$(function () {
    // ── Config & Data ──────────────────────────────────────────────────────────
    var questions       = @json($questionsData);
    var answerMap       = @json($answerMap);
    var isReview        = @json($isReview);
    var reviewRemaining = @json($reviewRemainingSeconds ?? 0);
    var totalQuestions  = {{ $questionsPerExam }};
    var secondsPerQ     = {{ $secondsPerQuestion }};

    // URLs
    var saveAnswerUrl   = '{{ route('candidate.exam.save-answer', $attempt) }}';
    var enterReviewUrl  = '{{ route('candidate.exam.enter-review', $attempt) }}';
    var submitUrl       = '{{ route('candidate.exam.submit', $attempt) }}';
    var secLogUrl       = '{{ route('candidate.exam.security.log', $attempt) }}';
    var secLogBatchUrl  = '{{ route('candidate.exam.security.log-batch', $attempt) }}';
    var heartbeatUrl    = '{{ route('candidate.exam.heartbeat', $attempt) }}';
    // Post-submit landing page. Renamed from `resultUrl` after the
    // post-submit flow was changed to the lightweight thank-you page that
    // doesn't reveal the score (results are released by the admin).
    var resultUrl       = '{{ route('candidate.exam.thank-you', $attempt) }}';
    var csrfRefreshUrl  = '{{ route('candidate.csrf-refresh') }}';

    // Security
    var examSessionToken  = '{{ $attempt->exam_session_token }}';
    var examStatus        = '{{ $attempt->status }}';
    var warningCount      = {{ (int) $attempt->warning_count }};
    var tabSwitchCount    = {{ (int) $attempt->tab_switch_count }};
    var fullscreenCount   = {{ (int) $attempt->fullscreen_exit_count }};
    var maxTabSwitch      = {{ $maxTabSwitch }};
    var maxFullscreen     = {{ $maxFullscreen }};
    var csrfToken         = $('meta[name="csrf-token"]').attr('content');
    var heartbeatMs       = {{ $heartbeatInterval * 1000 }};

    // Anti-cheat only active during live statuses
    var isAntiCheatActive = (examStatus === 'in_progress' || examStatus === 'in_review');

    // ── State ─────────────────────────────────────────────────────────────────
    var currentIndex       = 0;
    var questionTimeLeft   = secondsPerQ;
    var questionTimer      = null;

    // Per-question remaining time — persists across navigation and page refresh
    var timeMap = [];
    for (var i = 0; i < totalQuestions; i++) { timeMap[i] = secondsPerQ; }

    var _tmKey = 'exam_tm_{{ $attempt->id }}';
    (function restoreTimeMap() {
        try {
            var raw = localStorage.getItem(_tmKey);
            if (!raw) return;
            var saved = JSON.parse(raw);
            var elapsedSecs = Math.floor((Date.now() - saved.ts) / 1000);
            for (var i = 0; i < totalQuestions; i++) {
                var t = saved.map[i] !== undefined ? saved.map[i] : secondsPerQ;
                // Only deduct elapsed from the question that was active when saved
                timeMap[i] = Math.max(0, i === saved.active ? t - elapsedSecs : t);
            }
        } catch(e) { /* corrupt storage — use defaults */ }
    })();

    function persistTimeMap() {
        try {
            localStorage.setItem(_tmKey, JSON.stringify({ map: timeMap, active: currentIndex, ts: Date.now() }));
        } catch(e) {}
    }
    var reviewTimerHandle  = null;
    var isSaving           = false;
    var isSubmitting       = false;
    var isConnected        = true;
    var fullscreenRequested= false;
    var visibilityBlurLock = false; // prevent double-fire from blur+visibilitychange

    // Normalise answerMap keys to integers
    var normMap = {};
    $.each(answerMap, function (k, v) { normMap[parseInt(k)] = v; });
    answerMap = normMap;

    // ============================================================
    // RELIABILITY CORE — localStorage queue + retry + batching.
    //
    // WHY THIS BLOCK EXISTS
    // Before this was added, every answer-save AJAX failure silently dropped
    // the answer (see the old `error: function () { }` handler). In a live
    // exam with 10,000 candidates on spotty 3G, this was the single most
    // dangerous failure mode — a lost answer is a lawsuit.
    //
    // WHAT IT GUARANTEES
    // 1. Every selected answer hits localStorage FIRST, before any network call.
    // 2. On failure, it retries forever with exponential backoff capped at 30s.
    // 3. On page load, any pending (unsynced) answers from a prior session are
    //    drained to the server before the candidate can resume.
    // 4. Security events are batched: one POST every 10s instead of one per
    //    event, cutting HTTP traffic ~30× during alt-tab attempts.
    // 5. 419 (CSRF expired) is handled — we fetch a fresh token and retry.
    //    If refresh itself fails, we surface a recovery modal so the candidate
    //    can hand their localStorage to a supervisor. Never silently lost.
    // ============================================================

    var ATTEMPT_ID = {{ $attempt->id }};
    var STORAGE_ANSWERS = 'exam_ans_' + ATTEMPT_ID;
    var STORAGE_SECQ    = 'exam_secq_' + ATTEMPT_ID;

    // Exponential backoff with a 30s cap. Shared by both the answer queue and
    // the final-submit retry loop so behavior stays predictable.
    function backoffDelay(attemptNumber) {
        var base = [0, 1000, 2000, 4000, 8000, 16000];
        return attemptNumber < base.length ? base[attemptNumber] : 30000;
    }

    // Safe localStorage wrappers — storage can throw (quota, private mode).
    function lsGet(key, fallback) {
        try {
            var raw = localStorage.getItem(key);
            return raw ? JSON.parse(raw) : fallback;
        } catch (e) { return fallback; }
    }
    function lsSet(key, value) {
        try { localStorage.setItem(key, JSON.stringify(value)); } catch (e) { /* quota full — nothing we can do */ }
    }

    // ─── Save-status UI ──────────────────────────────────────────────────────
    // Single source of truth for the "Saved ✓ / Saving… / Pending / Offline"
    // chip in the top bar. The answer queue calls setSaveStatus(...) on every
    // queue state transition.
    var saveStatusState = { pending: 0, saving: false, offline: false, last: 'synced' };
    function setSaveStatus(partial) {
        $.extend(saveStatusState, partial);
        var s = saveStatusState;
        var $el = $('#saveStatus'), $lbl = $('#saveStatusLabel');
        $el.removeClass('save-status-synced save-status-saving save-status-pending save-status-offline');
        if (s.offline && s.pending > 0) {
            $el.addClass('save-status-offline').attr('title', 'Offline — ' + s.pending + ' answer(s) held in this browser, retrying');
            $lbl.text('Offline — ' + s.pending + ' held');
        } else if (s.pending > 0) {
            $el.addClass('save-status-pending').attr('title', s.pending + ' answer(s) queued for retry');
            $lbl.text('Pending: ' + s.pending);
        } else if (s.saving) {
            $el.addClass('save-status-saving').attr('title', 'Saving to server…');
            $lbl.text('Saving…');
        } else {
            $el.addClass('save-status-synced').attr('title', 'All answers saved to server');
            $lbl.text('Saved ✓');
        }
    }

    // ─── CSRF-refresh helper ─────────────────────────────────────────────────
    // Used whenever we get a 419 back from any exam endpoint. Returns a promise
    // that resolves to the new token or rejects if refresh itself fails (which
    // means the session is fully dead and we need to show the recovery modal).
    function refreshCsrf() {
        return new Promise(function (resolve, reject) {
            $.ajax({
                url: csrfRefreshUrl, type: 'GET', timeout: 8000,
                success: function (res) {
                    if (res && res.token) {
                        csrfToken = res.token;
                        $('meta[name="csrf-token"]').attr('content', res.token);
                        resolve(res.token);
                    } else {
                        reject('no-token');
                    }
                },
                error: function (xhr) { reject(xhr.status); }
            });
        });
    }

    // ─── Recovery modal ──────────────────────────────────────────────────────
    // Absolute last resort: session dead + CSRF refresh failed. We dump the
    // candidate's attempt ID, answer map from localStorage, and a recovery
    // code to a copyable textarea. The supervisor can use this to commit the
    // exam manually — no answer is ever silently lost.
    var recoveryShown = false;
    function showRecovery(reason) {
        if (recoveryShown) return;
        recoveryShown = true;
        isAntiCheatActive = false;          // stop generating new security events
        clearInterval(heartbeatInterval);   // stop pinging a dead session
        var answers = lsGet(STORAGE_ANSWERS, {});
        var code = 'RECOVERY-' + ATTEMPT_ID + '-' + Date.now().toString(36).toUpperCase();
        var payload = {
            recovery_code: code,
            attempt_id: ATTEMPT_ID,
            session_token: examSessionToken,
            reason: reason || 'unknown',
            generated_at: new Date().toISOString(),
            answers: answers
        };
        $('#recoveryCode').text(code);
        $('#recoveryPayload').val(JSON.stringify(payload, null, 2));
        $('#recovery-cover').addClass('show');
    }
    $('#recoveryCopyBtn').on('click', function () {
        var $ta = $('#recoveryPayload');
        $ta.select();
        try { document.execCommand('copy'); } catch (e) {}
        $(this).text('Copied ✓');
    });
    $('#recoveryRetryBtn').on('click', function () {
        // Operator-triggered retry — refresh CSRF and drain the queue.
        refreshCsrf().then(function () {
            $('#recovery-cover').removeClass('show');
            recoveryShown = false;
            isAntiCheatActive = (examStatus === 'in_progress' || examStatus === 'in_review');
            answerQueue.flush();
        }).catch(function () { /* still dead, nothing to do */ });
    });

    // ─── Answer queue ────────────────────────────────────────────────────────
    // The authoritative record of answers lives in localStorage. Each entry:
    //   { q: questionId, a: choice|null, attempts: N, syncedAt: ts|null, savedAt: ts }
    // The server is sent updates via saveAnswerUrl. If the server accepts,
    // syncedAt is stamped and the entry stays cached for the session. If the
    // server rejects (any non-success, including 419 / 5xx / timeout), the
    // entry's attempts counter increments and it gets re-tried on the next tick.
    var answerQueue = (function () {
        var map = lsGet(STORAGE_ANSWERS, {});
        var inFlight = {}; // qId → true while an AJAX is in flight
        var consecutiveErrors = 0;

        function persist() { lsSet(STORAGE_ANSWERS, map); }

        function countPending() {
            var n = 0;
            for (var k in map) {
                if (map.hasOwnProperty(k) && !map[k].syncedAt) n++;
            }
            return n;
        }

        function updateStatus() {
            var pending = countPending();
            setSaveStatus({
                pending: pending,
                saving:  Object.keys(inFlight).length > 0,
                offline: consecutiveErrors >= 2 && pending > 0
            });
        }

        function set(questionId, choice) {
            // Record the selection locally FIRST. This is the single most
            // important line in this file — it's the guarantee that the
            // candidate's answer cannot be lost by any network or server
            // failure. The AJAX is a best-effort sync, not the source of truth.
            map[questionId] = {
                q: questionId,
                a: choice,
                attempts: 0,
                syncedAt: null,
                savedAt: Date.now()
            };
            persist();
            updateStatus();
            trySend(questionId);
        }

        function trySend(questionId) {
            var entry = map[questionId];
            if (!entry || entry.syncedAt || inFlight[questionId]) return;
            if (isSubmitting && questionId !== '__final__') { /* still try */ }

            inFlight[questionId] = true;
            updateStatus();

            $.ajax({
                url: saveAnswerUrl,
                type: 'POST',
                timeout: 15000,
                headers: { 'X-CSRF-TOKEN': csrfToken, 'X-Exam-Token': examSessionToken },
                data: { question_id: entry.q, selected_answer: entry.a }
            }).done(function (res) {
                inFlight[questionId] = false;
                if (res && res.success) {
                    entry.syncedAt = Date.now();
                    consecutiveErrors = 0;
                    persist();
                    updateProgress();
                    updatePaletteForQuestion(questionIndexById(questionId));
                } else {
                    entry.attempts++;
                    consecutiveErrors++;
                    persist();
                    scheduleRetry(questionId, entry.attempts);
                }
                updateStatus();
            }).fail(function (xhr) {
                inFlight[questionId] = false;
                entry.attempts++;
                consecutiveErrors++;
                persist();

                // CSRF expired → refresh token and retry immediately. If the
                // refresh itself fails, the session is dead — fall through to
                // the backoff loop; after several more failures the user can
                // open the recovery modal manually via the submit path.
                if (xhr.status === 419) {
                    refreshCsrf().then(function () {
                        trySend(questionId);
                    }).catch(function () {
                        scheduleRetry(questionId, entry.attempts);
                    });
                } else {
                    scheduleRetry(questionId, entry.attempts);
                }
                updateStatus();
            });
        }

        function scheduleRetry(questionId, attemptNumber) {
            var delay = backoffDelay(attemptNumber);
            setTimeout(function () { trySend(questionId); }, delay);
        }

        function questionIndexById(qId) {
            for (var i = 0; i < questions.length; i++) {
                if (String(questions[i].questionId) === String(qId)) return i;
            }
            return -1;
        }

        function flush() {
            // Force a retry on every unsynced entry. Called on page load
            // (reconciliation) and whenever a transient error clears.
            for (var k in map) {
                if (map.hasOwnProperty(k) && !map[k].syncedAt) {
                    trySend(k);
                }
            }
        }

        // Seed in-memory answerMap from localStorage at boot so the UI reflects
        // any answers that haven't yet been acknowledged by the server.
        function hydrateAnswerMap() {
            for (var k in map) {
                if (map.hasOwnProperty(k) && map[k].a) {
                    answerMap[parseInt(k)] = map[k].a;
                }
            }
        }

        function allSyncedPromise(timeoutMs) {
            // Returns a promise that resolves when every answer in the queue
            // has syncedAt, or rejects if the timeout elapses. Used by the
            // final-submit path — we drain the answer queue before submitting.
            return new Promise(function (resolve, reject) {
                var started = Date.now();
                function check() {
                    if (countPending() === 0) return resolve();
                    if (Date.now() - started > timeoutMs) return reject('drain-timeout');
                    setTimeout(check, 250);
                }
                check();
            });
        }

        return {
            set: set,
            flush: flush,
            countPending: countPending,
            hydrateAnswerMap: hydrateAnswerMap,
            allSyncedPromise: allSyncedPromise
        };
    })();

    // ─── Security event batcher ──────────────────────────────────────────────
    // Events are appended to localStorage immediately so a browser crash can't
    // drop proctoring evidence. Every 10 seconds we flush the buffer as a
    // single batch POST. Also flushed on visibility change (candidate is
    // probably coming back from an alt-tab) and right before final submit.
    var securityBatcher = (function () {
        var buffer = lsGet(STORAGE_SECQ, []);
        var flushTimer = null;
        var flushing = false;
        var FLUSH_INTERVAL_MS = 10000;
        var MAX_BUFFER = 20; // spam guard — force-flush if someone alt-tabs 20 times in 10s

        function persist() { lsSet(STORAGE_SECQ, buffer); }

        function push(eventType, message) {
            if (!isAntiCheatActive || isSubmitting) return;
            buffer.push({
                event_type: eventType,
                event_message: message,
                at: Date.now()
            });
            persist();
            if (buffer.length >= MAX_BUFFER) flush();
        }

        function flush() {
            if (flushing || buffer.length === 0) return;
            flushing = true;
            var snapshot = buffer.slice();
            var events = snapshot.map(function (e) { return { event_type: e.event_type, event_message: e.event_message }; });

            $.ajax({
                url: secLogBatchUrl,
                type: 'POST',
                timeout: 12000,
                headers: { 'X-CSRF-TOKEN': csrfToken, 'X-Exam-Token': examSessionToken },
                data: { events: events }
            }).done(function (res) {
                flushing = false;
                if (res && res.success) {
                    // Purge acknowledged events from the buffer (only the ones
                    // we sent, in case new events were appended during flight).
                    buffer = buffer.slice(snapshot.length);
                    persist();

                    if (res.warning_count !== undefined) updateWarningDisplay(res.warning_count);
                    if (res.tab_switch_count !== undefined) tabSwitchCount = res.tab_switch_count;
                    if (res.fullscreen_count !== undefined) fullscreenCount = res.fullscreen_count;

                    if (res.auto_submit && res.redirect) {
                        isSubmitting = true;
                        isAntiCheatActive = false;
                        showWarningToast(res.message || 'Your exam has been auto-submitted.', true);
                        setTimeout(function () { window.location.href = res.redirect; }, 2500);
                    }
                }
            }).fail(function (xhr) {
                flushing = false;
                // 419 — refresh CSRF, retry on next tick. Otherwise, keep the
                // buffer and retry on the next scheduled flush. Proctoring
                // evidence is not lost; it's just delayed.
                if (xhr.status === 419) {
                    refreshCsrf().catch(function () { /* will be retried */ });
                }
            });
        }

        function start() {
            if (flushTimer) return;
            flushTimer = setInterval(flush, FLUSH_INTERVAL_MS);
        }
        function stop() {
            if (flushTimer) { clearInterval(flushTimer); flushTimer = null; }
        }

        return { push: push, flush: flush, start: start, stop: stop };
    })();

    // ── Update warning counter display ─────────────────────────────────────────
    function updateWarningDisplay(count) {
        warningCount = count;
        $('#warning-num').text(count);
        if (count > 0) {
            $('#warning-counter').css('display', 'flex').css('align-items', 'center');
        }
    }
    updateWarningDisplay(warningCount);

    // ── Show warning toast ─────────────────────────────────────────────────────
    function showWarningToast(message, isFinal) {
        var $toast = $('#warning-toast');
        $('#warning-toast-msg').text(message);
        $toast.removeClass('danger-level');
        if (isFinal) $toast.addClass('danger-level');
        $toast.stop(true).fadeIn(200);
        clearTimeout(window._warningToastTimer);
        window._warningToastTimer = setTimeout(function () {
            $toast.fadeOut(400);
        }, 6000);
    }

    // ── Connection status ──────────────────────────────────────────────────────
    function showConnectionLost() {
        isConnected = false;
        $('#connection-bar').removeClass('restored').show();
        $('#connection-bar-msg').text('Connection lost. Reconnecting... Your answers are auto-saved.');
        // Flip the topbar "Connection secure" indicator to a warning state
        $('#connSecure').css({ background: 'rgba(239,68,68,.15)', color: '#F87171', borderColor: 'rgba(239,68,68,.35)' })
                        .contents().filter(function(){ return this.nodeType === 3; }).last().replaceWith('Reconnecting…');
    }

    function showConnectionRestored() {
        isConnected = true;
        $('#connection-bar-msg').text('Connection restored. Your exam progress is safe.');
        $('#connection-bar').addClass('restored');
        setTimeout(function () { $('#connection-bar').fadeOut(400); }, 3000);
        // Restore the topbar indicator
        $('#connSecure').css({ background: '', color: '', borderColor: '' })
                        .contents().filter(function(){ return this.nodeType === 3; }).last().replaceWith('Connection secure');
    }

    // ── Security log (delegates to the batcher) ──────────────────────────────
    // Intentionally lightweight now — the real work happens in securityBatcher.
    // Keeping this function name means all existing call sites (fullscreen,
    // visibility, blur handlers) don't need to be touched.
    function logSecurityEvent(eventType, message) {
        securityBatcher.push(eventType, message);
    }

    // ── Fullscreen ─────────────────────────────────────────────────────────────
    function requestFullscreen() {
        var el = document.documentElement;
        var promise = null;
        if (el.requestFullscreen)            { promise = el.requestFullscreen(); }
        else if (el.webkitRequestFullscreen) { promise = el.webkitRequestFullscreen(); }
        else if (el.mozRequestFullScreen)    { promise = el.mozRequestFullScreen(); }
        else if (el.msRequestFullscreen)     { promise = el.msRequestFullscreen(); }
        if (promise && typeof promise.catch === 'function') {
            promise.catch(function () { /* fullscreen denied — exam continues without it */ });
        }
    }

    function isFullscreenActive() {
        return !!(
            document.fullscreenElement       ||
            document.webkitFullscreenElement ||
            document.mozFullScreenElement    ||
            document.msFullscreenElement
        );
    }

    $(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function () {
        if (!isAntiCheatActive || isSubmitting) return;
        if (!isFullscreenActive()) {
            fullscreenCount++;
            logSecurityEvent('fullscreen_exit', 'Candidate exited fullscreen mode during exam.');
            showWarningToast('Warning: Fullscreen mode is required during the exam.', false);
        }
    });

    // ── Tab / page visibility detection ───────────────────────────────────────
    $(document).on('visibilitychange', function () {
        if (!isAntiCheatActive || isSubmitting) return;
        if (document.hidden) {
            visibilityBlurLock = true;
            tabSwitchCount++;
            logSecurityEvent('tab_switch', 'Candidate switched tabs or minimized the browser.');
            setTimeout(function () { visibilityBlurLock = false; }, 500);
        } else {
            // Page became visible again — show reminder
            if (warningCount > 0) {
                showWarningToast(
                    'You have ' + warningCount + ' warning(s) recorded. Stay on this page to avoid auto-submission.',
                    warningCount >= Math.min(maxTabSwitch, maxFullscreen) - 1
                );
            }
        }
    });

    // ── Window blur detection ──────────────────────────────────────────────────
    $(window).on('blur', function () {
        if (!isAntiCheatActive || isSubmitting || visibilityBlurLock) return;
        logSecurityEvent('window_blur', 'Exam window lost focus.');
    });

    // ── Before unload warning ──────────────────────────────────────────────────
    $(window).on('beforeunload', function (e) {
        if (!isSubmitting) {
            e.preventDefault();
            return 'Your exam is in progress. Are you sure you want to leave?';
        }
    });

    // ── Heartbeat ─────────────────────────────────────────────────────────────
    var retryInterval = null;

    function sendHeartbeat(onSuccess, onError) {
        $.ajax({
            url:     heartbeatUrl,
            type:    'POST',
            timeout: 8000,
            headers: { 'X-CSRF-TOKEN': csrfToken, 'X-Exam-Token': examSessionToken },
            success: onSuccess,
            error:   onError
        });
    }

    function handleHeartbeatSuccess(res) {
        if (!isConnected) {
            showConnectionRestored();
            // Cancel fast retry — normal interval takes over
            if (retryInterval) { clearInterval(retryInterval); retryInterval = null; }
        }

        if (res.reconnected) {
            showWarningToast(res.message, false);
        }

        if (res.force_submitted && res.status === 'completed' && !isSubmitting) {
            isSubmitting = true;
            isAntiCheatActive = false;
            clearInterval(heartbeatInterval);
            clearInterval(questionTimer);
            clearInterval(reviewTimerHandle);
            if (retryInterval) { clearInterval(retryInterval); retryInterval = null; }
            showWarningToast('Your exam has been submitted. Redirecting...', false);
            setTimeout(function () {
                window.location.href = res.redirect || resultUrl;
            }, 2000);
        }

        if (res.review_remaining_seconds !== null && res.review_remaining_seconds !== undefined && isReview) {
            reviewRemaining = res.review_remaining_seconds;
        }
    }

    function handleHeartbeatError() {
        showConnectionLost();
        // Start fast retry every 5 s if not already running
        if (!retryInterval) {
            retryInterval = setInterval(function () {
                if (isSubmitting) { clearInterval(retryInterval); retryInterval = null; return; }
                sendHeartbeat(handleHeartbeatSuccess, function () {
                    // Still disconnected — keep retrying silently
                });
            }, 5000);
        }
    }

    var heartbeatInterval = setInterval(function () {
        if (isSubmitting) return;
        sendHeartbeat(handleHeartbeatSuccess, handleHeartbeatError);
    }, heartbeatMs);

    // ── Utility: format MM:SS ──────────────────────────────────────────────────
    function fmtTime(s) {
        var m = Math.floor(s / 60), sec = s % 60;
        return (m < 10 ? '0' : '') + m + ':' + (sec < 10 ? '0' : '') + sec;
    }

    // ── Update progress bar & answered counter ────────────────────────────────
    function updateProgress() {
        var answered = 0;
        $.each(answerMap, function (k, v) { if (v) answered++; });
        var pct = Math.round((answered / totalQuestions) * 100);
        $('#progress-bar').css('width', pct + '%');
        $('#answered-num').text(answered);
        $('#progress-answered').text(answered);
        return answered;
    }

    // ── Show question at index ────────────────────────────────────────────────
    function showQuestion(index) {
        if (index < 0) index = 0;
        if (index >= totalQuestions) index = totalQuestions - 1;
        currentIndex = index;

        var q = questions[index];
        if (!q) return;

        $('#question-text').text(q.text);
        $('#opt-text-a').text(q.optA);
        $('#opt-text-b').text(q.optB);
        $('#opt-text-c').text(q.optC);
        $('#opt-text-d').text(q.optD);

        $('input.answer-radio').prop('checked', false);
        $('.option-label').removeClass('selected-opt');

        var saved = answerMap[q.questionId];
        if (saved) {
            $('#opt-' + saved).prop('checked', true);
            $('#opt-label-' + saved).addClass('selected-opt');
        }

        $('#q-counter-label').text('Question ' + (index + 1) + ' of ' + totalQuestions);

        $('.palette-q-btn').each(function () {
            var order    = parseInt($(this).data('order'));
            var qAtOrder = questions[order - 1];
            var answered = qAtOrder && answerMap[qAtOrder.questionId];
            if (order === index + 1) {
                $(this).removeClass('palette-answered palette-unanswered').addClass('palette-current');
            } else if (answered) {
                $(this).removeClass('palette-current palette-unanswered').addClass('palette-answered');
            } else {
                $(this).removeClass('palette-current palette-answered').addClass('palette-unanswered');
            }
        });

        var $pBtn = $('#pq-' + (index + 1));
        if ($pBtn.length) {
            var container = $('#palette-grid');
            var btnTop    = $pBtn.position().top + container.scrollTop();
            container.animate({ scrollTop: btnTop - 40 }, 150);
        }

        $('#prev-btn').prop('disabled', index === 0);
        if (isReview) {
            $('#next-btn').prop('disabled', index === totalQuestions - 1);
        }

        updateProgress();
        if (!isReview) startQuestionTimer();
    }

    // ── Save current answer ──────────────────────────────────────────────────
    // Thin shim over answerQueue.set(). The queue writes to localStorage
    // synchronously, so the callback can fire immediately — we don't have to
    // wait for the network. Navigation used to be gated on the AJAX response,
    // which slowed the UI and (worse) blocked when the network stalled. Now
    // nothing in the UI waits for a POST; the queue handles persistence and
    // retry in the background.
    function saveCurrentAnswer(callback) {
        var q        = questions[currentIndex];
        var selected = $('input[name="answer"]:checked').val() || null;

        // Keep the in-memory answerMap in sync so the palette/progress bar
        // reflect the selection immediately.
        if (selected) { answerMap[q.questionId] = selected; }
        else          { delete answerMap[q.questionId]; }

        // Hand off to the queue. localStorage write + background sync.
        answerQueue.set(q.questionId, selected);

        isSaving = false;
        if (typeof callback === 'function') callback();
    }

    // ── Update single palette button ──────────────────────────────────────────
    function updatePaletteForQuestion(index) {
        var q    = questions[index];
        if (!q) return;
        var $btn = $('#pq-' + (index + 1));
        if (index === currentIndex) {
            $btn.removeClass('palette-answered palette-unanswered').addClass('palette-current');
        } else if (answerMap[q.questionId]) {
            $btn.removeClass('palette-current palette-unanswered').addClass('palette-answered');
        } else {
            $btn.removeClass('palette-current palette-answered').addClass('palette-unanswered');
        }
    }

    // ── Navigation ────────────────────────────────────────────────────────────
    function navigate(direction) {
        var nextIndex = currentIndex + direction;
        if (!isReview && nextIndex >= totalQuestions) {
            saveCurrentAnswer(function () { enterReviewMode(); });
            return;
        }
        if (nextIndex < 0 || nextIndex >= totalQuestions) return;
        saveCurrentAnswer(function () { showQuestion(nextIndex); });
    }

    // ── Per-question timer ────────────────────────────────────────────────────
    function startQuestionTimer() {
        clearInterval(questionTimer);
        questionTimeLeft = timeMap[currentIndex];
        updateTimerDisplay();
        questionTimer = setInterval(function () {
            questionTimeLeft--;
            timeMap[currentIndex] = questionTimeLeft;
            persistTimeMap();
            updateTimerDisplay();
            if (questionTimeLeft <= 0) {
                clearInterval(questionTimer);
                timeMap[currentIndex] = 0;
                if (currentIndex >= totalQuestions - 1) {
                    saveCurrentAnswer(function () { enterReviewMode(); });
                } else {
                    saveCurrentAnswer(function () { showQuestion(currentIndex + 1); });
                }
            }
        }, 1000);
    }

    function updateTimerDisplay() {
        var $timer = $('#timer-display');
        $timer.text(fmtTime(questionTimeLeft));
        $timer.removeClass('timer-white timer-yellow timer-red timer-urgent');

        // Drive the gradient timer bar (scales left→right as time drains)
        var frac = Math.max(0, questionTimeLeft / secondsPerQ);
        $('#timer-bar-fill').css('transform', 'scaleX(' + frac + ')');
        $('#timer-bar').removeClass('low urgent');

        if      (questionTimeLeft > 60) { $timer.addClass('timer-white'); }
        else if (questionTimeLeft > 30) { $timer.addClass('timer-yellow'); $('#timer-bar').addClass('low'); }
        else {
            $timer.addClass('timer-red');
            $('#timer-bar').addClass('urgent');
            if (questionTimeLeft < 10) $timer.addClass('timer-urgent');
        }
    }

    // ── Enter review mode ─────────────────────────────────────────────────────
    function enterReviewMode() {
        if (isReview) return;
        Swal.fire({
            title: 'Enter Review Mode?',
            text: 'You have reached the end of the exam. You will enter a 10-minute review window where you can change your answers before final submission.',
            icon: 'info',
            showCancelButton: true,
            confirmButtonColor: '#1E7A4F',
            cancelButtonColor: '#3F4744',
            confirmButtonText: 'Enter Review',
            cancelButtonText: 'Go Back',
            background: '#111816',
            color: 'rgba(255,255,255,0.85)',
            allowOutsideClick: false,
            allowEscapeKey: false,
        }).then(function(result) {
            if (!result.isConfirmed) return;
            $.ajax({
                url:     enterReviewUrl,
                type:    'POST',
                headers: { 'X-CSRF-TOKEN': csrfToken, 'X-Exam-Token': examSessionToken },
                success: function (res) {
                    if (res.success) {
                        isReview = true;
                        reviewRemaining = res.review_seconds || 600;
                        clearInterval(questionTimer);
                        $('#mode-badge').html('<i class="bi bi-eye-fill"></i> Review Mode')
                            .css({ background: 'var(--warning-bg)', color: 'var(--warning)', borderColor: '#F4DDB8' });
                        $('#review-banner').show();
                        $('#review-all-btn').hide();
                        $('#save-next-btn').hide();
                        $('#next-btn').show();
                        startReviewTimer();
                        showQuestion(currentIndex);
                    } else {
                        Swal.fire({ icon: 'error', title: 'Error', text: res.message || 'Failed to enter review mode.', background: '#111816', color: 'rgba(255,255,255,0.85)' });
                    }
                },
                error: function () {
                    Swal.fire({ icon: 'error', title: 'Network Error', text: 'Connection lost. Please try again.', background: '#111816', color: 'rgba(255,255,255,0.85)' });
                }
            });
        });
    }

    // ── Review countdown ──────────────────────────────────────────────────────
    function startReviewTimer() {
        clearInterval(reviewTimerHandle);
        updateReviewTimerDisplay();
        reviewTimerHandle = setInterval(function () {
            reviewRemaining--;
            updateReviewTimerDisplay();
            if (reviewRemaining <= 0) {
                clearInterval(reviewTimerHandle);
                triggerAutoSubmit();
            }
        }, 1000);
    }

    function updateReviewTimerDisplay() {
        var $timer      = $('#timer-display');
        var $reviewText = $('#review-timer-text');
        var formatted   = fmtTime(Math.max(0, reviewRemaining));
        $timer.text(formatted);
        $reviewText.text(formatted);
        $timer.removeClass('timer-white timer-yellow timer-red timer-urgent');
        if      (reviewRemaining > 180) { $timer.css('color', 'var(--primary-300)'); }
        else if (reviewRemaining > 60)  { $timer.addClass('timer-yellow'); }
        else {
            $timer.addClass('timer-red');
            if (reviewRemaining < 10) $timer.addClass('timer-urgent');
        }
    }

    // ── Auto-submit (timer expired or force or user-confirmed) ──────────────
    //
    // RELIABILITY CONTRACT
    // Once triggered, this does not stop until the server accepts the submission.
    // Unlimited retries with exponential backoff capped at 30s between attempts.
    // A full-screen lock prevents the candidate from closing the tab — losing an
    // exam to a closed tab after the timer hit zero was our #1 failure mode.
    //
    // FLOW
    // 1. Lock the UI (modal cover + disable beforeunload warning bypass).
    // 2. Flush the security event buffer (any pending alt-tabs get logged).
    // 3. Drain the answer queue (any unsynced answers sent with their own retries).
    //    Don't block forever on that drain — 15 second timeout, then submit anyway.
    //    The server already has the localStorage answers from earlier saves in
    //    most cases, and the final submit carries no answer payload — scoring
    //    reads from the exam_answers table.
    // 4. POST to submitUrl. On success, redirect. On 419, refresh CSRF + retry.
    //    On any other error, back off and retry forever. After 6 failed attempts
    //    the recovery modal appears as an escape hatch so the candidate can hand
    //    their localStorage to a supervisor.
    var submitAttemptNo = 0;
    function triggerAutoSubmit() {
        if (isSubmitting) return;
        isSubmitting = true;
        isAntiCheatActive = false;
        clearInterval(heartbeatInterval);
        clearInterval(questionTimer);
        clearInterval(reviewTimerHandle);
        securityBatcher.stop();

        $('#confirm-submit-btn').prop('disabled', true);
        $('#submit-lock-cover').addClass('show');

        // Flush pending security events first — proctoring evidence must land.
        // Ignore failure; the queue persists in localStorage and we can recover
        // from the server-side log if needed.
        securityBatcher.flush();

        // Drain the answer queue. 15s hard cap so a single stuck answer can't
        // hold the whole submit hostage — the server already has the bulk of
        // the answers from earlier saves.
        answerQueue.allSyncedPromise(15000).then(performSubmit, performSubmit);
    }

    function performSubmit() {
        submitAttemptNo++;
        $('#submitLockMeta').text('Attempt ' + submitAttemptNo + ' · contacting server…');

        $.ajax({
            url:     submitUrl,
            type:    'POST',
            timeout: 20000,
            headers: { 'X-CSRF-TOKEN': csrfToken, 'X-Exam-Token': examSessionToken }
        }).done(function (res) {
            // Success path — clear local caches and redirect.
            try { localStorage.removeItem(_tmKey); } catch (e) {}
            try { localStorage.removeItem(STORAGE_ANSWERS); } catch (e) {}
            try { localStorage.removeItem(STORAGE_SECQ); } catch (e) {}
            if (res && res.redirect) {
                window.location.href = res.redirect;
            } else {
                window.location.href = resultUrl;
            }
        }).fail(function (xhr) {
            var delay = backoffDelay(Math.min(submitAttemptNo, 5));
            $('#submitLockMeta').text('Attempt ' + submitAttemptNo + ' failed · retrying in ' + Math.round(delay/1000) + 's…');

            if (xhr.status === 419) {
                // CSRF expired mid-exam. Refresh and retry. If refresh itself
                // fails, the session is gone — the recovery modal is our last
                // resort so the candidate can hand off their answers.
                refreshCsrf().then(function () {
                    setTimeout(performSubmit, 500);
                }).catch(function () {
                    showRecovery('csrf-dead-on-submit');
                });
                return;
            }

            if (xhr.status === 409 && xhr.responseJSON && xhr.responseJSON.redirect) {
                // Server says "already submitted" — accept that as success.
                window.location.href = xhr.responseJSON.redirect;
                return;
            }

            // After a handful of repeated failures, surface the recovery modal
            // as an option — but KEEP retrying in the background. The candidate
            // can choose to keep waiting OR grab the recovery code.
            if (submitAttemptNo >= 6 && !recoveryShown) {
                $('#submitLockMeta').html(
                    'Attempt ' + submitAttemptNo + ' failed · still retrying. ' +
                    '<a href="#" id="openRecoveryFromSubmit" style="color:#FCA5A5; text-decoration:underline;">Show recovery options</a>'
                );
                $(document).one('click', '#openRecoveryFromSubmit', function (e) {
                    e.preventDefault();
                    showRecovery('submit-repeated-failure');
                });
            }

            setTimeout(performSubmit, delay);
        });
    }

    // ── Events: palette ───────────────────────────────────────────────────────
    $(document).on('click', '.palette-q-btn', function () {
        var order = parseInt($(this).data('order'));
        saveCurrentAnswer(function () { showQuestion(order - 1); });
    });

    // ── Events: answer selection ──────────────────────────────────────────────
    $(document).on('change', 'input.answer-radio', function () {
        var val = $(this).val(), q = questions[currentIndex];
        answerMap[q.questionId] = val;
        $('.option-label').removeClass('selected-opt');
        $('#opt-label-' + val).addClass('selected-opt');
        updatePaletteForQuestion(currentIndex);
        updateProgress();
    });

    $(document).on('click', '.option-label', function () {
        $(this).find('input.answer-radio').prop('checked', true).trigger('change');
    });

    // ── Event: clear selection ────────────────────────────────────────────────
    $('#clear-selection-btn').on('click', function () {
        $('input.answer-radio').prop('checked', false);
        $('.option-label').removeClass('selected-opt');
        var q = questions[currentIndex];
        delete answerMap[q.questionId];
        updatePaletteForQuestion(currentIndex);
        updateProgress();
    });

    // ── Events: navigation buttons ────────────────────────────────────────────
    $('#prev-btn').on('click', function () { navigate(-1); });

    $('#next-btn').on('click', function () {
        if (!isReview && currentIndex >= totalQuestions - 1) {
            saveCurrentAnswer(function () { enterReviewMode(); });
        } else {
            navigate(1);
        }
    });

    $('#save-next-btn').on('click', function () { navigate(1); });

    $('#review-all-btn').on('click', function () {
        saveCurrentAnswer(function () { enterReviewMode(); });
    });

    // ── Event: submit modal open ──────────────────────────────────────────────
    $('#submitModal').on('show.bs.modal', function () {
        var answered   = updateProgress();
        var unanswered = totalQuestions - answered;
        $('#modal-answered-count').text(answered);
        $('#modal-unanswered-count').text(unanswered);
    });

    // ── Event: confirm submit ─────────────────────────────────────────────────
    $('#confirm-submit-btn').on('click', function () {
        if (isSubmitting) return;
        $(this).prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Submitting...');
        saveCurrentAnswer(function () { triggerAutoSubmit(); });
    });

    // ── Initialise ────────────────────────────────────────────────────────────
    //
    // BOOT-TIME RECONCILIATION
    // If the candidate's browser crashed or lost power mid-exam, there may be
    // unsynced answers sitting in localStorage from the previous session. We
    // hydrate the in-memory answerMap from those entries BEFORE picking a
    // start question — otherwise startIndex might land on a question the
    // candidate already answered (they just never got network ack for it).
    // Then we kick the queue to flush any unsynced entries to the server.
    answerQueue.hydrateAnswerMap();
    answerQueue.flush();
    securityBatcher.start();

    // Find first unanswered question (now aware of localStorage answers).
    var startIndex = 0;
    for (var i = 0; i < questions.length; i++) {
        if (!answerMap[questions[i].questionId]) { startIndex = i; break; }
    }

    showQuestion(startIndex);

    if (isReview) {
        clearInterval(questionTimer);
        startReviewTimer();
        $('#review-banner').show();
        $('#review-all-btn').hide();
        $('#save-next-btn').hide();
    } else {
        startQuestionTimer();
    }

    // When the page becomes visible again (alt-tab return), drain any pending
    // answer retries and force-flush the security buffer so proctoring data
    // lands quickly after a suspected integrity event.
    $(document).on('visibilitychange.reliability', function () {
        if (!document.hidden) {
            answerQueue.flush();
            securityBatcher.flush();
        }
    });

    // Request fullscreen (after a short delay so the page is fully rendered)
    if (isAntiCheatActive) {
        setTimeout(function () {
            requestFullscreen();
            fullscreenRequested = true;
        }, 800);
    }
});
</script>
@endpush

@endsection