spore-ledlab/public/scripts/navigation.js

// Navigation Manager for SPORE LEDLab

class NavigationManager {
    constructor() {
        this.currentView = 'stream';
        this.init();
    }

    init() {
        this.setupNavigationListeners();
        // Sync settings values on init
        this.syncSettingsValues();
    }

    setupNavigationListeners() {
        // Navigation tab listeners
        const navTabs = document.querySelectorAll('.nav-tab');
        navTabs.forEach(tab => {
            tab.addEventListener('click', () => {
                const view = tab.dataset.view;
                this.switchView(view);
            });
        });

        // Settings apply button
        const settingsApplyBtn = document.getElementById('settings-apply-matrix-btn');
        if (settingsApplyBtn) {
            settingsApplyBtn.addEventListener('click', () => {
                this.applySettingsFromView();
            });
        }

        // Sync settings when stream view matrix config changes
        const streamWidthInput = document.getElementById('matrix-width');
        const streamHeightInput = document.getElementById('matrix-height');
        
        if (streamWidthInput) {
            streamWidthInput.addEventListener('change', () => this.syncSettingsValues());
        }
        if (streamHeightInput) {
            streamHeightInput.addEventListener('change', () => this.syncSettingsValues());
        }
    }

    switchView(viewName) {
        // Hide all views
        const allViews = document.querySelectorAll('.view-content');
        allViews.forEach(view => view.classList.remove('active'));

        // Deactivate all tabs
        const allTabs = document.querySelectorAll('.nav-tab');
        allTabs.forEach(tab => tab.classList.remove('active'));

        // Show selected view
        const targetView = document.getElementById(`${viewName}-view`);
        if (targetView) {
            targetView.classList.add('active');
        }

        // Activate selected tab
        const targetTab = document.querySelector(`.nav-tab[data-view="${viewName}"]`);
        if (targetTab) {
            targetTab.classList.add('active');
        }

        this.currentView = viewName;

        // Sync values when switching to settings
        if (viewName === 'settings') {
            this.syncSettingsValues();
        }

        console.log(`Switched to ${viewName} view`);
    }

    syncSettingsValues() {
        // Sync matrix configuration values from stream to settings
        const streamWidth = document.getElementById('matrix-width');
        const streamHeight = document.getElementById('matrix-height');
        const settingsWidth = document.getElementById('settings-matrix-width');
        const settingsHeight = document.getElementById('settings-matrix-height');

        if (streamWidth && settingsWidth) {
            settingsWidth.value = streamWidth.value;
        }
        if (streamHeight && settingsHeight) {
            settingsHeight.value = streamHeight.value;
        }
    }

    applySettingsFromView() {
        const settingsWidth = document.getElementById('settings-matrix-width');
        const settingsHeight = document.getElementById('settings-matrix-height');
        const streamWidth = document.getElementById('matrix-width');
        const streamHeight = document.getElementById('matrix-height');

        if (settingsWidth && streamWidth) {
            streamWidth.value = settingsWidth.value;
        }
        if (settingsHeight && streamHeight) {
            streamHeight.value = settingsHeight.value;
        }

        // Trigger the apply button in the stream view
        const applyBtn = document.getElementById('apply-matrix-btn');
        if (applyBtn) {
            applyBtn.click();
        }

        // Show success feedback
        const btn = document.getElementById('settings-apply-matrix-btn');
        if (btn) {
            const originalText = btn.textContent;
            btn.textContent = '✓ Applied!';
            btn.style.background = 'linear-gradient(135deg, var(--accent-success) 0%, #22c55e 100%)';
            
            setTimeout(() => {
                btn.textContent = originalText;
                btn.style.background = '';
            }, 2000);
        }
    }

    getCurrentView() {
        return this.currentView;
    }
}

// Initialize navigation when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
    window.navigationManager = new NavigationManager();
    console.log('Navigation manager initialized');
});

// Export for use in other modules
if (typeof module !== 'undefined' && module.exports) {
    module.exports = NavigationManager;
}