/**
 * MYP Platform - Moderne Navbar Controller
 * Optimiert für Mercedes-Benz 3D-Druck-Management-System
 */

class MYPNavbar {
    constructor() {
        this.navbar = document.querySelector('.navbar');
        this.mobileToggle = document.querySelector('.mobile-menu-toggle');
        this.mobileMenu = document.querySelector('.mobile-menu');
        this.dropdowns = document.querySelectorAll('.dropdown');
        this.isOpen = false;
        this.activeDropdown = null;
        this.scrollThreshold = 50;
        this.lastScroll = 0;
        
        this.init();
    }
    
    /**
     * Initialisierung aller Event-Listener und Grundfunktionen
     */
    init() {
        this.setupEventListeners();
        this.handleInitialState();
        this.preloadAnimations();
        
        // Debug-Logging nur in Development
        if (window.location.hostname === 'localhost') {
            console.log('MYP Navbar initialisiert');
        }
    }
    
    /**
     * Setup aller Event-Listener mit Performance-Optimierung
     */
    setupEventListeners() {
        // Mobile Menu Toggle
        if (this.mobileToggle && this.mobileMenu) {
            this.mobileToggle.addEventListener('click', this.toggleMobileMenu.bind(this));
        }
        
        // Scroll-Handler mit Throttling
        let scrollTimer;
        window.addEventListener('scroll', () => {
            if (scrollTimer) return;
            
            scrollTimer = setTimeout(() => {
                this.handleScroll();
                scrollTimer = null;
            }, 16); // ~60fps
        }, { passive: true });
        
        // Dropdown-Handler
        this.dropdowns.forEach(dropdown => {
            const trigger = dropdown.querySelector('.navbar-btn, .user-avatar');
            if (trigger) {
                trigger.addEventListener('click', (e) => {
                    e.stopPropagation();
                    this.toggleDropdown(dropdown);
                });
            }
        });
        
        // Global Click Handler für das Schließen von Dropdowns und Mobile Menu
        document.addEventListener('click', (e) => {
            if (this.isOpen && !this.mobileMenu.contains(e.target)) {
                this.closeMobileMenu();
            }
            
            if (this.activeDropdown && !this.activeDropdown.contains(e.target)) {
                this.closeDropdowns();
            }
        });
        
        // ESC-Taste Handler
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                if (this.isOpen) this.closeMobileMenu();
                if (this.activeDropdown) this.closeDropdowns();
            }
        });
        
        // Resize-Handler mit Debouncing
        let resizeTimer;
        window.addEventListener('resize', () => {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(() => {
                this.handleResize();
            }, 250);
        });
        
        // Fokus-Management für Accessibility
        this.setupAccessibility();
    }
    
    /**
     * Behandlung des Scroll-Events mit optimierter Performance
     */
    handleScroll() {
        const currentScroll = window.pageYOffset;
        
        // Scroll-Direction Detection
        const isScrollingDown = currentScroll > this.lastScroll;
        
        // Navbar Scrolled State
        if (currentScroll > this.scrollThreshold) {
            this.navbar.classList.add('scrolled');
        } else {
            this.navbar.classList.remove('scrolled');
        }
        
        // Auto-hide auf sehr kleinen Bildschirmen beim Scrollen nach unten
        if (window.innerWidth <= 480 && isScrollingDown && currentScroll > 200) {
            this.navbar.style.transform = 'translateY(-100%)';
        } else {
            this.navbar.style.transform = 'translateY(0)';
        }
        
        this.lastScroll = currentScroll;
    }
    
    /**
     * Mobile Menu Toggle-Funktionalität
     */
    toggleMobileMenu() {
        this.isOpen ? this.closeMobileMenu() : this.openMobileMenu();
    }
    
    /**
     * Mobile Menu öffnen mit Animation
     */
    openMobileMenu() {
        this.isOpen = true;
        this.mobileMenu.classList.add('active');
        this.mobileToggle.setAttribute('aria-expanded', 'true');
        
        // Icon-Animation
        const icon = this.mobileToggle.querySelector('i');
        if (icon) {
            icon.className = 'fas fa-times';
        }
        
        // Body-Scroll blockieren
        document.body.style.overflow = 'hidden';
        
        // Focus auf erstes Menü-Item
        const firstItem = this.mobileMenu.querySelector('.mobile-nav-item');
        if (firstItem) {
            setTimeout(() => firstItem.focus(), 300);
        }
        
        this.logEvent('Mobile Menu geöffnet');
    }
    
    /**
     * Mobile Menu schließen mit Animation
     */
    closeMobileMenu() {
        this.isOpen = false;
        this.mobileMenu.classList.remove('active');
        this.mobileToggle.setAttribute('aria-expanded', 'false');
        
        // Icon-Animation zurücksetzen
        const icon = this.mobileToggle.querySelector('i');
        if (icon) {
            icon.className = 'fas fa-bars';
        }
        
        // Body-Scroll wiederherstellen
        document.body.style.overflow = '';
        
        this.logEvent('Mobile Menu geschlossen');
    }
    
    /**
     * Dropdown Toggle-Funktionalität
     */
    toggleDropdown(dropdown) {
        if (this.activeDropdown === dropdown) {
            this.closeDropdowns();
        } else {
            this.closeDropdowns();
            this.openDropdown(dropdown);
        }
    }
    
    /**
     * Dropdown öffnen
     */
    openDropdown(dropdown) {
        this.activeDropdown = dropdown;
        dropdown.classList.add('active');
        dropdown.setAttribute('aria-expanded', 'true');
        
        // Focus auf erstes Dropdown-Item
        const firstItem = dropdown.querySelector('.dropdown-item');
        if (firstItem) {
            setTimeout(() => firstItem.focus(), 100);
        }
        
        this.logEvent('Dropdown geöffnet');
    }
    
    /**
     * Alle Dropdowns schließen
     */
    closeDropdowns() {
        this.dropdowns.forEach(dropdown => {
            dropdown.classList.remove('active');
            dropdown.setAttribute('aria-expanded', 'false');
        });
        this.activeDropdown = null;
        
        this.logEvent('Dropdowns geschlossen');
    }
    
    /**
     * Resize-Handler für responsive Anpassungen
     */
    handleResize() {
        // Mobile Menu schließen wenn Desktop-Größe erreicht
        if (window.innerWidth >= 1024 && this.isOpen) {
            this.closeMobileMenu();
        }
        
        // Dropdowns schließen bei Größenänderung
        this.closeDropdowns();
        
        this.logEvent(`Fenster-Resize: ${window.innerWidth}x${window.innerHeight}`);
    }
    
    /**
     * Initialzustand der Navbar basierend auf aktueller Seite setzen
     */
    handleInitialState() {
        // Aktive Navigation markieren
        const currentPath = window.location.pathname;
        const navItems = document.querySelectorAll('.nav-item, .mobile-nav-item');
        
        navItems.forEach(item => {
            const href = item.getAttribute('href');
            if (href && (currentPath === href || currentPath.startsWith(href + '/'))) {
                item.classList.add('active');
            }
        });
        
        // Scroll-Position prüfen
        if (window.pageYOffset > this.scrollThreshold) {
            this.navbar.classList.add('scrolled');
        }
    }
    
    /**
     * Accessibility-Features einrichten
     */
    setupAccessibility() {
        // Aria-Labels für bessere Zugänglichkeit
        if (this.mobileToggle) {
            this.mobileToggle.setAttribute('aria-label', 'Menü öffnen/schließen');
            this.mobileToggle.setAttribute('aria-expanded', 'false');
        }
        
        // Keyboard-Navigation für Dropdown-Menüs
        this.dropdowns.forEach(dropdown => {
            const items = dropdown.querySelectorAll('.dropdown-item');
            items.forEach((item, index) => {
                item.addEventListener('keydown', (e) => {
                    if (e.key === 'ArrowDown') {
                        e.preventDefault();
                        const nextItem = items[index + 1] || items[0];
                        nextItem.focus();
                    } else if (e.key === 'ArrowUp') {
                        e.preventDefault();
                        const prevItem = items[index - 1] || items[items.length - 1];
                        prevItem.focus();
                    }
                });
            });
        });
    }
    
    /**
     * Performance-Optimierung: Animationen vorladen
     */
    preloadAnimations() {
        // CSS-Animationen vorbereiten
        if (this.navbar) {
            this.navbar.style.willChange = 'transform, box-shadow';
        }
        
        if (this.mobileMenu) {
            this.mobileMenu.style.willChange = 'transform';
        }
    }
    
    /**
     * Notification Badge Update
     */
    updateNotificationBadge(count) {
        const notificationBtn = document.querySelector('.navbar-btn.has-notifications');
        if (notificationBtn) {
            if (count > 0) {
                notificationBtn.classList.add('has-notifications');
                notificationBtn.setAttribute('aria-label', `${count} neue Benachrichtigungen`);
            } else {
                notificationBtn.classList.remove('has-notifications');
                notificationBtn.setAttribute('aria-label', 'Benachrichtigungen');
            }
        }
    }
    
    /**
     * User-Avatar Update
     */
    updateUserAvatar(initials, imageUrl = null) {
        const avatar = document.querySelector('.user-avatar');
        if (avatar) {
            if (imageUrl) {
                avatar.style.backgroundImage = `url(${imageUrl})`;
                avatar.style.backgroundSize = 'cover';
                avatar.textContent = '';
            } else {
                avatar.style.backgroundImage = '';
                avatar.textContent = initials || '?';
            }
        }
    }
    
    /**
     * Navbar Zustand zurücksetzen
     */
    reset() {
        this.closeMobileMenu();
        this.closeDropdowns();
        this.navbar.classList.remove('scrolled');
        document.body.style.overflow = '';
        
        this.logEvent('Navbar zurückgesetzt');
    }
    
    /**
     * Debug-Logging mit Zeitstempel
     */
    logEvent(message) {
        if (window.location.hostname === 'localhost' && window.console) {
            const timestamp = new Date().toLocaleTimeString();
            console.log(`[${timestamp}] MYP Navbar: ${message}`);
        }
    }
    
    /**
     * Cleanup für Single-Page-Applications
     */
    destroy() {
        // Event-Listener entfernen
        window.removeEventListener('scroll', this.handleScroll);
        window.removeEventListener('resize', this.handleResize);
        document.removeEventListener('click', this.closeDropdowns);
        document.removeEventListener('keydown', this.handleKeydown);
        
        // Styles zurücksetzen
        if (this.navbar) {
            this.navbar.style.willChange = 'auto';
        }
        
        this.logEvent('Navbar zerstört');
    }
}

/**
 * Auto-Initialisierung nach DOM-Load
 */
document.addEventListener('DOMContentLoaded', () => {
    // Globale Instanz für externe Zugriffe
    window.MYPNavbar = new MYPNavbar();
    
    // Notification-System Integration
    if (window.NotificationManager) {
        window.NotificationManager.onUpdate = (count) => {
            window.MYPNavbar.updateNotificationBadge(count);
        };
    }
    
    // Performance-Monitoring
    if (window.performance && window.performance.mark) {
        window.performance.mark('navbar-init-complete');
    }
});

/**
 * Error-Handler für unerwartete Fehler
 */
window.addEventListener('error', (e) => {
    if (e.filename && e.filename.includes('navbar.js')) {
        console.error('MYP Navbar Fehler:', e.message, e.lineno);
        
        // Fallback: Navbar in sicheren Zustand versetzen
        if (window.MYPNavbar) {
            window.MYPNavbar.reset();
        }
    }
});