/**
 * UX Features Implementation
 * 10 تحسينات لتجربة المستخدم
 */

(function() {
    'use strict';

    // ===================================
    // 1. SIDEBAR SEARCH
    // ===================================
    const sidebarSearch = {
        input: null,
        results: null,
        clearBtn: null,
        allLinks: [],

        init() {
            this.input = document.getElementById('sidebarSearchInput');
            this.results = document.getElementById('searchResults');
            this.clearBtn = document.getElementById('searchClear');

            if (!this.input) return;

            // جمع كل الروابط
            this.collectLinks();

            // Event listeners
            this.input.addEventListener('input', (e) => this.handleSearch(e.target.value));
            this.input.addEventListener('focus', () => {
                if (this.input.value) this.results.style.display = 'block';
            });
            
            this.clearBtn?.addEventListener('click', () => this.clearSearch());

            // إغلاق النتائج عند الضغط خارجها
            document.addEventListener('click', (e) => {
                if (!e.target.closest('.sidebar-search')) {
                    this.results.style.display = 'none';
                }
            });
        },

        collectLinks() {
            const items = document.querySelectorAll('.sidebar-item, .sidebar-subitem');
            items.forEach(item => {
                const text = item.querySelector('span')?.textContent.trim();
                const href = item.getAttribute('href');
                const icon = item.querySelector('i')?.className || '';
                
                if (text && href) {
                    this.allLinks.push({ text, href, icon, element: item });
                }
            });
        },

        handleSearch(query) {
            query = query.trim().toLowerCase();

            if (!query) {
                this.results.style.display = 'none';
                this.clearBtn.style.display = 'none';
                return;
            }

            this.clearBtn.style.display = 'block';

            const filtered = this.allLinks.filter(link => 
                link.text.toLowerCase().includes(query)
            );

            this.displayResults(filtered, query);
        },

        displayResults(results, query) {
            if (results.length === 0) {
                this.results.innerHTML = `
                    <div class="search-no-results">
                        <i class="fas fa-search"></i>
                        <p>لا توجد نتائج لـ "${query}"</p>
                    </div>
                `;
                this.results.style.display = 'block';
                return;
            }

            const html = results.map(result => `
                <a href="${result.href}" class="search-result-item">
                    <i class="${result.icon}"></i>
                    <div class="search-result-content">
                        <div class="search-result-title">${this.highlightText(result.text, query)}</div>
                        <div class="search-result-path">${result.href}</div>
                    </div>
                </a>
            `).join('');

            this.results.innerHTML = html;
            this.results.style.display = 'block';
        },

        highlightText(text, query) {
            const regex = new RegExp(`(${query})`, 'gi');
            return text.replace(regex, '<mark style="background: #3b82f6; color: white; padding: 2px 4px; border-radius: 3px;">$1</mark>');
        },

        clearSearch() {
            this.input.value = '';
            this.results.style.display = 'none';
            this.clearBtn.style.display = 'none';
            this.input.focus();
        }
    };

    // ===================================
    // 2. FAVORITES
    // ===================================
    const favorites = {
        storageKey: 'adminFavorites',
        favorites: new Set(),

        init() {
            this.loadFavorites();
            this.addFavoriteButtons();
            this.createFavoritesSection();
        },

        loadFavorites() {
            const saved = localStorage.getItem(this.storageKey);
            if (saved) {
                this.favorites = new Set(JSON.parse(saved));
            }
        },

        saveFavorites() {
            localStorage.setItem(this.storageKey, JSON.stringify([...this.favorites]));
        },

        addFavoriteButtons() {
            const items = document.querySelectorAll('.sidebar-item, .sidebar-subitem');
            items.forEach(item => {
                const href = item.getAttribute('href');
                if (!href || href === '#') return;

                const btn = document.createElement('button');
                btn.className = 'favorite-btn';
                btn.innerHTML = '<i class="far fa-star"></i>';
                btn.title = 'إضافة للمفضلة';

                if (this.favorites.has(href)) {
                    btn.classList.add('active');
                    btn.innerHTML = '<i class="fas fa-star"></i>';
                }

                btn.addEventListener('click', (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    this.toggleFavorite(href, btn, item);
                });

                item.appendChild(btn);
            });
        },

        toggleFavorite(href, btn, item) {
            if (this.favorites.has(href)) {
                this.favorites.delete(href);
                btn.classList.remove('active');
                btn.innerHTML = '<i class="far fa-star"></i>';
            } else {
                this.favorites.add(href);
                btn.classList.add('active');
                btn.innerHTML = '<i class="fas fa-star"></i>';
            }
            this.saveFavorites();
            this.updateFavoritesSection();
        },

        createFavoritesSection() {
            if (this.favorites.size === 0) return;

            const sidebar = document.querySelector('.sidebar-content');
            const section = document.createElement('div');
            section.className = 'favorites-section';
            section.id = 'favoritesSection';
            
            section.innerHTML = `
                <div class="favorites-header">
                    <span><i class="fas fa-star"></i> المفضلة</span>
                    <span class="text-xs">${this.favorites.size}</span>
                </div>
                <div id="favoritesList"></div>
            `;

            sidebar.insertBefore(section, sidebar.firstChild);
            this.updateFavoritesSection();
        },

        updateFavoritesSection() {
            let section = document.getElementById('favoritesSection');
            
            if (this.favorites.size === 0) {
                section?.remove();
                return;
            }

            if (!section) {
                this.createFavoritesSection();
                return;
            }

            const list = document.getElementById('favoritesList');
            const allItems = document.querySelectorAll('.sidebar-item, .sidebar-subitem');
            
            let html = '';
            this.favorites.forEach(href => {
                const item = Array.from(allItems).find(el => el.getAttribute('href') === href);
                if (item) {
                    const text = item.querySelector('span')?.textContent;
                    const icon = item.querySelector('i')?.className;
                    html += `
                        <a href="${href}" class="sidebar-item" style="padding: 0.5rem 1rem; margin-bottom: 0.25rem;">
                            <i class="${icon}"></i>
                            <span>${text}</span>
                        </a>
                    `;
                }
            });

            list.innerHTML = html;
            
            // تحديث العداد
            const counter = section.querySelector('.favorites-header span:last-child');
            if (counter) counter.textContent = this.favorites.size;
        }
    };

    // ===================================
    // 3. QUICK ACTIONS FAB
    // ===================================
    const quickActions = {
        init() {
            this.createFAB();
        },

        createFAB() {
            const fab = document.createElement('div');
            fab.className = 'fab-container';
            fab.innerHTML = `
                <button class="fab-main" id="fabMain">
                    <i class="fas fa-plus"></i>
                </button>
                <div class="fab-menu" id="fabMenu">
                    <a href="orders/create.php" class="fab-item">
                        <i class="fas fa-shopping-cart"></i>
                        <span>طلب جديد</span>
                    </a>
                    <a href="products/create.php" class="fab-item">
                        <i class="fas fa-box"></i>
                        <span>منتج جديد</span>
                    </a>
                    <a href="customers/create.php" class="fab-item">
                        <i class="fas fa-user-plus"></i>
                        <span>عميل جديد</span>
                    </a>
                    <a href="manufacturing/production.php" class="fab-item">
                        <i class="fas fa-industry"></i>
                        <span>دفعة إنتاج</span>
                    </a>
                </div>
            `;

            document.body.appendChild(fab);

            const fabMain = document.getElementById('fabMain');
            const fabMenu = document.getElementById('fabMenu');

            fabMain.addEventListener('click', () => {
                fabMain.classList.toggle('active');
                fabMenu.classList.toggle('active');
            });

            // إغلاق عند الضغط خارج FAB
            document.addEventListener('click', (e) => {
                if (!e.target.closest('.fab-container')) {
                    fabMain.classList.remove('active');
                    fabMenu.classList.remove('active');
                }
            });
        }
    };

    // ===================================
    // 4. NOTIFICATION CENTER
    // ===================================
    const notificationCenter = {
        notifications: [],

        init() {
            this.createNotificationCenter();
            this.loadNotifications();
        },

        createNotificationCenter() {
            const bellIcon = document.querySelector('.top-bar-right a[title="الطلبات الجديدة"]');
            if (!bellIcon) return;

            const container = document.createElement('div');
            container.style.position = 'relative';
            
            bellIcon.parentNode.insertBefore(container, bellIcon);
            container.appendChild(bellIcon);

            const center = document.createElement('div');
            center.className = 'notification-center';
            center.id = 'notificationCenter';
            center.innerHTML = `
                <div class="notification-header">
                    <h3>الإشعارات</h3>
                    <button class="text-sm text-blue-400 hover:text-blue-300" onclick="notificationCenter.markAllRead()">
                        تعليم الكل كمقروء
                    </button>
                </div>
                <div class="notification-tabs">
                    <button class="notification-tab active" data-tab="all">الكل</button>
                    <button class="notification-tab" data-tab="orders">الطلبات</button>
                    <button class="notification-tab" data-tab="stock">المخزون</button>
                    <button class="notification-tab" data-tab="messages">الرسائل</button>
                </div>
                <div class="notification-list" id="notificationList"></div>
                <div class="notification-footer">
                    <a href="notifications.php">عرض جميع الإشعارات</a>
                </div>
            `;

            container.appendChild(center);

            bellIcon.addEventListener('click', (e) => {
                e.preventDefault();
                center.classList.toggle('active');
            });

            // Tabs
            center.querySelectorAll('.notification-tab').forEach(tab => {
                tab.addEventListener('click', () => {
                    center.querySelectorAll('.notification-tab').forEach(t => t.classList.remove('active'));
                    tab.classList.add('active');
                    this.filterNotifications(tab.dataset.tab);
                });
            });

            // إغلاق عند الضغط خارجه
            document.addEventListener('click', (e) => {
                if (!e.target.closest('.notification-center') && !e.target.closest('a[title="الطلبات الجديدة"]')) {
                    center.classList.remove('active');
                }
            });
        },

        loadNotifications() {
            // مثال على الإشعارات (في الواقع ستأتي من API)
            this.notifications = [
                {
                    id: 1,
                    type: 'orders',
                    title: 'طلب جديد #1234',
                    body: 'تم استلام طلب جديد بقيمة 500 جنيه',
                    time: 'منذ 5 دقائق',
                    unread: true
                },
                {
                    id: 2,
                    type: 'stock',
                    title: 'تنبيه مخزون',
                    body: 'منتج "كريم الوجه" أوشك على النفاد',
                    time: 'منذ 15 دقيقة',
                    unread: true
                },
                {
                    id: 3,
                    type: 'messages',
                    title: 'رسالة جديدة',
                    body: 'لديك رسالة جديدة من أحمد محمد',
                    time: 'منذ ساعة',
                    unread: false
                }
            ];

            this.displayNotifications();
        },

        displayNotifications(filter = 'all') {
            const list = document.getElementById('notificationList');
            if (!list) return;

            let filtered = this.notifications;
            if (filter !== 'all') {
                filtered = this.notifications.filter(n => n.type === filter);
            }

            if (filtered.length === 0) {
                list.innerHTML = `
                    <div class="search-no-results">
                        <i class="fas fa-bell-slash"></i>
                        <p>لا توجد إشعارات</p>
                    </div>
                `;
                return;
            }

            const html = filtered.map(notif => `
                <div class="notification-item ${notif.unread ? 'unread' : ''}" onclick="notificationCenter.markAsRead(${notif.id})">
                    <div class="notification-item-header">
                        <span class="notification-item-title">${notif.title}</span>
                        <span class="notification-item-time">${notif.time}</span>
                    </div>
                    <div class="notification-item-body">${notif.body}</div>
                </div>
            `).join('');

            list.innerHTML = html;
        },

        filterNotifications(type) {
            this.displayNotifications(type);
        },

        markAsRead(id) {
            const notif = this.notifications.find(n => n.id === id);
            if (notif) {
                notif.unread = false;
                this.displayNotifications();
            }
        },

        markAllRead() {
            this.notifications.forEach(n => n.unread = false);
            this.displayNotifications();
        }
    };

    // ===================================
    // 5. KEYBOARD SHORTCUTS
    // ===================================
    const keyboardShortcuts = {
        init() {
            document.addEventListener('keydown', (e) => {
                // Ctrl/Cmd + K: فتح البحث
                if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
                    e.preventDefault();
                    document.getElementById('sidebarSearchInput')?.focus();
                }

                // Ctrl/Cmd + N: فتح FAB
                if ((e.ctrlKey || e.metaKey) && e.key === 'n') {
                    e.preventDefault();
                    document.getElementById('fabMain')?.click();
                }

                // Ctrl/Cmd + /: عرض الاختصارات
                if ((e.ctrlKey || e.metaKey) && e.key === '/') {
                    e.preventDefault();
                    this.showShortcuts();
                }
            });
        },

        showShortcuts() {
            alert(`
اختصارات لوحة المفاتيح:

Ctrl/Cmd + K: فتح البحث
Ctrl/Cmd + N: إجراءات سريعة
Ctrl/Cmd + D: تبديل الوضع الليلي
Ctrl/Cmd + /: عرض الاختصارات
Alt + S: طي/فتح الشريط الجانبي
ESC: إغلاق القوائم
            `);
        }
    };

    // ===================================
    // INITIALIZATION
    // ===================================
    window.notificationCenter = notificationCenter; // Make it global for onclick

    document.addEventListener('DOMContentLoaded', () => {
        sidebarSearch.init();
        favorites.init();
        quickActions.init();
        notificationCenter.init();
        keyboardShortcuts.init();

        console.log('✅ UX Features initialized');
    });

})();


