/**
 * SHIPS WMS - Streamlit V3 Layout Handler
 * Compact, modern warehouse UI interactions
 */

(function() {
    'use strict';

    const StreamlitLayout = {

        /**
         * Initialize layout on page load
         */
        init: function() {
            this.setupSidebarMenuActive();
            this.setupNotificationButton();
            this.setupResponsive();
            console.log('StreamlitLayout initialized');
        },

        /**
         * Highlight active menu item based on current page
         */
        setupSidebarMenuActive: function() {
            const currentPath = window.location.pathname.toLowerCase();
            const menuLinks = document.querySelectorAll('.sidebar-menu-link');

            menuLinks.forEach(link => {
                const href = link.getAttribute('href');
                if (href && currentPath.includes(href.toLowerCase())) {
                    link.classList.add('active');
                } else {
                    link.classList.remove('active');
                }
            });
        },

        /**
         * Setup notification button interactions
         */
        setupNotificationButton: function() {
            const notificationBtn = document.getElementById('notificationBtn');
            const notificationPopover = document.getElementById('notificationPopover');

            if (notificationBtn && notificationPopover) {
                notificationBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();

                    if (notificationPopover.style.display === 'none') {
                        // Position popover below button
                        const rect = notificationBtn.getBoundingClientRect();
                        notificationPopover.style.position = 'fixed';
                        notificationPopover.style.top = (rect.bottom + 10) + 'px';
                        notificationPopover.style.right = '20px';
                        notificationPopover.style.display = 'block';
                    } else {
                        notificationPopover.style.display = 'none';
                    }
                });

                // Close popover when clicking outside
                document.addEventListener('click', function(e) {
                    if (!notificationBtn.contains(e.target) && !notificationPopover.contains(e.target)) {
                        notificationPopover.style.display = 'none';
                    }
                });
            }
        },

        /**
         * Handle responsive sidebar on mobile
         */
        setupResponsive: function() {
            const sidebar = document.querySelector('.ships-sidebar');
            const main = document.querySelector('.ships-main');

            if (window.innerWidth < 768 && sidebar) {
                // Collapse sidebar on mobile if needed
                // Add mobile-specific behavior here
            }
        },

        /**
         * Toggle sidebar visibility (for mobile)
         */
        toggleSidebar: function() {
            const sidebar = document.querySelector('.ships-sidebar');
            if (sidebar) {
                sidebar.classList.toggle('collapsed');
            }
        }
    };

    // Initialize on DOM ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function() {
            StreamlitLayout.init();
        });
    } else {
        StreamlitLayout.init();
    }

    // Export to window for external use
    window.StreamlitLayout = StreamlitLayout;

})();
