{% load navigation_tags %}

<!-- Permission-Aware Navigation Menu Component -->
<nav class="navigation-menu navigation-{{ menu_type }}" role="navigation" aria-label="Main navigation">
    {% if menu_type == 'sidebar' %}
    <!-- Desktop Sidebar Navigation -->
    <div class="navigation-container">
        {% for category, items in navigation_items.items %}
        {% if items %}
        <div class="navigation-category" data-category="{{ category }}">
            {% if category != 'main' %}
            <div class="category-header">
                <h3 class="category-title">
                    {% if category == 'reports' %}
                    <span>📊</span>Reports & Analytics
                    {% elif category == 'settings' %}
                    <span>⚙️</span>Settings
                    {% elif category == 'admin' %}
                    <i class="fas fa-shield-alt mr-2"></i>Administration
                    {% else %}
                    {{ category|title }}
                    {% endif %}
                </h3>
            </div>
            {% endif %}
            
            <ul class="navigation-list" role="list">
                {% for item in items %}
                <li class="navigation-item" role="listitem">
                    {% if item.children %}
                    <!-- Parent item with children -->
                    <div class="navigation-parent">
                        <button type="button" 
                                class="navigation-link navigation-toggle {% if current_url|is_current_page:item.get_url %}active{% endif %}"
                                onclick="toggleNavigationSubmenu(this)"
                                aria-expanded="false"
                                aria-controls="submenu-{{ item.title|slugify }}"
                                {% if item.tooltip %}title="{% navigation_tooltip item.title item.tooltip %}"{% endif %}>
                            <div class="link-content">
                                <i class="{{ item.icon|get_icon_class }} navigation-icon" aria-hidden="true"></i>
                                <span class="navigation-text">{{ item.title }}</span>
                                {% if item.badge_count %}
                                <span class="navigation-badge badge-{{ item.badge_color }}" aria-label="{{ item.badge_count }} items">
                                    {{ item.badge_count }}
                                </span>
                                {% endif %}
                            </div>
                            <span>﹀</span>
                        </button>
                        
                        <ul class="navigation-submenu" 
                            id="submenu-{{ item.title|slugify }}" 
                            role="list"
                            aria-hidden="true">
                            {% for child in item.children %}
                            <li class="submenu-item" role="listitem">
                                <a href="{{ child.get_url }}" 
                                   class="submenu-link {% if current_url|is_current_page:child.get_url %}active{% endif %}"
                                   {% if child.tooltip %}title="{% navigation_tooltip child.title child.tooltip %}"{% endif %}>
                                    <i class="{{ child.icon|get_icon_class }} submenu-icon" aria-hidden="true"></i>
                                    <span class="submenu-text">{{ child.title }}</span>
                                    {% if child.badge_count %}
                                    <span class="navigation-badge badge-{{ child.badge_color }}" aria-label="{{ child.badge_count }} items">
                                        {{ child.badge_count }}
                                    </span>
                                    {% endif %}
                                </a>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% else %}
                    <!-- Single navigation item -->
                    <a href="{{ item.get_url }}" 
                       class="navigation-link {% if current_url|is_current_page:item.get_url %}active{% endif %}"
                       {% if item.tooltip %}title="{% navigation_tooltip item.title item.tooltip %}"{% endif %}>
                        <div class="link-content">
                            <i class="{{ item.icon|get_icon_class }} navigation-icon" aria-hidden="true"></i>
                            <span class="navigation-text">{{ item.title }}</span>
                            {% if item.badge_count %}
                            <span class="navigation-badge badge-{{ item.badge_color }}" aria-label="{{ item.badge_count }} items">
                                {{ item.badge_count }}
                            </span>
                            {% endif %}
                        </div>
                    </a>
                    {% endif %}
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}
        {% endfor %}
    </div>
    
    {% elif menu_type == 'mobile' %}
    <!-- Mobile Navigation -->
    <div class="mobile-navigation-container">
        {% for category, items in navigation_items.items %}
        {% if items %}
        <div class="mobile-category" data-category="{{ category }}">
            {% if category != 'main' %}
            <div class="mobile-category-header">
                <h3 class="mobile-category-title">{{ category|title }}</h3>
            </div>
            {% endif %}
            
            {% for item in items %}
            <div class="mobile-nav-item">
                {% if item.children %}
                <!-- Mobile parent with children -->
                <button type="button" 
                        class="mobile-nav-toggle"
                        onclick="toggleMobileSubmenu(this)">
                    <div class="mobile-link-content">
                        <i class="{{ item.icon|get_icon_class }}" aria-hidden="true"></i>
                        <span>{{ item.title }}</span>
                        {% if item.badge_count %}
                        <span class="mobile-badge">{{ item.badge_count }}</span>
                        {% endif %}
                    </div>
                    <span>﹀</span>
                </button>
                
                <div class="mobile-submenu">
                    {% for child in item.children %}
                    <a href="{{ child.get_url }}" 
                       class="mobile-submenu-link {% if current_url|is_current_page:child.get_url %}active{% endif %}">
                        <i class="{{ child.icon|get_icon_class }}" aria-hidden="true"></i>
                        <span>{{ child.title }}</span>
                        {% if child.badge_count %}
                        <span class="mobile-badge">{{ child.badge_count }}</span>
                        {% endif %}
                    </a>
                    {% endfor %}
                </div>
                {% else %}
                <!-- Mobile single item -->
                <a href="{{ item.get_url }}" 
                   class="mobile-nav-link {% if current_url|is_current_page:item.get_url %}active{% endif %}">
                    <div class="mobile-link-content">
                        <i class="{{ item.icon|get_icon_class }}" aria-hidden="true"></i>
                        <span>{{ item.title }}</span>
                        {% if item.badge_count %}
                        <span class="mobile-badge">{{ item.badge_count }}</span>
                        {% endif %}
                    </div>
                </a>
                {% endif %}
            </div>
            {% endfor %}
        </div>
        {% endif %}
        {% endfor %}
    </div>
    {% endif %}
