/**
 * Modernes Benachrichtigungssystem für die MYP 3D-Druck Platform
 * Verwaltet einheitliche Glassmorphism-Benachrichtigungen aller Art
 */

class ModernNotificationManager {
    constructor() {
        this.notificationToggle = document.getElementById('notificationToggle');
        this.notificationDropdown = document.getElementById('notificationDropdown');
        this.notificationBadge = document.getElementById('notificationBadge');
        this.notificationList = document.getElementById('notificationList');
        this.markAllReadBtn = document.getElementById('markAllRead');
        
        this.isOpen = false;
        this.notifications = [];
        this.activeToasts = new Map();
        this.toastCounter = 0;
        
        // CSRF-Token aus Meta-Tag holen
        this.csrfToken = this.getCSRFToken();
        
        this.init();
        this.setupGlobalNotificationSystem();
    }
    
    /**
     * Holt das CSRF-Token aus dem Meta-Tag
     * @returns {string} Das CSRF-Token
     */
    getCSRFToken() {
        const metaTag = document.querySelector('meta[name="csrf-token"]');
        return metaTag ? metaTag.getAttribute('content') : '';
    }
    
    /**
     * Erstellt die Standard-Headers für API-Anfragen mit CSRF-Token
     * @returns {Object} Headers-Objekt
     */
    getAPIHeaders() {
        const headers = {
            'Content-Type': 'application/json',
        };
        
        if (this.csrfToken) {
            headers['X-CSRFToken'] = this.csrfToken;
        }
        
        return headers;
    }
    
    init() {
        if (!this.notificationToggle) return;
        
        // Event Listeners
        this.notificationToggle.addEventListener('click', (e) => {
            e.stopPropagation();
            this.toggleDropdown();
        });
        
        if (this.markAllReadBtn) {
            this.markAllReadBtn.addEventListener('click', () => {
                this.markAllAsRead();
            });
        }
        
        // Dropdown schließen bei Klick außerhalb
        document.addEventListener('click', (e) => {
            if (!this.notificationDropdown.contains(e.target) && !this.notificationToggle.contains(e.target)) {
                this.closeDropdown();
            }
        });
        
        // Benachrichtigungen laden
        this.loadNotifications();
        
        // Regelmäßige Updates
        setInterval(() => {
            this.loadNotifications();
        }, 30000); // Alle 30 Sekunden
    }
    
    toggleDropdown() {
        if (this.isOpen) {
            this.closeDropdown();
        } else {
            this.openDropdown();
        }
    }
    
    openDropdown() {
        this.notificationDropdown.classList.remove('hidden');
        this.notificationToggle.setAttribute('aria-expanded', 'true');
        this.isOpen = true;
        
        // Animation
        this.notificationDropdown.style.opacity = '0';
        this.notificationDropdown.style.transform = 'translateY(-10px)';
        
        requestAnimationFrame(() => {
            this.notificationDropdown.style.transition = 'opacity 0.2s ease, transform 0.2s ease';
            this.notificationDropdown.style.opacity = '1';
            this.notificationDropdown.style.transform = 'translateY(0)';
        });
    }
    
    closeDropdown() {
        this.notificationDropdown.style.transition = 'opacity 0.2s ease, transform 0.2s ease';
        this.notificationDropdown.style.opacity = '0';
        this.notificationDropdown.style.transform = 'translateY(-10px)';
        
        setTimeout(() => {
            this.notificationDropdown.classList.add('hidden');
            this.notificationToggle.setAttribute('aria-expanded', 'false');
            this.isOpen = false;
        }, 200);
    }
    
    async loadNotifications() {
        try {
            const response = await fetch('/api/notifications');
            if (response.ok) {
                const data = await response.json();
                this.notifications = data.notifications || [];
                this.updateUI();
            }
        } catch (error) {
            console.error('Fehler beim Laden der Benachrichtigungen:', error);
        }
    }
    
    updateUI() {
        this.updateBadge();
        this.updateNotificationList();
    }
    
    updateBadge() {
        const unreadCount = this.notifications.filter(n => !n.read).length;
        
        if (unreadCount > 0) {
            this.notificationBadge.textContent = unreadCount > 99 ? '99+' : unreadCount.toString();
            this.notificationBadge.classList.remove('hidden');
        } else {
            this.notificationBadge.classList.add('hidden');
        }
    }
    
