Router
    .add('auth', function () {
        pageActive('');
        Auth.init();
        page = "Auth";
    })
    .add('territory/map', function () {
        pageActive();
        Territory_Map.init();
        page = "Territory_Map";
    })
    .add('territory/constructor', function () {
        pageActive();
        Territory_constructor.init();
        page = "Territory_constructor";
    })
    .add('territory/manager/(.*)/(.*)', function (type, id) {
        pageActive();
        Territory_Manager.init(type, id);
        page = "Territory_Manager";
    })
    .add('territory/editor/(.*)/(.*)', function (type, id) {
        pageActive();
        Territory_editor.init(type, id);
        page = "Territory_editor";
    })
    .add('territory/card/(.*)/(.*)', function (type, id) {
        pageActive();
        Territory_card.init(type, id);
        page = "Territory_card";
    })
    .add('territory/history', function () {
        pageActive();
        Territory_History.init();
        page = "Territory_History";
    })
    .add('territory', function () {
        pageActive('territory');
        Territory_list.init();
        page = "Territory_list";
    })
    .add('sheeps/(.*)', function (name) {
        pageActive('sheeps');
        Sheeps.init(name);
        page = "Sheeps";
    })
    .add('sheeps', function () {
        pageActive('sheeps');
        Sheeps.init();
        page = "Sheeps";
    })
    .add('home', function () {
        pageActive('home');
        Home.init();
        page = "Home";
    })
    .add('schedule/constructor', function () {
        pageActive();
        Schedule_constructor.init();
        page = "Schedule_constructor";
    })
    .add('schedule', function () {
        pageActive('schedule');
        Schedule_list.init();
        page = "Schedule_list";
    })
    .add('stand/constructor', function () {
        pageActive();
        Stand_constructor.init();
        page = "Stand_constructor";
    })
    .add('stand/editor/(.*)', function (id) {
        pageActive();
        Stand_editor.init(id);
        page = "Stand_editor";
    })
    .add('stand/card/(.*)', function (id) {
        pageActive();
        Stand_card.init(id);
        page = "Stand_card";
    })
    .add('stand', function () {
        pageActive('stand');
        Stand_list.init();
        page = "Stand_list";
    })
    .add('options', function () {
        pageActive('options');
        Options.init();
        page = "Options";
    })
    .add(function () {
        page_404();;
        pageActive();
    })

// function pageActive(element) {
//     const active = document.querySelector("nav-item[data-state='active']");   
//     if (active) active.setAttribute('data-state', '');

//     if (element) {
//         const target = document.getElementById(`menu-${element}`);
//         if (target) target.setAttribute('data-state', 'active');
//     }
// }
function pageActive(element) {
    // 1. Знаходимо контейнер меню
    const navContainer = document.querySelector('navigation-container');

    if (!navContainer) {
        console.warn('Компонент <navigation-container> не знайдено.');
        return;
    }
    
    // 2. Видаляємо активний стан у всіх елементів.
    // Шукаємо як у Light DOM (через querySelectorAll на документі),
    // так і у Shadow DOM (через shadowRoot).
    const activeInLight = document.querySelector("nav-item[data-state='active']");
    if (activeInLight) {
        activeInLight.setAttribute('data-state', '');
    }

    const activeInShadow = navContainer.shadowRoot.querySelector("nav-item[data-state='active']");
    if (activeInShadow) {
        activeInShadow.setAttribute('data-state', '');
    }

    // 3. Знаходимо цільовий елемент
    if (element) {
        const targetId = `menu-${element}`;
        let target = null;
        
        // Спробуємо знайти в основному DOM
        target = document.getElementById(targetId); 
        
        // Якщо не знайдено, шукаємо у Shadow DOM контейнера
        if (!target) {
             // Використовуємо querySelector для пошуку по всьому shadowRoot
             // Якщо елементи переміщені у itemsHiddenContainer, вони будуть тут
             target = navContainer.shadowRoot.querySelector(`#${targetId}`);
        }
        
        // 4. Встановлюємо активний стан, якщо знайдено
        if (target) {
            target.setAttribute('data-state', 'active');
        }
    }
}