let deferredPrompt;

// تسجيل Service Worker
if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/sw.js')
            .then(registration => {
                console.log('ServiceWorker registration successful');
            })
            .catch(err => {
                console.log('ServiceWorker registration failed: ', err);
            });
    });
}

// رصد حدث "beforeinstallprompt"
window.addEventListener('beforeinstallprompt', (e) => {
    e.preventDefault();
    deferredPrompt = e;
    showInstallPromotion();
});

// إظهار رسالة الإضافة للشاشة الرئيسية
function showInstallPromotion() {
    if (!deferredPrompt) return;

    // إنشاء عنصر الصوت
    const audio = new Audio('/assets/sounds/notification.mp3');

    const installBanner = document.createElement('div');
    installBanner.id = 'install-banner';
    // تصميم صغير وهادئ مناسب للهاتف — يستعمل متغيرات CSS من theme.php مع قيمة احتياطية
    installBanner.className = 'fixed bottom-4 left-4 right-4 max-w-md mx-auto rtl z-50 opacity-0 translate-y-full transition-all duration-500';
    installBanner.style.borderRadius = '14px';
    installBanner.style.overflow = 'visible';
    installBanner.innerHTML = `
        <div class="install-inner" style="display:flex;gap:12px;align-items:center;padding:10px 12px;background:linear-gradient(180deg, rgba(0,0,0,0.24), rgba(0,0,0,0.14));backdrop-filter: blur(6px);border-radius:12px;position:relative;">
            <div style="flex:0 0 auto;display:flex;align-items:center;gap:8px;">
                <img src="/assets/images/icon-192x192.png" alt="كازية" style="width:48px;height:48px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,0.45);object-fit:cover;" />
            </div>
            <div style="flex:1 1 auto;min-width:0;">
                <div style="font-weight:700;font-size:15px;color:var(--primary-color, #a83232);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">إضافة كازية للشاشة الرئيسية</div>
                <div style="font-size:13px;color:rgba(255,255,255,0.85);opacity:0.9;margin-top:2px;">تجربة أسرع ودخول مباشر</div>
            </div>
            <div style="flex:0 0 auto;display:flex;flex-direction:column;gap:8px;align-items:flex-end;">
                <button id="install-accept" style="background:var(--primary-color, #a83232);color:#fff;padding:8px 12px;border-radius:10px;border:none;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,0.35);transition:transform .15s ease;">إضافة</button>
                <button id="install-dismiss" style="background:transparent;color:rgba(255,255,255,0.85);padding:6px 8px;border-radius:8px;border:none;font-size:13px;">ليس الآن</button>
            </div>
        </div>
    `;
    
    // إضافة نمط الرسوم المتحركة والحافة المتوهجة المتحركة باستخدام لون الثيم (مع احتياطية)
    const style = document.createElement('style');
    style.textContent = `
        @keyframes floatSmall {
            0% { transform: translateY(0); }
            50% { transform: translateY(-6px); }
            100% { transform: translateY(0); }
        }

        @keyframes glowShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* العنصر الخارجي الذي يحمل الحافة المتوهجة */
        #install-banner .install-inner::before {
            content: '';
            position: absolute;
            inset: -4px; /* extend beyond the rounded box */
            border-radius: 16px;
            padding: 2px;
            background: linear-gradient(90deg, rgba(var(--primary-rgb, 168 50 50), 0.95), rgba(255,255,255,0.6), rgba(var(--primary-rgb, 168 50 50), 0.6));
            background-size: 200% 100%;
            filter: blur(8px);
            z-index: -1;
            animation: glowShift 3s linear infinite;
            opacity: 0.95;
            pointer-events: none;
        }

        /* subtle float for the small icon (if used elsewhere) */
        #install-banner img { animation: floatSmall 3.2s ease-in-out infinite; }

        /* buttons interaction */
        #install-banner button#install-accept:active { transform: translateY(1px) scale(0.995); }
        #install-banner button#install-accept:hover { filter: brightness(1.03); }

        /* make banner friendly on very small screens */
        @media (max-width:420px) {
            #install-banner { left:10px; right:10px; bottom:10px; }
            #install-banner .install-inner { padding:10px; }
        }
    `;
    document.head.appendChild(style);

    document.body.appendChild(installBanner);
    
    // تشغيل الصوت عند الظهور
    audio.play().catch(() => {});
    
    // تفعيل الظهور بتأثير متحرك
    requestAnimationFrame(() => {
        installBanner.style.opacity = '1';
        installBanner.style.transform = 'translateY(0)';
    });

    // أزرار التفاعل
    // تأثير الإخفاء المتحرك
    function hideWithAnimation(accepted = false) {
        // تشغيل صوت عند الضغط
        const clickSound = new Audio('/assets/sounds/click.mp3');
        clickSound.play().catch(() => {});

        installBanner.style.opacity = '0';
        installBanner.style.transform = 'translateY(100%)';
        
        setTimeout(() => {
            installBanner.remove();
            style.remove();
        }, 500);
        
        if (!accepted) {
            localStorage.setItem('installPromptDismissed', Date.now());
        }
    }

    document.getElementById('install-accept').addEventListener('click', () => {
        deferredPrompt.prompt();
        deferredPrompt.userChoice.then((choiceResult) => {
            if (choiceResult.outcome === 'accepted') {
                console.log('تم قبول إضافة التطبيق');
            }
            deferredPrompt = null;
            hideWithAnimation(true);
        });
    });

    document.getElementById('install-dismiss').addEventListener('click', () => {
        hideWithAnimation();
    });
}

// التحقق من وقت آخر رفض قبل إظهار الرسالة
function checkLastDismissed() {
    const lastDismissed = localStorage.getItem('installPromptDismissed');
    if (lastDismissed) {
        const oneWeek = 7 * 24 * 60 * 60 * 1000;
        if (Date.now() - parseInt(lastDismissed) < oneWeek) {
            return false;
        }
    }
    return true;
}

// عرض رسالة الإضافة فقط إذا لم يتم رفضها مؤخراً
if (checkLastDismissed()) {
    showInstallPromotion();
}