    updateNotificationList() {
        if (this.notifications.length === 0) {
            this.notificationList.innerHTML = `
                <div class="p-4 text-center text-slate-500 dark:text-slate-400">
                    Keine neuen Benachrichtigungen
                </div>
            `;
            return;
        }
        
        const notificationHTML = this.notifications.map(notification => {
            const isUnread = !notification.read;
            const timeAgo = this.formatTimeAgo(new Date(notification.created_at));
            
            return `
                <div class="notification-item p-4 border-b border-slate-200 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors ${isUnread ? 'bg-blue-50 dark:bg-blue-900/20' : ''}" 
                     data-notification-id="${notification.id}">
                    <div class="flex items-start space-x-3">
                        <div class="flex-shrink-0">
                            ${this.getNotificationIcon(notification.type)}
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center justify-between">
                                <p class="text-sm font-medium text-slate-900 dark:text-white">
                                    ${this.getNotificationTitle(notification.type)}
                                </p>
                                ${isUnread ? '<div class="w-2 h-2 bg-blue-500 rounded-full"></div>' : ''}
                            </div>
                            <p class="text-sm text-slate-600 dark:text-slate-400 mt-1">
                                ${this.getNotificationMessage(notification)}
                            </p>
                            <p class="text-xs text-slate-500 dark:text-slate-500 mt-2">
                                ${timeAgo}
                            </p>
                        </div>
                    </div>
                </div>
            `;
        }).join('');
        
        this.notificationList.innerHTML = notificationHTML;
        
        // Event Listeners für Benachrichtigungen
        this.notificationList.querySelectorAll('.notification-item').forEach(item => {
            item.addEventListener('click', (e) => {
                const notificationId = item.dataset.notificationId;
                this.markAsRead(notificationId);
            });
        });
    }
    
    getNotificationIcon(type) {
        const icons = {
            'guest_request': `
                <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
                    <svg class="w-4 h-4 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                    </svg>
                </div>
            `,
            'job_completed': `
                <div class="w-8 h-8 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center">
                    <svg class="w-4 h-4 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                </div>
            `,
            'system': `
                <div class="w-8 h-8 bg-gray-100 dark:bg-gray-900 rounded-full flex items-center justify-center">
                    <svg class="w-4 h-4 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
            `
        };
        
        return icons[type] || icons['system'];
    }
    
    getNotificationTitle(type) {
        const titles = {
            'guest_request': 'Neue Gastanfrage',
            'job_completed': 'Druckauftrag abgeschlossen',
            'system': 'System-Benachrichtigung'
        };
        
        return titles[type] || 'Benachrichtigung';
    }
    
    getNotificationMessage(notification) {
        try {
            const payload = JSON.parse(notification.payload || '{}');
            
            switch (notification.type) {
                case 'guest_request':
                    return `${payload.guest_name || 'Ein Gast'} hat eine neue Druckanfrage gestellt.`;
                case 'job_completed':
                    return `Der Druckauftrag "${payload.job_name || 'Unbekannt'}" wurde erfolgreich abgeschlossen.`;
                default:
                    return payload.message || 'Neue Benachrichtigung erhalten.';
            }
        } catch (error) {
            return 'Neue Benachrichtigung erhalten.';
        }
    }
    
    formatTimeAgo(date) {
        const now = new Date();
        const diffInSeconds = Math.floor((now - date) / 1000);
        
        if (diffInSeconds < 60) {
            return 'Gerade eben';
        } else if (diffInSeconds < 3600) {
            const minutes = Math.floor(diffInSeconds / 60);
            return `vor ${minutes} Minute${minutes !== 1 ? 'n' : ''}`;
        } else if (diffInSeconds < 86400) {
            const hours = Math.floor(diffInSeconds / 3600);
            return `vor ${hours} Stunde${hours !== 1 ? 'n' : ''}`;
        } else {
            const days = Math.floor(diffInSeconds / 86400);
            return `vor ${days} Tag${days !== 1 ? 'en' : ''}`;
        }
    }
    
    async markAsRead(notificationId) {
        try {
            const response = await fetch(`/api/notifications/${notificationId}/read`, {
                method: 'POST',
                headers: this.getAPIHeaders()
            });
            
            if (response.ok) {
                // Benachrichtigung als gelesen markieren
                const notification = this.notifications.find(n => n.id == notificationId);
                if (notification) {
                    notification.read = true;
                    this.updateUI();
                }
            } else {
                console.error('Fehler beim Markieren als gelesen:', response.status, response.statusText);
            }
        } catch (error) {
            console.error('Fehler beim Markieren als gelesen:', error);
        }
    }
    
    async markAllAsRead() {
        try {
            const response = await fetch('/api/notifications/mark-all-read', {
                method: 'POST',
                headers: this.getAPIHeaders()
            });
            
            if (response.ok) {
                // Alle Benachrichtigungen als gelesen markieren
                this.notifications.forEach(notification => {
                    notification.read = true;
                });
                this.updateUI();
            } else {
                console.error('Fehler beim Markieren aller als gelesen:', response.status, response.statusText);
            }
        } catch (error) {
            console.error('Fehler beim Markieren aller als gelesen:', error);
        }
    }