</nav>

<style>
/* Navigation Menu Styles */
.navigation-menu {
    --nav-primary: #00308a;
    --nav-secondary: #86c662;
    --nav-text: #ffffff;
    --nav-text-muted: #b0c4de;
    --nav-hover: rgba(134, 198, 98, 0.2);
    --nav-active: #86c662;
    --nav-border: rgba(255, 255, 255, 0.1);
}

.navigation-container {
    padding: 1rem 0;
}

.navigation-category {
    margin-bottom: 2rem;
}

.category-header {
    margin-bottom: 0.75rem;
    padding: 0 1rem;
}

.category-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--nav-text-muted);
    margin: 0;
}

.navigation-list {
    list-style: none;
    margin: 0;
    padding: 0;
    space-y: 0.25rem;
}

.navigation-item {
    position: relative;
}

.navigation-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    color: var(--nav-text);
    text-decoration: none;
    border-radius: 0.5rem;
    margin: 0 0.5rem;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.navigation-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: var(--nav-active);
    transform: scaleY(0);
    transition: transform 0.2s ease;
    transform-origin: bottom;
}

.navigation-link:hover::before,
.navigation-link.active::before {
    transform: scaleY(1);
    transform-origin: top;
}

.navigation-link:hover {
    background: var(--nav-hover);
    color: var(--nav-text);
    transform: translateX(4px);
}

.navigation-link.active {
    background: linear-gradient(90deg, rgba(134, 198, 98, 0.3) 0%, transparent 100%);
    color: var(--nav-text);
    box-shadow: 0 0 20px rgba(134, 198, 98, 0.3);
}

.link-content {
    display: flex;
    align-items: center;
    flex: 1;
}

.navigation-icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.navigation-text {
    font-weight: 500;
    font-size: 0.875rem;
}

.navigation-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    margin-left: 0.5rem;
}

.badge-red {
    background: #ef4444;
    color: white;
}

.badge-blue {
    background: #3b82f6;
    color: white;
}

.badge-green {
    background: #10b981;
    color: white;
}

.badge-yellow {
    background: #f59e0b;
    color: white;
}

.submenu-arrow {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
    margin-left: 0.5rem;
}

.navigation-toggle[aria-expanded="true"] .submenu-arrow {
    transform: rotate(180deg);
}

.navigation-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: 2rem;
    margin-top: 0.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.navigation-submenu[aria-hidden="false"] {
    max-height: 500px;
}

.submenu-item {
    margin-bottom: 0.25rem;
}

.submenu-link {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    color: var(--nav-text-muted);
    text-decoration: none;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    font-size: 0.8125rem;
}

.submenu-link:hover {
    background: var(--nav-hover);
    color: var(--nav-text);
    transform: translateX(2px);
}

.submenu-link.active {
    background: rgba(134, 198, 98, 0.2);
    color: var(--nav-active);
}

