/**
 * Global configuration handler for UI elements
 * - Updates Topbar Logo based on device type
 * - Shows/Hides "Screen" sidebar tab based on device type
 * - Updates sidebar device name
 * - Shows hotspot badge in sidebar when in hotspot mode
 */
document.addEventListener('DOMContentLoaded', () => {
    let config = null;

    // Fetch config once
    fetch('launcher.php?type=get_config_sqlite')
        .then(response => response.json())
        .then(data => {
            config = data;
            applyConfig(); // Apply immediately if elements are ready
        })
        .catch(error => console.error('Error loading config:', error));

    // Observe DOM changes to handle dynamically loaded elements (sidebar, topbar)
    const observer = new MutationObserver(() => {
        if (config) applyConfig();
    });

    observer.observe(document.body, { childList: true, subtree: true });

    function applyConfig() {
        if (!config) return;

        const isModuleAirPro = (config.device_type === 'moduleair_pro' || config.type === 'moduleair_pro');

        // 1. Topbar Logo Logic
        const logo = document.getElementById('topbar-logo');
        if (logo && isModuleAirPro) {
            // prevent unnecessary re-assignments
            if (!logo.src.includes('logoModuleAir.png')) {
                logo.src = 'assets/img/logoModuleAir.png';
            }
        }

        // 2. Sidebar Screen Tab Logic - Use class since ID might be duplicated (desktop/mobile)
        const navScreenElements = document.querySelectorAll('.nav-screen-item');
        if (navScreenElements.length > 0) {
            navScreenElements.forEach(navScreen => {
                if (isModuleAirPro) {
                    if (navScreen.style.display === 'none') {
                        navScreen.style.display = 'flex';
                    }
                } else {
                    if (navScreen.style.display !== 'none') {
                        navScreen.style.display = 'none';
                    }
                }
            });
        }

        // 3. Sidebar device name
        if (config.deviceName) {
            document.querySelectorAll('.sideBar_sensorName').forEach(el => {
                el.textContent = config.deviceName;
            });
            document.title = config.deviceName;
        }

        // 4. Hotspot badge in sidebar
        document.querySelectorAll('.sidebar-hotspot-badge').forEach(badge => {
            badge.style.display = (config.WIFI_status === 'hotspot') ? '' : 'none';
        });
    }
});