    setupGlobalNotificationSystem() {
        // Globale Funktionen für einheitliche Benachrichtigungen
        window.showFlashMessage = this.showGlassToast.bind(this);
        window.showToast = this.showGlassToast.bind(this);
        window.showNotification = this.showGlassToast.bind(this);
        window.showSuccessMessage = (message) => this.showGlassToast(message, 'success');
        window.showErrorMessage = (message) => this.showGlassToast(message, 'error');
        window.showWarningMessage = (message) => this.showGlassToast(message, 'warning');
        window.showInfoMessage = (message) => this.showGlassToast(message, 'info');
    }

    /**
     * Zeigt eine moderne Glassmorphism-Toast-Benachrichtigung
     */
    showGlassToast(message, type = 'info', duration = 5000, options = {}) {
        // DND-Check
        if (window.dndManager && window.dndManager.isEnabled) {
            window.dndManager.suppressNotification(message, type);
            return;
        }

        const toastId = `toast-${++this.toastCounter}`;
        
        // Toast-Element erstellen
        const toast = document.createElement('div');
        toast.id = toastId;
        toast.className = `glass-toast notification notification-${type} show`;
        
        // Icon basierend auf Typ
        const iconMap = {
            success: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>`,
            error: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>`,
            warning: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"/>
            </svg>`,
            info: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>`
        };

        toast.innerHTML = `
            <div class="flex items-center">
                <div class="notification-icon">
                    ${iconMap[type] || iconMap.info}
                </div>
                <div class="notification-content">
                    ${options.title ? `<div class="notification-title">${options.title}</div>` : ''}
                    <div class="notification-message">${message}</div>
                </div>
                <button class="notification-close" onclick="modernNotificationManager.closeToast('${toastId}')">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
        `;

        // Container für Toasts erstellen falls nicht vorhanden
        let container = document.getElementById('toast-container');
        if (!container) {
            container = document.createElement('div');
            container.id = 'toast-container';
            container.className = 'notifications-container';
            document.body.appendChild(container);
        }

        // Position berechnen basierend auf existierenden Toasts
        const existingToasts = container.children.length;
        toast.style.top = `${1 + existingToasts * 5}rem`;
        
        container.appendChild(toast);
        this.activeToasts.set(toastId, toast);

        // Hover-Effekt pausiert Auto-Close
        let isPaused = false;
        let timeoutId;

        const startTimer = () => {
            if (!isPaused && duration > 0) {
                timeoutId = setTimeout(() => {
                    this.closeToast(toastId);
                }, duration);
            }
        };

        toast.addEventListener('mouseenter', () => {
            isPaused = true;
            clearTimeout(timeoutId);
            toast.style.transform = 'translateY(-2px) scale(1.02)';
        });

        toast.addEventListener('mouseleave', () => {
            isPaused = false;
            toast.style.transform = 'translateY(0) scale(1)';
            startTimer();
        });

        // Initial timer starten
        setTimeout(startTimer, 100);

        // Sound-Effekt (optional)
        if (options.playSound !== false) {
            this.playNotificationSound(type);
        }

        return toastId;
    }

    /**
     * Schließt eine spezifische Toast-Benachrichtigung
     */
    closeToast(toastId) {
        const toast = this.activeToasts.get(toastId);
        if (!toast) return;

        toast.classList.add('hiding');
        
        setTimeout(() => {
            if (toast.parentNode) {
                toast.parentNode.removeChild(toast);
            }
            this.activeToasts.delete(toastId);
            this.repositionToasts();
        }, 400);
    }

    /**
     * Repositioniert alle aktiven Toasts
     */
    repositionToasts() {
        let index = 0;
        this.activeToasts.forEach((toast) => {
            if (toast.parentNode) {
                toast.style.top = `${1 + index * 5}rem`;
                index++;
            }
        });
    }

    /**
     * Spielt einen Benachrichtigungston ab
     */
    playNotificationSound(type) {
        try {
            // Nur wenn AudioContext verfügbar ist
            if (typeof AudioContext !== 'undefined' || typeof webkitAudioContext !== 'undefined') {
                const audioContext = new (window.AudioContext || window.webkitAudioContext)();
                const oscillator = audioContext.createOscillator();
                const gainNode = audioContext.createGain();

                oscillator.connect(gainNode);
                gainNode.connect(audioContext.destination);

                // Verschiedene Töne für verschiedene Typen
                const frequencies = {
                    success: [523.25, 659.25, 783.99], // C-E-G Akkord
                    error: [440, 415.3], // A-Ab
                    warning: [493.88, 523.25], // B-C
                    info: [523.25] // C
                };

                const freq = frequencies[type] || frequencies.info;
                
                freq.forEach((f, i) => {
                    setTimeout(() => {
                        const osc = audioContext.createOscillator();
                        const gain = audioContext.createGain();
                        
                        osc.connect(gain);
                        gain.connect(audioContext.destination);
                        
                        osc.frequency.setValueAtTime(f, audioContext.currentTime);
                        gain.gain.setValueAtTime(0.1, audioContext.currentTime);
                        gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
                        
                        osc.start(audioContext.currentTime);
                        osc.stop(audioContext.currentTime + 0.1);
                    }, i * 100);
                });
            }
        } catch (error) {
            // Silent fail - Audio nicht verfügbar
        }
    }

