/**
 * نظام إشعارات وصل-لي الموحد
 * يدعم التنبيهات الصوتية، الـ Toasts العصرية، وتحديثات Socket.io
 * تم الإصلاح: الربط مع السيرفر الحقيقي
 */

const showToast = (title, message, type = 'info', actionUrl = null) => {
    // ✅ FIX: تأكد من تحميل Bootstrap Icons إذا لم تكن موجودة
    if (!document.querySelector('link[href*="bootstrap-icons"]')) {
        const biLink = document.createElement('link');
        biLink.rel = 'stylesheet';
        biLink.href = 'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css';
        document.head.appendChild(biLink);
    }

    // إنشاء حاوية التنبيهات إذا لم تكن موجودة
    let container = document.getElementById('toast-container');
    if (!container) {
        container = document.createElement('div');
        container.id = 'toast-container';
        container.style.cssText = `
            position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
            z-index: 9999; width: 90%; max-width: 400px;
            display: flex; flex-direction: column; gap: 10px;
        `;
        document.body.appendChild(container);
    }

    const toast = document.createElement('div');

    // ✅ خريطة موسّعة لجميع أنواع الإشعارات
    const typeMap = {
        'order_accepted': { color: '#0d6efd', icon: 'bi-bicycle', bg: '#e8f0fe' },
        'order_completed': { color: '#198754', icon: 'bi-check-circle-fill', bg: '#e8f5e9' },
        'order_update': { color: '#fd7e14', icon: 'bi-arrow-repeat', bg: '#fff3e0' },
        'chat': { color: '#6f42c1', icon: 'bi-chat-dots-fill', bg: '#f3e8ff' },
        'info': { color: '#0a8754', icon: 'bi-bell-fill', bg: '#e0f5ef' },
        'error': { color: '#dc3545', icon: 'bi-exclamation-circle-fill', bg: '#fdecea' },
        'warning': { color: '#ffc107', icon: 'bi-exclamation-triangle-fill', bg: '#fff8e1' },
        'system': { color: '#0dcaf0', icon: 'bi-bell-fill', bg: '#e0f7fa' },
    };

    const tm = typeMap[type] || typeMap['info'];

    toast.style.cssText = `
        background: white; border-right: 4px solid ${tm.color};
        padding: 12px 14px; border-radius: 14px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12); display: flex; align-items: center;
        gap: 12px; animation: slideDown 0.4s ease-out; direction: rtl;
        cursor: pointer; position: relative; overflow: hidden;
    `;

    toast.innerHTML = `
        <div style="width:42px;height:42px;flex-shrink:0;border-radius:50%;background:${tm.bg};
                    border:2px solid ${tm.color}40;display:flex;align-items:center;justify-content:center;">
            <i class="bi ${tm.icon}" style="font-size:18px;color:${tm.color};"></i>
        </div>
        <div style="flex:1;min-width:0;">
            <h4 style="margin:0;font-size:13px;font-weight:700;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${title}</h4>
            <p style="margin:3px 0 0;font-size:12px;color:#666;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">${message}</p>
        </div>
        <div style="position:absolute;bottom:0;left:0;height:3px;background:${tm.color}55;width:100%;animation:toastProgress 4s linear forwards;"></div>
    `;

    // إضافة الأنيميشن
    if (!document.getElementById('toast-styles')) {
        const style = document.createElement('style');
        style.id = 'toast-styles';
        style.innerHTML = `
            @keyframes slideDown {
                from { transform: translateY(-20px); opacity: 0; }
                to { transform: translateY(0); opacity: 1; }
            }
            @keyframes fadeOut {
                to { opacity: 0; transform: translateY(-10px); }
            }
            @keyframes toastProgress {
                from { width: 100%; }
                to { width: 0%; }
            }
        `;
        document.head.appendChild(style);
    }

    container.appendChild(toast);

    // إزالة التنبيه بعد 4 ثوانٍ
    setTimeout(() => {
        toast.style.animation = 'fadeOut 0.4s forwards';
        setTimeout(() => toast.remove(), 400);
    }, 4000);

    toast.onclick = () => {
        toast.remove();
        if (actionUrl) {
            // انتقال مباشر للرابط المحدد (مثلاً: المحادثة)
            window.location.href = actionUrl;
        } else if (window.location.href.includes('captain')) {
            window.location.href = 'captain-notifications.html';
        } else {
            window.location.href = 'notifications.html';
        }
    };

    playNotificationSound();
};

