@extends('layouts.app')

@section('content')
    <link rel="stylesheet" href="{{ asset('css/quiz-game.css') }}">

<div class="max-w-2xl mx-auto mt-8">

    <!-- Top Ad -->
    <div class="bg-[#CDE9CE] border-l-4 border-[#77C58E] rounded-xl p-4 shadow mb-6 text-center text-[#526177]">
        Google Ad Slot (Top)
    </div>

    <div id="quiz-box" 
         class="bg-[#CDE9CE] rounded-2xl shadow-xl p-6 border-l-4 border-[#77C58E]">

        {{-- Loader --}}
        <div id="loader" class="text-center py-10">
            <h4 class="text-[#526177] text-xl font-semibold">Loading question...</h4>
        </div>

        {{-- Question UI --}}
        <div id="question-box" style="display:none;">

            {{-- Timer --}}
            <div class="flex justify-center mb-4">
                <div id="timer-circle"
                     class="w-16 h-16 flex items-center justify-center rounded-full font-bold text-lg
                            bg-[#77C58E] text-white shadow-lg">
                </div>
            </div>

            {{-- Question card --}}
            <div id="question-card"
                 class="bg-white rounded-xl p-5 shadow border border-[#77C58E] text-[#526177]">
                <h3 id="question-text" class="font-semibold text-lg"></h3>
            </div>

            {{-- Options --}}
            <div id="options-list" class="mt-4 space-y-3"></div>

            {{-- Submit button --}}
            <div class="text-center mt-5">
                <button id="submit-btn"
                    class="bg-[#F3A358] hover:bg-[#E28C3A] text-white font-bold py-3 px-10 rounded-xl shadow-md 
                           border-b-4 border-[#E28C3A] transition-transform transform hover:scale-[1.02]"
                    disabled>
                    Lock In Answer
                </button>
            </div>
        </div>

        {{-- Results --}}
        <div id="result-box" style="display:none;"></div>

    </div>

    <!-- Bottom Ad -->
    <div class="bg-[#CDE9CE] border-l-4 border-[#77C58E] rounded-xl p-4 shadow mt-6 text-center text-[#526177]">
        Google Ad Slot (Bottom)
    </div>

</div>

    <script>
        let attempt_id = '{{ $attempt->id }}';
        let answered = [];
        let selectedOption = null;
        let currentQuestionId = null;
        let timer = null;
        let timeLeft = 15;

        function fetchQuestion() {
            fetch(`/topics/{{ $topic->id }}/next-question?attempt_id=${attempt_id}`)
                .then(res => res.json())
                .then(data => {
                    if (data.finished) {
                        let levelUpHTML = '';

                        if (data.level_update && data.level_update.leveled_up) {
                            levelUpHTML = `
                        <div class="alert alert-success mb-3">
                            <h4>🎉 Level Up!</h4>
                            <p class="mb-0">You've advanced to <strong>${data.level_update.new_level.badge_icon} ${data.level_update.new_level.name}</strong></p>
                        </div>
                    `;
                        }

                        document.getElementById('quiz-box').innerHTML = `
                    <div class="text-center">
                        ${levelUpHTML}
                        <h2 class="fw-bold">🎉 Quiz Completed!</h2>
                        <p>Score: ${data.correct}/${data.total} (${data.score}%)</p>
                        <a href="/quiz/history" class="btn btn-primary mt-3">View History</a>
                    </div>`;
                        return;
                    }

                    renderQuestion(data);
                });
        }

        function renderQuestion(data) {
            document.getElementById('loader').style.display = 'none';
            document.getElementById('question-box').style.display = 'block';

            selectedOption = null;
            currentQuestionId = data.question.id;

            document.getElementById('question-text').innerHTML = data.question.question;

            const optionsContainer = document.getElementById('options-list');
            optionsContainer.innerHTML = '';

            data.options.forEach(option => {
                const div = document.createElement('div');
                div.classList.add('option-item');
                div.innerHTML = option.option_text;

                div.onclick = () => {
                    selectedOption = option.id;
                    document.querySelectorAll('.option-item')
                        .forEach(o => o.classList.remove('option-selected'));
                    div.classList.add('option-selected');
                    document.getElementById('submit-btn').disabled = false;
                };

                optionsContainer.appendChild(div);
            });

            startTimer();
        }

        function startTimer() {
            timeLeft = 15;
            const timerCircle = document.getElementById('timer-circle');
            timerCircle.innerHTML = timeLeft;

            timer = setInterval(() => {
                timeLeft--;
                timerCircle.innerHTML = timeLeft;

                if (timeLeft <= 0) {
                    clearInterval(timer);
                    submitAnswer(true);
                }
            }, 1000);
        }

        document.getElementById('submit-btn').onclick = () => submitAnswer(false);

        function submitAnswer(autoSubmit = false) {
            clearInterval(timer);

            // If auto-submit and no option selected, still submit to backend
            if (autoSubmit && selectedOption === null) {
                fetch(`/topics/{{ $topic->id }}/submit-answer`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            attempt_id: attempt_id,
                            question_id: currentQuestionId,
                            option_id: null, // No option selected
                            time_taken: 15
                        })
                    })
                    .then(res => res.json())
                    .then(data => {
                        // Move to next question regardless
                        setTimeout(fetchQuestion, 600);
                    })
                    .catch(err => {
                        console.error('Submission error:', err);
                        // Still move to next question even if error
                        setTimeout(fetchQuestion, 600);
                    });
                return;
            }

            // If manually submitted without selection, do nothing
            if (!autoSubmit && selectedOption === null) {
                return;
            }

            fetch(`/topics/{{ $topic->id }}/submit-answer`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        attempt_id: attempt_id,
                        question_id: currentQuestionId,
                        option_id: selectedOption,
                        time_taken: 15 - timeLeft
                    })
                })
                .then(res => {
                    if (!res.ok) {
                        return res.json().then(data => {
                            if (data.time_exceeded) {
                                setTimeout(fetchQuestion, 600);
                                throw new Error('Time exceeded');
                            }
                            throw new Error('Submission failed');
                        });
                    }
                    return res.json();
                })
                .then(data => {
                    let selectedEl = document.querySelector('.option-selected');

                    if (selectedEl && !autoSubmit) {
                        if (data.correct) {
                            selectedEl.classList.add('correct-flash');
                        } else {
                            selectedEl.classList.add('wrong-flash');
                        }
                    }

                    setTimeout(fetchQuestion, 600);
                })
                .catch(err => {
                    console.error('Submission error:', err);
                });
        }

        document.addEventListener('DOMContentLoaded', fetchQuestion);
    </script>
@endsection