// ===================================
// 6. THEME SELECTOR
// ===================================
const themeSelector = {
    currentTheme: 'dark',

    init() {
        this.loadTheme();
        this.setupThemeToggle();
    },

    loadTheme() {
        const saved = localStorage.getItem('adminTheme') || 'dark';
        this.setTheme(saved);
    },

    setupThemeToggle() {
        const toggle = document.getElementById('themeToggle');
        const selector = document.getElementById('themeSelector');
        
        if (!toggle || !selector) return;

        toggle.addEventListener('click', (e) => {
            e.stopPropagation();
            selector.classList.toggle('active');
        });

        // إغلاق عند الضغط خارجه
        document.addEventListener('click', (e) => {
            if (!e.target.closest('.theme-selector') && !e.target.closest('#themeToggle')) {
                selector.classList.remove('active');
            }
        });

        // اختيار الثيم
        selector.querySelectorAll('.theme-option').forEach(option => {
            option.addEventListener('click', () => {
                const theme = option.dataset.theme;
                this.setTheme(theme);
                selector.classList.remove('active');
            });
        });
    },

    setTheme(theme) {
        const body = document.body;
        
        // إزالة جميع الثيمات
        body.classList.remove('dark-mode', 'theme-light', 'theme-blue', 'theme-purple', 'theme-green');
        
        // إضافة الثيم الجديد
        if (theme === 'dark') {
            body.classList.add('dark-mode');
        } else if (theme === 'light') {
            body.classList.add('theme-light');
        } else {
            body.classList.add('dark-mode', `theme-${theme}`);
        }
        
        this.currentTheme = theme;
        localStorage.setItem('adminTheme', theme);
        
        // تحديث الاختيار النشط
        document.querySelectorAll('.theme-option').forEach(opt => {
            opt.classList.remove('active');
            if (opt.dataset.theme === theme) {
                opt.classList.add('active');
            }
        });
    }
};

// إضافة للتهيئة
document.addEventListener('DOMContentLoaded', () => {
    themeSelector.init();
});