{% extends 'base.html' %}

{% block content %}
<div class="container mx-auto px-4">
    <h3>{{ quiz.name }}</h3>
    <h1 class="text-center text-4xl font-bold mb-4">{{ quiz_game.join_code }}</h1>
    {% if participant %}
    <div class="mt-4 mb-4 text-center">
        <h3>Sichtbar als <b>{{ participant.display_name }}</b></h3>
    </div>
    {% endif %}
    <div class="mb-4">
        <h3 class="font-bold mb-2">Teilnehmer:</h3>
        <ul id="participants-list" class="space-y-2">
            <li class="text-gray-500">Warte auf Teilnehmer...</li>
        </ul>
    </div>
    {% if host_id %}
    <button id="start-button" class="w-full p-3 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200" type="button">Starten</button>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
    const joinCode = '{{ quiz_game.join_code }}';
    const wsScheme = window.location.protocol === 'https:' ? 'wss' : 'ws';
    const lobbySocket = new WebSocket(
        wsScheme + '://' + window.location.host + '/ws/game/' + joinCode + '/'
    );

    lobbySocket.onmessage = function(e) {
        const data = JSON.parse(e.data);
        if (data.type === 'participant_list' || data.type === 'participant_list_update') {
            updateParticipantsList(data.participants);
        }
    };

    lobbySocket.onclose = function(e) {
        console.error('Lobby socket closed unexpectedly');
    };

    {% if participant %}
    // Send heartbeat every 10 seconds
    setInterval(() => {
        if (lobbySocket.readyState === WebSocket.OPEN) {
            lobbySocket.send(JSON.stringify({
                'type': 'heartbeat',
                'participant_id': '{{ participant.participant_id }}'
            }));
        }
    }, 10000);
    {% endif %}

    function updateParticipantsList(participants) {
        const list = document.getElementById('participants-list');
        if (participants.length === 0) {
            list.innerHTML = '<li class="text-gray-500">Noch keine Teilnehmer...</li>';
            return;
        }

        list.innerHTML = participants
            .map(p => `<li class="p-2 bg-gray-100 rounded">${p.name}</li>`)
            .join('');
    }

    // Request initial participants list
    lobbySocket.onopen = function(e) {
        lobbySocket.send(JSON.stringify({
            'type': 'update_participants'
        }));
    };
</script>
{% endblock %}