class DashboardNavigator {
    constructor() {
        this.currentPage = '';
        this.a11y = window.jvbA11y;
        this.mainContent = document.querySelector('main .replace');
        this.loadingManager = window.jvbLoading;

        this.cache = JSON.parse(localStorage.getItem('dashboard-cache') || '{}');
        this.cacheTimeout = 5 * 60 * 1000;

        // Get current page from URL on initial load
        const path = window.location.pathname;
        const dashPath = path.split('/dash/')[1];
        this.currentPage = dashPath ? dashPath.replace('/', '') : '';

        // Initialize current page if accessing directly
        if (this.currentPage) {
            this.initPageContent(this.currentPage);
        }

        this.initNavigation();

    }

    initNavigation() {
        // Update currentPage from URL
        const path = window.location.pathname;
        const dashPath = path.split('/dash/')[1];
        this.currentPage = dashPath ? dashPath.replace('/', '') : '';

        // Update initial nav state
        this.updateNavState(this.currentPage);

        // Listen for popstate (browser back/forward)
        window.addEventListener('popstate', (e) => {
            const page = e.state?.page || '';
            this.navigateTo(page, true);
        });

        // Add click handlers to dashboard links
        document.querySelectorAll('a[data-dash]').forEach(link => {
            link.addEventListener('click', (e) => {
				console.log('Clicked');
                e.preventDefault();
                this.navigateTo(link.dataset.page);
            });
        });
    }

    updateNavState(page) {
        const nav = document.querySelector('.dashboard-footer nav');
        if (!nav) return;

        nav.querySelectorAll('a').forEach(link => {
            const linkPage = link.dataset.page;
            link.parentElement.classList.toggle('current', linkPage === page);
            if (linkPage === page) {
                link.setAttribute('aria-current', 'page');
            } else {
                link.removeAttribute('aria-current');
            }
        });
    }

    getCachedContent(page) {
        const cached = this.cache[page];
        if (!cached) return null;

        // Check if cache is expired
        if (Date.now() - cached.timestamp > this.cacheTimeout) {
            delete this.cache[page];
            localStorage.setItem('dashboard-cache', JSON.stringify(this.cache));
            return null;
        }

        return cached.content;
    }

    setCachedContent(page, content) {
        if (!page || !content) return;

        this.cache[page] = {
            content: content,
            timestamp: Date.now()
        };

        localStorage.setItem('dashboard-cache', JSON.stringify(this.cache));
    }

    async navigateTo(page, fromPopState = false) {
        try {
			if (page === 'dash') {
				page = '';
			}
            if (page === this.currentPage) return;

            // Update URL if not from browser navigation
            if (!fromPopState) {
                const newPath = page ? `/dash/${page}/` : '/dash';
                history.pushState({ page }, '', newPath);
            }

            // Cache current page content before navigating
            const currentContent = this.mainContent?.innerHTML;
            if (currentContent) {
                this.setCachedContent(this.currentPage, currentContent);
            }

            // Check cache for requested page
            const cachedContent = this.getCachedContent(page);
            if (cachedContent) {
                this.mainContent.innerHTML = cachedContent;
                this.currentPage = page;
                this.updateNavState(page);
                this.initPageContent(page);
                return;
            }


            // If not cached, follow the link normally
            window.location.href = page ? `/dash/${page}/` : '/dash';

        } catch (error) {
            console.error('Navigation error:', error);
            if (this.loadingManager) {
                this.loadingManager.showError(error.message || 'Navigation failed');
            }
        } finally {
            this.a11y.announce(`Currently on ${page} dashboard page.`);
        }
    }

    updateContent(data) {
        this.mainContent.innerHTML = data.content;
        document.title = `${data.title} - edmonton.ink Dashboard`;

        if (this.currentPage) {
            this.initPageContent(this.currentPage);
        }
    }

    initPageContent(page) {
		console.log(page);
        switch (page) {
            case 'settings':
                this.initNorthehSettingsPage();
                break;
            case 'bio':
                this.initBioPage();
                break;
            case 'favourites':
                new window.favouritesManager();
                break;
            case 'shop':
                this.initShopPage();
                break;
            case 'news':
                new window.newsManager();
                break;
			case 'events':
				new window.crud({
					content: 'event'
				});
				break;
			default:
				// new window.crud({content: page});
				break;
        }
    }


    initBioPage() {
        const form = document.querySelector('form');
        if(!form){
            return;
        }
        console.log(jvbSettings, 'jvbSettings');

        // Initialize form manager with selectors
        new window.formManager(form, {
            loadingManager: window.jvbLoading,
            objectId: jvbSettings.currentUser.artistID,
            highlights: {
                style: {
                    max: 3,
                    name: 'jvb_top_styles',
                    label: 'Highlight Styles',
                    description: 'Select up to 3 styles to highlight'
                }
                // Can add more highlight configurations for other taxonomies as needed
                // theme: {
                //     max: 5,
                //     name: 'jvb_featured_themes',
                //     label: 'Featured Themes',
                //     description: 'Select up to 5 themes to highlight'
                // }
            }
        });
    }

	initNorthehSettingsPage() {
		new window.jvbTabs(document.querySelector('.replace'));
		// window.jvbForm.addForm(document.querySelector('form#menu-sections'));
		// window.jvbForm.addForm(document.querySelector('form#hours'));
	}
    initSettingsPage() {
        const form = document.querySelector('form');

        // Initialize form manager with selectors
        window.jvbForm.addForm(form, {
            content: 'artist',
			onSave: (data) => {
				if (Object.hasOwn(data, 'menu_section_order')) {
					data['menu_section_order'] = JSON.stringify(data['menu_section_order']);
				}
				data.user = jvbSettings.currentUser;
				window.jvbQueue.addToQueue({
					type: 'user_settings',
					data: data,
				});
			}
        });

    }
    initShopPage() {
        const form = document.querySelector('form');
        if (!form) return;

        new window.jvbShopManager();
    }


    clearCache() {
        this.cache = {};
    }
}

document.addEventListener('DOMContentLoaded', ()=>{
    window.dashboardNavigator = new DashboardNavigator();
});