    /**
     * Zeigt Browser-Benachrichtigung (falls berechtigt)
     */
    showBrowserNotification(title, message, options = {}) {
        if ('Notification' in window) {
            if (Notification.permission === 'granted') {
                const notification = new Notification(title, {
                    body: message,
                    icon: options.icon || '/static/icons/static/icons/notification-icon.png',
                    badge: options.badge || '/static/icons/static/icons/badge-icon.png',
                    tag: options.tag || 'myp-notification',
                    requireInteraction: options.requireInteraction || false,
                    ...options
                });

                notification.onclick = options.onClick || (() => {
                    window.focus();
                    notification.close();
                });

                return notification;
            } else if (Notification.permission === 'default') {
                Notification.requestPermission().then(permission => {
                    if (permission === 'granted') {
                        this.showBrowserNotification(title, message, options);
                    }
                });
            }
        }
        return null;
    }

    /**
     * Zeigt eine Alert-Benachrichtigung mit Glassmorphism
     */
    showAlert(message, type = 'info', options = {}) {
        const alertId = `alert-${Date.now()}`;
        const alert = document.createElement('div');
        alert.id = alertId;
        alert.className = `alert alert-${type}`;
        
        alert.innerHTML = `
            <div class="flex items-start">
                <div class="notification-icon mr-3">
                    ${this.getIconForType(type)}
                </div>
                <div class="flex-1">
                    ${options.title ? `<h4 class="font-semibold mb-2">${options.title}</h4>` : ''}
                    <p>${message}</p>
                </div>
                ${options.dismissible !== false ? `
                    <button class="ml-3 p-1 rounded-lg opacity-70 hover:opacity-100 transition-opacity" onclick="document.getElementById('${alertId}').remove()">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                ` : ''}
            </div>
        `;

        // Alert in Container einfügen
        const container = options.container || document.querySelector('.flash-messages') || document.body;
        container.appendChild(alert);

        // Auto-dismiss
        if (options.autoDismiss !== false) {
            setTimeout(() => {
                if (alert.parentNode) {
                    alert.style.opacity = '0';
                    alert.style.transform = 'translateY(-20px)';
                    setTimeout(() => alert.remove(), 300);
                }
            }, options.duration || 7000);
        }

        return alertId;
    }

    getIconForType(type) {
        const icons = {
            success: `<svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>`,
            error: `<svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>`,
            warning: `<svg class="w-5 h-5 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"/>
            </svg>`,
            info: `<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>`
        };
        return icons[type] || icons.info;
    }
}

// Legacy NotificationManager für Rückwärtskompatibilität
class NotificationManager extends ModernNotificationManager {
    constructor() {
        super();
        console.warn('NotificationManager ist deprecated. Verwenden Sie ModernNotificationManager.');
    }
}

// Globale Instanz erstellen
const modernNotificationManager = new ModernNotificationManager();

// Für Rückwärtskompatibilität
if (typeof window !== 'undefined') {
    window.notificationManager = modernNotificationManager;
    window.modernNotificationManager = modernNotificationManager;
}

// CSS für glassmorphe Toasts hinzufügen
const toastStyles = `
<style>
.glass-toast {
    position: relative;
    transform: translateX(0) translateY(0) scale(1);
    animation: toast-slide-in 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-toast:hover {
    transform: translateY(-2px) scale(1.02) !important;
    transition: transform 0.2s ease;
}

@keyframes toast-slide-in {
    0% {
        opacity: 0;
        transform: translateX(100%) translateY(-20px) scale(0.9);
    }
    50% {
        opacity: 0.8;
        transform: translateX(20px) translateY(-10px) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1);
    }
}

.notification-item.unread {
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.08) 0%, 
        rgba(147, 197, 253, 0.05) 100%);
    border-left: 3px solid rgb(59, 130, 246);
}

.dark .notification-item.unread {
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.15) 0%, 
        rgba(147, 197, 253, 0.08) 100%);
}
</style>
`;

// Styles zur Seite hinzufügen
if (typeof document !== 'undefined' && !document.getElementById('toast-styles')) {
    const styleElement = document.createElement('div');
    styleElement.id = 'toast-styles';
    styleElement.innerHTML = toastStyles;
    document.head.appendChild(styleElement);
} 