// ==========================================
// 🔴 Badge Helper — علامة رسالة جديدة على زر محادثة التاجر
// ==========================================
function _setChatMerchantBadge(orderId) {
    // 1. حفظ orderId في localStorage كـ "unread chat"
    const stored = JSON.parse(localStorage.getItem('_unreadChatOrders') || '[]');
    if (!stored.includes(String(orderId))) {
        stored.push(String(orderId));
        localStorage.setItem('_unreadChatOrders', JSON.stringify(stored));
    }

    // 2. لو زر "محادثة التاجر" موجود في الصفحة الحالية، ضع عليه نقطة حمراء
    const chatBtn = document.getElementById('placeModalChatBtn');
    if (chatBtn && !document.getElementById('_chatBadgeDot')) {
        const dot = document.createElement('span');
        dot.id = '_chatBadgeDot';
        dot.style.cssText = `
            display:inline-block; width:10px; height:10px; border-radius:50%;
            background:#ef4444; border:2px solid white;
            position:absolute; top:6px; right:6px;
            animation: chatBadgePulse 1.2s ease-in-out infinite;
        `;
        // تأكد من أن الزر relative
        chatBtn.style.position = 'relative';
        chatBtn.appendChild(dot);

        // CSS للنبضة
        if (!document.getElementById('_chatBadgeStyle')) {
            const s = document.createElement('style');
            s.id = '_chatBadgeStyle';
            s.textContent = `@keyframes chatBadgePulse {
                0%,100%{transform:scale(1);opacity:1;}
                50%{transform:scale(1.4);opacity:.7;}
            }`;
            document.head.appendChild(s);
        }
    }
}
window._setChatMerchantBadge = _setChatMerchantBadge;

// ==========================================
// ✅ مسح البادج عند فتح المحادثة
// ==========================================
window._clearChatBadge = function(orderId) {
    let stored = JSON.parse(localStorage.getItem('_unreadChatOrders') || '[]');
    stored = stored.filter(id => id !== String(orderId));
    localStorage.setItem('_unreadChatOrders', JSON.stringify(stored));
    const dot = document.getElementById('_chatBadgeDot');
    if (dot) dot.remove();
};

// ==========================================
// ✅ تحقق من وجود رسائل غير مقروءة عند تحميل الصفحة
// ==========================================
(function checkUnreadBadgeOnLoad() {
    const stored = JSON.parse(localStorage.getItem('_unreadChatOrders') || '[]');
    if (stored.length > 0) {
        // انتظر قليلاً حتى تُبنى الـ DOM
        setTimeout(() => {
            const chatBtn = document.getElementById('placeModalChatBtn');
            if (chatBtn && !document.getElementById('_chatBadgeDot')) {
                _setChatMerchantBadge(stored[stored.length - 1]);
            }
        }, 800);
    }
})();

