/**
 * JavaScript для динамической загрузки меню админ-панели (FR-072)
 */

/**
 * Загрузка и рендеринг динамического меню
 */
async function loadDynamicMenu() {
    const menuContainer = document.getElementById('dynamicMenu');
    if (!menuContainer) {
        return;
    }
    
    try {
        const response = await fetch('/api/v1/admin/menu');
        const data = await response.json();

        const menuItems = data && data.data && Array.isArray(data.data.menu)
            ? data.data.menu
            : null;

        if (data.success && menuItems) {
            renderMenu(menuItems, menuContainer);
        } else {
            menuContainer.innerHTML = '<li class="nav-item"><div class="alert alert-danger">Ошибка загрузки меню</div></li>';
        }
    } catch (error) {
        console.error('Ошибка загрузки меню:', error);
        menuContainer.innerHTML = '<li class="nav-item"><div class="alert alert-danger">Ошибка загрузки меню: ' + error.message + '</div></li>';
    }
}

/**
 * Рендеринг меню
 */
function renderMenu(menuItems, container) {
    if (!menuItems || menuItems.length === 0) {
        container.innerHTML = '<li class="nav-item"><div class="text-muted p-3">Меню пусто</div></li>';
        return;
    }
    
    let html = '';
    
    // Группируем пункты меню по типам
    const coreItems = [];
    const moduleItems = [];
    const pluginItems = [];
    const settingsItems = [];
    
    menuItems.forEach(item => {
        if (item.type === 'core') {
            coreItems.push(item);
        } else if (item.type === 'module') {
            moduleItems.push(item);
        } else if (item.type === 'plugin') {
            pluginItems.push(item);
        } else if (item.type === 'settings') {
            settingsItems.push(item);
        } else {
            coreItems.push(item); // По умолчанию в core
        }
    });
    
    // Рендерим core пункты
    coreItems.forEach(item => {
        html += renderMenuItem(item);
    });
    
    // Рендерим модули (если есть)
    if (moduleItems.length > 0) {
        html += '<li class="nav-item nav-divider"><hr class="my-2"></li>';
        html += '<li class="nav-item nav-header"><span class="nav-header-text">Модули</span></li>';
        moduleItems.forEach(item => {
            html += renderMenuItem(item);
        });
    }
    
    // Рендерим плагины (если есть)
    if (pluginItems.length > 0) {
        html += '<li class="nav-item nav-divider"><hr class="my-2"></li>';
        html += '<li class="nav-item nav-header"><span class="nav-header-text">Плагины</span></li>';
        pluginItems.forEach(item => {
            html += renderMenuItem(item);
        });
    }
    
    // Рендерим настройки
    if (settingsItems.length > 0) {
        html += '<li class="nav-item nav-divider"><hr class="my-2"></li>';
        settingsItems.forEach(item => {
            html += renderMenuItem(item);
        });
    }
    
    container.innerHTML = html;
    
    // Добавляем обработчики для закрытия меню на мобильных
    if (window.innerWidth < 992) {
        const navLinks = container.querySelectorAll('.nav-link');
        navLinks.forEach(link => {
            link.addEventListener('click', () => {
                const sidebar = document.getElementById('sidebar');
                const sidebarOverlay = document.getElementById('sidebarOverlay');
                if (sidebar) sidebar.classList.remove('show');
                if (sidebarOverlay) sidebarOverlay.classList.remove('show');
            });
        });
    }
}

/**
 * Рендеринг одного пункта меню
 */
function renderMenuItem(item) {
    const currentPath = window.location.pathname;
    const isActive = currentPath === item.path || currentPath.startsWith(item.path + '/');
    const activeClass = isActive ? 'active' : '';
    
    let html = '<li class="nav-item">';
    
    if (item.children && item.children.length > 0) {
        // Пункт меню с подменю
        const hasActiveChild = item.children.some(child => currentPath === child.path || currentPath.startsWith(child.path + '/'));
        const expandedClass = (isActive || hasActiveChild) ? 'show' : '';
        
        html += `<a href="#" class="nav-link ${activeClass}" data-bs-toggle="collapse" data-bs-target="#submenu-${item.id}">`;
        html += `<i class="${item.icon || 'bi-circle'}"></i>`;
        html += `<span>${escapeHtml(item.label)}</span>`;
        html += '<i class="bi bi-chevron-down ms-auto"></i>';
        html += '</a>';
        html += `<ul class="nav-submenu collapse ${expandedClass}" id="submenu-${item.id}">`;
        
        item.children.forEach(child => {
            const childActive = currentPath === child.path || currentPath.startsWith(child.path + '/');
            html += '<li class="nav-item">';
            html += `<a href="${child.path}" class="nav-link ${childActive ? 'active' : ''}">`;
            html += `<span>${escapeHtml(child.label)}</span>`;
            html += '</a>';
            html += '</li>';
        });
        
        html += '</ul>';
    } else {
        // Обычный пункт меню
        html += `<a href="${item.path}" class="nav-link ${activeClass}">`;
        html += `<i class="${item.icon || 'bi-circle'}"></i>`;
        html += `<span>${escapeHtml(item.label)}</span>`;
        html += '</a>';
    }
    
    html += '</li>';
    return html;
}

/**
 * Экранирование HTML
 */
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Загружаем меню при загрузке страницы
document.addEventListener('DOMContentLoaded', loadDynamicMenu);
