@php
    $quizPayload = [
        'id' => $quiz->id,
        'title' => $quiz->title,
        'questions' => $quiz->questions->map(function ($q) {
            return [
                'id' => $q->id,
                'prompt' => $q->prompt,
                'level' => $q->level,
                'explanation' => $q->explanation ?: '',
                'options' => $q->options->map(function ($o, $i) {
                    return [
                        'id' => $o->id,
                        'text' => $o->option_text,
                        'is_correct' => (bool) $o->is_correct,
                        'letter' => chr(65 + $i),
                    ];
                })->values(),
            ];
        })->values(),
    ];
    $estimatedSeconds = max(60, count($quizPayload['questions']) * 25);
    $estimatedMinutes = (int) ceil($estimatedSeconds / 60);
@endphp

<div id="quiz-runner" class="quiz-runner" aria-live="polite">
    <script type="application/json" id="quiz-runner-data">@json($quizPayload)</script>

    <div class="quiz-screen" data-screen="cover">
        <div class="quiz-cover">
            <p class="quiz-cover-eyebrow">Quiz</p>
            <h3 class="quiz-cover-title">{{ $quiz->title ?: 'Test your understanding' }}</h3>
            <p class="quiz-cover-subtitle">
                <span class="quiz-cover-stat">{{ count($quizPayload['questions']) }} questions</span>
                <span class="quiz-cover-dot" aria-hidden="true">·</span>
                <span class="quiz-cover-stat">~{{ $estimatedMinutes }} min</span>
                <span class="quiz-cover-dot" aria-hidden="true">·</span>
                <span class="quiz-cover-stat">Practice mode</span>
            </p>

            <label class="quiz-toggle">
                <input type="checkbox" data-quiz-toggle="reveal" checked>
                <span class="quiz-toggle-track" aria-hidden="true"></span>
                <span class="quiz-toggle-label">Show feedback after each question</span>
            </label>

            <button type="button" class="btn-primary quiz-cover-cta" data-quiz-action="start">
                Start quiz
                <span aria-hidden="true">&rarr;</span>
            </button>

            <p class="quiz-cover-hint">Tip: use keys <kbd>A</kbd> <kbd>B</kbd> <kbd>C</kbd> <kbd>D</kbd> to choose, <kbd>Enter</kbd> to submit.</p>
        </div>
    </div>

    <div class="quiz-screen" data-screen="question" hidden>
        <div class="quiz-progress">
            <div class="quiz-progress-meta">
                <span class="quiz-progress-text">Question <span data-quiz-bind="current">1</span> of <span data-quiz-bind="total">{{ count($quizPayload['questions']) }}</span></span>
                <span class="quiz-progress-level" data-quiz-bind="level"></span>
            </div>
            <div class="quiz-progress-bar" data-quiz-bind="progress" role="progressbar" aria-valuemin="0" aria-valuemax="{{ count($quizPayload['questions']) }}" aria-valuenow="0"></div>
        </div>

        <div class="quiz-question-card">
            <p class="quiz-question-prompt" data-quiz-bind="prompt"></p>

            <div class="quiz-options-list" data-quiz-bind="options" role="radiogroup" aria-label="Answer choices"></div>

            <div class="quiz-feedback" data-quiz-bind="feedback" hidden>
                <p class="quiz-feedback-headline" data-quiz-bind="feedback-headline"></p>
                <p class="quiz-feedback-text" data-quiz-bind="feedback-text"></p>
            </div>

            <div class="quiz-actions">
                <button type="button" class="btn-secondary quiz-btn-skip" data-quiz-action="skip">Skip</button>
                <button type="button" class="btn-primary quiz-btn-submit" data-quiz-action="submit" disabled>Submit</button>
                <button type="button" class="btn-primary quiz-btn-next" data-quiz-action="next" hidden>Next <span aria-hidden="true">&rarr;</span></button>
                <button type="button" class="btn-primary quiz-btn-finish" data-quiz-action="finish" hidden>See results <span aria-hidden="true">&rarr;</span></button>
            </div>
        </div>
    </div>

    <div class="quiz-screen" data-screen="results" hidden>
        <div class="quiz-results">
            <div class="quiz-score-ring" data-quiz-bind="score-ring-wrap">
                <svg class="quiz-score-svg" viewBox="0 0 120 120" aria-hidden="true">
                    <circle class="quiz-score-track" cx="60" cy="60" r="52" stroke-width="10" fill="none"></circle>
                    <circle class="quiz-score-fill" cx="60" cy="60" r="52" stroke-width="10" fill="none" data-quiz-bind="score-ring"></circle>
                </svg>
                <div class="quiz-score-text">
                    <strong class="quiz-score-pct" data-quiz-bind="score-pct">0%</strong>
                    <span class="quiz-score-fraction" data-quiz-bind="score-fraction">0 / 0</span>
                </div>
            </div>

            <p class="quiz-results-headline" data-quiz-bind="results-headline">Quiz complete</p>
            <p class="quiz-results-message" data-quiz-bind="results-message"></p>

            <div class="quiz-results-review" data-quiz-bind="review"></div>

            <div class="quiz-actions quiz-actions-end">
                <button type="button" class="btn-secondary" data-quiz-action="cover">Back to start</button>
                <button type="button" class="btn-primary" data-quiz-action="retry">Retry quiz</button>
            </div>
        </div>
    </div>