// ✅ دالة الاتصال بالسيرفر (تم التعديل والإصلاح هنا)
const initNotificationSocket = (userId) => {
    // التأكد من وجود userId ومكتبة socket.io
    if (!userId || typeof io === 'undefined') return;

    // ✅ SINGLETON GUARD: لا تنشئ اتصالاً جديداً إذا كان الاتصال قائماً للمستخدم نفسه
    if (window.socket && window.socket.connected && window._socketUserId === String(userId)) {
        console.log('🔌 Socket already connected for user:', userId);
        return;
    }

    // ✅ أغلق الاتصال القديم إن وجد قبل إنشاء جديد
    if (window.socket) {
        console.log('🔌 Closing stale socket before reconnecting...');
        window.socket.disconnect();
        window.socket = null;
    }

    // 1. تحديد رابط السيرفر بدقة (الأولوية لـ API_URL من config.js)
    const serverUrl = (typeof API_URL !== 'undefined') ? API_URL :
        (window.API_BASE_URL || 'https://wassili.site');

    console.log(`🔌 Initializing Notification Socket to: ${serverUrl}`);

    try {
        // 2. إعداد الاتصال مع خيارات النقل الصحيحة (مهم جداً للـ cPanel)
        const socket = io(serverUrl, {
            path: '/socket.io', // المسار القياسي
            transports: ['polling', 'websocket'], // polling أولاً لتوافق cPanel/Passenger
            reconnection: true,
            reconnectionAttempts: 5,         // ✅ حد أقصى لمحاولات إعادة الاتصال
            reconnectionDelay: 2000,         // ✅ انتظر ثانيتين بين المحاولات
            timeout: 10000
        });

        // ✅ FIX: Expose socket globally so captain-service.js can use it for location updates
        window.socket = socket;
        window._socketUserId = String(userId);

        const cleanUserId = String(userId).trim();

        socket.on('connect', () => {
            socket.emit('user_join', cleanUserId);
            console.log('✅ Notification system active for:', cleanUserId);
        });

        socket.on('new_notification', (notification) => {
            // 💬 لو الإشعار رسالة محادثة: نفتح Chat مباشرةً عند الضغط + نحط علامة على زر التاجر
            if (notification.type === 'chat_message' && notification.relatedId) {
                const orderId   = notification.relatedId;
                // استخرج senderId من بيانات الإشعار لو موجود
                const senderId  = notification.senderId || '';
                const chatUrl   = `chat.html?orderId=${orderId}&receiverId=${senderId}`;

                showToast(notification.title, notification.message, 'chat', chatUrl);

                // 🔴 ضع علامة (Badge) على زر "محادثة التاجر" لو الزر موجود في الصفحة الحالية
                _setChatMerchantBadge(orderId);
            } else {
                showToast(notification.title, notification.message, notification.type);
            }
        });

        // ✅ إضافة مستمع لـ new_message لتحديث البادج في الوقت الفعلي
        socket.on('new_message', (msg) => {
            // لو المستخدم مش بشاهد محادثة هذا الطلب حالياً
            if (!window._activeChatOrderId || window._activeChatOrderId !== msg.order) {
                _setChatMerchantBadge(msg.order);
            }
        });

        socket.on('order_status_updated', (data) => {
            const statusMap = {
                'accepted': 'تم قبول طلبك! الكابتن في الطريق.',
                'picked_up': 'تم استلام طلبك بنجاح.',
                'delivered': 'تم توصيل طلبك، شكراً لك!',
                'cancelled': 'تم إلغاء الطلب.'
            };

            // عرض التنبيه فقط إذا كانت الحالة معروفة
            if (statusMap[data.status]) {
                showToast('تحديث الطلب', statusMap[data.status], 'order_update');
            }

            // تحديث قائمة الطلبات إذا كنا في صفحة الطلبات
            if (typeof loadOrders === 'function') {
                loadOrders();
            }
        });

        socket.on('connect_error', (err) => {
            // تجاهل الأخطاء الصامتة
            // console.warn('Socket connect error', err);
        });

        // ✅ نظّف المرجع عند قطع الاتصال النهائي
        socket.on('disconnect', (reason) => {
            if (reason === 'io server disconnect' || reason === 'io client disconnect') {
                window.socket = null;
                window._socketUserId = null;
            }
        });

    } catch (e) {
        console.error('Socket initialization failed:', e);
    }
};

// دالة توليد صوت التنبيه (بدون ملفات خارجية)
function playNotificationSound() {
    try {
        const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        const oscillator = audioCtx.createOscillator();
        const gainNode = audioCtx.createGain();

        oscillator.type = 'sine';
        oscillator.frequency.setValueAtTime(523.25, audioCtx.currentTime); // C5
        oscillator.frequency.exponentialRampToValueAtTime(1046.50, audioCtx.currentTime + 0.1); // C6

        gainNode.gain.setValueAtTime(0.05, audioCtx.currentTime);
        gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.2);

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

        oscillator.start();
        oscillator.stop(audioCtx.currentTime + 0.2);
    } catch (e) {
        // المتصفح قد يمنع الصوت إذا لم يكن هناك تفاعل من المستخدم
    }
}

// تصدير الدوال للاستخدام العام
window.showToast = showToast;
window.initNotificationSocket = initNotificationSocket;