<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Status Node - MEAOW's#9537</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
    <style>
        body {
            font-family: 'Kanit', sans-serif;
            background-color: #1a1a2e;
            color: white;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        footer {
            margin-top: auto;
            background: none;
            padding: 1rem 0;
        }
    </style>
</head>
<body class="bg-gray-900 text-white">
    <header class="bg-gray-800 py-4">
        <div class="container mx-auto flex justify-between items-center px-4">
            <div class="text-lg font-bold">MEAOW's#9537 - Status Node</div>
            <nav class="space-x-4">
                <a class="hover:text-gray-400" href="./index.html">
                    <i class="fas fa-home"></i> Home
                </a>
            </nav>
        </div>
    </header>
    
    <main class="container mx-auto text-center py-8 px-4">
        <h1 class="text-3xl font-bold mb-8">Lavalink Status</h1>
        <div id="status" class="bg-gray-800 rounded-lg shadow-lg p-6">
            <p>Loading data...</p>
        </div>
    </main>

    <footer class="py-4">
        <div class="container mx-auto text-center">
            <p class="text-gray-400 text-sm">&copy; 2024 MEAOW's#9537-Žedear. All rights reserved.</p>
        </div>
    </footer>
    
    <script>
        function msToTime(duration) {
            var seconds = Math.floor((duration / 1000) % 60),
                minutes = Math.floor((duration / (1000 * 60)) % 60),
                hours = Math.floor((duration / (1000 * 60 * 60)) % 24);

            return hours + " hours, " + minutes + " minutes, " + seconds + " seconds";
        }

        $(document).ready(function() {
            $.getJSON("https://providers.chompubot.work/meaowxecross/lavalink/status", function(data) {
                const statusDiv = $('#status');
                const uptime = msToTime(data.uptime);
                const freeMemory = (data.memory.free / 1024 / 1024).toFixed(2);
                const usedMemory = (data.memory.used / 1024 / 1024).toFixed(2);
                const totalMemory = (data.memory.allocated / 1024 / 1024).toFixed(2);
                const cpuLoad = (data.cpu.systemLoad * 100).toFixed(2);

                const htmlContent = `
                    <h2 class="text-xl font-bold mb-4">Lavalink Server Status</h2>
                    <p><strong>Players:</strong> ${data.players}</p>
                    <p><strong>Playing Players:</strong> ${data.playingPlayers}</p>
                    <p><strong>Uptime:</strong> ${uptime}</p>
                    <p><strong>Free Memory:</strong> ${freeMemory} MB</p>
                    <p><strong>Used Memory:</strong> ${usedMemory} MB</p>
                    <p><strong>Total Allocated Memory:</strong> ${totalMemory} MB</p>
                    <p><strong>CPU Load:</strong> ${cpuLoad}%</p>
                `;

                statusDiv.html(htmlContent);
            }).fail(function() {
                $('#status').html('<p>Failed to load data from the server.</p>');
            });
        });
    </script>
</body>
</html>