{% extends 'base.html' %}

{% block content %}
<div class="container mx-auto px-4">
    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <h1 class="text-3xl font-bold mb-6">Ergebnisse</h1>
        
        <div class="mb-6">
            <h2 class="text-xl font-bold mb-4">Aktuelle Frage</h2>
            <p class="text-lg mb-2">{{ question_data.question }}</p>
            <div class="grid grid-cols-2 gap-4">
                {% for option in question_data.options %}
                    <div class="p-4 rounded-lg {% if option.is_correct %}bg-green-100 border-2 border-green-500 {% else %} bg-gray-100 {% endif %}">
                        <p class="text-lg">{{ option.value }}</p>
                        <p class="text-gray-600" id="option-count-{{ forloop.counter0 }}">0 Antworten</p>
                    </div>
                {% endfor %}
            </div>
        </div>
    {% if request.session.mode != "learn" %} 
    
        <div class="mb-6">
            <h2 class="text-xl font-bold mb-4">Punktestand</h2>
            <div class="space-y-2">
                {% for participant in participants %}
                {% if participant == my_participant or is_host %}
                
                    <div class="p-4 {% if forloop.first %}bg-yellow-100 border-2 border-yellow-500{% else %}bg-gray-100{% endif %} rounded-lg flex justify-between items-center">
                        <div>                    
                             <p class="text-lg font-bold">{{ participant.display_name }}</p>
                             <p class="text-gray-600">{{ participant.score }} Punkte</p> 
                        </div>                     
                        {% if participant.last_answer_correct %}
                            <span class="text-green-500">✓</span>
                        {% elif participant.last_answer_correct == False %}
                            <span class="text-red-500">✗</span>
                        {% endif %}
                    </div>
                    {% else %}


                    {% endif %}
                    


                {% endfor %}
            </div>
        </div>
        {% endif %}
        {% if is_host %}
            {% if is_last_question %}
                <button id="finish-button" class="w-full p-3 rounded-full bg-blue-600 text-white font-bold hover:bg-blue-700 transition-colors duration-200">
                    Quiz beenden
                </button>
            {% else %}
                <button id="next-button" class="w-full p-3 rounded-full bg-blue-600 text-white font-bold hover:bg-blue-700 transition-colors duration-200">
                    Nächste Frage
                </button>
            {% endif %}
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
{% include 'play/game/common_scripts.html' %}
<script>
    const joinCode = '{{ quiz_game.join_code }}';
    const hostId = '{{ host_id }}';
    const wsScheme = window.location.protocol === 'https:' ? 'wss' : 'ws';
    const gameSocket = new WebSocket(
        `${wsScheme}://${window.location.host}/ws/game/${joinCode}/`
    );

    gameSocket.onmessage = function(e) {
        const data = JSON.parse(e.data);
        if (data.type === 'game_state_update' && 
            data.redirect_url && 
            (data.action === 'next_question' || data.action === 'finish_game')) {
            window.location.href = data.redirect_url;
        } else if (data.type === 'answer_stats') {
            updateAnswerStats(data.stats);
        }
    };

    gameSocket.onclose = function(e) {
        // Normal closure (code 1000) oder Navigation zu einer anderen Seite (code 1001)
        if (e.code === 1000 || e.code === 1001) {
            console.log('Game socket closed normally');
        } else {
            console.error('Game socket closed unexpectedly', e.code);
        }
    };

    {% if is_host %}
    // Add click handlers for host buttons
    {% if is_last_question %}
    var finishButton = document.getElementById('finish-button');
    if (finishButton) {
        finishButton.addEventListener('click', function() {
            gameSocket.send(JSON.stringify({
                'type': 'finish_game',
                'host_id': hostId
            }));
        });
    }
    {% else %}
    var nextButton = document.getElementById('next-button');
    if (nextButton) {
        nextButton.addEventListener('click', function() {
            gameSocket.send(JSON.stringify({
                'type': 'next_question',
                'host_id': hostId
            }));
        });
    }
    {% endif %}
    {% endif %}

    function updateAnswerStats(stats) {
        for (var optionIndex in stats) {
            if (stats.hasOwnProperty(optionIndex)) {
                var element = document.getElementById('option-count-' + optionIndex);
                if (element) {
                    
                    element.textContent = stats[optionIndex] + ' Antwort(en)';
                }
            }
        }
    }

    // Request answer stats when page loads
    gameSocket.onopen = function(e) {
        gameSocket.send(JSON.stringify({
            'type': 'get_answer_stats'
        }));
    };
</script>
{% endblock %}