$(document).ready(function() {
    const path = window.location.pathname;
    const ws = new WebSocket('ws://' + window.location.host + path + '/ws');

    ws.onopen = function() {
        //console.log('WebSocket connection opened');
        $('#indicatorDisconnected').addClass('visually-hidden');
        $('#indicatorConnected').removeClass('visually-hidden');
        setInterval(function() {
            sendCommand({ command: "getCPUStatus" });
            sendCommand({ command: "getMemoryStatus" });
            sendCommand({ command: "getDiskStatus" });
            sendCommand({ command: "getEthernetStatus" });
            sendCommand({ command: "getModemStatus" });
            sendCommand({ command: "getTunnelStatus" });
            
        }, 1000);
    };

    ws.onmessage = function(event) {
        //console.log('WebSocket message received:', event.data);
        let msg = {};
        try {
            msg = JSON.parse(event.data);
        } catch (e) {
            console.error('Invalid JSON:', event.data);
            return;
        }
        
        if (msg.reply && msg.reply.length>0 && msg.data && msg.data.length > 0) {
            switch (msg.reply) {
                case "getCPUStatus":
                    const cpuData = JSON.parse(msg.data);
                    //console.log('CPU Status Data:', cpuData);
                    $('#cpuUsage').text(cpuData.average ? cpuData.average + '%' : 'N/A');
                    $('#core0Usage').text(cpuData.core0 ? cpuData.core0 + '%' : 'N/A');
                    $('#core1Usage').text(cpuData.core1 ? cpuData.core1 + '%' : 'N/A');
                    $('#core2Usage').text(cpuData.core2 ? cpuData.core2 + '%' : 'N/A');
                    $('#core3Usage').text(cpuData.core3 ? cpuData.core3 + '%' : 'N/A');
                    $('#cpuTemperature').text(cpuData.temperature ? cpuData.temperature + '°C' : 'N/A');
                    break;
                case "getMemoryStatus":
                    const memoryData = JSON.parse(msg.data);
                    //console.log('Memory Status Data:', memoryData);
                    $('#ramTotal').text(memoryData.total ? memoryData.total : 'N/A');
                    $('#ramUsed').text(memoryData.used ? memoryData.used : 'N/A');
                    $('#ramFree').text(memoryData.free ? memoryData.free : 'N/A');
                    $('#ramFreePercent').text(memoryData.freePercent ? memoryData.freePercent + '%' : 'N/A');
                    break;
                case "getDiskStatus":
                    const diskData = JSON.parse(msg.data);
                    //console.log('Disk Status Data:', diskData);
                    $('#diskTotal').text(diskData.total ? diskData.total : 'N/A');
                    $('#diskUsed').text(diskData.used ? diskData.used : 'N/A');
                    $('#diskFree').text(diskData.free ? diskData.free : 'N/A');
                    $('#diskFreePercent').text(diskData.freePercent ? diskData.freePercent + '%' : 'N/A');
                    break;
                case "getEthernetStatus":
                    const ethernetData = JSON.parse(msg.data);
                    //console.log('Ethernet Status Data:', ethernetData);
                    $('#eth0Status').text(ethernetData.status ? ethernetData.status : 'N/A');
                    $('#eth0IP').text(ethernetData.ip ? ethernetData.ip : 'N/A');
                    $('#eth0TXBytes').text(ethernetData.txBytes ? ethernetData.txBytes : 'N/A');
                    $('#eth0RXBytes').text(ethernetData.rxBytes ? ethernetData.rxBytes : 'N/A');
                    $('#eth0TXSpeed').text(ethernetData.txSpeed ? ethernetData.txSpeed : 'N/A');
                    $('#eth0RXSpeed').text(ethernetData.rxSpeed ? ethernetData.rxSpeed : 'N/A');
                    break;
                case "getModemStatus":
                    const modemData = JSON.parse(msg.data);
                    //console.log('Modem Status Data:', modemData);
                    $('#modemStatus').text(modemData.status ? modemData.status : 'N/A');
                    $('#modemIP').text(modemData.ip ? modemData.ip : 'N/A');
                    $('#modemTXBytes').text(modemData.txBytes ? modemData.txBytes : 'N/A');
                    $('#modemRXBytes').text(modemData.rxBytes ? modemData.rxBytes : 'N/A');
                    $('#modemTXSpeed').text(modemData.txSpeed ? modemData.txSpeed : 'N/A');
                    $('#modemRXSpeed').text(modemData.rxSpeed ? modemData.rxSpeed : 'N/A');
                    break;
                case "getTunnelStatus":
                    const tunnelData = JSON.parse(msg.data);
                    //console.log('Tunnel Status Data:', tunnelData);
                    $('#tunnelStatus').text(tunnelData.status ? tunnelData.status : 'N/A');
                    $('#tunnelIP').text(tunnelData.ip ? tunnelData.ip : 'N/A');
                    $('#tunnelTXBytes').text(tunnelData.txBytes ? tunnelData.txBytes : 'N/A');
                    $('#tunnelRXBytes').text(tunnelData.rxBytes ? tunnelData.rxBytes : 'N/A');
                    $('#tunnelTXSpeed').text(tunnelData.txSpeed ? tunnelData.txSpeed : 'N/A');
                    $('#tunnelRXSpeed').text(tunnelData.rxSpeed ? tunnelData.rxSpeed : 'N/A');
                    break;
            }
        }
    };

    ws.onclose = function() {
        //console.log('WebSocket connection closed');
        $('#indicatorDisconnected').removeClass('visually-hidden');
        $('#indicatorConnected').addClass('visually-hidden');
    };

    ws.onerror = function(error) {
        console.error('WebSocket error:', error);
    };

    function sendCommand(command) {
        if (ws.readyState === WebSocket.OPEN) {
            ws.send(JSON.stringify(command));
        } else {
            console.error('WebSocket is not open. Unable to send command:', command);
        }
    }
});