</div>

<script>
    (function () {
        var root = document.getElementById('quiz-runner');
        if (!root) return;
        var dataNode = document.getElementById('quiz-runner-data');
        if (!dataNode) return;

        var quiz;
        try {
            quiz = JSON.parse(dataNode.textContent);
        } catch (e) {
            return;
        }
        if (!quiz || !Array.isArray(quiz.questions) || quiz.questions.length === 0) return;

        var state = {
            currentIndex: 0,
            answers: {},
            revealed: {},
            revealAfterEach: true,
            running: false,
        };

        var bind = function (name) {
            return root.querySelector('[data-quiz-bind="' + name + '"]');
        };

        var showScreen = function (name) {
            root.querySelectorAll('[data-screen]').forEach(function (el) {
                var match = el.getAttribute('data-screen') === name;
                el.hidden = !match;
            });
            state.running = (name === 'question');
            if (name === 'cover' || name === 'question') {
                root.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            }
        };

        var formatLevel = function (raw) {
            if (!raw) return '';
            var match = String(raw).match(/(\d+)/);
            if (match) return 'Level ' + match[1];
            return String(raw).replace(/_/g, ' ');
        };

        var renderProgressBar = function () {
            var bar = bind('progress');
            if (!bar) return;
            bar.innerHTML = '';
            quiz.questions.forEach(function (q, i) {
                var seg = document.createElement('span');
                seg.className = 'quiz-progress-segment';
                if (state.answers[q.id] != null) {
                    var picked = q.options.find(function (o) { return o.id === state.answers[q.id]; });
                    if (picked && picked.is_correct) {
                        seg.classList.add('is-correct');
                    } else if (picked) {
                        seg.classList.add('is-incorrect');
                    } else {
                        seg.classList.add('is-skipped');
                    }
                }
                if (i === state.currentIndex) seg.classList.add('is-active');
                bar.appendChild(seg);
            });
            bar.setAttribute('aria-valuenow', String(state.currentIndex + 1));
        };

        var renderOptions = function (q) {
            var list = bind('options');
            if (!list) return;
            list.innerHTML = '';
            q.options.forEach(function (o, i) {
                var btn = document.createElement('button');
                btn.type = 'button';
                btn.className = 'quiz-option';
                btn.setAttribute('role', 'radio');
                btn.setAttribute('aria-checked', 'false');
                btn.setAttribute('data-option-id', o.id);
                btn.setAttribute('data-option-letter', o.letter || String.fromCharCode(65 + i));

                var letterEl = document.createElement('span');
                letterEl.className = 'quiz-option-letter';
                letterEl.textContent = o.letter || String.fromCharCode(65 + i);

                var textEl = document.createElement('span');
                textEl.className = 'quiz-option-text';
                textEl.textContent = o.text;

                var iconEl = document.createElement('span');
                iconEl.className = 'quiz-option-icon';
                iconEl.setAttribute('aria-hidden', 'true');

                btn.appendChild(letterEl);
                btn.appendChild(textEl);
                btn.appendChild(iconEl);
                list.appendChild(btn);
            });
        };

        var renderQuestion = function () {
            var q = quiz.questions[state.currentIndex];
            if (!q) return;

            var promptEl = bind('prompt');
            if (promptEl) promptEl.textContent = q.prompt;

            var currentEl = bind('current');
            if (currentEl) currentEl.textContent = String(state.currentIndex + 1);

            var levelEl = bind('level');
            if (levelEl) {
                var lvl = formatLevel(q.level);
                levelEl.textContent = lvl;
                levelEl.hidden = !lvl;
            }

            renderProgressBar();
            renderOptions(q);

            var feedback = bind('feedback');
            if (feedback) feedback.hidden = true;

            setActionState({ submit: 'visible-disabled', skip: 'visible', next: 'hidden', finish: 'hidden' });

            showScreen('question');
        };

        var setActionState = function (config) {
            var apply = function (selector, mode) {
                var btn = root.querySelector(selector);
                if (!btn) return;
                if (mode === 'hidden') {
                    btn.hidden = true;
                    btn.disabled = false;
                } else if (mode === 'visible') {
                    btn.hidden = false;
                    btn.disabled = false;
                } else if (mode === 'visible-disabled') {
                    btn.hidden = false;
                    btn.disabled = true;
                }
            };
            apply('.quiz-btn-submit', config.submit);
            apply('.quiz-btn-skip', config.skip);
            apply('.quiz-btn-next', config.next);
            apply('.quiz-btn-finish', config.finish);
        };

        var selectOption = function (optionId) {
            var q = quiz.questions[state.currentIndex];
            if (!q) return;
            if (state.revealed[q.id]) return;

            state.answers[q.id] = optionId;
            root.querySelectorAll('.quiz-option').forEach(function (btn) {
                var picked = String(btn.getAttribute('data-option-id')) === String(optionId);
                btn.classList.toggle('is-selected', picked);
                btn.setAttribute('aria-checked', picked ? 'true' : 'false');
            });
            setActionState({ submit: 'visible', skip: 'visible', next: 'hidden', finish: 'hidden' });
        };

        var submitAnswer = function () {
            var q = quiz.questions[state.currentIndex];
            if (!q) return;
            var pickedId = state.answers[q.id];
            if (pickedId == null) return;
            revealAnswer(false);
        };

        var revealAnswer = function (asSkip) {
            var q = quiz.questions[state.currentIndex];
            if (!q) return;
            state.revealed[q.id] = true;

            var pickedId = state.answers[q.id];
            var correct = q.options.find(function (o) { return o.is_correct; });
            var pickedCorrect = pickedId != null && correct && pickedId === correct.id;

            root.querySelectorAll('.quiz-option').forEach(function (btn) {
                var oid = String(btn.getAttribute('data-option-id'));
                btn.disabled = true;
                if (correct && oid === String(correct.id)) {
                    btn.classList.add('is-correct');
                }
                if (pickedId != null && oid === String(pickedId) && !pickedCorrect) {
                    btn.classList.add('is-incorrect');
                }
            });

            if (state.revealAfterEach || asSkip) {
                var feedback = bind('feedback');
                var headline = bind('feedback-headline');
                var text = bind('feedback-text');
                if (feedback && headline && text) {
                    if (asSkip) {
                        feedback.classList.remove('is-correct', 'is-incorrect');
                        feedback.classList.add('is-skipped');
                        headline.textContent = 'Skipped';
                    } else if (pickedCorrect) {
                        feedback.classList.remove('is-incorrect', 'is-skipped');
                        feedback.classList.add('is-correct');
                        headline.textContent = 'Correct';
                    } else {
                        feedback.classList.remove('is-correct', 'is-skipped');
                        feedback.classList.add('is-incorrect');
                        headline.textContent = pickedId == null ? 'No answer selected' : 'Not quite';
                    }
                    text.textContent = q.explanation || (pickedCorrect
                        ? 'Well done.'
                        : (correct ? 'The correct answer is ' + (correct.letter || '') + '. ' + correct.text : ''));
                    feedback.hidden = false;
                }
            }

            renderProgressBar();
            var isLast = state.currentIndex === quiz.questions.length - 1;
            setActionState({
                submit: 'hidden',
                skip: 'hidden',
                next: isLast ? 'hidden' : 'visible',
                finish: isLast ? 'visible' : 'hidden',
            });
        };

        var skipQuestion = function () {
            var q = quiz.questions[state.currentIndex];
            if (!q) return;
            state.answers[q.id] = null;
            revealAnswer(true);
        };

        var nextQuestion = function () {
            if (state.currentIndex < quiz.questions.length - 1) {
                state.currentIndex += 1;
                renderQuestion();
            }
        };

        var computeScore = function () {
            var correct = 0;
            quiz.questions.forEach(function (q) {
                var pickedId = state.answers[q.id];
                if (pickedId == null) return;
                var picked = q.options.find(function (o) { return o.id === pickedId; });
                if (picked && picked.is_correct) correct += 1;
            });
            return { correct: correct, total: quiz.questions.length };
        };

        var resultsMessage = function (pct) {
            if (pct >= 90) return 'Excellent. You have a strong grasp of this material.';
            if (pct >= 70) return 'Good understanding. Review the questions you missed to lock it in.';
            if (pct >= 50) return 'A solid start. Focus on the items below to improve.';
            return 'Worth another pass. The review below highlights what to revisit.';
        };

        var renderResults = function () {
            var s = computeScore();
            var pct = s.total === 0 ? 0 : Math.round((s.correct / s.total) * 100);

            var fractionEl = bind('score-fraction');
            if (fractionEl) fractionEl.textContent = s.correct + ' / ' + s.total;
            var pctEl = bind('score-pct');
            if (pctEl) pctEl.textContent = pct + '%';

            var ring = bind('score-ring');
            if (ring) {
                var r = 52;
                var circumference = 2 * Math.PI * r;
                ring.style.strokeDasharray = circumference.toFixed(2);
                ring.style.strokeDashoffset = (circumference * (1 - pct / 100)).toFixed(2);
            }
            var ringWrap = bind('score-ring-wrap');
            if (ringWrap) {
                ringWrap.classList.remove('tier-low', 'tier-mid', 'tier-high', 'tier-perfect');
                if (pct === 100) ringWrap.classList.add('tier-perfect');
                else if (pct >= 70) ringWrap.classList.add('tier-high');
                else if (pct >= 50) ringWrap.classList.add('tier-mid');
                else ringWrap.classList.add('tier-low');
            }

            var msg = bind('results-message');
            if (msg) msg.textContent = resultsMessage(pct);

            var review = bind('review');
            if (review) {
                review.innerHTML = '';
                quiz.questions.forEach(function (q, i) {
                    var pickedId = state.answers[q.id];
                    var picked = pickedId != null ? q.options.find(function (o) { return o.id === pickedId; }) : null;
                    var correct = q.options.find(function (o) { return o.is_correct; });
                    var ok = picked && picked.is_correct;

                    var item = document.createElement('details');
                    item.className = 'quiz-review-item ' + (ok ? 'is-correct' : (picked ? 'is-incorrect' : 'is-skipped'));

                    var summary = document.createElement('summary');
                    summary.className = 'quiz-review-summary';

                    var num = document.createElement('span');
                    num.className = 'quiz-review-number';
                    num.textContent = String(i + 1);

                    var promptEl = document.createElement('span');
                    promptEl.className = 'quiz-review-prompt';
                    promptEl.textContent = q.prompt;

                    var status = document.createElement('span');
                    status.className = 'quiz-review-status';
                    status.textContent = ok ? 'Correct' : (picked ? 'Incorrect' : 'Skipped');

                    summary.appendChild(num);
                    summary.appendChild(promptEl);
                    summary.appendChild(status);
                    item.appendChild(summary);

                    var body = document.createElement('div');
                    body.className = 'quiz-review-body';

                    var yourLine = document.createElement('p');
                    yourLine.className = 'quiz-review-line';
                    yourLine.innerHTML = '<span class="quiz-review-label">Your answer:</span> ' +
                        (picked ? escapeHtml((picked.letter || '') + '. ' + picked.text) : '<em class="quiz-review-empty">Skipped</em>');
                    body.appendChild(yourLine);

                    if (correct) {
                        var correctLine = document.createElement('p');
                        correctLine.className = 'quiz-review-line';
                        correctLine.innerHTML = '<span class="quiz-review-label">Correct answer:</span> ' +
                            escapeHtml((correct.letter || '') + '. ' + correct.text);
                        body.appendChild(correctLine);
                    }

                    if (q.explanation) {
                        var explLine = document.createElement('p');
                        explLine.className = 'quiz-review-line quiz-review-explanation';
                        explLine.innerHTML = '<span class="quiz-review-label">Why:</span> ' + escapeHtml(q.explanation);
                        body.appendChild(explLine);
                    }

                    item.appendChild(body);
                    review.appendChild(item);
                });
            }

            showScreen('results');
        };

        var escapeHtml = function (str) {
            return String(str).replace(/[&<>"']/g, function (ch) {
                return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[ch];
            });
        };

        var resetForRetry = function () {
            state.currentIndex = 0;
            state.answers = {};
            state.revealed = {};
        };

        root.addEventListener('click', function (e) {
            var target = e.target.closest('[data-quiz-action]');
            if (target) {
                var action = target.getAttribute('data-quiz-action');
                if (action === 'start') { resetForRetry(); renderQuestion(); }
                else if (action === 'submit') submitAnswer();
                else if (action === 'skip') skipQuestion();
                else if (action === 'next') nextQuestion();
                else if (action === 'finish') renderResults();
                else if (action === 'retry') { resetForRetry(); renderQuestion(); }
                else if (action === 'cover') { resetForRetry(); showScreen('cover'); }
                return;
            }

            var optBtn = e.target.closest('.quiz-option');
            if (optBtn && !optBtn.disabled) {
                selectOption(optBtn.getAttribute('data-option-id'));
            }
        });

        root.addEventListener('change', function (e) {
            var toggle = e.target.closest('[data-quiz-toggle="reveal"]');
            if (toggle) state.revealAfterEach = !!toggle.checked;
        });

        document.addEventListener('keydown', function (e) {
            if (!state.running) return;
            if (root.offsetParent === null) return;
            if (e.target && (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA')) return;

            var q = quiz.questions[state.currentIndex];
            if (!q) return;

            var key = e.key;
            var letterIndex = -1;
            if (/^[a-dA-D]$/.test(key)) letterIndex = key.toUpperCase().charCodeAt(0) - 65;
            else if (/^[1-4]$/.test(key)) letterIndex = parseInt(key, 10) - 1;

            if (letterIndex >= 0 && letterIndex < q.options.length) {
                if (!state.revealed[q.id]) {
                    selectOption(q.options[letterIndex].id);
                    e.preventDefault();
                }
                return;
            }

            if (key === 'Enter') {
                if (state.revealed[q.id]) {
                    if (state.currentIndex === quiz.questions.length - 1) renderResults();
                    else nextQuestion();
                } else if (state.answers[q.id] != null) {
                    submitAnswer();
                }
                e.preventDefault();
            }
        });

        showScreen('cover');
    })();
</script>