<?php
require __DIR__ . "/../api/monitoring/koneksi.php";

$pc_id = (int)($_GET['id'] ?? 0);
$pc = $conn->query("SELECT * FROM pc_clients WHERE id=$pc_id")->fetch_assoc();
if (!$pc) die("PC tidak ditemukan");
?>

<!DOCTYPE html>
<html>
<head>
    <title>PC Detail - <?= $pc['hostname'] ?></title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body { font-family: Arial; }
        .cards { display: flex; gap: 10px; flex-wrap: wrap; }
        .card { padding: 10px; background: #f4f4f4; border-radius: 6px; min-width: 140px; }
        table { width: 100%; border-collapse: collapse; margin-top: 10px; }
        th, td { padding: 6px; border-bottom: 1px solid #ddd; }
        .danger { color: red; font-weight: bold; }
    </style>
</head>

<body>

<header class="detail-header">
    <a href="index.php" class="back-btn">⬅ Kembali</a>

   
</header>

<h2>🖥️ <?= $pc['hostname'] ?></h2>
<p>
    IP: <?= $pc['ip_address'] ?><br>
    OS: <?= $pc['os'] ?><br>
    Status: <?= (strtotime($pc['last_seen']) > time()-120) ? 'Online' : 'Offline' ?><br>
    Last Seen: <?= $pc['last_seen'] ?>
</p>

<!-- SUMMARY CARDS -->
<div class="cards">
    <div class="card" id="cpu_card">CPU: -</div>
    <div class="card" id="ram_card">RAM: -</div>
    <div class="card" id="cpu_temp_card">CPU Temp: -</div>
    <div class="card" id="gpu_temp_card">GPU Temp: -</div>
    <div class="card" id="fan_card">Fan: -</div>
</div>

<!-- CHARTS -->
<h3>Performance</h3>
<canvas id="cpuChart"></canvas>
<canvas id="ramChart"></canvas>

<h3>Temperature & Fan</h3>
<canvas id="tempChart"></canvas>
<canvas id="fanChart"></canvas>

<!-- DISK -->
<h3>Disk Usage</h3>
<table id="diskTable">
    <thead>
        <tr><th>Device</th><th>Total (GB)</th><th>Used (GB)</th><th>%</th></tr>
    </thead>
    <tbody></tbody>
</table>

<!-- SENSOR DETAIL -->
<h3>All Sensors</h3>
<pre id="sensorRaw"></pre>

<!-- ERRORS -->
<h3>Error Log</h3>
<ul id="errorList"></ul>

<script>
const pcId = <?= $pc_id ?>;

const cpuChart = new Chart(cpuChartCanvas = document.getElementById('cpuChart'), {
    type: 'line',
    data: { labels: [], datasets: [{ label: 'CPU %', data: [] }] }
});
const ramChart = new Chart(document.getElementById('ramChart'), {
    type: 'line',
    data: { labels: [], datasets: [{ label: 'RAM %', data: [] }] }
});
const tempChart = new Chart(document.getElementById('tempChart'), {
    type: 'line',
    data: { labels: [], datasets: [
        { label: 'CPU Temp', data: [] },
        { label: 'GPU Temp', data: [] }
    ]}
});
const fanChart = new Chart(document.getElementById('fanChart'), {
    type: 'line',
    data: { labels: [], datasets: [{ label: 'Fan RPM', data: [] }] }
});

function loadDetail() {
    fetch(`api/pc_detail.php?pc_id=${pcId}`)
        .then(r => r.json())
        .then(rows => {
            if (!rows.length) return;

            const last = rows[rows.length - 1];

            cpu_card.innerHTML = `CPU: <b>${last.cpu}%</b>`;
            ram_card.innerHTML = `RAM: <b>${last.ram}%</b>`;
            cpu_temp_card.innerHTML = `CPU Temp: <b>${last.cpu_temp ?? '-'}°C</b>`;
            gpu_temp_card.innerHTML = `GPU Temp: <b>${last.gpu_temp ?? '-'}°C</b>`;
            fan_card.innerHTML = `Fan: <b>${last.fan ?? '-'} RPM</b>`;

            cpuChart.data.labels = rows.map(r => r.time);
            cpuChart.data.datasets[0].data = rows.map(r => r.cpu);

            ramChart.data.labels = rows.map(r => r.time);
            ramChart.data.datasets[0].data = rows.map(r => r.ram);

            tempChart.data.labels = rows.map(r => r.time);
            tempChart.data.datasets[0].data = rows.map(r => r.cpu_temp);
            tempChart.data.datasets[1].data = rows.map(r => r.gpu_temp);

            fanChart.data.labels = rows.map(r => r.time);
            fanChart.data.datasets[0].data = rows.map(r => r.fan);

            cpuChart.update();
            ramChart.update();
            tempChart.update();
            fanChart.update();

            // Disk table
            let diskHtml = '';
            last.disk.forEach(d => {
                diskHtml += `<tr>
                    <td>${d.device}</td>
                    <td>${d.total_gb}</td>
                    <td>${d.used_gb}</td>
                    <td class="${d.percent > 90 ? 'danger' : ''}">${d.percent}%</td>
                </tr>`;
            });
            document.querySelector('#diskTable tbody').innerHTML = diskHtml;

            // Raw sensor
            sensorRaw.textContent = JSON.stringify(last.sensors, null, 2);

            // Errors
            errorList.innerHTML = last.errors.map(e => `<li class="danger">${e}</li>`).join('');
        });
}

loadDetail();
setInterval(loadDetail, 10000);
</script>

</body>
</html>
