let cpuChart, ramChart;

/* ===============================
   INIT CHART
================================ */
function initChart(id, label) {
    return new Chart(document.getElementById(id), {
        type: 'line',
        data: {
            labels: [],
            datasets: [{
                label: label,
                data: [],
                tension: 0.3,
                fill: false
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100
                }
            }
        }
    });
}

cpuChart = initChart('cpuChart', 'Average CPU Usage (%)');
ramChart = initChart('ramChart', 'Average RAM Usage (%)');

/* ===============================
   SUMMARY
================================ */
function loadSummary() {
    fetch('data_summary.php')
        .then(r => r.json())
        .then(d => {
            total_pc.innerHTML = `Total PC<br><b>${d.total}</b>`;
            online_pc.innerHTML = `Online<br><b>${d.online}</b>`;
            offline_pc.innerHTML = `Offline<br><b>${d.offline}</b>`;
        });
}

/* ===============================
   REALTIME DATA
================================ */
function loadRealtime() {
    fetch('data_realtime.php')
        .then(r => r.json())
        .then(rows => {

            let table = "";
            let now = new Date().toLocaleTimeString();

            let cpuSum = 0;
            let ramSum = 0;
            let count = 0;

            rows.forEach(r => {
                table += `
                    <tr>
                        <td>${r.hostname}</td>
                        <td>${r.ip}</td>
                        <td>${r.os}</td>
                        <td class="${r.status === 'online' ? 'status-online' : 'status-offline'}">
                            ${r.status}
                        </td>
                        <td>${r.last_seen}</td>
                        <td>
                            <a class="btn-detail" href="pc_detail.php?id=${r.id}">
                                Detail
                            </a>
                        </td>
                    </tr>
                `;

                if (r.status === 'online') {
                    cpuSum += Number(r.cpu || 0);
                    ramSum += Number(r.ram || 0);
                    count++;
                }
            });

            pcTable.innerHTML = table;

            /* ===============================
               CHART DATA (1 POINT ONLY)
            ================================ */
            if (count > 0) {
                cpuChart.data.labels.push(now);
                cpuChart.data.datasets[0].data.push((cpuSum / count).toFixed(1));

                ramChart.data.labels.push(now);
                ramChart.data.datasets[0].data.push((ramSum / count).toFixed(1));
            }

            /* Batasi max 20 point */
            if (cpuChart.data.labels.length > 20) {
                cpuChart.data.labels.shift();
                cpuChart.data.datasets[0].data.shift();
                ramChart.data.labels.shift();
                ramChart.data.datasets[0].data.shift();
            }

            cpuChart.update();
            ramChart.update();
        });
}




/* ===============================
   AUTO REFRESH
================================ */
setInterval(() => {
    loadSummary();
    loadRealtime();
}, 5000);

loadSummary();
loadRealtime();

