function updateMetrics() {
    fetch('/api/metrics')
        .then(response => response.json())
        .then(data => {
            document.getElementById('network-health').innerHTML = `
                <div class="metric-card">
                    <h2>Network Health</h2>
                    <p>CPU: ${data.network_health.cpu_percent}%</p>
                    <p>Memory: ${data.network_health.memory_percent}%</p>
                    <p>Connections: ${data.network_health.network_connections}</p>
                </div>
            `;
            
            document.getElementById('latency').innerHTML = `
                <div class="metric-card">
                    <h2>Latency</h2>
                    <p>${data.latency.toFixed(2)} ms</p>
                </div>
            `;
            
            document.getElementById('bandwidth').innerHTML = `
                <div class="metric-card">
                    <h2>Bandwidth</h2>
                    <p>Download: ${data.bandwidth.download.toFixed(2)} Mbps</p>
                    <p>Upload: ${data.bandwidth.upload.toFixed(2)} Mbps</p>
                </div>
            `;
        });
}

// Update metrics every 30 seconds
setInterval(updateMetrics, 30000);
// Initial update
updateMetrics();