intercept/static/js/modes/wifi.js

/**
 * WiFi Mode Controller (v2)
 *
 * Unified WiFi scanning with dual-mode architecture:
 * - Quick Scan: System tools without monitor mode
 * - Deep Scan: airodump-ng with monitor mode
 *
 * Features:
 * - Proximity radar visualization
 * - Channel utilization analysis
 * - Hidden SSID correlation
 * - Real-time SSE streaming
 */

const WiFiMode = (function() {
    'use strict';

    // ==========================================================================
    // Configuration
    // ==========================================================================

    const CONFIG = {
        apiBase: '/wifi/v2',
        pollInterval: 5000,
        keepaliveTimeout: 30000,
        maxNetworks: 500,
        maxClients: 500,
        maxProbes: 1000,
    };

    // ==========================================================================
    // State
    // ==========================================================================

    let isScanning = false;
    let scanMode = 'quick'; // 'quick' or 'deep'
    let eventSource = null;
    let pollTimer = null;

    // Data stores
    let networks = new Map(); // bssid -> network
    let clients = new Map();  // mac -> client
    let probeRequests = [];
    let channelStats = [];
    let recommendations = [];

    // UI state
    let selectedNetwork = null;
    let currentFilter = 'all';
    let currentSort = { field: 'rssi', order: 'desc' };

    // Capabilities
    let capabilities = null;

    // Callbacks for external integration
    let onNetworkUpdate = null;
    let onClientUpdate = null;
    let onProbeRequest = null;

    // ==========================================================================
    // Initialization
    // ==========================================================================

    function init() {
        console.log('[WiFiMode] Initializing...');

        // Cache DOM elements
        cacheDOM();

        // Check capabilities
        checkCapabilities();

        // Initialize components
        initScanModeTabs();
        initNetworkFilters();
        initSortControls();
        initProximityRadar();
        initChannelChart();

        // Check if already scanning
        checkScanStatus();

        console.log('[WiFiMode] Initialized');
    }

    // DOM element cache
    let elements = {};

    function cacheDOM() {
        elements = {
            // Scan controls
            quickScanBtn: document.getElementById('wifiQuickScanBtn'),
            deepScanBtn: document.getElementById('wifiDeepScanBtn'),
            stopScanBtn: document.getElementById('wifiStopScanBtn'),
            scanModeQuick: document.getElementById('wifiScanModeQuick'),
            scanModeDeep: document.getElementById('wifiScanModeDeep'),

            // Status
            scanStatus: document.getElementById('wifiScanStatus'),
            networkCount: document.getElementById('wifiNetworkCount'),
            clientCount: document.getElementById('wifiClientCount'),
            hiddenCount: document.getElementById('wifiHiddenCount'),

            // Network list
            networkTable: document.getElementById('wifiNetworkTable'),
            networkTableBody: document.getElementById('wifiNetworkTableBody'),
            networkFilters: document.getElementById('wifiNetworkFilters'),

            // Visualizations
            proximityRadar: document.getElementById('wifiProximityRadar'),
            channelChart: document.getElementById('wifiChannelChart'),
            channelBandTabs: document.getElementById('wifiChannelBandTabs'),

            // Detail panel
            detailPanel: document.getElementById('wifiDetailPanel'),
            detailContent: document.getElementById('wifiDetailContent'),

            // Interface select
            interfaceSelect: document.getElementById('wifiInterfaceSelect'),

            // Capability status
            capabilityStatus: document.getElementById('wifiCapabilityStatus'),

            // Export buttons
            exportCsvBtn: document.getElementById('wifiExportCsv'),
            exportJsonBtn: document.getElementById('wifiExportJson'),
        };
    }

    // ==========================================================================
    // Capabilities
    // ==========================================================================

    async function checkCapabilities() {
        try {
            const response = await fetch(`${CONFIG.apiBase}/capabilities`);
            if (!response.ok) throw new Error('Failed to fetch capabilities');

            capabilities = await response.json();
            console.log('[WiFiMode] Capabilities:', capabilities);

            updateCapabilityUI();
            populateInterfaceSelect();
        } catch (error) {
            console.error('[WiFiMode] Capability check failed:', error);
            showCapabilityError('Failed to check WiFi capabilities');
        }
    }

    function updateCapabilityUI() {
        if (!capabilities || !elements.capabilityStatus) return;

        let html = '';

        if (!capabilities.can_quick_scan && !capabilities.can_deep_scan) {
            html = `
                <div class="wifi-capability-warning">
                    <strong>WiFi scanning not available</strong>
                    <ul>
                        ${capabilities.issues.map(i => `<li>${escapeHtml(i)}</li>`).join('')}
                    </ul>
                </div>
            `;
        } else {
            // Show available modes
            const modes = [];
            if (capabilities.can_quick_scan) modes.push('Quick Scan');
            if (capabilities.can_deep_scan) modes.push('Deep Scan');

            html = `
                <div class="wifi-capability-info">
                    Available modes: ${modes.join(', ')}
                    ${capabilities.preferred_quick_tool ? ` (using ${capabilities.preferred_quick_tool})` : ''}
                </div>
            `;

            if (capabilities.issues.length > 0) {
                html += `
                    <div class="wifi-capability-warning" style="margin-top: 8px;">
                        <small>${capabilities.issues.join('. ')}</small>
                    </div>
                `;
            }
        }

        elements.capabilityStatus.innerHTML = html;
        elements.capabilityStatus.style.display = html ? 'block' : 'none';

        // Enable/disable scan buttons based on capabilities
        if (elements.quickScanBtn) {
            elements.quickScanBtn.disabled = !capabilities.can_quick_scan;
        }
        if (elements.deepScanBtn) {
            elements.deepScanBtn.disabled = !capabilities.can_deep_scan;
        }
    }

    function showCapabilityError(message) {
        if (!elements.capabilityStatus) return;

        elements.capabilityStatus.innerHTML = `
            <div class="wifi-capability-error">${escapeHtml(message)}</div>
        `;
        elements.capabilityStatus.style.display = 'block';
    }

    function populateInterfaceSelect() {
        if (!elements.interfaceSelect || !capabilities) return;

        elements.interfaceSelect.innerHTML = '';

        if (capabilities.interfaces.length === 0) {
            elements.interfaceSelect.innerHTML = '<option value="">No interfaces found</option>';
            return;
        }

        capabilities.interfaces.forEach(iface => {
            const option = document.createElement('option');
            option.value = iface.name;
            option.textContent = `${iface.name}${iface.supports_monitor ? ' (monitor capable)' : ''}`;
            elements.interfaceSelect.appendChild(option);
        });

        // Select default
        if (capabilities.default_interface) {
            elements.interfaceSelect.value = capabilities.default_interface;
        }
    }

    // ==========================================================================
    // Scan Mode Tabs
    // ==========================================================================

    function initScanModeTabs() {
        if (elements.scanModeQuick) {
            elements.scanModeQuick.addEventListener('click', () => setScanMode('quick'));
        }
        if (elements.scanModeDeep) {
            elements.scanModeDeep.addEventListener('click', () => setScanMode('deep'));
        }
    }

    function setScanMode(mode) {
        scanMode = mode;

        // Update tab UI
        if (elements.scanModeQuick) {
            elements.scanModeQuick.classList.toggle('active', mode === 'quick');
        }
        if (elements.scanModeDeep) {
            elements.scanModeDeep.classList.toggle('active', mode === 'deep');
        }

        console.log('[WiFiMode] Scan mode set to:', mode);
    }

    // ==========================================================================
    // Scanning
    // ==========================================================================

    async function startQuickScan() {
        if (isScanning) return;

        console.log('[WiFiMode] Starting quick scan...');
        setScanning(true, 'quick');

        try {
            const iface = elements.interfaceSelect?.value || null;

            const response = await fetch(`${CONFIG.apiBase}/scan/quick`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ interface: iface }),
            });

            if (!response.ok) {
                const error = await response.json();
                throw new Error(error.error || 'Quick scan failed');
            }

            const result = await response.json();
            console.log('[WiFiMode] Quick scan complete:', result);

            // Process results
            processQuickScanResult(result);

            // For quick scan, we're done after one scan
            // But keep polling if user wants continuous updates
            if (scanMode === 'quick') {
                startQuickScanPolling();
            }
        } catch (error) {
            console.error('[WiFiMode] Quick scan error:', error);
            showError(error.message);
            setScanning(false);
        }
    }

    async function startDeepScan() {
        if (isScanning) return;

        console.log('[WiFiMode] Starting deep scan...');
        setScanning(true, 'deep');

        try {
            const iface = elements.interfaceSelect?.value || null;
            const band = document.getElementById('wifiBand')?.value || 'all';
            const channel = document.getElementById('wifiChannel')?.value || null;

            const response = await fetch(`${CONFIG.apiBase}/scan/start`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    interface: iface,
                    band: band === 'abg' ? 'all' : band === 'bg' ? '2.4' : '5',
                    channel: channel ? parseInt(channel) : null,
                }),
            });

            if (!response.ok) {
                const error = await response.json();
                throw new Error(error.error || 'Failed to start deep scan');
            }

            // Start SSE stream for real-time updates
            startEventStream();
        } catch (error) {
            console.error('[WiFiMode] Deep scan error:', error);
            showError(error.message);
            setScanning(false);
        }
    }

    async function stopScan() {
        console.log('[WiFiMode] Stopping scan...');

        // Stop polling
        if (pollTimer) {
            clearInterval(pollTimer);
            pollTimer = null;
        }

        // Close event stream
        if (eventSource) {
            eventSource.close();
            eventSource = null;
        }

        // Stop deep scan on server
        if (scanMode === 'deep') {
            try {
                await fetch(`${CONFIG.apiBase}/scan/stop`, { method: 'POST' });
            } catch (error) {
                console.warn('[WiFiMode] Error stopping scan:', error);
            }
        }

        setScanning(false);
    }

    function setScanning(scanning, mode = null) {
        isScanning = scanning;
        if (mode) scanMode = mode;

        // Update buttons
        if (elements.quickScanBtn) {
            elements.quickScanBtn.style.display = scanning ? 'none' : 'inline-block';
        }
        if (elements.deepScanBtn) {
            elements.deepScanBtn.style.display = scanning ? 'none' : 'inline-block';
        }
        if (elements.stopScanBtn) {
            elements.stopScanBtn.style.display = scanning ? 'inline-block' : 'none';
        }

        // Update status
        if (elements.scanStatus) {
            elements.scanStatus.textContent = scanning
                ? `Scanning (${scanMode === 'quick' ? 'Quick' : 'Deep'})...`
                : 'Idle';
            elements.scanStatus.className = scanning ? 'status-scanning' : 'status-idle';
        }
    }

    async function checkScanStatus() {
        try {
            const response = await fetch(`${CONFIG.apiBase}/scan/status`);
            if (!response.ok) return;

            const status = await response.json();

            if (status.is_scanning) {
                setScanning(true, status.scan_mode);
                if (status.scan_mode === 'deep') {
                    startEventStream();
                } else {
                    startQuickScanPolling();
                }
            }
        } catch (error) {
            console.debug('[WiFiMode] Status check failed:', error);
        }
    }

    // ==========================================================================
    // Quick Scan Polling
    // ==========================================================================

    function startQuickScanPolling() {
        if (pollTimer) return;

        pollTimer = setInterval(async () => {
            if (!isScanning || scanMode !== 'quick') {
                clearInterval(pollTimer);
                pollTimer = null;
                return;
            }

            try {
                const iface = elements.interfaceSelect?.value || null;
                const response = await fetch(`${CONFIG.apiBase}/scan/quick`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ interface: iface }),
                });

                if (response.ok) {
                    const result = await response.json();
                    processQuickScanResult(result);
                }
            } catch (error) {
                console.debug('[WiFiMode] Poll error:', error);
            }
        }, CONFIG.pollInterval);
    }

    function processQuickScanResult(result) {
        // Update networks
        result.access_points.forEach(ap => {
            networks.set(ap.bssid, ap);
        });

        // Update channel stats
        channelStats = result.channel_stats || [];
        recommendations = result.recommendations || [];

        // Update UI
        updateNetworkTable();
        updateStats();
        updateProximityRadar();
        updateChannelChart();

        // Callbacks
        result.access_points.forEach(ap => {
            if (onNetworkUpdate) onNetworkUpdate(ap);
        });
    }

    // ==========================================================================
    // SSE Event Stream
    // ==========================================================================

    function startEventStream() {
        if (eventSource) {
            eventSource.close();
        }

        console.log('[WiFiMode] Starting event stream...');
        eventSource = new EventSource(`${CONFIG.apiBase}/stream`);

        eventSource.onopen = () => {
            console.log('[WiFiMode] Event stream connected');
        };

        eventSource.onmessage = (event) => {
            try {
                const data = JSON.parse(event.data);
                handleStreamEvent(data);
            } catch (error) {
                console.debug('[WiFiMode] Event parse error:', error);
            }
        };

        eventSource.onerror = (error) => {
            console.warn('[WiFiMode] Event stream error:', error);
            if (isScanning) {
                // Attempt to reconnect
                setTimeout(() => {
                    if (isScanning && scanMode === 'deep') {
                        startEventStream();
                    }
                }, 3000);
            }
        };
    }

    function handleStreamEvent(event) {
        switch (event.type) {
            case 'network_update':
                handleNetworkUpdate(event.network);
                break;

            case 'client_update':
                handleClientUpdate(event.client);
                break;

            case 'probe_request':
                handleProbeRequest(event.probe);
                break;

            case 'hidden_revealed':
                handleHiddenRevealed(event.bssid, event.revealed_essid);
                break;

            case 'scan_started':
                console.log('[WiFiMode] Scan started:', event);
                break;

            case 'scan_stopped':
                console.log('[WiFiMode] Scan stopped');
                setScanning(false);
                break;

            case 'scan_error':
                console.error('[WiFiMode] Scan error:', event.error);
                showError(event.error);
                setScanning(false);
                break;

            case 'keepalive':
                // Ignore keepalives
                break;

            default:
                console.debug('[WiFiMode] Unknown event type:', event.type);
        }
    }

    function handleNetworkUpdate(network) {
        networks.set(network.bssid, network);
        updateNetworkRow(network);
        updateStats();
        updateProximityRadar();

        if (onNetworkUpdate) onNetworkUpdate(network);
    }

    function handleClientUpdate(client) {
        clients.set(client.mac, client);
        updateStats();

        if (onClientUpdate) onClientUpdate(client);
    }

    function handleProbeRequest(probe) {
        probeRequests.push(probe);
        if (probeRequests.length > CONFIG.maxProbes) {
            probeRequests.shift();
        }

        if (onProbeRequest) onProbeRequest(probe);
    }

    function handleHiddenRevealed(bssid, revealedSsid) {
        const network = networks.get(bssid);
        if (network) {
            network.revealed_essid = revealedSsid;
            network.display_name = `${revealedSsid} (revealed)`;
            updateNetworkRow(network);

            // Show notification
            showInfo(`Hidden SSID revealed: ${revealedSsid}`);
        }
    }

    // ==========================================================================
    // Network Table
    // ==========================================================================

    function initNetworkFilters() {
        if (!elements.networkFilters) return;

        elements.networkFilters.addEventListener('click', (e) => {
            if (e.target.matches('.wifi-filter-btn')) {
                const filter = e.target.dataset.filter;
                setNetworkFilter(filter);
            }
        });
    }

    function setNetworkFilter(filter) {
        currentFilter = filter;

        // Update button states
        if (elements.networkFilters) {
            elements.networkFilters.querySelectorAll('.wifi-filter-btn').forEach(btn => {
                btn.classList.toggle('active', btn.dataset.filter === filter);
            });
        }

        updateNetworkTable();
    }

    function initSortControls() {
        if (!elements.networkTable) return;

        elements.networkTable.addEventListener('click', (e) => {
            const th = e.target.closest('th[data-sort]');
            if (th) {
                const field = th.dataset.sort;
                if (currentSort.field === field) {
                    currentSort.order = currentSort.order === 'desc' ? 'asc' : 'desc';
                } else {
                    currentSort.field = field;
                    currentSort.order = 'desc';
                }
                updateNetworkTable();
            }
        });
    }

    function updateNetworkTable() {
        if (!elements.networkTableBody) return;

        // Filter networks
        let filtered = Array.from(networks.values());

        switch (currentFilter) {
            case 'hidden':
                filtered = filtered.filter(n => n.is_hidden);
                break;
            case 'open':
                filtered = filtered.filter(n => n.security === 'Open');
                break;
            case 'strong':
                filtered = filtered.filter(n => n.rssi_current && n.rssi_current >= -60);
                break;
            case '2.4':
                filtered = filtered.filter(n => n.band === '2.4GHz');
                break;
            case '5':
                filtered = filtered.filter(n => n.band === '5GHz');
                break;
        }

        // Sort networks
        filtered.sort((a, b) => {
            let aVal, bVal;

            switch (currentSort.field) {
                case 'rssi':
                    aVal = a.rssi_current || -100;
                    bVal = b.rssi_current || -100;
                    break;
                case 'channel':
                    aVal = a.channel || 0;
                    bVal = b.channel || 0;
                    break;
                case 'essid':
                    aVal = (a.essid || '').toLowerCase();
                    bVal = (b.essid || '').toLowerCase();
                    break;
                case 'clients':
                    aVal = a.client_count || 0;
                    bVal = b.client_count || 0;
                    break;
                default:
                    aVal = a.rssi_current || -100;
                    bVal = b.rssi_current || -100;
            }

            if (currentSort.order === 'desc') {
                return bVal > aVal ? 1 : bVal < aVal ? -1 : 0;
            } else {
                return aVal > bVal ? 1 : aVal < bVal ? -1 : 0;
            }
        });

        // Render table
        elements.networkTableBody.innerHTML = filtered.map(n => createNetworkRow(n)).join('');
    }

    function createNetworkRow(network) {
        const rssi = network.rssi_current;
        const signalClass = rssi >= -50 ? 'signal-strong' :
                           rssi >= -70 ? 'signal-medium' :
                           rssi >= -85 ? 'signal-weak' : 'signal-very-weak';

        const securityClass = network.security === 'Open' ? 'security-open' :
                              network.security === 'WEP' ? 'security-wep' :
                              network.security.includes('WPA3') ? 'security-wpa3' : 'security-wpa';

        const hiddenBadge = network.is_hidden ? '<span class="badge badge-hidden">Hidden</span>' : '';
        const newBadge = network.is_new ? '<span class="badge badge-new">New</span>' : '';

        return `
            <tr class="wifi-network-row ${network.bssid === selectedNetwork ? 'selected' : ''}"
                data-bssid="${escapeHtml(network.bssid)}"
                onclick="WiFiMode.selectNetwork('${escapeHtml(network.bssid)}')">
                <td class="col-essid">
                    <span class="essid">${escapeHtml(network.display_name || network.essid || '[Hidden]')}</span>
                    ${hiddenBadge}${newBadge}
                </td>
                <td class="col-bssid"><code>${escapeHtml(network.bssid)}</code></td>
                <td class="col-channel">${network.channel || '-'}</td>
                <td class="col-rssi">
                    <span class="rssi-value ${signalClass}">${rssi !== null ? rssi : '-'}</span>
                </td>
                <td class="col-security">
                    <span class="security-badge ${securityClass}">${escapeHtml(network.security)}</span>
                </td>
                <td class="col-clients">${network.client_count || 0}</td>
                <td class="col-vendor">${escapeHtml(network.vendor || '-')}</td>
            </tr>
        `;
    }

    function updateNetworkRow(network) {
        const row = elements.networkTableBody?.querySelector(`tr[data-bssid="${network.bssid}"]`);
        if (row) {
            row.outerHTML = createNetworkRow(network);
        } else {
            // Add new row
            updateNetworkTable();
        }
    }

    function selectNetwork(bssid) {
        selectedNetwork = bssid;

        // Update row selection
        elements.networkTableBody?.querySelectorAll('.wifi-network-row').forEach(row => {
            row.classList.toggle('selected', row.dataset.bssid === bssid);
        });

        // Update detail panel
        updateDetailPanel(bssid);

        // Highlight on radar
        if (typeof WiFiProximityRadar !== 'undefined') {
            WiFiProximityRadar.highlightNetwork(bssid);
        }
    }

    // ==========================================================================
    // Detail Panel
    // ==========================================================================

    function updateDetailPanel(bssid) {
        if (!elements.detailPanel || !elements.detailContent) return;

        const network = networks.get(bssid);
        if (!network) {
            elements.detailPanel.style.display = 'none';
            return;
        }

        elements.detailPanel.style.display = 'block';
        elements.detailContent.innerHTML = `
            <div class="wifi-detail-header">
                <h4>${escapeHtml(network.display_name || network.essid || '[Hidden SSID]')}</h4>
                <button class="close-btn" onclick="WiFiMode.closeDetail()">&times;</button>
            </div>
            <div class="wifi-detail-body">
                <div class="detail-row">
                    <span class="label">BSSID:</span>
                    <span class="value"><code>${escapeHtml(network.bssid)}</code></span>
                </div>
                <div class="detail-row">
                    <span class="label">Channel:</span>
                    <span class="value">${network.channel || '-'} (${network.band})</span>
                </div>
                <div class="detail-row">
                    <span class="label">Security:</span>
                    <span class="value">${escapeHtml(network.security)} / ${escapeHtml(network.cipher || '-')} / ${escapeHtml(network.auth || '-')}</span>
                </div>
                <div class="detail-row">
                    <span class="label">Signal:</span>
                    <span class="value">${network.rssi_current || '-'} dBm (${network.signal_band})</span>
                </div>
                <div class="detail-row">
                    <span class="label">Vendor:</span>
                    <span class="value">${escapeHtml(network.vendor || 'Unknown')}</span>
                </div>
                <div class="detail-row">
                    <span class="label">Clients:</span>
                    <span class="value">${network.client_count || 0}</span>
                </div>
                <div class="detail-row">
                    <span class="label">First Seen:</span>
                    <span class="value">${formatTime(network.first_seen)}</span>
                </div>
                <div class="detail-row">
                    <span class="label">Last Seen:</span>
                    <span class="value">${formatTime(network.last_seen)}</span>
                </div>
                ${network.rssi_history?.length > 0 ? `
                    <div class="detail-rssi-chart">
                        <h5>Signal History</h5>
                        <div id="wifiDetailRssiChart"></div>
                    </div>
                ` : ''}
            </div>
        `;

        // Render RSSI sparkline if available
        if (network.rssi_history?.length > 0 && typeof RSSISparkline !== 'undefined') {
            RSSISparkline.render('wifiDetailRssiChart', network.rssi_history);
        }
    }

    function closeDetail() {
        selectedNetwork = null;
        if (elements.detailPanel) {
            elements.detailPanel.style.display = 'none';
        }
        elements.networkTableBody?.querySelectorAll('.wifi-network-row').forEach(row => {
            row.classList.remove('selected');
        });
    }

    // ==========================================================================
    // Statistics
    // ==========================================================================

    function updateStats() {
        if (elements.networkCount) {
            elements.networkCount.textContent = networks.size;
        }
        if (elements.clientCount) {
            elements.clientCount.textContent = clients.size;
        }
        if (elements.hiddenCount) {
            const hidden = Array.from(networks.values()).filter(n => n.is_hidden).length;
            elements.hiddenCount.textContent = hidden;
        }
    }

    // ==========================================================================
    // Proximity Radar
    // ==========================================================================

    function initProximityRadar() {
        if (!elements.proximityRadar) return;

        // Initialize radar component
        if (typeof ProximityRadar !== 'undefined') {
            ProximityRadar.init('wifiProximityRadar', {
                mode: 'wifi',
                size: 280,
                onDeviceClick: (bssid) => selectNetwork(bssid),
            });
        }
    }

    function updateProximityRadar() {
        if (typeof ProximityRadar === 'undefined') return;

        // Convert networks to radar-compatible format
        const devices = Array.from(networks.values()).map(n => ({
            device_key: n.bssid,
            device_id: n.bssid,
            name: n.essid || '[Hidden]',
            rssi_current: n.rssi_current,
            rssi_ema: n.rssi_ema,
            proximity_band: n.proximity_band,
            estimated_distance_m: n.estimated_distance_m,
            is_new: n.is_new,
            heuristic_flags: n.heuristic_flags || [],
        }));

        ProximityRadar.updateDevices(devices);
    }

    // ==========================================================================
    // Channel Chart
    // ==========================================================================

    function initChannelChart() {
        if (!elements.channelChart) return;

        // Initialize channel chart component
        if (typeof ChannelChart !== 'undefined') {
            ChannelChart.init('wifiChannelChart');
        }

        // Band tabs
        if (elements.channelBandTabs) {
            elements.channelBandTabs.addEventListener('click', (e) => {
                if (e.target.matches('.channel-band-tab')) {
                    const band = e.target.dataset.band;
                    elements.channelBandTabs.querySelectorAll('.channel-band-tab').forEach(t => {
                        t.classList.toggle('active', t.dataset.band === band);
                    });
                    updateChannelChart(band);
                }
            });
        }
    }

    function updateChannelChart(band = '2.4') {
        if (typeof ChannelChart === 'undefined') return;

        // Filter stats by band
        const bandFilter = band === '2.4' ? '2.4GHz' : band === '5' ? '5GHz' : '6GHz';
        const filteredStats = channelStats.filter(s => s.band === bandFilter);
        const filteredRecs = recommendations.filter(r => r.band === bandFilter);

        ChannelChart.update(filteredStats, filteredRecs);
    }

    // ==========================================================================
    // Export
    // ==========================================================================

    async function exportData(format) {
        try {
            const response = await fetch(`${CONFIG.apiBase}/export?format=${format}&type=all`);
            if (!response.ok) throw new Error('Export failed');

            const blob = await response.blob();
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `wifi_scan_${new Date().toISOString().slice(0, 19).replace(/[:-]/g, '')}.${format}`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        } catch (error) {
            console.error('[WiFiMode] Export error:', error);
            showError('Export failed: ' + error.message);
        }
    }

    // ==========================================================================
    // Utilities
    // ==========================================================================

    function escapeHtml(text) {
        if (!text) return '';
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    function formatTime(isoString) {
        if (!isoString) return '-';
        const date = new Date(isoString);
        return date.toLocaleTimeString();
    }

    function showError(message) {
        // Use global notification if available
        if (typeof showNotification === 'function') {
            showNotification('WiFi Error', message, 'error');
        } else {
            console.error('[WiFiMode]', message);
        }
    }

    function showInfo(message) {
        if (typeof showNotification === 'function') {
            showNotification('WiFi', message, 'info');
        } else {
            console.log('[WiFiMode]', message);
        }
    }

    // ==========================================================================
    // Public API
    // ==========================================================================

    return {
        init,
        startQuickScan,
        startDeepScan,
        stopScan,
        selectNetwork,
        closeDetail,
        setFilter: setNetworkFilter,
        exportData,
        checkCapabilities,

        // Getters
        getNetworks: () => Array.from(networks.values()),
        getClients: () => Array.from(clients.values()),
        getProbes: () => [...probeRequests],
        isScanning: () => isScanning,
        getScanMode: () => scanMode,

        // Callbacks
        onNetworkUpdate: (cb) => { onNetworkUpdate = cb; },
        onClientUpdate: (cb) => { onClientUpdate = cb; },
        onProbeRequest: (cb) => { onProbeRequest = cb; },
    };
})();

// Auto-initialize when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
    // Only init if we're in WiFi mode
    if (typeof currentMode !== 'undefined' && currentMode === 'wifi') {
        WiFiMode.init();
    }
});