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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bot Exposer</title>
    
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #0d1117;
            color: white;
        }

        #searchBar {
            width: 60%;
            padding: 10px;
            margin: 15px auto;
            border-radius: 5px;
            border: none;
            font-size: 16px;
            display: block;
            background: #161b22;
            color: white;
        }

        .server {
            background: #161b22;
            padding: 15px;
            margin: 10px auto;
            width: 60%;
            border-radius: 10px;
            box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .server-info {
            text-align: left;
        }

        .server-logo {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
            display: none;
        }

        .badge {
            padding: 5px 10px;
            border-radius: 5px;
            font-weight: bold;
            display: inline-block;
            margin: 5px;
        }

        .online {
            background-color: #1f6feb;
        }

        .players {
            background-color: #58a6ff;
        }

        .bots {
            background-color: #e63946;
        }
    
</head>

<body>
    <h1>Bot Exposer</h1>

    <input type="text" id="searchBar" placeholder="🔍 Zoek server..." onkeyup="filterServers()">

    <div id="serverList"></div>
    <p>Last updated: <span id="lastUpdated"></span> (Amsterdam Time)</p>

    <script src="botConfig.js"></script>
    <script>
        const servers = [
            { name: "Weekly Roleplay", cfx: "meojrd" },
            { name: "Helmond Roleplay", cfx: "r9ox98" },
            { name: "Europa Roleplay", cfx: "eg5e43" },
            { name: "Future Roleplay", cfx: "6r7pxd" },
            { name: "Springbank Roleplay", cfx: "yqr93k" },
            { name: "Tedeapolis", cfx: "bdmdx4" },
            { name: "Amersfoort Roleplay", cfx: "rlvgdj" },
            { name: "Haarlem Roleplay", cfx: "j76rv4" },
            { name: "Maaskantje Roleplay", cfx: "r9oqxj" },
            { name: "Shady's Testserver", cfx: "36qlgo" },
            { name: "Westkust Roleplay", cfx: "y7az5k" },
            { name: "Realistiq Roleplay", cfx: "opgr9v" },
            { name: "Westkust Roleplay", cfx: "y4kx6k" },
            { name: "Eindhoven Combat", cfx: "6rakg4" },
            { name: "Limburg Roleplay", cfx: "53kqy7" },
            { name: "Meetix RP", cfx: "q686x4" },
            { name: "Damsko Roleplay", cfx: "9m89gb" },
            { name: "Project Roleplay", cfx: "vxz56x" },
            { name: "Eindhoven Roleplay", cfx: "dlb7xd" }
        ];

        async function fetchServerData(server) {
            const serverContainer = document.getElementById(`server-${server.cfx}`);

            let cachedData = localStorage.getItem(server.cfx);
            if (cachedData) {
                cachedData = JSON.parse(cachedData);
                serverContainer.innerHTML = cachedData.html;
            } else {
                serverContainer.innerHTML = `
                    <div class="server-info">
                        <h2>${server.name}</h2>
                        <span class="badge online">Loading...</span>
                    </div>
                    <img class="server-logo" id="logo-${server.cfx}" alt="${server.name} logo">
                `;
            }

            try {
                const response = await fetch(`https://servers-frontend.fivem.net/api/servers/single/${server.cfx}`);
                if (!response.ok) throw new Error(`Failed to fetch (${response.status})`);

                const data = await response.json();
                if (!data.Data || !data.Data.players || !data.Data.vars) {
                    throw new Error("Invalid API response");
                }

                const players = data.Data.players.length || 0;
                const maxPlayers = data.Data.vars.sv_maxClients || "Unknown";
                const botPercentage = botPercentages[server.cfx] || 0;
                const bots = Math.round((botPercentage / 100) * players);
                const realPlayers = players - bots;
                const playerPercentage = players > 0 ? ((realPlayers / players) * 100).toFixed(2) : 0;

                const logo = data.Data.iconVersion
                    ? `https://servers-frontend.fivem.net/api/servers/icon/${server.cfx}/${data.Data.iconVersion}.png`
                    : null;

                const serverHTML = `
                    <div class="server-info">
                        <h2>${server.name}</h2>
                        <span class="badge online">Online ${players}/${maxPlayers}</span>
                        <span class="badge players">Players ${realPlayers} - ${playerPercentage}%</span>
                        <span class="badge bots">Bots ${bots} - ${botPercentage}%</span>
                    </div>
                    ${logo ? `<img src="${logo}" class="server-logo" id="logo-${server.cfx}" alt="${server.name} logo" style="display:block;">` : ""}
                `;

                serverContainer.innerHTML = serverHTML;
                localStorage.setItem(server.cfx, JSON.stringify({ html: serverHTML, timestamp: Date.now() }));

            } catch (error) {
                console.error(`Error fetching data for ${server.name}:`, error);
            }
        }

        function filterServers() {
            const searchValue = document.getElementById("searchBar").value.toLowerCase();
            servers.forEach(server => {
                const serverElement = document.getElementById(`server-${server.cfx}`);
                if (server.name.toLowerCase().includes(searchValue)) {
                    serverElement.style.display = "flex";
                } else {
                    serverElement.style.display = "none";
                }
            });
        }

        async function initializeServers() {
            const serverList = document.getElementById("serverList");
            serverList.innerHTML = "";

            for (const server of servers) {
                const serverDiv = document.createElement("div");
                serverDiv.classList.add("server");
                serverDiv.id = `server-${server.cfx}`;
                serverList.appendChild(serverDiv);

                fetchServerData(server);
            }

            document.getElementById("lastUpdated").textContent = new Date().toLocaleString("nl-NL", { timeZone: "Europe/Amsterdam" });
        }

        setInterval(initializeServers, 300000);
        initializeServers();
    </script>
</body>

</html>