const themeToggleBtn = document.getElementById('themeToggleBtn');
const menuToggleBtn = document.getElementById('menuToggleBtn');
const sidebar = document.getElementById('sidebar');
const sidebarOverlay = document.getElementById('sidebarOverlay');

let currentTheme = localStorage.getItem('posDashboardTheme') || 'light';

function applyTheme(theme) {
    currentTheme = theme;
    localStorage.setItem('posDashboardTheme', theme);

    if (theme === 'dark') {
        document.body.classList.add('dark-mode');
        if (themeToggleBtn) {
            themeToggleBtn.innerHTML = '<i class="bi bi-sun-fill me-1"></i> Light Mode';
        }
    } else {
        document.body.classList.remove('dark-mode');
        if (themeToggleBtn) {
            themeToggleBtn.innerHTML = '<i class="bi bi-moon-stars-fill me-1"></i> Dark Mode';
        }
    }
}

applyTheme(currentTheme);

if (themeToggleBtn) {
    themeToggleBtn.addEventListener('click', function () {
        applyTheme(currentTheme === 'light' ? 'dark' : 'light');
    });
}

if (menuToggleBtn) {
    menuToggleBtn.addEventListener('click', function () {
        sidebar.classList.add('mobile-open');
        sidebarOverlay.classList.add('show');
    });
}

if (sidebarOverlay) {
    sidebarOverlay.addEventListener('click', function () {
        sidebar.classList.remove('mobile-open');
        sidebarOverlay.classList.remove('show');
    });
}

const allMainButtons = document.querySelectorAll('.nav-group-btn');
const allMainMenus = document.querySelectorAll('.submenu');

allMainButtons.forEach(button => {
    button.addEventListener('click', function () {
        const targetId = this.getAttribute('data-target');
        const targetMenu = document.getElementById(targetId);
        const isOpen = targetMenu.classList.contains('show');

        allMainMenus.forEach(menu => menu.classList.remove('show'));
        allMainButtons.forEach(btn => btn.classList.remove('open'));

        document.querySelectorAll('.nested-submenu').forEach(menu => menu.classList.remove('show'));
        document.querySelectorAll('.nested-btn').forEach(btn => btn.classList.remove('open'));

        if (!isOpen) {
            targetMenu.classList.add('show');
            this.classList.add('open');
        }
    });
});

const allNestedButtons = document.querySelectorAll('.nested-btn');

allNestedButtons.forEach(button => {
    button.addEventListener('click', function () {
        const targetId = this.getAttribute('data-target');
        const targetMenu = document.getElementById(targetId);
        const isOpen = targetMenu.classList.contains('show');

        const parentSubmenu = this.closest('.submenu');
        const siblingNestedMenus = parentSubmenu.querySelectorAll('.nested-submenu');
        const siblingNestedButtons = parentSubmenu.querySelectorAll('.nested-btn');

        siblingNestedMenus.forEach(menu => menu.classList.remove('show'));
        siblingNestedButtons.forEach(btn => btn.classList.remove('open'));

        if (!isOpen) {
            targetMenu.classList.add('show');
            this.classList.add('open');
        }
    });
});

function autoOpenMenusForActiveItem() {
    const activeSubmenuLink = document.querySelector('.submenu-link.active');

    if (activeSubmenuLink) {
        const nestedSubmenu = activeSubmenuLink.closest('.nested-submenu');
        const mainSubmenu = activeSubmenuLink.closest('.submenu');

        if (mainSubmenu) {
            mainSubmenu.classList.add('show');
            const mainButton = document.querySelector(`.nav-group-btn[data-target="${mainSubmenu.id}"]`);
            if (mainButton) {
                mainButton.classList.add('open');
            }
        }

        if (nestedSubmenu) {
            nestedSubmenu.classList.add('show');
            const nestedButton = document.querySelector(`.nested-btn[data-target="${nestedSubmenu.id}"]`);
            if (nestedButton) {
                nestedButton.classList.add('open');
            }
        }
    }
}

autoOpenMenusForActiveItem();