.submenu-icon {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.submenu-text {
    flex: 1;
}

/* Mobile Navigation Styles */
.mobile-navigation-container {
    padding: 1rem;
}

.mobile-category {
    margin-bottom: 1.5rem;
}

.mobile-category-header {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--nav-border);
}

.mobile-category-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--nav-text-muted);
    margin: 0;
}

.mobile-nav-item {
    margin-bottom: 0.5rem;
}

.mobile-nav-link,
.mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem;
    background: none;
    border: none;
    color: var(--nav-text);
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.mobile-nav-link:hover,
.mobile-nav-toggle:hover {
    background: var(--nav-hover);
}

.mobile-nav-link.active {
    background: var(--nav-active);
    color: white;
}

.mobile-link-content {
    display: flex;
    align-items: center;
    flex: 1;
}

.mobile-link-content i {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
}

.mobile-badge {
    background: #ef4444;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
    margin-left: 0.5rem;
}

.mobile-submenu {
    margin-left: 1.5rem;
    margin-top: 0.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mobile-submenu.open {
    max-height: 300px;
}

.mobile-submenu-link {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    color: var(--nav-text-muted);
    text-decoration: none;
    border-radius: 0.375rem;
    margin-bottom: 0.25rem;
    transition: all 0.2s ease;
    font-size: 0.8125rem;
}

.mobile-submenu-link:hover {
    background: var(--nav-hover);
    color: var(--nav-text);
}

.mobile-submenu-link.active {
    background: var(--nav-active);
    color: white;
}

.mobile-submenu-link i {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .navigation-link {
        padding: 0.625rem 0.75rem;
        margin: 0 0.25rem;
    }
    
    .navigation-text {
        font-size: 0.8125rem;
    }
    
    .navigation-icon {
        width: 1.125rem;
        height: 1.125rem;
        margin-right: 0.625rem;
    }
}

/* Dark mode support */
.dark .navigation-menu {
    --nav-text: #f1f5f9;
    --nav-text-muted: #94a3b8;
    --nav-hover: rgba(134, 198, 98, 0.15);
    --nav-border: rgba(255, 255, 255, 0.05);
}

/* Accessibility improvements */
.navigation-link:focus,
.submenu-link:focus,
.mobile-nav-link:focus,
.mobile-nav-toggle:focus {
    outline: 2px solid var(--nav-active);
    outline-offset: 2px;
}

/* Animation for smooth transitions */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.navigation-submenu[aria-hidden="false"] {
    animation: slideIn 0.3s ease;
}
</style>

<script>
// Navigation interaction handlers
function toggleNavigationSubmenu(button) {
    const submenu = button.parentElement.querySelector('.navigation-submenu');
    const arrow = button.querySelector('.submenu-arrow');
    const isExpanded = button.getAttribute('aria-expanded') === 'true';
    
    // Toggle states
    button.setAttribute('aria-expanded', !isExpanded);
    submenu.setAttribute('aria-hidden', isExpanded);
    
    // Add/remove open class for styling
    if (!isExpanded) {
        submenu.style.maxHeight = submenu.scrollHeight + 'px';
    } else {
        submenu.style.maxHeight = '0';
    }
}

function toggleMobileSubmenu(button) {
    const submenu = button.parentElement.querySelector('.mobile-submenu');
    const isOpen = submenu.classList.contains('open');
    
    // Close all other open submenus
    document.querySelectorAll('.mobile-submenu.open').forEach(menu => {
        if (menu !== submenu) {
            menu.classList.remove('open');
        }
    });
    
    // Toggle current submenu
    submenu.classList.toggle('open');
}

// Keyboard navigation support
document.addEventListener('keydown', function(e) {
    // Navigation shortcuts
    if (e.ctrlKey) {
        switch(e.key) {
            case 'k':
                e.preventDefault();
                // Open navigation search (if implemented)
                break;
            case 'd':
                e.preventDefault();
                window.location.href = '{% url "users:role_based_dashboard" %}';
                break;
        }
    }
    
    // F1 for help
    if (e.key === 'F1') {
        e.preventDefault();
        // Show contextual help
    }
});

// Auto-collapse mobile submenus when clicking outside
document.addEventListener('click', function(e) {
    if (!e.target.closest('.mobile-nav-item')) {
        document.querySelectorAll('.mobile-submenu.open').forEach(menu => {
            menu.classList.remove('open');
        });
    }
});
</script>