<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Spielmodi Auswahl</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>

<body>
    <div class="hud">
        <div>
            <i class="fas fa-user icon"></i>
            <strong>Username:</strong> <span id="username">Player</span>
        </div>
        <div>
            <i class="fas fa-trophy icon"></i>
            <strong>Level:</strong> <span id="level">0</span>
        </div>
        <div>
            <i class="fas fa-skull-crossbones icon"></i>
            <strong>Kills:</strong> <span id="kills">0</span>
        </div>
        <div>
            <i class="fas fa-heart-broken icon"></i>
            <strong>Deaths:</strong> <span id="deaths">0</span>
        </div>
    </div>

    <div class="menu" id="menu">
        <div class="menu-item" onclick="showGangSelection()">
            <span>Streetfight</span>
        </div>
        <div class="menu-item" onclick="showFFASelection()">
            <span>Free for all</span>
        </div>
        <div class="menu-item">
            <span>Coming soon!</span>
        </div>
    </div>

    <div class="gang-selection" id="gang-selection">
        <h2>Wähle ein Gang:</h2>
        <div class="gang-list" id="gang-list">          
        </div>
        <button class="back-button" onclick="backToMenu()">Zurück</button>
    </div>

    <div class="ffa-selection" id="ffa-selection">
        <h2>Wähle eine FFA Lobby:</h2>
        <div class="ffa-list" id="ffa-list">            
        </div>
        <button class="back-button" onclick="backToMenu()">Zurück</button>
    </div>

    <script>
        function showGangSelection() {
            document.getElementById('menu').style.display = 'none';
            document.getElementById('gang-selection').style.display = 'block';
        }

        function showFFASelection() {
            document.getElementById('menu').style.display = 'none';
            document.getElementById('ffa-selection').style.display = 'block';
        }

        function backToMenu() {
            document.getElementById('gang-selection').style.display = 'none';
            document.getElementById('ffa-selection').style.display = 'none';
            document.getElementById('menu').style.display = 'flex';
        }

        function renderGangs(gangs) {
            const gangList = document.getElementById('gang-list');
            gangList.innerHTML = '';

            gangs.forEach(gang => {
                const gangItem = document.createElement('div');
                gangItem.classList.add('gang-item');
                gangItem.style.backgroundImage = `url(images/gang_${gang.name.toLowerCase()}.png)`;
                gangItem.setAttribute('data-gang-name', gang.name);
                gangItem.innerHTML = `
                    <span class="player-count">${gang.memberCount}/10 Spieler</span>
                `;
                gangItem.onclick = () => joinGang(gang.name);
                gangList.appendChild(gangItem);
            });
        }

        function renderFFAs(ffas) {
            const ffaList = document.getElementById('ffa-list');
            ffaList.innerHTML = '';

            ffas.forEach(ffa => {
                const ffaItem = document.createElement('div');
                ffaItem.classList.add('ffa-item');
                ffaItem.style.backgroundImage = `url(images/${ffa.MapName.toLowerCase()}.png)`;
                ffaItem.setAttribute('data-ffa-name', ffa.MapName);
                ffaItem.innerHTML = `
                    <span class="player-count">${ffa.memberCount}/12 Spieler</span>
                `;
                ffaItem.onclick = () => joinFFA(ffa.MapName);
                ffaList.appendChild(ffaItem);
            });
        }

        if ('alt' in window) {
            alt.on('updateGangCounts', (gangData) => {
                renderGangs(gangData);
            });

            alt.on('updateFFACounts', (ffaData) => {
                renderFFAs(ffaData);
            });

            alt.on('updateHUD', (data) => {
                document.getElementById('username').innerText = data.username;
                document.getElementById('level').innerText = data.level || 0;
                document.getElementById('kills').innerText = data.kills || 0;
                document.getElementById('deaths').innerText = data.deaths || 0;
            });
        }

        function joinGang(gangName) {
            if ('alt' in window) {
                alt.emit('joinGang', gangName);
            }
        }

        function joinFFA(ffaArena) {
            if ('alt' in window) {
                alt.emit('joinFFA', ffaArena);
            }
        }
    </script>
</body>

</html>