/* ===== JavaScript Code - ضع هذا في قسم الـ JS ===== */

document.addEventListener("DOMContentLoaded", function () {
    // إنشاء رسالة النسخ
    const copiedMessage = document.createElement('div');
    copiedMessage.id = 'copiedMessage';
    copiedMessage.className = 'copied-message';
    copiedMessage.textContent = 'تم نسخ كود الخصم RAMADAN10! 🎉';
    document.body.appendChild(copiedMessage);

    // دالة حقن الكوبون/الأوفرلاي على العنصر المطلوب
    function injectCoupon() {
        let bannerContainer = document.querySelector("#main-content > section:nth-child(2) > div > a");

        // لو العنصر مش موجود
        if (!bannerContainer) return;

        // لو اتضاف قبل كده متضيفوش تاني
        if (bannerContainer.querySelector(".discount-coupon") || document.querySelector(".discount-coupon")) return;

        bannerContainer.style.position = "relative";

        // إنشاء الـ overlay الأصلي
        let overlay = document.createElement("div");
        overlay.classList.add("custom-banner-overlay");
        overlay.innerHTML = `
            <h2 class="banner-title">أقمشة رجالية فاخرة... لأناقة تدوم</h2>
            <p class="banner-text">اكتشف تشكيلتنا من الأقمشة اليابانية والسميراميس عالية الجودة، ثبات لون ومتانة لا مثيل لها.</p>
            <a href="https://mywajeh.com/%D8%A7%D9%84%D8%A3%D9%82%D9%85%D8%B4%D8%A9/c234105031" class="custom-banner-btn">اكتشف المزيد</a>
        `;

        // إنشاء كوبون الخصم
        let discountCoupon = document.createElement("div");
        discountCoupon.classList.add("discount-coupon", "pulse");
        discountCoupon.innerHTML = `
            <div class="coupon-text">
                <span class="coupon-label">كود الخصم 10%</span>
                <span class="coupon-code">RAMADAN10</span>
            </div>
        `;

        // إضافة وظيفة النسخ للكوبون
        discountCoupon.addEventListener('click', function (e) {
            // لو العنصر الأساسي <a> هنمنع فتح اللينك أثناء الضغط على الكوبون
            e.preventDefault();
            e.stopPropagation();

            copyToClipboard('RAMADAN10');

            // تغيير المظهر مؤقتاً للإشارة إلى النجاح
            this.classList.remove('pulse');
            this.style.background = 'linear-gradient(135deg, #27ae60, #2ecc71)';
            this.innerHTML = `
                <div class="coupon-text">
                    <span class="coupon-label">تم النسخ!</span>
                    <span class="coupon-code">RAMADAN10</span>
                </div>
            `;

            // إعادة المظهر الأصلي بعد 3 ثوان
            setTimeout(() => {
                this.style.background = 'linear-gradient(135deg, #ff6b6b, #e74c3c)';
                this.innerHTML = `
                    <div class="coupon-text">
                        <span class="coupon-label">كود الخصم</span>
                        <span class="coupon-code">RAMADAN10</span>
                    </div>
                `;
                this.classList.add('pulse');
            }, 3000);
        });

        // إضافة الـ overlay والكوبون للعنصر المحدد
        bannerContainer.appendChild(overlay);
        bannerContainer.appendChild(discountCoupon);

        console.log('تم إضافة Overlay + كوبون الخصم بنجاح 🎉');
    }

    // نحاول نحقن بعد تحميل بسيط
    setTimeout(injectCoupon, 100);
    setTimeout(injectCoupon, 600);
    setTimeout(injectCoupon, 1500);

    // دالة نسخ النص للحافظة
    function copyToClipboard(text) {
        if (navigator.clipboard && window.isSecureContext) {
            navigator.clipboard.writeText(text).then(() => {
                showCopiedMessage();
            }).catch(err => {
                console.error('فشل في نسخ النص:', err);
                fallbackCopyTextToClipboard(text);
            });
        } else {
            fallbackCopyTextToClipboard(text);
        }
    }

    // طريقة بديلة للنسخ
    function fallbackCopyTextToClipboard(text) {
        const textArea = document.createElement('textarea');
        textArea.value = text;
        textArea.style.position = 'fixed';
        textArea.style.left = '-999999px';
        textArea.style.top = '-999999px';
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();

        try {
            document.execCommand('copy');
            showCopiedMessage();
        } catch (err) {
            console.error('فشل في نسخ النص:', err);
        }

        document.body.removeChild(textArea);
    }

    // إظهار رسالة النسخ
    function showCopiedMessage() {
        const message = document.getElementById('copiedMessage');
        if (message) {
            message.classList.add('show');
            setTimeout(() => {
                message.classList.remove('show');
            }, 3000);
        }
    }

    // إظهار حقل الكوبون في صفحة الدفع/السلة (لو موجود)
    let couponField = document.querySelector('input[name="coupon"]');
    if (couponField) {
        couponField.style.display = "block";
        couponField.style.visibility = "visible";
        couponField.style.opacity = "1";
    }

    let couponContainer = document.querySelector(".coupon, #coupon, .has-coupon");
    if (couponContainer) {
        couponContainer.style.display = "block";
        couponContainer.style.visibility = "visible";
    }

    // مراقبة التغييرات في DOM للمواقع التي تحمل المحتوى ديناميكياً
    const observer = new MutationObserver(function (mutations) {
        let shouldInject = false;

        mutations.forEach(function (mutation) {
            if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                shouldInject = true;
            }
        });

        if (shouldInject) {
            setTimeout(injectCoupon, 300);
        }
    });

    if (document.body) {
        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    }
});