/*
 * Project: Video Sharing Platform
 * Year: 2026
 * Developed by: Molla Samser (RSK World)
 * 
 * Theme management system (Dark/Light mode)
 */

class ThemeManager {
    constructor() {
        this.currentTheme = localStorage.getItem('theme') || 'dark';
        this.systemPreference = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
        this.init();
    }

    init() {
        this.applyTheme(this.currentTheme);
        this.setupThemeToggle();
        this.setupSystemPreferenceListener();
    }

    setupThemeToggle() {
        // Create theme toggle button
        const themeToggle = document.createElement('button');
        themeToggle.className = 'theme-toggle';
        themeToggle.setAttribute('aria-label', 'Toggle theme');
        themeToggle.innerHTML = `
            <i class="fas fa-${this.currentTheme === 'dark' ? 'sun' : 'moon'}"></i>
        `;

        // Add to navigation
        const navRight = document.querySelector('.nav-right');
        if (navRight) {
            navRight.insertBefore(themeToggle, navRight.firstChild);
        }

        // Add click handler
        themeToggle.addEventListener('click', () => {
            this.toggleTheme();
        });
    }

    toggleTheme() {
        const newTheme = this.currentTheme === 'dark' ? 'light' : 'dark';
        this.setTheme(newTheme);
    }

    setTheme(theme) {
        this.currentTheme = theme;
        localStorage.setItem('theme', theme);
        this.applyTheme(theme);
        this.updateThemeToggle();
    }

    applyTheme(theme) {
        const root = document.documentElement;
        
        if (theme === 'light') {
            root.style.setProperty('--bg-main', '#ffffff');
            root.style.setProperty('--text-main', '#1a1a1a');
            root.style.setProperty('--text-muted', '#666666');
            root.style.setProperty('--glass-bg', 'rgba(255, 255, 255, 0.8)');
            root.style.setProperty('--glass-border', 'rgba(0, 0, 0, 0.1)');
            root.style.setProperty('--sidebar-bg', '#f8f9fa');
            document.body.classList.add('light-theme');
            document.body.classList.remove('dark-theme');
        } else {
            root.style.setProperty('--bg-main', '#0a0a0c');
            root.style.setProperty('--text-main', '#ffffff');
            root.style.setProperty('--text-muted', '#b0b0b0');
            root.style.setProperty('--glass-bg', 'rgba(255, 255, 255, 0.08)');
            root.style.setProperty('--glass-border', 'rgba(255, 255, 255, 0.15)');
            root.style.setProperty('--sidebar-bg', '#0d0d0f');
            document.body.classList.add('dark-theme');
            document.body.classList.remove('light-theme');
        }
    }

    updateThemeToggle() {
        const themeToggle = document.querySelector('.theme-toggle i');
        if (themeToggle) {
            themeToggle.className = `fas fa-${this.currentTheme === 'dark' ? 'sun' : 'moon'}`;
        }
    }

    setupSystemPreferenceListener() {
        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
        mediaQuery.addEventListener('change', (e) => {
            if (!localStorage.getItem('theme')) {
                this.setTheme(e.matches ? 'dark' : 'light');
            }
        });
    }

    // Auto theme based on time of day
    enableAutoTheme() {
        const hour = new Date().getHours();
        const isDaytime = hour >= 6 && hour < 18;
        this.setTheme(isDaytime ? 'light' : 'dark');
    }

    // Theme presets
    applyPreset(preset) {
        const root = document.documentElement;
        
        switch(preset) {
            case 'ocean':
                root.style.setProperty('--accent-color', '#00b4d8');
                root.style.setProperty('--primary-gradient', 'linear-gradient(135deg, #00b4d8, #0077b6)');
                break;
            case 'sunset':
                root.style.setProperty('--accent-color', '#ff6b6b');
                root.style.setProperty('--primary-gradient', 'linear-gradient(135deg, #ff6b6b, #f4a261)');
                break;
            case 'forest':
                root.style.setProperty('--accent-color', '#52b788');
                root.style.setProperty('--primary-gradient', 'linear-gradient(135deg, #52b788, #2d6a4f)');
                break;
            case 'galaxy':
                root.style.setProperty('--accent-color', '#7209b7');
                root.style.setProperty('--primary-gradient', 'linear-gradient(135deg, #7209b7, #560bad)');
                break;
            default:
                // Reset to default
                root.style.setProperty('--accent-color', '#ff4b2b');
                root.style.setProperty('--primary-gradient', 'linear-gradient(135deg, #ff416c, #ff4b2b)');
        }
    }
}

// Notification system
class NotificationManager {
    constructor() {
        this.container = this.createContainer();
    }

    createContainer() {
        const container = document.createElement('div');
        container.className = 'notification-container';
        document.body.appendChild(container);
        return container;
    }

    show(message, type = 'info', duration = 5000) {
        const notification = document.createElement('div');
        notification.className = `notification ${type}`;
        notification.setAttribute('role', 'alert');
        notification.setAttribute('aria-live', 'polite');
        
        const icons = {
            'success': 'fa-check-circle',
            'error': 'fa-exclamation-circle',
            'warning': 'fa-exclamation-triangle',
            'info': 'fa-info-circle'
        };

        notification.innerHTML = `
            <i class="fas ${icons[type]}"></i>
            <span class="notification-message">${message}</span>
            <button class="notification-close" aria-label="Close notification">
                <i class="fas fa-times"></i>
            </button>
        `;

        this.container.appendChild(notification);

        // Add animation
        requestAnimationFrame(() => {
            notification.classList.add('show');
        });

        // Setup close button
        const closeBtn = notification.querySelector('.notification-close');
        closeBtn.addEventListener('click', () => {
            this.remove(notification);
        });

        // Auto remove
        if (duration > 0) {
            setTimeout(() => {
                this.remove(notification);
            }, duration);
        }

        return notification;
    }

    remove(notification) {
        notification.classList.add('hide');
        setTimeout(() => {
            if (notification.parentElement) {
                notification.remove();
            }
        }, 300);
    }

    success(message, duration) {
        return this.show(message, 'success', duration);
    }

    error(message, duration) {
        return this.show(message, 'error', duration);
    }

    warning(message, duration) {
        return this.show(message, 'warning', duration);
    }

    info(message, duration) {
        return this.show(message, 'info', duration);
    }
}

// Global notification manager
const notificationManager = new NotificationManager();

// Update global showNotification function
function showNotification(message, type = 'info', duration = 5000) {
    return notificationManager.show(message, type, duration);
}

// Initialize theme manager
const themeManager = new ThemeManager();

// Export for use in main app
window.ThemeManager = ThemeManager;
window.themeManager = themeManager;
window.NotificationManager = NotificationManager;
window.notificationManager = notificationManager;
