/**
 * Dark Mode Toggle Fix - Premium Edition
 * Diese Datei stellt sicher, dass der neue Premium Dark Mode Toggle Button korrekt funktioniert
 */

document.addEventListener('DOMContentLoaded', function() {
    // Dark Mode Toggle Button (Premium Design)
    const darkModeToggle = document.getElementById('darkModeToggle');
    const html = document.documentElement;
    
    // Local Storage Key
    const STORAGE_KEY = 'myp-dark-mode';
    
    /**
     * Aktuellen Dark Mode Status aus Local Storage oder Systemeinstellung abrufen
     */
    function isDarkMode() {
        const savedMode = localStorage.getItem(STORAGE_KEY);
        if (savedMode !== null) {
            return savedMode === 'true';
        }
        return window.matchMedia('(prefers-color-scheme: dark)').matches;
    }
    
    /**
     * Icons im Premium Toggle-Button aktualisieren
     */
    function updateIcons(isDark) {
        if (!darkModeToggle) return;
        
        // Finde die Premium-Icons
        const sunIcon = darkModeToggle.querySelector('.sun-icon');
        const moonIcon = darkModeToggle.querySelector('.moon-icon');
        
        if (!sunIcon || !moonIcon) {
            console.warn('Premium Dark Mode Icons nicht gefunden');
            return;
        }
        
        // Animation für Übergänge
        if (isDark) {
            // Dark Mode aktiviert - zeige Mond
            sunIcon.style.opacity = '0';
            sunIcon.style.transform = 'scale(0.75) rotate(90deg)';
            moonIcon.style.opacity = '1';
            moonIcon.style.transform = 'scale(1) rotate(0deg)';
            
            // CSS-Klassen für Dark Mode
            sunIcon.classList.add('opacity-0', 'dark:opacity-0', 'scale-75', 'dark:scale-75', 'rotate-90', 'dark:rotate-90');
            sunIcon.classList.remove('opacity-100', 'scale-100', 'rotate-0');
            moonIcon.classList.add('opacity-100', 'dark:opacity-100', 'scale-100', 'dark:scale-100', 'rotate-0', 'dark:rotate-0');
            moonIcon.classList.remove('opacity-0', 'scale-75', 'rotate-90');
        } else {
            // Light Mode aktiviert - zeige Sonne
            sunIcon.style.opacity = '1';
            sunIcon.style.transform = 'scale(1) rotate(0deg)';
            moonIcon.style.opacity = '0';
            moonIcon.style.transform = 'scale(0.75) rotate(-90deg)';
            
            // CSS-Klassen für Light Mode
            sunIcon.classList.add('opacity-100', 'scale-100', 'rotate-0');
            sunIcon.classList.remove('opacity-0', 'dark:opacity-0', 'scale-75', 'dark:scale-75', 'rotate-90', 'dark:rotate-90');
            moonIcon.classList.add('opacity-0', 'dark:opacity-100', 'scale-75', 'dark:scale-100', 'rotate-90', 'dark:rotate-0');
            moonIcon.classList.remove('opacity-100', 'scale-100', 'rotate-0');
        }
        
        // Icon-Animationen hinzufügen
        sunIcon.classList.toggle('icon-enter', !isDark);
        moonIcon.classList.toggle('icon-enter', isDark);
    }
    
    /**
     * Premium Dark Mode aktivieren/deaktivieren
     */
    function setDarkMode(enable) {
        console.log(`🎨 Setze Premium Dark Mode auf: ${enable ? 'Aktiviert' : 'Deaktiviert'}`);
        
        if (enable) {
            html.classList.add('dark');
            html.setAttribute('data-theme', 'dark');
            html.style.colorScheme = 'dark';
            
            if (darkModeToggle) {
                darkModeToggle.setAttribute('aria-pressed', 'true');
                darkModeToggle.setAttribute('title', 'Light Mode aktivieren');
                // Premium Button-Icons aktualisieren
                updateIcons(true);
            }
        } else {
            html.classList.remove('dark');
            html.setAttribute('data-theme', 'light');
            html.style.colorScheme = 'light';
            
            if (darkModeToggle) {
                darkModeToggle.setAttribute('aria-pressed', 'false');
                darkModeToggle.setAttribute('title', 'Dark Mode aktivieren');
                // Premium Button-Icons aktualisieren
                updateIcons(false);
            }
        }
        
        // Einstellung im Local Storage speichern
        localStorage.setItem(STORAGE_KEY, enable.toString());
        
        // ThemeColor Meta-Tag aktualisieren
        const metaThemeColor = document.getElementById('metaThemeColor');
        if (metaThemeColor) {
            metaThemeColor.setAttribute('content', enable ? '#000000' : '#ffffff');
        }
        
        // Event für andere Komponenten auslösen
        window.dispatchEvent(new CustomEvent('darkModeChanged', { 
            detail: { isDark: enable }
        }));
        
        // Premium-Feedback
        console.log(`${enable ? '🌙' : '☀️'} Premium Design umgeschaltet auf: ${enable ? 'Dark Mode' : 'Light Mode'}`);
    }
    
    // Toggle Dark Mode Funktion
    function toggleDarkMode() {
        const currentMode = isDarkMode();
        setDarkMode(!currentMode);
        
        // Premium-Animation beim Klick
        if (darkModeToggle) {
            const container = darkModeToggle.querySelector('div');
            if (container) {
                container.style.transform = 'scale(0.95)';
                setTimeout(() => {
                    container.style.transform = '';
                }, 150);
            }
        }
    }
    
    // Event Listener für Premium Toggle Button
    if (darkModeToggle) {
        console.log('🎨 Premium Dark Mode Toggle Button gefunden - initialisiere...');
        
        // Entferne vorherige Event-Listener, um Duplikate zu vermeiden
        const newDarkModeToggle = darkModeToggle.cloneNode(true);
        darkModeToggle.parentNode.replaceChild(newDarkModeToggle, darkModeToggle);
        
        // Neuen Event-Listener hinzufügen
        newDarkModeToggle.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation(); // Verhindere Bubbling
            toggleDarkMode();
        });
        
        // Aktualisiere die Variable auf das neue Element
        const updatedToggle = document.getElementById('darkModeToggle');
        
        // Initialen Status setzen
        const isDark = isDarkMode();
        setDarkMode(isDark);
        
        console.log('✨ Premium Dark Mode Toggle Button erfolgreich initialisiert');
    } else {
        console.error('❌ Premium Dark Mode Toggle Button konnte nicht gefunden werden!');
    }
    
    // Tastaturkürzel: Strg+Shift+D für Dark Mode Toggle
    document.addEventListener('keydown', function(e) {
        if (e.ctrlKey && e.shiftKey && e.key === 'D') {
            toggleDarkMode();
            e.preventDefault();
        }
    });
    
    // Alternative Tastaturkürzel: Alt+T für Theme Toggle
    document.addEventListener('keydown', function(e) {
        if (e.altKey && e.key === 't') {
            toggleDarkMode();
            e.preventDefault();
        }
    });
    
    // Direkte Verfügbarkeit der Funktionen im globalen Bereich
    window.toggleDarkMode = toggleDarkMode;
    window.isDarkMode = isDarkMode;
    window.setDarkMode = setDarkMode;
    
    // Premium Features
    window.premiumDarkMode = {
        toggle: toggleDarkMode,
        isDark: isDarkMode,
        setMode: setDarkMode,
        version: '3.0.0-premium'
    };
    
    console.log('🎨 Premium Dark Mode System geladen - Version 3.0.0');
});