{% extends 'base.html' %}

{% block content %}
<div class="container mx-auto px-4">
    <div class="flex justify-end mb-4">
        <button onclick="leaveGame()" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded">
            Spiel verlassen
        </button>
    </div>
    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <p class="text-gray-700 font-bold text-xl mb-4">Frage {{ question_index|add:1 }} von {{ total_questions }}</p>
        <h1 class="text-3xl font-bold mb-6">{{ question_data.question }}</h1>
        
        <div class="p-4 bg-blue-50 rounded-lg mb-6">
            <p class="text-blue-600 text-xl mb-2">Verbleibende Zeit</p>
            <p id="remaining-time" class="text-6xl font-bold text-blue-700">30</p>
        </div>

        <div class="grid grid-cols-2 gap-4" id="options-container">
            {% for option in question_data.options %}
                <button 
                    class="p-4 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option"
                    data-index="{{ forloop.counter0 }}"
                    onclick="submitAnswer({{ forloop.counter0 }});">
                    <p class="text-lg">{{ option.value }}</p>
                </button>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
{% include 'play/game/common_scripts.html' %}
<script>
    let hasAnswered = false;
    const joinCode = '{{ quiz_game.join_code }}';
    const participantId = '{{ participant.participant_id }}';
    const questionStartTime = {{ start_time }};
    const questionDuration = 30000; // 30 seconds in milliseconds
    const gameSocket = initializeGameSocket(joinCode);

    gameSocket.onmessage = function(e) {
        const data = JSON.parse(e.data);
        if (data.type === 'redirect' && data.url) {
            window.location.href = data.url;
        } else if (data.type === 'game_state_update' && 
            data.action === 'show_scores' && 
            data.redirect_url) {
            window.location.href = data.redirect_url;
        }
    };

    gameSocket.onclose = function(e) {
        wsUtil.handleClose(e);
    };

    function submitAnswer(optionIndex) {
        if (hasAnswered) return;
        
        hasAnswered = true;
        const now = Date.now();
        const timeRemaining = Math.max(0, questionDuration - (now - questionStartTime));

        // Disable all options and highlight selected
        const options = document.getElementsByClassName('answer-option');
        for (let option of options) {
            option.disabled = true;
            option.classList.remove('hover:bg-blue-100');
            if (parseInt(option.dataset.index) === optionIndex) {
                option.classList.remove('bg-gray-100');
                option.classList.add('bg-blue-600', 'text-white');
            } else {
                option.classList.add('opacity-50');
            }
        }

        // Send answer to server
        gameSocket.send(JSON.stringify({
            type: 'submit_answer',
            participant_id: participantId,
            answer: optionIndex,
            time_remaining: timeRemaining
        }));
    }

    // Timer
    function updateTimer() {
        const now = Date.now();
        const elapsed = now - questionStartTime;
        const remaining = Math.max(0, Math.ceil((questionDuration - elapsed) / 1000));
        
        document.getElementById('remaining-time').textContent = remaining;

        if (remaining === 0 && !hasAnswered) {
            // Auto-submit timeout answer
            submitAnswer(-1);
        } else if (remaining > 0) {
            requestAnimationFrame(updateTimer);
        }
    }

    function leaveGame() {
        if (confirm('Möchtest du das Spiel wirklich verlassen?')) {
            gameSocket.send(JSON.stringify({
                type: 'leave_game',
                participant_id: participantId
            }));
        }
    }

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