<?php
require_once __DIR__ . '/auth.php';

$login_error = '';

if (isset($_GET['logout'])) {
    wsys_logout();
    header('Location: index.php');
    exit;
}

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['login_submit'])) {
    $username = isset($_POST['username']) ? trim($_POST['username']) : '';
    $password = isset($_POST['password']) ? (string)$_POST['password'] : '';
    $remember = !empty($_POST['remember_me']);

    if (wsys_login($username, $password, $remember)) {
        header('Location: index.php');
        exit;
    }

    $login_error = 'Invalid username or password.';
}

if (!wsys_is_authenticated()):
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WSysMonitor Login</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            color: #eaeaea;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .login-card {
            width: 100%;
            max-width: 420px;
            background: linear-gradient(145deg, #1f2937 0%, #111827 100%);
            border: 1px solid #374151;
            border-radius: 14px;
            padding: 28px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.35);
        }
        .login-title {
            color: #e94560;
            font-size: 1.5rem;
            margin-bottom: 18px;
            text-align: center;
        }
        .field { margin-bottom: 14px; }
        label { display: block; margin-bottom: 6px; color: #cbd5e1; font-size: 0.92rem; }
        input[type="text"], input[type="password"] {
            width: 100%;
            padding: 10px 12px;
            border-radius: 8px;
            border: 1px solid #475569;
            background: #0f172a;
            color: #e2e8f0;
        }
        .remember {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 8px 0 16px;
            color: #cbd5e1;
            font-size: 0.92rem;
        }
        .error {
            background: rgba(239,68,68,0.12);
            border: 1px solid #ef4444;
            color: #fecaca;
            padding: 9px 10px;
            border-radius: 8px;
            margin-bottom: 12px;
            font-size: 0.9rem;
        }
        button {
            width: 100%;
            padding: 10px 12px;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            background: linear-gradient(90deg, #e94560 0%, #f87171 100%);
            color: #fff;
        }
    </style>
</head>
<body>
    <form class="login-card" method="post" action="index.php" autocomplete="off">
        <h1 class="login-title">🔒 WSysMonitor Login</h1>
        <?php if ($login_error): ?>
            <div class="error"><?php echo htmlspecialchars($login_error); ?></div>
        <?php endif; ?>

        <div class="field">
            <label for="username">Username</label>
            <input id="username" name="username" type="text" required>
        </div>
        <div class="field">
            <label for="password">Password</label>
            <input id="password" name="password" type="password" required>
        </div>

        <label class="remember">
            <input type="checkbox" name="remember_me" value="1">
            Remember me
        </label>

        <button type="submit" name="login_submit" value="1">Sign in</button>
    </form>
</body>
</html>
<?php exit; endif; ?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WSysMonitor - Real-Time System Monitor</title>
    <link rel="icon" type="image/png" href="abaddon.png">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color: #eaeaea; min-height: 100vh; }
        .header { position: relative; background: linear-gradient(90deg, #0f3460 0%, #16213e 100%); padding: 20px; text-align: center; border-bottom: 3px solid #e94560; box-shadow: 0 4px 20px rgba(233, 69, 96, 0.3); }
        .header h1 { color: #e94560; font-size: 2.5em; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
        .header p { color: #a0a0a0; margin-top: 5px; }
        .logout-btn {
            position: absolute;
            top: 18px;
            right: 20px;
            color: #e2e8f0;
            text-decoration: none;
            border: 1px solid #ef4444;
            border-radius: 8px;
            padding: 7px 12px;
            font-size: 0.9em;
            background: rgba(239, 68, 68, 0.15);
        }
        .logout-btn:hover { background: rgba(239, 68, 68, 0.28); }
        .container { max-width: 1400px; margin: 0 auto; padding: 20px; }
        .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; margin-top: 20px; }
        .card { background: linear-gradient(145deg, #1f2937 0%, #111827 100%); border-radius: 15px; padding: 25px; border: 1px solid #374151; box-shadow: 0 10px 30px rgba(0,0,0,0.3); transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(233, 69, 96, 0.2); border-color: #e94560; }
        .card-header { display: flex; align-items: center; margin-bottom: 20px; border-bottom: 2px solid #374151; padding-bottom: 15px; }
        .card-icon { font-size: 2em; margin-right: 15px; }
        .card-title { font-size: 1.3em; color: #e94560; font-weight: 600; }
        .stat-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #2d3748; }
        .stat-row:last-child { border-bottom: none; }
        .stat-label { color: #a0a0a0; font-size: 0.95em; }
        .stat-value { color: #10b981; font-weight: 600; font-size: 1.1em; }
        .stat-value.warning { color: #f59e0b; }
        .stat-value.danger { color: #ef4444; }
        .progress-bar { width: 100%; height: 8px; background: #374151; border-radius: 4px; overflow: hidden; margin-top: 8px; }
        .progress-fill { height: 100%; background: linear-gradient(90deg, #10b981 0%, #34d399 100%); border-radius: 4px; transition: width 0.5s ease; }
        .progress-fill.warning { background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%); }
        .progress-fill.danger { background: linear-gradient(90deg, #ef4444 0%, #f87171 100%); }
        .status-indicator { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #10b981; margin-right: 8px; animation: pulse 2s infinite; }
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
        .refresh-info { text-align: center; margin-top: 30px; padding: 20px; background: rgba(233, 69, 96, 0.1); border-radius: 10px; border: 1px solid #e94560; }
        .refresh-info p { color: #a0a0a0; }
        table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
        th, td { padding: 10px; text-align: left; border-bottom: 1px solid #374151; }
        th { color: #e94560; font-weight: 600; }
        tr:hover { background: #1f2937; }
        .full-width { grid-column: 1 / -1; }
        .loading { text-align: center; padding: 20px; color: #e94560; }
        
        /* NetApp Drive Bay Layout - DS4246: 4 rows x 6 drives */
        .drive-bay {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 10px;
            margin: 15px 0;
            padding: 20px;
            background: #0f172a;
            border-radius: 10px;
            border: 2px solid #334155;
        }
        .drive-slot {
            aspect-ratio: 1;
            background: linear-gradient(145deg, #1e293b, #0f172a);
            border: 2px solid #475569;
            border-radius: 6px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 0.75em;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
        }
        .drive-slot.empty {
            background: linear-gradient(145deg, #1e293b, #111827);
            border-color: #334155;
            opacity: 0.4;
        }
        .drive-slot.occupied {
            background: linear-gradient(145deg, #1e3a5f, #0f2847);
            border-color: #3b82f6;
        }
        .drive-slot.occupied:hover {
            transform: scale(1.05);
            border-color: #60a5fa;
            box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
        }
        .drive-slot.healthy {
            border-color: #3b82f6;
            background: linear-gradient(145deg, #1e3a5f, #0f2847);
        }
        .drive-slot.failing {
            border-color: #f59e0b;
            background: linear-gradient(145deg, #78350f, #451a03);
            animation: pulse-yellow 2s infinite;
        }
        .drive-slot.failed {
            border-color: #ef4444;
            background: linear-gradient(145deg, #7f1d1d, #450a0a);
            animation: pulse-red 2s infinite;
        }
        .drive-slot.hot {
            border-color: #f59e0b;
            background: linear-gradient(145deg, #78350f, #451a03);
        }
        .drive-slot.critical {
            border-color: #ef4444;
            background: linear-gradient(145deg, #7f1d1d, #450a0a);
            animation: pulse-red 2s infinite;
        }
        @keyframes pulse-yellow {
            0%, 100% { box-shadow: 0 0 10px rgba(245, 158, 11, 0.5); }
            50% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.8); }
        }
        @keyframes pulse-red {
            0%, 100% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); }
            50% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.8); }
        }
        .slot-number {
            font-size: 0.7em;
            color: #64748b;
            margin-bottom: 2px;
        }
        .slot-temp {
            font-weight: 600;
            color: #10b981;
        }
        .slot-temp.warning { color: #f59e0b; }
        .slot-temp.danger { color: #ef4444; }
        .drive-bay-label {
            text-align: center;
            color: #94a3b8;
            font-size: 0.9em;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #334155;
        }
    </style>
</head>
<body>
    <div class="header">
        <a class="logout-btn" href="?logout=1">Logout</a>
        <h1>🔧 WSysMonitor</h1>
        <p>Real-Time System Monitoring Dashboard</p>
    </div>

    <div class="container">
        <div class="grid">
            <div class="card">
                <div class="card-header">
                    <span class="card-icon"><img src="abaddon.png" alt="Abaddon" style="width: 40px; height: 40px; border-radius: 50%; object-fit: cover;"></span>
                    <span class="card-title">System Overview</span>
                </div>
                <div style="text-align: center; margin-bottom: 15px;">
                    <img src="abaddon.png" alt="Abaddon Guardian" style="max-width: 100%; max-height: 150px; border-radius: 10px; box-shadow: 0 4px 15px rgba(233, 69, 96, 0.3);">
                </div>
                <div id="system-stats">
                    <div class="stat-row">
                        <span class="stat-label">Hostname</span>
                        <span class="stat-value" id="hostname">Loading...</span>
                    </div>
                    <div class="stat-row">
                        <span class="stat-label">Uptime</span>
                        <span class="stat-value" id="uptime">Loading...</span>
                    </div>
                    <div class="stat-row">
                        <span class="stat-label">Load Average</span>
                        <span class="stat-value" id="load">Loading...</span>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <span class="card-icon">⚡</span>
                    <span class="card-title">CPU Usage</span>
                </div>
                <div class="stat-row">
                    <span class="stat-label">CPU Usage</span>
                    <span class="stat-value" id="cpu-usage">Loading...</span>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" id="cpu-progress" style="width: 0%"></div>
                </div>
                <div class="stat-row" style="margin-top: 15px;">
                    <span class="stat-label">CPU Cores</span>
                    <span class="stat-value" id="cpu-cores">Loading...</span>
                </div>
                <div class="stat-row">
                    <span class="stat-label">CPU Temps</span>
                    <span class="stat-value" id="cpu-temps">Loading...</span>
                </div>
                <div id="cpu-temps-detail" style="margin-top: 10px; font-size: 0.85em;"></div>
                <div class="stat-row">
                    <span class="stat-label">CPU Fan</span>
                    <span class="stat-value" id="cpu-fan">Loading...</span>
                </div>
                <div class="stat-row">
                    <span class="stat-label">CPU Freq</span>
                    <span class="stat-value" id="cpu-freq">Loading...</span>
                </div>
                <div id="cpu-freq-detail" style="margin-top: 10px; font-size: 0.85em;"></div>
            </div>

            <div class="card">
                <div class="card-header">
                    <span class="card-icon">💾</span>
                    <span class="card-title">Memory Usage</span>
                </div>
                <div class="stat-row">
                    <span class="stat-label">Memory Usage</span>
                    <span class="stat-value" id="memory-usage">Loading...</span>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill" id="memory-progress" style="width: 0%"></div>
                </div>
                <div class="stat-row" style="margin-top: 15px;">
                    <span class="stat-label">Free</span>
                    <span class="stat-value" id="memory-free">Loading...</span>
                </div>
                <div class="stat-row">
                    <span class="stat-label">Shared</span>
                    <span class="stat-value" id="memory-shared">Loading...</span>
                </div>
                <div class="stat-row">
                    <span class="stat-label">Buff/Cache</span>
                    <span class="stat-value" id="memory-buff-cache">Loading...</span>
                </div>
                <div class="stat-row">
                    <span class="stat-label">Available</span>
                    <span class="stat-value" id="memory-available">Loading...</span>
                </div>
                <div class="stat-row">
                    <span class="stat-label">Swap</span>
                    <span class="stat-value" id="swap-usage">Loading...</span>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <span class="card-icon">💿</span>
                    <span class="card-title">Disk Usage</span>
                </div>
                <div id="disk-stats">
                    <div class="loading">Loading disk stats...</div>
                </div>
                <div style="border-top: 2px solid #374151; margin-top: 15px; padding-top: 15px;">
                    <div class="stat-row">
                        <span class="stat-label" style="color: #e94560; font-weight: 600;">NVIDIA GPUs</span>
                    </div>
                    <div id="nvidia-stats">
                        <div class="loading">Loading NVIDIA stats...</div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <span class="card-icon">🌡️</span>
                    <span class="card-title">Drive Temperatures</span>
                </div>
                <div id="drive-temps">
                    <div class="loading">Loading drive temps...</div>
                </div>
            </div>

            <!-- NetApp IOM6 Enclosure -->
            <div class="card">
                <div class="card-header">
                    <span class="card-icon">🖥️</span>
                    <span class="card-title">NetApp DS4246 IOM6</span>
                </div>
                <div id="netapp-stats">
                    <div class="loading">Loading NetApp IOM6 data...</div>
                </div>
            </div>

            <!-- Btrfs RAID10 Storage -->
            <div class="card">
                <div class="card-header">
                    <span class="card-icon">🗄️</span>
                    <span class="card-title">Btrfs RAID10 Storage</span>
                </div>
                <div id="btrfs-stats">
                    <div class="stat-row">
                        <span class="stat-label">Total Devices</span>
                        <span class="stat-value" id="btrfs-devices">Loading...</span>
                    </div>
                    <div class="stat-row">
                        <span class="stat-label">FS Bytes Used</span>
                        <span class="stat-value" id="btrfs-used">Loading...</span>
                    </div>
                    <div class="stat-row">
                        <span class="stat-label">Size</span>
                        <span class="stat-value" id="btrfs-size">Loading...</span>
                    </div>
                    <div class="stat-row">
                        <span class="stat-label">Available</span>
                        <span class="stat-value" id="btrfs-available">Loading...</span>
                    </div>
                    <div id="btrfs-healthy-section" style="border-top: 2px solid #374151; margin-top: 15px; padding-top: 15px;">
                        <div class="stat-row">
                            <span class="stat-label" style="color: #10b981; font-weight: 600;">✅ Btrfs Status: Healthy</span>
                        </div>
                    </div>
                    <div id="btrfs-health-section" style="border-top: 2px solid #374151; margin-top: 15px; padding-top: 15px; display: none;">
                        <div class="stat-row">
                            <span class="stat-label" style="color: #e94560; font-weight: 600;">⚠️ Drive Errors Detected</span>
                        </div>
                        <div id="btrfs-errors-stats">
                        </div>
                    </div>
                    <div id="btrfs-spare-section" style="border-top: 2px solid #374151; margin-top: 15px; padding-top: 15px; display: none;">
                        <div class="stat-row">
                            <span class="stat-label" style="color: #f59e0b; font-weight: 600;">Spare Usage</span>
                        </div>
                        <div id="btrfs-spare-stats">
                        </div>
                    </div>
                    <div style="border-top: 2px solid #374151; margin-top: 15px; padding-top: 15px;">
                        <div class="stat-row">
                            <span class="stat-label" style="color: #e94560; font-weight: 600;">Network Bandwidth</span>
                        </div>
                        <div id="network-stats">
                            <div class="loading">Loading network stats...</div>
                        </div>
                    </div>
                    <div style="border-top: 2px solid #374151; margin-top: 15px; padding-top: 15px;">
                        <div class="stat-row">
                            <span class="stat-label" style="color: #e94560; font-weight: 600;">UPS Status</span>
                        </div>
                        <div id="ups-stats">
                            <div class="stat-row">
                                <span class="stat-label">UPS</span>
                                <span class="stat-value" id="ups-status">Loading...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card full-width">
                <div class="card-header">
                    <span class="card-icon">🔥</span>
                    <span class="card-title">Top Processes by CPU</span>
                </div>
                <table>
                    <thead>
                        <tr>
                            <th>PID</th>
                            <th>User</th>
                            <th>CPU%</th>
                            <th>Memory%</th>
                            <th>Command</th>
                        </tr>
                    </thead>
                    <tbody id="process-list">
                        <tr><td colspan="5" class="loading">Loading processes...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="refresh-info">
            <p><span class="status-indicator"></span> Auto-refresh every 5 seconds | Last update: <span id="last-update">Loading...</span></p>
        </div>
    </div>

    <script>
        let refreshInterval;

        function fetchStats() {
            fetch('api.php')
                .then(response => response.json())
                .then(data => {
                    updateDashboard(data);
                })
                .catch(error => {
                    console.error('Error fetching stats:', error);
                    document.getElementById('last-update').textContent = 'Error: ' + error.message;
                });
        }

        function updateDashboard(data) {
            document.getElementById('hostname').textContent = data.hostname;
            document.getElementById('uptime').textContent = data.uptime;
            document.getElementById('load').textContent = data.load;

            document.getElementById('cpu-usage').textContent = data.cpu.usage + '%';
            document.getElementById('cpu-usage').className = 'stat-value ' + data.cpu.class;
            document.getElementById('cpu-progress').style.width = data.cpu.usage + '%';
            document.getElementById('cpu-progress').className = 'progress-fill ' + data.cpu.class;
            document.getElementById('cpu-cores').textContent = data.cpu.cores;
            if (data.cpu.temps && data.cpu.temps.length > 0) {
                let maxTemp = 0;
                let tempHtml = '';
                data.cpu.temps.forEach(die => {
                    tempHtml += '<div style="margin: 5px 0; padding: 8px; background: #1f2937; border-radius: 6px;">';
                    tempHtml += '<strong style="color: #e94560;">Die ' + die.die + '</strong><br>';
                    if (die.sensors.Tctl) {
                        const tctl = die.sensors.Tctl;
                        maxTemp = Math.max(maxTemp, tctl);
                        const tctlClass = tctl > 85 ? 'danger' : (tctl > 70 ? 'warning' : '');
                        tempHtml += '<span class="stat-label">Tctl:</span> <span class="stat-value ' + tctlClass + '">' + tctl + '°C</span> ';
                    }
                    if (die.sensors.Tdie) {
                        const tdie = die.sensors.Tdie;
                        const tdieClass = tdie > 85 ? 'danger' : (tdie > 70 ? 'warning' : '');
                        tempHtml += '<span class="stat-label">Tdie:</span> <span class="stat-value ' + tdieClass + '">' + tdie + '°C</span> ';
                    }
                    if (die.sensors.Tccd && die.sensors.Tccd.length > 0) {
                        tempHtml += '<span class="stat-label">Tccd:</span> ';
                        die.sensors.Tccd.forEach((tccd, idx) => {
                            const tccdClass = tccd > 85 ? 'danger' : (tccd > 70 ? 'warning' : '');
                            tempHtml += '<span class="stat-value ' + tccdClass + '">' + tccd + '°C</span>' + (idx < die.sensors.Tccd.length - 1 ? ', ' : '');
                        });
                    }
                    tempHtml += '</div>';
                });
                document.getElementById('cpu-temps').textContent = maxTemp + '°C (max)';
                document.getElementById('cpu-temps').className = 'stat-value ' + (maxTemp > 85 ? 'danger' : (maxTemp > 70 ? 'warning' : ''));
                document.getElementById('cpu-temps-detail').innerHTML = tempHtml;
            } else {
                document.getElementById('cpu-temps').textContent = 'N/A';
                document.getElementById('cpu-temps-detail').innerHTML = '';
            }
            document.getElementById('cpu-fan').textContent = data.cpu.fan ? data.cpu.fan + ' RPM' : 'N/A';

            if (data.cpu.freq_min !== null && data.cpu.freq_max !== null) {
                document.getElementById('cpu-freq').textContent = data.cpu.freq_avg + ' MHz (avg)';
                let freqHtml = '';
                if (data.cpu.governor) {
                    freqHtml += '<div style="margin: 5px 0;"><span class="stat-label">Governor:</span> <span class="stat-value">' + data.cpu.governor + '</span></div>';
                }
                freqHtml += '<div style="margin: 5px 0;">';
                freqHtml += '<span class="stat-label">Min:</span> <span class="stat-value">' + data.cpu.freq_min + ' MHz</span> ';
                freqHtml += '<span class="stat-label">Max:</span> <span class="stat-value">' + data.cpu.freq_max + ' MHz</span> ';
                freqHtml += '<span class="stat-label">Avg:</span> <span class="stat-value">' + data.cpu.freq_avg + ' MHz</span>';
                freqHtml += '</div>';
                document.getElementById('cpu-freq-detail').innerHTML = freqHtml;
            } else {
                document.getElementById('cpu-freq').textContent = 'N/A';
                document.getElementById('cpu-freq-detail').innerHTML = '';
            }
            document.getElementById('memory-usage').textContent = 
                data.memory.used + ' / ' + data.memory.total + ' GB (' + data.memory.percent + '%)';
            document.getElementById('memory-usage').className = 'stat-value ' + data.memory.class;
            document.getElementById('memory-progress').style.width = data.memory.percent + '%';
            document.getElementById('memory-progress').className = 'progress-fill ' + data.memory.class;
            document.getElementById('memory-free').textContent = data.memory.free + ' GB';
            document.getElementById('memory-shared').textContent = data.memory.shared + ' GB';
            document.getElementById('memory-buff-cache').textContent = data.memory.buff_cache + ' GB';
            document.getElementById('memory-available').textContent = data.memory.available + ' GB';
            document.getElementById('swap-usage').textContent = 
                data.memory.swap_used + ' / ' + data.memory.swap_total + ' GB (' + data.memory.swap_percent + '%)';

            let nvidiaHtml = '';
            if (!data.nvidia || data.nvidia.length === 0) {
                nvidiaHtml = '<div class="stat-row"><span class="stat-label">No NVIDIA GPU data available</span></div>';
            } else {
                data.nvidia.forEach(gpu => {
                    const gpuLabel = (gpu.index !== null && gpu.index !== undefined)
                        ? ('GPU ' + gpu.index + ': ' + gpu.name)
                        : (gpu.name || 'NVIDIA GPU');

                    nvidiaHtml += '<div class="stat-row">';
                    nvidiaHtml += '<span class="stat-label">' + gpuLabel + '</span>';
                    nvidiaHtml += '<span class="stat-value ' + (gpu.util_class || '') + '">' + (gpu.util !== null && gpu.util !== undefined ? gpu.util : 'N/A') + '%</span>';
                    nvidiaHtml += '</div>';
                    nvidiaHtml += '<div class="progress-bar">';
                    nvidiaHtml += '<div class="progress-fill ' + (gpu.util_class || '') + '" style="width: ' + (gpu.util !== null && gpu.util !== undefined ? gpu.util : 0) + '%"></div>';
                    nvidiaHtml += '</div>';

                    nvidiaHtml += '<div class="stat-row">';
                    nvidiaHtml += '<span class="stat-label">Temperature</span>';
                    nvidiaHtml += '<span class="stat-value ' + (gpu.temp_class || '') + '">' + (gpu.temp !== null && gpu.temp !== undefined ? gpu.temp + '°C' : 'N/A') + '</span>';
                    nvidiaHtml += '</div>';

                    if (gpu.mem_used !== null && gpu.mem_used !== undefined && gpu.mem_total !== null && gpu.mem_total !== undefined) {
                        nvidiaHtml += '<div class="stat-row">';
                        nvidiaHtml += '<span class="stat-label">VRAM</span>';
                        nvidiaHtml += '<span class="stat-value ' + (gpu.mem_class || '') + '">' + gpu.mem_used + ' / ' + gpu.mem_total + ' MiB (' + (gpu.mem_percent !== null && gpu.mem_percent !== undefined ? gpu.mem_percent : 'N/A') + '%)</span>';
                        nvidiaHtml += '</div>';
                        nvidiaHtml += '<div class="progress-bar">';
                        nvidiaHtml += '<div class="progress-fill ' + (gpu.mem_class || '') + '" style="width: ' + (gpu.mem_percent !== null && gpu.mem_percent !== undefined ? gpu.mem_percent : 0) + '%"></div>';
                        nvidiaHtml += '</div>';
                    } else {
                        nvidiaHtml += '<div class="stat-row">';
                        nvidiaHtml += '<span class="stat-label">VRAM</span>';
                        nvidiaHtml += '<span class="stat-value">N/A</span>';
                        nvidiaHtml += '</div>';
                    }

                    nvidiaHtml += '<div class="stat-row">';
                    nvidiaHtml += '<span class="stat-label">Power / Fan</span>';
                    const pDraw = (gpu.power_draw !== null && gpu.power_draw !== undefined) ? (gpu.power_draw + ' W') : 'N/A';
                    const pLim = (gpu.power_limit !== null && gpu.power_limit !== undefined) ? (gpu.power_limit + ' W') : 'N/A';
                    const fan = (gpu.fan !== null && gpu.fan !== undefined) ? (gpu.fan + '%') : 'N/A';
                    nvidiaHtml += '<span class="stat-value">' + pDraw + ' / ' + pLim + ' | ' + fan + '</span>';
                    nvidiaHtml += '</div>';

                    nvidiaHtml += '<div style="border-top: 1px solid #2d3748; margin: 12px 0;"></div>';
                });

                nvidiaHtml = nvidiaHtml.replace(/<div style=\"border-top: 1px solid #2d3748; margin: 12px 0;\"><\/div>\s*$/, '');
            }
            document.getElementById('nvidia-stats').innerHTML = nvidiaHtml;

            let diskHtml = '';
            data.disks.forEach(disk => {
                diskHtml += '<div class="stat-row">';
                diskHtml += '<span class="stat-label">' + disk.mount + '</span>';
                diskHtml += '<span class="stat-value ' + disk.class + '">' + disk.used + ' / ' + disk.size + ' (' + disk.percent + '%)</span>';
                diskHtml += '</div>';
                diskHtml += '<div class="progress-bar">';
                diskHtml += '<div class="progress-fill ' + disk.class + '" style="width: ' + disk.percent + '%"></div>';
                diskHtml += '</div>';
            });
            document.getElementById('disk-stats').innerHTML = diskHtml;

            let driveHtml = '';
            if (data.drives.length === 0) {
                driveHtml = '<div class="stat-row"><span class="stat-label">No drive temp data available</span></div>';
            } else {
                data.drives.forEach(drive => {
                    driveHtml += '<div class="stat-row">';
                    // Show slot number and health status for NetApp drives
                    let slotInfo = '';
                    let healthIcon = '🔵'; // default blue (healthy)
                    if (drive.health === 'failing') {
                        healthIcon = '🟡'; // yellow (failing)
                    } else if (drive.health === 'failed') {
                        healthIcon = '🔴'; // red (failed)
                    }
                    
                    if (drive.slot !== null && drive.slot !== undefined && drive.type === 'SATA') {
                        slotInfo = ' <strong>[Slot ' + drive.slot + ']</strong>';
                    }
                    driveHtml += '<span class="stat-label">' + healthIcon + ' ' + drive.device + slotInfo + '<br><small>' + drive.model + ' (' + drive.size + ') [' + drive.type + ']</small></span>';
                    if (drive.temp) {
                        driveHtml += '<span class="stat-value ' + drive.class + '">' + drive.temp + '°C</span>';
                    } else {
                        driveHtml += '<span class="stat-value">N/A</span>';
                    }
                    driveHtml += '</div>';
                });
            }
            document.getElementById('drive-temps').innerHTML = driveHtml;

            document.getElementById('btrfs-devices').textContent = data.btrfs.devices || 'N/A';
            document.getElementById('btrfs-used').textContent = data.btrfs.used || 'N/A';
            document.getElementById('btrfs-size').textContent = data.btrfs.size || 'N/A';
            document.getElementById('btrfs-available').textContent = data.btrfs.available || 'N/A';

            // Show/hide btrfs healthy/errors section
            const healthySection = document.getElementById('btrfs-healthy-section');
            const errorsSection = document.getElementById('btrfs-health-section');
            if (data.btrfs.errors && data.btrfs.errors.length > 0) {
                healthySection.style.display = 'none';
                errorsSection.style.display = 'block';
                let errorsHtml = '';
                data.btrfs.errors.forEach(err => {
                    errorsHtml += '<div class="stat-row">';
                    errorsHtml += '<span class="stat-label">' + err.device + '</span>';
                    errorsHtml += '<span class="stat-value danger">' + err.error_type + ': ' + err.count + '</span>';
                    errorsHtml += '</div>';
                });
                document.getElementById('btrfs-errors-stats').innerHTML = errorsHtml;
            } else {
                healthySection.style.display = 'block';
                errorsSection.style.display = 'none';
            }

            // Show/hide btrfs spare section
            const spareSection = document.getElementById('btrfs-spare-section');
            if (data.btrfs.spare) {
                spareSection.style.display = 'block';
                let spareClass = data.btrfs.spare.percent > 80 ? 'danger' : (data.btrfs.spare.percent > 50 ? 'warning' : '');
                let spareHtml = '<div class="stat-row">';
                spareHtml += '<span class="stat-label">Spare Used</span>';
                spareHtml += '<span class="stat-value ' + spareClass + '">' + data.btrfs.spare.used + ' / ' + data.btrfs.spare.total + ' (' + data.btrfs.spare.percent + '%)</span>';
                spareHtml += '</div>';
                spareHtml += '<div class="progress-bar">';
                spareHtml += '<div class="progress-fill ' + spareClass + '" style="width: ' + data.btrfs.spare.percent + '%"></div>';
                spareHtml += '</div>';
                document.getElementById('btrfs-spare-stats').innerHTML = spareHtml;
            } else {
                spareSection.style.display = 'none';
            }

            // NetApp IOM6 Data with Drive Bay Visual
            let netappHtml = '';
            
            // Create drive bay visual (24 slots: 4 rows x 6 drives)
            netappHtml += '<h4 style="color: #10b981; margin: 0 0 10px 0;">💿 Drive Bay Layout (DS4246 - 4U Shelf)</h4>';
            netappHtml += '<div class="drive-bay">';
            
            // Create slot map from drive data
            let slotMap = {};
            data.drives.forEach(drive => {
                if (drive.slot !== null && drive.slot !== undefined) {
                    slotMap[drive.slot] = drive;
                }
            });
            
            // DS4246 numbers slots vertically (columns), but we display horizontally (rows)
            // Physical: Col1=[0,1,2,3], Col2=[4,5,6,7], etc.
            // Display grid position to physical slot mapping
            const gridToSlot = [
                0, 4, 8, 12, 16, 20,   // Row 1: grid 0-5 → slots 0,4,8,12,16,20
                1, 5, 9, 13, 17, 21,   // Row 2: grid 6-11 → slots 1,5,9,13,17,21
                2, 6, 10, 14, 18, 22,  // Row 3: grid 12-17 → slots 2,6,10,14,18,22
                3, 7, 11, 15, 19, 23   // Row 4: grid 18-23 → slots 3,7,11,15,19,23
            ];
            
            for (let gridPos = 0; gridPos < 24; gridPos++) {
                let slot = gridToSlot[gridPos];
                let slotClass = 'drive-slot empty';
                let slotContent = '<div class="slot-number">' + slot + '</div>';
                
                if (slotMap[slot]) {
                    let drive = slotMap[slot];
                    slotClass = 'drive-slot occupied';
                    
                    // Apply health status color
                    if (drive.health === 'failed') {
                        slotClass += ' failed';
                    } else if (drive.health === 'failing') {
                        slotClass += ' failing';
                    } else {
                        slotClass += ' healthy';
                    }
                    
                    if (drive.temp) {
                        let tempClass = drive.temp > 70 ? 'danger' : (drive.temp > 62 ? 'warning' : '');
                        slotContent += '<div class="slot-temp ' + tempClass + '">' + drive.temp + '°C</div>';
                    } else {
                        slotContent += '<div style="font-size: 0.7em; color: #64748b;">OK</div>';
                    }
                }
                
                netappHtml += '<div class="' + slotClass + '" title="Slot ' + slot + (slotMap[slot] ? ': ' + slotMap[slot].device + ' (' + slotMap[slot].health + ')' : '') + '">' + slotContent + '</div>';
            }
            
            netappHtml += '</div>';
            netappHtml += '<div class="drive-bay-label">NetApp DS4246: 4 rows × 6 drives (Left→Right, Top→Bottom)<br>';
            netappHtml += '<strong>Health:</strong> 🔵 Healthy | 🟡 Failing (Predicted) | 🔴 Failed (Fault) | ';
            netappHtml += '<strong>Temp:</strong> 🟡 Warm (>62°C) | 🔴 Hot (>70°C) | ⚫ Empty</div>';
            
            // Temperature Sensors
            if (data.netapp && data.netapp.temps.length > 0) {
                netappHtml += '<div style="border-top: 2px solid #374151; margin-top: 15px; padding-top: 15px;">';
                netappHtml += '<h4 style="color: #10b981; margin: 0 0 10px 0;">🌡️ Enclosure Sensors</h4>';
                netappHtml += '<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;">';
                data.netapp.temps.forEach(sensor => {
                    netappHtml += '<div style="font-size: 0.85em; padding: 5px; background: #1f2937; border-radius: 4px; text-align: center;">';
                    netappHtml += '<div style="color: #64748b; font-size: 0.8em;">S' + sensor.sensor + '</div>';
                    netappHtml += '<div class="slot-temp ' + sensor.class + '">' + sensor.temp + '°C</div>';
                    netappHtml += '</div>';
                });
                netappHtml += '</div></div>';
            }
            
            // Fans - grouped by location
            if (data.netapp && data.netapp.fans.length > 0) {
                netappHtml += '<div style="border-top: 2px solid #374151; margin-top: 15px; padding-top: 15px;">';
                netappHtml += '<h4 style="color: #10b981; margin: 0 0 10px 0;">💨 Cooling Fans</h4>';
                
                // Group fans by location
                let iom6Fans = data.netapp.fans.filter(f => f.location === 'IOM6');
                let mainFans = data.netapp.fans.filter(f => f.location === 'Main Enclosure');
                
                // IOM6 Fans section
                if (iom6Fans.length > 0) {
                    netappHtml += '<div style="margin-bottom: 12px;">';
                    netappHtml += '<div style="color: #e94560; font-size: 0.9em; font-weight: 600; margin-bottom: 6px;">IOM6 Module Fans</div>';
                    netappHtml += '<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;">';
                    iom6Fans.forEach(fan => {
                        netappHtml += '<div style="font-size: 0.85em; padding: 5px; background: #1f2937; border-radius: 4px; text-align: center;">';
                        netappHtml += '<div style="color: #64748b; font-size: 0.8em;">Fan ' + fan.fan + '</div>';
                        netappHtml += '<div class="slot-temp ' + fan.class + '">' + fan.rpm + '</div>';
                        netappHtml += '</div>';
                    });
                    netappHtml += '</div></div>';
                }
                
                // Main Enclosure Fans section
                if (mainFans.length > 0) {
                    netappHtml += '<div style="margin-bottom: 12px;">';
                    netappHtml += '<div style="color: #3b82f6; font-size: 0.9em; font-weight: 600; margin-bottom: 6px;">Main Enclosure Fans</div>';
                    netappHtml += '<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;">';
                    mainFans.forEach(fan => {
                        netappHtml += '<div style="font-size: 0.85em; padding: 5px; background: #1f2937; border-radius: 4px; text-align: center;">';
                        netappHtml += '<div style="color: #64748b; font-size: 0.8em;">Fan ' + fan.fan + '</div>';
                        netappHtml += '<div class="slot-temp ' + fan.class + '">' + fan.rpm + '</div>';
                        netappHtml += '</div>';
                    });
                    netappHtml += '</div></div>';
                }
                
                netappHtml += '</div>';
            }
            
            // PSUs
            if (data.netapp && data.netapp.psus.length > 0) {
                netappHtml += '<div style="border-top: 2px solid #374151; margin-top: 15px; padding-top: 15px;">';
                netappHtml += '<h4 style="color: #10b981; margin: 0 0 10px 0;">⚡ Power Supplies</h4>';
                data.netapp.psus.forEach(psu => {
                    netappHtml += '<div class="stat-row">';
                    netappHtml += '<span class="stat-label">PSU ' + psu.psu + '</span>';
                    netappHtml += '<span class="stat-value ' + psu.class + '">' + psu.status + '</span>';
                    if (psu.status !== 'OK') {
                        netappHtml += '<div style="font-size: 0.75em; color: #64748b; margin-top: 2px;">';
                        if (psu.raw_status) netappHtml += 'Status: ' + psu.raw_status + ' | ';
                        if (psu.dc_fail) netappHtml += 'DC Fail | ';
                        if (psu.ac_fail) netappHtml += 'AC Fail | ';
                        if (psu.off) netappHtml += 'Off | ';
                        if (psu.fail) netappHtml += 'Fail | ';
                        netappHtml += '</div>';
                    }
                    netappHtml += '</div>';
                });
                netappHtml += '</div>';
            }
            
            if (netappHtml === '') {
                netappHtml = '<div class="stat-row"><span class="stat-label">No NetApp IOM6 data available</span></div>';
            }
            
            document.getElementById('netapp-stats').innerHTML = netappHtml;

            let networkHtml = '';
            if (data.network.length === 0) {
                networkHtml = '<div class="stat-row"><span class="stat-label">No network data available</span></div>';
            } else {
                data.network.forEach(iface => {
                    networkHtml += '<div class="stat-row">';
                    networkHtml += '<span class="stat-label">' + iface.interface + '</span>';
                    networkHtml += '<span class="stat-value">↓ ' + iface.rx_mbps + ' Mbps / ↑ ' + iface.tx_mbps + ' Mbps</span>';
                    networkHtml += '</div>';
                });
            }
            document.getElementById('network-stats').innerHTML = networkHtml;

            // UPS Stats
            let upsHtml = '';
            if (!data.ups) {
                upsHtml = '<div class="stat-row"><span class="stat-label">No UPS data available</span></div>';
            } else {
                const statusClass = data.ups.status && data.ups.status.toLowerCase().includes('onbatt') ? 'danger' : 'success';
                upsHtml += '<div class="stat-row">';
                upsHtml += '<span class="stat-label">Status</span>';
                upsHtml += '<span class="stat-value ' + statusClass + '">' + (data.ups.status || 'N/A') + '</span>';
                upsHtml += '</div>';
                if (data.ups.battery !== undefined) {
                    const batteryClass = data.ups.battery < 30 ? 'danger' : (data.ups.battery < 50 ? 'warning' : '');
                    upsHtml += '<div class="stat-row">';
                    upsHtml += '<span class="stat-label">Battery</span>';
                    upsHtml += '<span class="stat-value ' + batteryClass + '">' + data.ups.battery + '%</span>';
                    upsHtml += '</div>';
                    upsHtml += '<div class="progress-bar">';
                    upsHtml += '<div class="progress-fill ' + batteryClass + '" style="width: ' + data.ups.battery + '%"></div>';
                    upsHtml += '</div>';
                }
                if (data.ups.time_left !== undefined) {
                    upsHtml += '<div class="stat-row">';
                    upsHtml += '<span class="stat-label">Time Left</span>';
                    upsHtml += '<span class="stat-value">' + data.ups.time_left + ' min</span>';
                    upsHtml += '</div>';
                }
                if (data.ups.load !== undefined) {
                    upsHtml += '<div class="stat-row">';
                    upsHtml += '<span class="stat-label">Load</span>';
                    upsHtml += '<span class="stat-value">' + data.ups.load + '%</span>';
                    upsHtml += '</div>';
                }
                if (data.ups.watts !== undefined) {
                    upsHtml += '<div class="stat-row">';
                    upsHtml += '<span class="stat-label">Power Used</span>';
                    upsHtml += '<span class="stat-value">' + data.ups.watts + ' W</span>';
                    upsHtml += '</div>';
                }
                if (data.ups.input_voltage !== undefined) {
                    upsHtml += '<div class="stat-row">';
                    upsHtml += '<span class="stat-label">Input Voltage</span>';
                    upsHtml += '<span class="stat-value">' + data.ups.input_voltage + ' V</span>';
                    upsHtml += '</div>';
                }
            }
            document.getElementById('ups-stats').innerHTML = upsHtml;

            let processHtml = '';
            data.processes.forEach(proc => {
                processHtml += '<tr>';
                processHtml += '<td>' + proc.pid + '</td>';
                processHtml += '<td>' + proc.user + '</td>';
                processHtml += '<td>' + proc.cpu + '</td>';
                processHtml += '<td>' + proc.mem + '</td>';
                processHtml += '<td>' + proc.command + '</td>';
                processHtml += '</tr>';
            });
            document.getElementById('process-list').innerHTML = processHtml;

            document.getElementById('last-update').textContent = data.timestamp;
        }

        fetchStats();
        refreshInterval = setInterval(fetchStats, 5000);

        window.addEventListener('beforeunload', function() {
            clearInterval(refreshInterval);
        });
    </script>
</body>
</html>
