// Initialization
const UPDATE_INTERVALS = {
    deviceStatus: 30000,
    diagnostics: 60000
};

// Core update functions
function updateDeviceStatus() {
    console.log('Updating device status...');
    fetch('/api/status')
        .then(response => response.json())
        .then(data => {
            console.log('Received status data:', data);
            Object.entries(data).forEach(([deviceName, status]) => {
                console.log(`Updating ${deviceName} status to ${status}`);
                updateDeviceIndicator(deviceName, status);
            });
        })
        .catch(error => console.error('Error updating status:', error));
}

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);
            });
        });
}

// Element creation functions
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;
}

// Initialize updates
function initializeUpdates() {
    // Set update intervals
    setInterval(updateDeviceStatus, UPDATE_INTERVALS.deviceStatus);
    setInterval(updateDiagnostics, UPDATE_INTERVALS.diagnostics);

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

// Start the application
initializeUpdates();