/**
 * Mobile Navigation - Non-module version
 * Provides bottom tab bar and sheet menu for mobile devices
 */

(function() {
    'use strict';

    class MobileNavigation {
        constructor(options = {}) {
            this.options = {
                breakpoint: 768,
                enableGestures: true,
                persistState: true,
                ...options
            };

            this.state = {
                activeTab: 'research',
                sheetOpen: false,
                isVisible: false
            };

            this.elements = {};
            this.initialized = false;
            this.closeSheetTimeout = null;
            this.resizeHandler = null;
            this.resizeTimer = null;
        }

        init() {
            if (this.initialized) return;

            // Check if we should show mobile nav
            this.checkViewport();

            // Hide desktop sidebar immediately on mobile
            if (this.state.isVisible) {
                const sidebar = document.querySelector('.ldr-sidebar, aside.ldr-sidebar');
                if (sidebar) {
                    sidebar.style.display = 'none';
                    sidebar.setAttribute('data-mobile-hidden', 'true');
                }
            }

            // Create DOM elements
            this.createNavigation();

            // Attach event listeners
            this.attachEventListeners();

            // Handle resize events
            this.handleResize();

            // Restore saved state if enabled
            if (this.options.persistState) {
                this.restoreState();
            }

            this.initialized = true;
            SafeLogger.log('Mobile navigation initialized');
        }

        checkViewport() {
            // Use < (not <=) to match CSS: @media (max-width: 767px) is mobile
            // 768px is tablet breakpoint where sidebar should be visible
            this.state.isVisible = window.innerWidth < this.options.breakpoint;
            return this.state.isVisible;
        }

        createNavigation() {
            // Don't create if already exists
            if (document.querySelector('.ldr-mobile-bottom-nav')) {
                this.elements.nav = document.querySelector('.ldr-mobile-bottom-nav');
                this.elements.sheet = document.querySelector('.ldr-mobile-sheet-menu');
                this.elements.overlay = document.querySelector('.ldr-mobile-sheet-overlay');
                return;
            }

            // Create bottom navigation
            this.createBottomNav();

            // Create sheet menu
            this.createSheetMenu();

            // Create overlay
            this.createOverlay();

            // Append to body
            document.body.appendChild(this.elements.nav);
            document.body.appendChild(this.elements.overlay);
            document.body.appendChild(this.elements.sheet);

            // Show if mobile
            if (this.state.isVisible) {
                this.toggle(true);
            }
        }

        createBottomNav() {
            const nav = document.createElement('nav');
            nav.className = 'ldr-mobile-bottom-nav';
            nav.setAttribute('role', 'navigation');
            nav.setAttribute('aria-label', 'Mobile navigation');

            const tabs = [
                { id: 'research', icon: 'fas fa-search', label: 'Research', path: URLS.PAGES.HOME },
                { id: 'history', icon: 'fas fa-history', label: 'History', path: URLS.PAGES.HISTORY },
                { id: 'library', icon: 'fas fa-book', label: 'Library', path: URLS.PAGES.LIBRARY },
                { id: 'news', icon: 'fas fa-newspaper', label: 'News', path: URLS.PAGES.NEWS },
                { id: 'more', icon: 'fas fa-bars', label: 'More', action: 'sheet' }
            ];

            nav.innerHTML = tabs.map(tab => `
                <button class="ldr-mobile-nav-tab ${this.isCurrentPage(tab) ? 'active' : ''}"
                        data-tab-id="${tab.id}"
                        data-action="${tab.action || 'navigate'}"
                        data-path="${tab.path || ''}"
                        role="tab"
                        aria-selected="${this.isCurrentPage(tab) ? 'true' : 'false'}"
                        aria-label="${tab.label}">
                    <i class="${tab.icon}"></i>
                    <span class="ldr-mobile-nav-label">${tab.label}</span>
                </button>
            `).join('');

            this.elements.nav = nav;
        }

        createSheetMenu() {
            const sheet = document.createElement('div');
            sheet.className = 'ldr-mobile-sheet-menu';
            sheet.setAttribute('role', 'dialog');
            sheet.setAttribute('aria-label', 'More options menu');
            sheet.setAttribute('aria-hidden', 'true');

            const username = this.getUsername();

            // bearer:disable javascript_lang_dangerous_insert_html
            sheet.innerHTML = `
                <div class="ldr-mobile-sheet-handle" aria-label="Drag to dismiss"></div>

                <div class="ldr-mobile-sheet-content">
                    <!-- Knowledge Base Section -->
                    <div class="ldr-mobile-sheet-section">
                        <h3 class="ldr-mobile-sheet-title">Knowledge Base</h3>
                        <div class="ldr-mobile-sheet-items">
                            <button class="ldr-mobile-sheet-item" data-item-id="collections" data-action="${URLS.PAGES.COLLECTIONS}">
                                <i class="fas fa-folder-open"></i>
                                <span class="ldr-mobile-sheet-label">Collections</span>
                            </button>
                        </div>
                    </div>

                    <!-- News Section -->
                    <div class="ldr-mobile-sheet-section">
                        <h3 class="ldr-mobile-sheet-title">News</h3>
                        <div class="ldr-mobile-sheet-items">
                            <button class="ldr-mobile-sheet-item" data-item-id="subscriptions" data-action="${URLS.PAGES.NEWS_SUBSCRIPTIONS}">
                                <i class="fas fa-bell"></i>
                                <span class="ldr-mobile-sheet-label">Subscriptions</span>
                            </button>
                        </div>
                    </div>

                    <!-- Analytics Section -->
                    <div class="ldr-mobile-sheet-section">
                        <h3 class="ldr-mobile-sheet-title">Analytics</h3>
                        <div class="ldr-mobile-sheet-items">
                            <button class="ldr-mobile-sheet-item" data-item-id="metrics" data-action="${URLS.PAGES.METRICS}">
                                <i class="fas fa-chart-bar"></i>
                                <span class="ldr-mobile-sheet-label">Metrics</span>
                            </button>
                            <button class="ldr-mobile-sheet-item" data-item-id="benchmark" data-action="${URLS.PAGES.BENCHMARK}">
                                <i class="fas fa-tachometer-alt"></i>
                                <span class="ldr-mobile-sheet-label">Benchmark</span>
                            </button>
                            <button class="ldr-mobile-sheet-item" data-item-id="benchmark-results" data-action="${URLS.PAGES.BENCHMARK_RESULTS}">
                                <i class="fas fa-chart-line"></i>
                                <span class="ldr-mobile-sheet-label">Results</span>
                            </button>
                        </div>
                    </div>

                    <!-- Settings Section -->
                    <div class="ldr-mobile-sheet-section">
                        <h3 class="ldr-mobile-sheet-title">Settings</h3>
                        <div class="ldr-mobile-sheet-items">
                            <button class="ldr-mobile-sheet-item" data-item-id="embedding-settings" data-action="${URLS.PAGES.EMBEDDING_SETTINGS}">
                                <i class="fas fa-brain"></i>
                                <span class="ldr-mobile-sheet-label">Embeddings</span>
                            </button>
                            <button class="ldr-mobile-sheet-item" data-item-id="settings" data-action="${URLS.PAGES.SETTINGS}">
                                <i class="fas fa-cog"></i>
                                <span class="ldr-mobile-sheet-label">Configuration</span>
                            </button>
                        </div>
                    </div>

                    <!-- Account Section -->
                    <div class="ldr-mobile-sheet-section">
                        <h3 class="ldr-mobile-sheet-title">Account</h3>
                        <div class="ldr-mobile-sheet-items">
                            <button class="ldr-mobile-sheet-item" data-item-id="user" data-action="#">
                                <i class="fas fa-user"></i>
                                <span class="ldr-mobile-sheet-label">${username}</span>
                            </button>
                            <button class="ldr-mobile-sheet-item" data-item-id="logout" data-action="#logout">
                                <i class="fas fa-sign-out-alt"></i>
                                <span class="ldr-mobile-sheet-label">Logout</span>
                            </button>
                        </div>
                    </div>
                </div>
            `;

            this.elements.sheet = sheet;
        }

        createOverlay() {
            const overlay = document.createElement('div');
            overlay.className = 'ldr-mobile-sheet-overlay';
            overlay.setAttribute('aria-hidden', 'true');
            this.elements.overlay = overlay;
        }

        attachEventListeners() {
            // Tab navigation
            if (this.elements.nav) {
                this.elements.nav.addEventListener('click', (e) => {
                    const tab = e.target.closest('.ldr-mobile-nav-tab');
                    if (!tab) return;

                    const action = tab.dataset.action;
                    const tabId = tab.dataset.tabId;

                    if (action === 'sheet') {
                        this.toggleSheet();
                    } else {
                        this.navigateToTab(tab.dataset.path);
                        this.setActiveTab(tabId);
                    }
                });
            }

            // Sheet menu items
            if (this.elements.sheet) {
                this.elements.sheet.addEventListener('click', (e) => {
                    const item = e.target.closest('.ldr-mobile-sheet-item');
                    if (!item) return;

                    this.handleSheetItem(item.dataset.action, item.dataset.itemId);
                });
            }

            // Overlay click to close
            if (this.elements.overlay) {
                this.elements.overlay.addEventListener('click', () => {
                    this.closeSheet();
                });
            }

            // Touch gestures for sheet
            if (this.options.enableGestures) {
                this.attachGestures();
            }
        }

        attachGestures() {
            if (!this.elements.sheet) return;

            let startY = 0;
            let currentY = 0;
            let isDragging = false;

            const handle = this.elements.sheet.querySelector('.ldr-mobile-sheet-handle');

            const handleTouchStart = (e) => {
                startY = e.touches[0].clientY;
                isDragging = true;
                this.elements.sheet.style.transition = 'none';
            };

            const handleTouchMove = (e) => {
                if (!isDragging) return;

                currentY = e.touches[0].clientY;
                const deltaY = currentY - startY;

                if (deltaY > 0) {
                    this.elements.sheet.style.transform = `translateY(${deltaY}px)`;
                }
            };

            const handleTouchEnd = () => {
                if (!isDragging) return;

                isDragging = false;
                this.elements.sheet.style.transition = '';

                const deltaY = currentY - startY;
                const threshold = Math.min(100, this.elements.sheet.offsetHeight * 0.2);

                if (deltaY > threshold) {
                    this.closeSheet();
                } else {
                    this.elements.sheet.style.transform = '';
                }
            };

            if (handle) {
                handle.addEventListener('touchstart', handleTouchStart, { passive: true });
                handle.addEventListener('touchmove', handleTouchMove, { passive: true });
                handle.addEventListener('touchend', handleTouchEnd, { passive: true });
            }
        }

        handleResize() {
            this.resizeHandler = () => {
                clearTimeout(this.resizeTimer);
                this.resizeTimer = setTimeout(() => {
                    const wasVisible = this.state.isVisible;
                    this.checkViewport();

                    if (wasVisible !== this.state.isVisible) {
                        this.toggle(this.state.isVisible);

                        if (!this.state.isVisible && this.state.sheetOpen) {
                            this.closeSheet();
                        }
                    }
                }, 250);
            };

            window.addEventListener('resize', this.resizeHandler);
        }

        toggle(show) {
            // Get desktop sidebar
            const sidebar = document.querySelector('.ldr-sidebar, aside.ldr-sidebar');

            if (show) {
                if (this.elements.nav) {
                    this.elements.nav.classList.add('visible');
                }
                document.body.classList.add('ldr-has-mobile-nav');

                // Hide desktop sidebar on mobile
                if (sidebar) {
                    sidebar.style.display = 'none';
                    sidebar.setAttribute('data-mobile-hidden', 'true');
                }
            } else {
                if (this.elements.nav) {
                    this.elements.nav.classList.remove('visible');
                }
                document.body.classList.remove('ldr-has-mobile-nav');

                // Show desktop sidebar on desktop
                if (sidebar && sidebar.getAttribute('data-mobile-hidden') === 'true') {
                    sidebar.style.display = '';
                    sidebar.removeAttribute('data-mobile-hidden');
                }
            }
        }

        navigateToTab(path) {
            if (path && path !== '#') {
                URLValidator.safeAssign(window.location, 'href', path);
            }
        }

        setActiveTab(tabId) {
            if (this.elements.nav) {
                this.elements.nav.querySelectorAll('.ldr-mobile-nav-tab').forEach(tab => {
                    tab.classList.remove('active');
                    tab.setAttribute('aria-selected', 'false');
                });

                const activeTab = this.elements.nav.querySelector(`[data-tab-id="${tabId}"]`);
                if (activeTab) {
                    activeTab.classList.add('active');
                    activeTab.setAttribute('aria-selected', 'true');
                }
            }

            this.state.activeTab = tabId;
            this.saveState();
        }

        toggleSheet() {
            if (this.state.sheetOpen) {
                this.closeSheet();
            } else {
                this.openSheet();
            }
        }

        openSheet() {
            if (this.elements.sheet) {
                // First set display:flex, then add active class for animation
                // Use requestAnimationFrame to ensure the display change is applied first
                this.elements.sheet.style.display = 'flex';
                requestAnimationFrame(() => {
                    requestAnimationFrame(() => {
                        this.elements.sheet.classList.add('active');
                        this.elements.sheet.setAttribute('aria-hidden', 'false');
                    });
                });
            }
            if (this.elements.overlay) {
                this.elements.overlay.classList.add('active');
                this.elements.overlay.setAttribute('aria-hidden', 'false');
            }

            document.body.style.overflow = 'hidden';
            this.state.sheetOpen = true;
        }

        closeSheet() {
            if (this.elements.sheet) {
                this.elements.sheet.classList.remove('active');
                this.elements.sheet.setAttribute('aria-hidden', 'true');
                this.elements.sheet.style.transform = '';

                // Wait for animation to complete before hiding with display:none
                // The CSS transition duration is 0.3s (300ms)
                clearTimeout(this.closeSheetTimeout);
                this.closeSheetTimeout = setTimeout(() => {
                    if (!this.state.sheetOpen) {
                        this.elements.sheet.style.display = 'none';
                    }
                }, 350);
            }
            if (this.elements.overlay) {
                this.elements.overlay.classList.remove('active');
                this.elements.overlay.setAttribute('aria-hidden', 'true');
            }

            document.body.style.overflow = '';
            this.state.sheetOpen = false;
        }

        handleSheetItem(action, itemId) {
            this.closeSheet();

            if (action === '#logout') {
                this.handleLogout();
            } else if (action && !action.startsWith('#')) {
                URLValidator.safeAssign(window.location, 'href', action);
            }
        }

        handleLogout() {
            const logoutForm = document.getElementById('logout-form');
            if (logoutForm) {
                logoutForm.submit();
            }
        }

        getUsername() {
            const userInfo = document.querySelector('.ldr-user-info');
            if (userInfo) {
                const text = userInfo.textContent || '';
                return text.trim().replace(/[^\w\s@._-]/g, '').trim() || 'User';
            }
            return 'User';
        }

        isCurrentPage(tab) {
            const currentPath = window.location.pathname;

            if (tab.id === 'research' && currentPath === '/') return true;
            if (tab.id === 'history' && currentPath.startsWith('/history')) return true;
            if (tab.id === 'library' && currentPath.startsWith('/library')) return true;
            if (tab.id === 'metrics' && currentPath.startsWith('/metrics')) return true;
            if (tab.id === 'news' && currentPath.startsWith('/news')) return true;

            return false;
        }

        saveState() {
            if (!this.options.persistState) return;

            try {
                localStorage.setItem('mobileNavState', JSON.stringify({
                    activeTab: this.state.activeTab
                }));
            } catch (e) {
                SafeLogger.error('Failed to save mobile nav state:', e);
            }
        }

        restoreState() {
            if (!this.options.persistState) return;

            try {
                const saved = localStorage.getItem('mobileNavState');
                if (saved) {
                    const state = JSON.parse(saved);
                    if (state.activeTab) {
                        this.setActiveTab(state.activeTab);
                    }
                }
            } catch (e) {
                SafeLogger.error('Failed to restore mobile nav state:', e);
            }
        }

        destroy() {
            clearTimeout(this.closeSheetTimeout);
            clearTimeout(this.resizeTimer);

            if (this.resizeHandler) {
                window.removeEventListener('resize', this.resizeHandler);
                this.resizeHandler = null;
            }

            if (this.elements.nav) this.elements.nav.remove();
            if (this.elements.sheet) this.elements.sheet.remove();
            if (this.elements.overlay) this.elements.overlay.remove();
            document.body.classList.remove('ldr-has-mobile-nav');
            this.initialized = false;
        }
    }

    // Initialize when DOM is ready
    function initMobileNav() {
        if (window.mobileNav) {
            window.mobileNav.destroy();
        }
        window.mobileNav = new MobileNavigation();
        window.mobileNav.init();
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initMobileNav);
    } else {
        initMobileNav();
    }

    // Expose to global scope for debugging
    window.MobileNavigation = MobileNavigation;
})();
