// نظام الإشعارات العالمي - يعمل في جميع الصفحات

class GlobalNotificationSystem {
    constructor() {
        this.autoRefreshInterval = null;
        this.lastOrderId = 0;
        this.audioContext = null;
        this.notificationSound = null;
        this.isEnabled = true;
        this.checkInterval = 7000; // 7 ثواني
        
        this.init();
    }
    
    init() {
        // تحميل الصوت
        this.loadNotificationSound();
        
        // بدء التحديث التلقائي
        this.startAutoRefresh();
        
        // إضافة عناصر التحكم إلى جميع الصفحات
        this.addGlobalControls();
        
        // إضافة مستمع حدث للصفحة غير النشطة
        document.addEventListener('visibilitychange', () => {
            if (document.hidden) {
                // الصفحة غير نشطة - زيادة صوت التنبيه
                this.makeSoundMoreAnnoying = true;
            } else {
                this.makeSoundMoreAnnoying = false;
            }
        });
    }
    
    loadNotificationSound() {
        // محاولة تحميل ملف صوتي
        this.notificationSound = new Audio('notification.mp3');
        this.notificationSound.preload = 'auto';
        
        // بديل باستخدام Web Audio API
        try {
            this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
        } catch (e) {
            console.log('Web Audio API غير مدعوم:', e);
        }
    }
    
    addGlobalControls() {
        // التحقق مما إذا كانت عناصر التحكم موجودة مسبقاً
        if (document.getElementById('globalNotificationControls')) {
            return;
        }
        
        const controlsHTML = `
            <div id="globalNotificationControls" style="position: fixed; top: 70px; left: 20px; z-index: 9999; background: white; padding: 15px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border: 2px solid #F57C00; min-width: 250px;">
                <h6 style="color: #F57C00; margin-bottom: 15px;">
                    <i class="bi bi-bell"></i> إشعارات الطلبات
                </h6>
                <div class="mb-3">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="globalNotificationToggle" checked>
                        <label class="form-check-label" for="globalNotificationToggle">التنبيه بالطلبات الجديدة</label>
                    </div>
                </div>
                <div class="mb-2">
                    <button class="btn btn-sm btn-outline-primary w-100" id="testSoundBtn">
                        <i class="bi bi-volume-up"></i> اختبار الصوت
                    </button>
                </div>
                <div class="mb-2">
                    <button class="btn btn-sm btn-outline-secondary w-100" id="checkNowBtn">
                        <i class="bi bi-arrow-clockwise"></i> التحقق الآن
                    </button>
                </div>
                <div id="newOrdersAlert" class="alert alert-warning py-2 d-none" style="font-size: 0.85rem;">
                    <i class="bi bi-exclamation-triangle"></i>
                    <span id="newOrdersCount">0</span> طلب جديد
                </div>
            </div>
        `;
        
        document.body.insertAdjacentHTML('beforeend', controlsHTML);
        
        // إضافة مستمعي الأحداث
        document.getElementById('globalNotificationToggle').addEventListener('change', (e) => {
            this.isEnabled = e.target.checked;
            if (this.isEnabled) {
                this.startAutoRefresh();
            } else {
                this.stopAutoRefresh();
            }
        });
        
        document.getElementById('testSoundBtn').addEventListener('click', () => {
            this.playAnnoyingNotificationSound();
        });
        
        document.getElementById('checkNowBtn').addEventListener('click', () => {
            this.checkForNewOrders(true);
        });
    }
    
    startAutoRefresh() {
        this.stopAutoRefresh();
        this.autoRefreshInterval = setInterval(() => {
            this.checkForNewOrders();
        }, this.checkInterval);
        console.log('تم تفعيل التحديث التلقائي للإشعارات');
    }
    
    stopAutoRefresh() {
        if (this.autoRefreshInterval) {
            clearInterval(this.autoRefreshInterval);
            this.autoRefreshInterval = null;
        }
        console.log('تم إيقاف التحديث التلقائي للإشعارات');
    }
    
    async checkForNewOrders(isManual = false) {
        if (!this.isEnabled && !isManual) return;
        
        try {
            const response = await fetch('check_global_orders.php');
            const data = await response.json();
            
            if (data.success && data.new_orders_count > 0) {
                this.showNewOrdersNotification(data.new_orders_count, data.new_orders);
                
                if (!isManual) {
                    this.playAnnoyingNotificationSound();
                }
            }
            
            // تحديث العداد في عناصر التحكم
            this.updateOrdersCounter(data.new_orders_count);
            
        } catch (error) {
            console.error('خطأ في التحقق من الطلبات:', error);
        }
    }
    
    updateOrdersCounter(count) {
        const alertElement = document.getElementById('newOrdersAlert');
        const countElement = document.getElementById('newOrdersCount');
        
        if (count > 0) {
            countElement.textContent = count;
            alertElement.classList.remove('d-none');
            
            // جعل الإشعار يرفرف
            alertElement.classList.add('alert-danger');
            setTimeout(() => {
                alertElement.classList.remove('alert-danger');
            }, 1000);
        } else {
            alertElement.classList.add('d-none');
        }
    }
    
