/**
 * Custom JavaScript for SWUpdate Web Interface
 * Enhances the default web interface with additional functionality
 */

// Wait for DOM to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
    // Add custom header
    addHeader();
    
    // Add system information section
    addSystemInfo();
    
    // Enhance progress display
    enhanceProgressDisplay();
    
    // Initialize update status polling
    initStatusPolling();
});

/**
 * Adds a custom header to the page
 */
function addHeader() {
    const header = document.createElement('div');
    header.className = 'header';
    header.innerHTML = '<h1>Auracaster System Update</h1>';
    
    const body = document.body;
    body.insertBefore(header, body.firstChild);
}

/**
 * Adds system information section to the page
 */
function addSystemInfo() {
    const systemInfo = document.createElement('div');
    systemInfo.className = 'system-info';
    systemInfo.innerHTML = `
        <h2>System Information</h2>
        <div class="info-row">
            <span class="info-label">Device:</span>
            <span class="info-value">Raspberry Pi 3</span>
        </div>
        <div class="info-row">
            <span class="info-label">Active Partition:</span>
            <span class="info-value" id="active-partition">Loading...</span>
        </div>
        <div class="info-row">
            <span class="info-label">Current Version:</span>
            <span class="info-value" id="current-version">Loading...</span>
        </div>
        <div class="info-row">
            <span class="info-label">Last Update:</span>
            <span class="info-value" id="last-update">Loading...</span>
        </div>
        <div class="actions" style="margin-top: 15px;">
            <button class="btn" id="refresh-info">Refresh</button>
        </div>
    `;
    
    // Insert before the upload form
    const uploadForm = document.querySelector('form');
    if (uploadForm) {
        uploadForm.parentNode.insertBefore(systemInfo, uploadForm);
    } else {
        document.body.appendChild(systemInfo);
    }
    
    // Add event listener for refresh button
    document.getElementById('refresh-info').addEventListener('click', fetchSystemInfo);
    
    // Initial fetch of system info
    fetchSystemInfo();
}

/**
 * Fetches system information via AJAX
 */
function fetchSystemInfo() {
    // In a real implementation, this would call an API endpoint
    // For now, we'll use dummy data that would typically come from swupdate-check.sh
    const activePartition = Math.random() > 0.5 ? 'A' : 'B';
    const version = '1.0.' + Math.floor(Math.random() * 10);
    const lastUpdate = new Date(Date.now() - Math.floor(Math.random() * 10000000000)).toLocaleString();
    
    document.getElementById('active-partition').textContent = activePartition;
    document.getElementById('current-version').textContent = version;
    document.getElementById('last-update').textContent = lastUpdate;
}

/**
 * Enhances the progress display with better visuals
 */
function enhanceProgressDisplay() {
    // Find the progress container (assuming it exists in the default UI)
    const progressContainer = document.querySelector('.progress');
    
    if (!progressContainer) return;
    
    // Create enhanced progress container
    const enhancedProgress = document.createElement('div');
    enhancedProgress.className = 'progress-container';
    enhancedProgress.innerHTML = `
        <h2>Update Progress</h2>
        <div class="progress-bar">
            <div class="progress-bar-inner" id="progress-bar"></div>
        </div>
        <div class="status" id="progress-status">Waiting for update...</div>
    `;
    
    // Replace the original progress container
    progressContainer.parentNode.replaceChild(enhancedProgress, progressContainer);
}

/**
 * Initializes polling for update status
 */
function initStatusPolling() {
    // In a real implementation, this would poll an API endpoint
    // For demonstration, we'll simulate progress updates
    let progress = 0;
    
    const updateProgress = setInterval(() => {
        // This would normally only run during an active update
        // For demo purposes, it increments regardless
        if (progress < 100) {
            progress += Math.floor(Math.random() * 5);
            if (progress > 100) progress = 100;
            
            const progressBar = document.getElementById('progress-bar');
            const progressStatus = document.getElementById('progress-status');
            
            if (progressBar) {
                progressBar.style.width = progress + '%';
            }
            
            if (progressStatus) {
                if (progress < 30) {
                    progressStatus.textContent = 'Downloading update...';
                } else if (progress < 60) {
                    progressStatus.textContent = 'Verifying update...';
                } else if (progress < 90) {
                    progressStatus.textContent = 'Installing to inactive partition...';
                } else if (progress < 100) {
                    progressStatus.textContent = 'Finalizing update...';
                } else {
                    progressStatus.textContent = 'Update complete! Reboot to apply.';
                    clearInterval(updateProgress);
                }
            }
        }
    }, 1000);
}