shubraVeil/js/voice-search.js

class VoiceSearch {
    constructor() {
        this.recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
        this.searchInput = document.querySelector('.search-input input');
        this.voiceButton = document.querySelector('.voice-search-btn');
        
        this.initializeVoiceSearch();
    }

    initializeVoiceSearch() {
        // إعداد خصائص التعرف على الصوت
        this.recognition.lang = 'ar';
        this.recognition.continuous = false;
        this.recognition.interimResults = false;

        // إضافة مستمعي الأحداث
        this.voiceButton?.addEventListener('click', () => this.startVoiceSearch());
        
        // معالجة نتائج التعرف على الصوت
        this.recognition.onresult = (event) => {
            const result = event.results[0][0].transcript;
            if (this.searchInput) {
                this.searchInput.value = result;
                // تشغيل البحث تلقائياً
                this.searchInput.form?.dispatchEvent(new Event('submit'));
            }
        };

        // معالجة الأخطاء
        this.recognition.onerror = (event) => {
            console.error('Voice recognition error:', event.error);
            this.showNotification('حدث خطأ في التعرف على الصوت', 'error');
        };

        // عند انتهاء التسجيل
        this.recognition.onend = () => {
            this.voiceButton?.classList.remove('listening');
        };
    }

    startVoiceSearch() {
        try {
            this.recognition.start();
            this.voiceButton?.classList.add('listening');
            this.showNotification('جارٍ الاستماع... تحدث الآن');
        } catch (error) {
            console.error('Voice recognition error:', error);
            this.showNotification('لا يمكن استخدام البحث الصوتي', 'error');
        }
    }

    showNotification(message, type = 'info') {
        const notification = document.createElement('div');
        notification.className = `voice-notification ${type}`;
        notification.textContent = message;
        
        document.body.appendChild(notification);
        
        setTimeout(() => {
            notification.classList.add('show');
        }, 100);

        setTimeout(() => {
            notification.classList.remove('show');
            setTimeout(() => notification.remove(), 300);
        }, 3000);
    }
}

// نظام مشاركة المنتجات
class ShareSystem {
    constructor() {
        this.initializeShare();
    }

    initializeShare() {
        document.querySelectorAll('.share-btn').forEach(button => {
            button.addEventListener('click', (e) => this.shareProduct(e));
        });
    }

    async shareProduct(e) {
        const productCard = e.target.closest('.product-card');
        const productData = {
            title: productCard.querySelector('h3').textContent,
            text: productCard.querySelector('p').textContent,
            url: window.location.href
        };

        try {
            if (navigator.share) {
                // استخدام Web Share API إذا كان متوفراً
                await navigator.share(productData);
            } else {
                // عرض قائمة مشاركة مخصصة
                this.showCustomShareMenu(e.target, productData);
            }
        } catch (error) {
            console.error('Share error:', error);
        }
    }

    showCustomShareMenu(target, data) {
        const shareMenu = document.createElement('div');
        shareMenu.className = 'share-menu';
        
        const platforms = [
            { name: 'Facebook', icon: 'fab fa-facebook', url: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(data.url)}` },
            { name: 'Twitter', icon: 'fab fa-twitter', url: `https://twitter.com/intent/tweet?text=${encodeURIComponent(data.title)}&url=${encodeURIComponent(data.url)}` },
            { name: 'WhatsApp', icon: 'fab fa-whatsapp', url: `https://wa.me/?text=${encodeURIComponent(data.title + ' ' + data.url)}` },
            { name: 'نسخ الرابط', icon: 'fas fa-link', action: () => this.copyToClipboard(data.url) }
        ];

        shareMenu.innerHTML = platforms.map(platform => `
            <button class="share-option" data-url="${platform.url || ''}" data-action="${platform.action ? 'copy' : 'share'}">
                <i class="${platform.icon}"></i>
                <span>${platform.name}</span>
            </button>
        `).join('');

        // إضافة مستمعي الأحداث للأزرار
        shareMenu.querySelectorAll('.share-option').forEach(button => {
            button.addEventListener('click', () => {
                if (button.dataset.action === 'copy') {
                    this.copyToClipboard(data.url);
                } else {
                    window.open(button.dataset.url, '_blank');
                }
                shareMenu.remove();
            });
        });

        // إضافة القائمة للصفحة
        document.body.appendChild(shareMenu);

        // تحديد موقع القائمة
        const rect = target.getBoundingClientRect();
        shareMenu.style.top = rect.bottom + window.scrollY + 'px';
        shareMenu.style.left = rect.left + window.scrollX + 'px';

        // إغلاق القائمة عند النقر خارجها
        document.addEventListener('click', (e) => {
            if (!shareMenu.contains(e.target) && e.target !== target) {
                shareMenu.remove();
            }
        });
    }

    async copyToClipboard(text) {
        try {
            await navigator.clipboard.writeText(text);
            this.showNotification('تم نسخ الرابط بنجاح');
        } catch (error) {
            console.error('Clipboard error:', error);
            this.showNotification('فشل نسخ الرابط', 'error');
        }
    }

    showNotification(message, type = 'success') {
        const notification = document.createElement('div');
        notification.className = `share-notification ${type}`;
        notification.textContent = message;
        
        document.body.appendChild(notification);
        
        setTimeout(() => {
            notification.classList.add('show');
        }, 100);

        setTimeout(() => {
            notification.classList.remove('show');
            setTimeout(() => notification.remove(), 300);
        }, 2000);
    }
}

// تهيئة الأنظمة
const voiceSearch = new VoiceSearch();
const shareSystem = new ShareSystem();