    showNewOrdersNotification(count, orders) {
        // إنشاء إشعار Toast
        const toastContainer = document.querySelector('.toast-container');
        if (!toastContainer) {
            this.createToastContainer();
        }
        
        const toastId = 'global-toast-' + Date.now();
        const toastHTML = `
            <div id="${toastId}" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="10000">
                <div class="toast-header" style="background: #ffebee; border-bottom: 1px solid #f44336;">
                    <i class="bi bi-cart text-danger me-2"></i>
                    <strong class="me-auto">طلبات جديدة!</strong>
                    <small class="text-muted">الآن</small>
                    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
                </div>
                <div class="toast-body">
                    <p class="mb-2">يوجد <strong class="text-danger">${count}</strong> طلب جديد يحتاج إلى review</p>
                    ${orders.map(order => `
                        <div class="border-bottom pb-1 mb-1">
                            <small>طلب #${order.id} من ${order.customer_name}</small>
                        </div>
                    `).join('')}
                    <div class="mt-2">
                        <a href="orders.php" class="btn btn-sm btn-danger">عرض الطلبات</a>
                    </div>
                </div>
            </div>
        `;
        
        document.querySelector('.toast-container').insertAdjacentHTML('beforeend', toastHTML);
        const toastElement = document.getElementById(toastId);
        const toast = new bootstrap.Toast(toastElement);
        toast.show();
        
        // إزالة Toast بعد اختفائه
        toastElement.addEventListener('hidden.bs.toast', () => {
            toastElement.remove();
        });
        
        // إظهار إشعار المتصفح إذا كان مسموحاً
        if ("Notification" in window && Notification.permission === "granted") {
            new Notification("طلبات جديدة!", {
                body: `يوجد ${count} طلب جديد`,
                icon: '/favicon.ico',
                tag: 'new-orders'
            });
        }
    }
    
    createToastContainer() {
        const containerHTML = `
            <div class="toast-container position-fixed top-0 start-0 p-3" style="z-index: 1100;"></div>
        `;
        document.body.insertAdjacentHTML('beforeend', containerHTML);
    }
    
    playAnnoyingNotificationSound() {
        // محاولة استخدام ملف الصوت أولاً
        if (this.notificationSound) {
            this.notificationSound.currentTime = 0;
            this.notificationSound.volume = this.makeSoundMoreAnnoying ? 1 : 0.7;
            this.notificationSound.play().catch(e => {
                console.log('تعذر تشغيل ملف الصوت:', e);
                this.playSyntheticSound();
            });
        } else {
            this.playSyntheticSound();
        }
    }
    
    playSyntheticSound() {
        if (!this.audioContext) return;
        
        try {
            // صوت أكثر إزعاجاً - نغمتين متتاليتين
            this.playBeep(800, 200);
            setTimeout(() => {
                this.playBeep(600, 200);
            }, 250);
            
            // إذا كانت الصفحة غير نشطة، أضف المزيد من الإزعاج
            if (this.makeSoundMoreAnnoying) {
                setTimeout(() => {
                    this.playBeep(1000, 300);
                }, 600);
            }
        } catch (e) {
            console.log('تعذر تشغيل الصوت الاصطناعي:', e);
        }
    }
    
    playBeep(frequency, duration) {
        if (!this.audioContext) return;
        
        const oscillator = this.audioContext.createOscillator();
        const gainNode = this.audioContext.createGain();
        
        oscillator.connect(gainNode);
        gainNode.connect(this.audioContext.destination);
        
        oscillator.frequency.value = frequency;
        oscillator.type = 'sine';
        
        gainNode.gain.setValueAtTime(0, this.audioContext.currentTime);
        gainNode.gain.linearRampToValueAtTime(0.1, this.audioContext.currentTime + 0.01);
        gainNode.gain.linearRampToValueAtTime(0, this.audioContext.currentTime + duration / 1000);
        
        oscillator.start(this.audioContext.currentTime);
        oscillator.stop(this.audioContext.currentTime + duration / 1000);
    }
    
    // طلب إذن الإشعارات
    requestNotificationPermission() {
        if ("Notification" in window) {
            Notification.requestPermission().then(permission => {
                console.log('حالة إذن الإشعارات:', permission);
            });
        }
    }
}

// تهيئة النظام عند تحميل الصفحة
document.addEventListener('DOMContentLoaded', function() {
    window.globalNotifications = new GlobalNotificationSystem();
    
    // طلب إذن الإشعارات بعد تفاعل المستخدم
    document.addEventListener('click', function() {
        if (window.globalNotifications) {
            window.globalNotifications.requestNotificationPermission();
        }
    }, { once: true });
});

// جعل النظام يعمل حتى عندما تكون الصفحة غير نشطة
document.addEventListener('visibilitychange', function() {
    if (!document.hidden && window.globalNotifications) {
        // الصفحة أصبحت نشطة - التحقق فوراً من الطلبات الجديدة
        window.globalNotifications.checkForNewOrders();
    }
});