const Router = {
    _routes: {
        home: PageHome,
        dashboard: PageDashboard,
        scene: PageScene,
        debug: PageDebug,
        record: PageRecord,
        settings: PageSettings,
    },
    _currentPage: 'home',
    _currentPageInstance: null,

    init() {
        window.addEventListener('hashchange', () => this._handleRoute());
        this._handleRoute();

        document.querySelectorAll('.nav-item[data-route]').forEach(el => {
            el.addEventListener('click', (e) => {
                e.preventDefault();
                const route = el.getAttribute('data-route');
                if (route) this.navigate(route);
            });
        });
    },

    navigate(page) {
        window.location.hash = `#/${page}`;
    },

    _handleRoute() {
        const hash = window.location.hash || '#/home';
        const page = hash.replace('#/', '') || 'home';

        if (this._currentPageInstance && this._currentPageInstance.cleanup) {
            this._currentPageInstance.cleanup();
        }

        document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
        const pageEl = document.getElementById(`page-${page}`);
        if (pageEl) pageEl.classList.add('active');

        Sidebar.setActive(page);

        const route = this._routes[page];
        if (route) {
            this._currentPage = page;
            this._currentPageInstance = route;
            route.render();
        }
    },

    get currentPage() { return this._currentPage; }
};

window.Router = Router;