function updateDiagnostics() {
    fetch('/api/diagnostics')
        .then(response => response.json())
        .then(data => {
            const diagnosticsPanel = document.querySelector('.diagnostics-content');
            diagnosticsPanel.innerHTML = '';
            
            Object.entries(data).forEach(([device, diagnostics]) => {
                const diagElement = createDiagnosticElement(device, diagnostics);
                diagnosticsPanel.appendChild(diagElement);
            });
        });
}

function createDiagnosticElement(device, diagnostics) {
    const element = document.createElement('div');
    element.className = `diagnostic-item ${diagnostics.connection_type}-diagnostic`;
    
    const content = `
        <h3>${device}</h3>
        <div class="diagnostic-details">
            <div class="status-group">
                <span class="label">Status:</span>
                <span class="value ${diagnostics.state.toLowerCase()}">${diagnostics.state}</span>
            </div>
            <div class="firmware-group">
                <span class="label">Firmware:</span>
                <span class="value">${diagnostics.firmware.version}</span>
            </div>
            ${createInterfaceHTML(diagnostics.interfaces)}
        </div>
    `;
    
    element.innerHTML = content;
    return element;
}

function createInterfaceHTML(interfaces) {
    let html = '<div class="interfaces-group">';
    
    // Add port information
    Object.entries(interfaces.ports || {}).forEach(([portName, port]) => {
        html += `
            <div class="interface-item">
                <span class="label">${portName}:</span>
                <span class="value">${port.speed.current}/${port.speed.max} Mbps</span>
                <span class="state ${port.state.toLowerCase()}">${port.state}</span>
            </div>
        `;
    });
    
    // Add radio information
    Object.entries(interfaces.radios || {}).forEach(([radioName, radio]) => {
        html += `
            <div class="interface-item">
                <span class="label">${radioName}:</span>
                <span class="value">${radio.standard} - Ch${radio.channel} (${radio.width})</span>
            </div>
        `;
    });
    
    html += '</div>';
    return html;
}

function updateDeviceStatus() {
    fetch('/api/status')
        .then(response => response.json())
        .then(data => {
            Object.entries(data).forEach(([deviceName, status]) => {
                updateDeviceIndicator(deviceName, status);
            });
        });
}

// Update intervals
setInterval(updateDeviceStatus, 30000);
setInterval(updateDiagnostics, 60000);

// Initial updates
updateDeviceStatus();
updateDiagnostics();