store-ui.js

/**
 * @fileoverview Points Store UI, Interactive Custom Exchange & Promo Packages Renderer
 * @module ui/store-ui
 * @description بناء واجهة متجر النقاط، حاسبة استبدال الرصيد التفاعلية، وعرض بطاقات باقات الشحن المعتمدة.
 */

(global => {
    'use strict';

    /**
     * بناء الهيكل البصري لمتجر النقاط بالـ DOM
     */
    const buildStorePane = () => {
        const sidebar = document.getElementById('bmh59axx92');
        const contentArea = document.getElementById('s7ihkirolg');
        if (!sidebar || !contentArea) return;

        if (!sidebar.querySelector('[data-target="dc1z57si9s"]')) {
            const navItem = document.createElement('div');
            navItem.className = 'f2rj8bz2yt';
            navItem.setAttribute('data-target', 'dc1z57si9s');
            navItem.innerHTML = '<i class="fa-solid fa-cart-shopping"></i> <span>متجر النقاط</span>';
            sidebar.appendChild(navItem);
            navItem.addEventListener('click', () => {
                window.location.hash = 'dc1z57si9s';
            });
        }

        let pane = document.getElementById('dc1z57si9s');
        if (pane) return;

        pane = document.createElement('section');
        pane.className = 'rjiai07g77';
        pane.id = 'dc1z57si9s';
        pane.innerHTML = `
            <div class="d5tp7way8h zcjbe1otmg" style="margin: 0; padding: clamp(14px, 1.8vw, 24px); border-radius: var(--radius-xl); border: 1px solid var(--border); direction: rtl; text-align: right; background: var(--bg-card); box-sizing: border-box;">
                
                <!-- ترويسة المتجر والرصيد المتاح -->
                <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 18px; flex-wrap: wrap; gap: 10px;">
                    <div style="text-align: right;">
                        <h2 style="font-size: clamp(15px, 1.2vw, 18px); font-weight: 900; display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-main);">
                            <i class="fa-solid fa-store" style="color: #7c3aed;"></i> 
                            <span>متجر النقاط والأرصدة الترويجية</span>
                        </h2>
                        <p style="font-size: 11px; color: var(--text-muted); margin-top: 4px; font-weight: 700;">
                            <i class="fa-solid fa-shield-halved"></i> 
                            <span>نظام التشفير والتحقق الذاتي يضمن أمان وسلامة رصيدك ومحفظتك الموحدة.</span>
                        </p>
                    </div>

                    <!-- بطاقة رصيد المحفظة المتاح -->
                    <div style="border: 1px solid var(--border); padding: 10px 16px; border-radius: var(--radius-lg); display: flex; align-items: center; gap: 10px; background: var(--bg-subtle);">
                        <div style="background: var(--bg-card); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; border: 1px solid var(--border); color: #d97706;">
                            <i class="fa-solid fa-wallet"></i> 
                        </div>
                        <div style="text-align: right;">
                            <span style="font-size: 9.5px; font-weight: 700; display: block; color: var(--text-muted); text-transform: uppercase;">رصيدك المتاح بالمحفظة</span>
                            <strong style="font-size: 16px; font-weight: 900; font-family: var(--font-code); color: var(--text-main);">
                                <span>$</span><span id="u39mvrlgpk">0.00</span>
                            </strong>
                        </div>
                    </div>
                </div>

                <!-- الشبكة الرئيسية: الحاسبة التفاعلية + باقات الشحن -->
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 35vw, 1fr), 1fr)); gap: 14px; margin-bottom: 20px;">
                    
                    <!-- 1. حاسبة استبدال النقاط التفاعلية -->
                    <div style="border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(14px, 1.4vw, 18px); display: flex; flex-direction: column; gap: 12px; background: var(--bg-subtle); box-sizing: border-box;">
                        <h3 style="font-size: 13.5px; font-weight: 900; border-bottom: 1px solid var(--border); padding-bottom: 8px; margin: 0; display: flex; align-items: center; gap: 6px; color: var(--text-main);">
                            <i class="fa-solid fa-calculator" style="color: var(--primary);"></i> 
                            <span>حاسبة استبدال النقاط المباشرة</span>
                        </h3>

                        <!-- أزرار تبديل نمط الحاسبة -->
                        <div style="display: flex; gap: 6px; padding: 2px; border-radius: var(--radius-md); background: var(--bg-card); border: 1px solid var(--border);">
                            <button type="button" id="e1kue4bxi8" class="ipxi2jz4g0 vn5qn7dmpk" style="flex: 1; font-size: 10.5px; padding: 6px; border-radius: var(--radius-sm); height: auto; min-height: 28px;">
                                <i class="fa-solid fa-dollar-sign"></i> <span>تحديد بالدولار ($)</span>
                            </button>
                            <button type="button" id="oppazp520b" class="ipxi2jz4g0" style="flex: 1; font-size: 10.5px; padding: 6px; border-radius: var(--radius-sm); height: auto; min-height: 28px;">
                                <i class="fa-solid fa-coins"></i> <span>تحديد بنقاط FB & WA</span>
                            </button>
                        </div>

                        <!-- نمط تحديد المبلغ بالدولار -->
                        <div id="ssaw6xzw1u" style="display: flex; flex-direction: column; gap: 10px;">
                            <div class="d0uttwsjz2" style="margin: 0;">
                                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
                                    <label style="font-weight: 700; font-size: 11px; margin: 0;"><i class="fa-solid fa-money-bill-wave" style="color: #10b981;"></i> <span>المبلغ المراد شحنه بالدولار ($):</span></label>
                                    <span style="font-size: 9.5px; font-weight: 700; color: var(--text-muted); font-family: var(--font-code);">(من $1 لـ $10,000)</span>
                                </div>
                                <input type="number" id="jkfrigkx79" value="1" min="1" max="10000" step="1" style="width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); font-weight: 900; text-align: center; font-size: 15px; font-family: var(--font-code); background: var(--bg-card);">
                                <input type="range" id="d59w7te1vj" min="1" max="10000" step="10" value="1000" style="margin-top: 6px;">
                            </div>

                            <div style="background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px; display: flex; flex-direction: column; gap: 4px;">
                                <div style="display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 700; color: var(--text-secondary);">
                                    <span><i class="fa-brands fa-facebook" style="color: #1877f2;"></i> فيسبوك: <span id="qlifseac5g" style="font-family: var(--font-code);">50</span>% ($<span id="kh1jaojo84" style="font-family: var(--font-code);">500</span>)</span>
                                    <span><i class="fa-brands fa-whatsapp" style="color: #00a884;"></i> واتساب: <span id="vsgn1osooh" style="font-family: var(--font-code);">50</span>% ($<span id="fjb9lf7u6j" style="font-family: var(--font-code);">500</span>)</span>
                                </div>
                                <input type="range" id="e89vbjxky3" min="0" max="100" step="5" value="50" style="margin: 2px 0;">
                                <span style="font-size: 9.5px; text-align: center; color: var(--text-muted);"><i class="fa-solid fa-sliders"></i> <span>حرك السلايدر لتقسيم المبلغ بين المنصتين بحرية</span></span>
                            </div>
                        </div>

                        <!-- نمط تحديد كميات النقاط المباشرة -->
                        <div id="ijac87awiy" style="display: none; flex-direction: column; gap: 8px;">
                            <div class="d0uttwsjz2" style="margin: 0;">
                                <label style="font-weight: 700; font-size: 11px;"><i class="fa-brands fa-facebook" style="color: #1877f2;"></i> <span>نقاط فيسبوك المطلوبة (FB):</span></label>
                                <input type="number" id="ra4lnuh31g" value="0" min="0" max="20000000" step="2000" style="padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); font-weight: 900; text-align: center; font-size: 13px; font-family: var(--font-code); background: var(--bg-card);">
                            </div>
                            <div class="d0uttwsjz2" style="margin: 0;">
                                <label style="font-weight: 700; font-size: 11px;"><i class="fa-brands fa-whatsapp" style="color: #00a884;"></i> <span>نقاط واتساب المطلوبة (WA):</span></label>
                                <input type="number" id="obapd8lbcc" value="0" min="0" max="10000000" step="1000" style="padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); font-weight: 900; text-align: center; font-size: 13px; font-family: var(--font-code); background: var(--bg-card);">
                            </div>
                        </div>

                        <!-- ملخص الحسبة والتكلفة -->
                        <div style="background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;">
                            <div style="display: flex; justify-content: space-between; font-size: 11px;">
                                <span style="color: var(--text-muted);"><i class="fa-solid fa-money-bill-wave"></i> <span>التكلفة الإجمالية المطلوب خصمها:</span></span>
                                <strong id="xaaobpe28o" style="color: var(--text-main); font-size: 13px; font-family: var(--font-code);">$1,000.00</strong>
                            </div>
                            <div style="display: flex; justify-content: space-between; font-size: 10.5px; border-top: 1px dashed var(--border); padding-top: 4px;">
                                <span style="color: var(--text-muted);"><i class="fa-solid fa-percent"></i> <span>عمولة التحويل:</span></span>
                                <strong id="qtmqs3sswp" style="color: var(--text-muted);">تسعير مباشر</strong>
                            </div>
                            <div style="display: flex; justify-content: space-between; font-size: 10.5px; border-top: 1px dashed var(--border); padding-top: 4px;">
                                <span style="font-weight: 700; color: #1877f2;"><i class="fa-brands fa-facebook"></i> <span>إجمالي نقاط فيسبوك الصافية:</span></span>
                                <strong id="xl39vkuv1s" style="font-family: var(--font-code); color: #1877f2;">1,000,000 نقطة</strong>
                            </div>
                            <div style="display: flex; justify-content: space-between; font-size: 10.5px; border-top: 1px dashed var(--border); padding-top: 4px;">
                                <span style="font-weight: 700; color: #00a884;"><i class="fa-brands fa-whatsapp"></i> <span>إجمالي نقاط واتساب الصافية:</span></span>
                                <strong id="k7z19dhok1" style="font-family: var(--font-code); color: #00a884;">500,000 نقطة</strong>
                            </div>
                        </div>

                        <button type="button" id="fmkoglcexo" class="itdnt14mss" style="width: 100%; padding: 11px; font-weight: 800; font-size: 12.5px; border-radius: var(--radius-md);">
                            <i class="fa-solid fa-cart-check"></i> <span>إتمام وتأكيد الشراء الآن</span>
                        </button>
                    </div>

                    <!-- 2. شبكة باقات الشحن الترويجية -->
                    <div style="display: flex; flex-direction: column; gap: 10px;">
                        <div style="border-bottom: 1px solid var(--border); padding-bottom: 6px; margin: 0;">
                            <h3 style="font-size: 13.5px; font-weight: 900; margin: 0; display: flex; align-items: center; gap: 6px; color: var(--text-main);">
                                <i class="fa-solid fa-box-open" style="color: #f59e0b;"></i> 
                                <span>باقات الشحن الترويجية المعتمدة</span>
                            </h3>
                            <span style="font-size: 10px; margin-top: 2px; display: block; color: var(--text-muted); font-weight: 600;">
                                باقات شحن سريعة لفيسبوك وواتساب بقيم $500 و $1,000 وبسعر الشراء المباشر
                            </span>
                        </div>
                        <div id="cxvg048mcg" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 20vw, 1fr), 1fr)); gap: 10px; flex: 1;">
                        </div>
                    </div>
                </div>

                <!-- شريط التوجيه لمركز الدعم والشحن -->
                <div style="border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; background: var(--bg-subtle);">
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <div style="background: var(--bg-card); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; border: 1px solid var(--border); color: #d97706;">
                            <i class="fa-solid fa-headset"></i> 
                        </div>
                        <div style="text-align: right;">
                            <strong style="font-size: 11.5px; display: block; color: var(--text-main);">هل تحتاج شحن محفظتك بالدولار أو عبر إنستاباي وفودافون كاش؟</strong>
                            <span style="font-size: 10.5px; color: var(--text-muted);">تواصل مع الدعم الفني لشحن حسابك وتفعيل نقاطك في ثوانٍ.</span>
                        </div>
                    </div>
                    <button type="button" id="bcs0nsg7st" class="ipxi2jz4g0" style="font-size: 10.5px; padding: 6px 12px; font-weight: 800; min-height: 32px;">
                        <i class="fa-solid fa-comments"></i> <span>فتح مركز الدعم والشحن</span>
                    </button>
                </div>
            </div>
        `;
        contentArea.appendChild(pane);
    };

    /**
     * تحديث حاسبة النقاط التفاعلية
     */
    const updateInteractiveCalculator = () => {
        const config = global.FritreeStoreConfig;
        if (!config) return { totalCostUSD: 0, finalFbPoints: 0, finalWaPoints: 0 };

        const modeByUsdBtn = document.getElementById('e1kue4bxi8');
        const isUsdMode = modeByUsdBtn ? modeByUsdBtn.classList.contains('vn5qn7dmpk') : true;

        let totalCostUSD = 0;
        let baseFbPoints = 0;
        let baseWaPoints = 0;

        if (isUsdMode) {
            const usdInp = document.getElementById('jkfrigkx79');
            const usdSlider = document.getElementById('d59w7te1vj');
            const splitSlider = document.getElementById('e89vbjxky3');

            let usdVal = parseFloat(usdInp?.value) || 0.01;
            if (usdVal < 0.01) usdVal = 0.01; 
            if (usdVal > 10000) usdVal = 10000;
            totalCostUSD = usdVal;

            if (usdSlider) usdSlider.value = Math.min(10000, usdVal);

            const fbPct = parseInt(splitSlider?.value || '50', 10);
            const waPct = 100 - fbPct;
            const fbUsd = (totalCostUSD * fbPct) / 100;
            const waUsd = (totalCostUSD * waPct) / 100;

            const lblFbPct = document.getElementById('qlifseac5g');
            const lblFbUsd = document.getElementById('kh1jaojo84');
            const lblWaPct = document.getElementById('vsgn1osooh');
            const lblWaUsd = document.getElementById('fjb9lf7u6j');

            if (lblFbPct) lblFbPct.textContent = fbPct.toLocaleString('en-US');
            if (lblFbUsd) lblFbUsd.textContent = fbUsd.toFixed(2);
            if (lblWaPct) lblWaPct.textContent = waPct.toLocaleString('en-US');
            if (lblWaUsd) lblWaUsd.textContent = waUsd.toFixed(2);

            baseFbPoints = Math.round(fbUsd * config.EXCHANGE_RATES.FB);
            baseWaPoints = Math.round(waUsd * config.EXCHANGE_RATES.WA);
        } else {
            const fbPtsInp = document.getElementById('ra4lnuh31g');
            const waPtsInp = document.getElementById('obapd8lbcc');

            baseFbPoints = Math.max(0, parseInt(fbPtsInp?.value, 10) || 0);
            baseWaPoints = Math.max(0, parseInt(waPtsInp?.value, 10) || 0);

            const fbCost = baseFbPoints / config.EXCHANGE_RATES.FB;
            const waCost = baseWaPoints / config.EXCHANGE_RATES.WA;
            totalCostUSD = fbCost + waCost;

            if (totalCostUSD > 10000) totalCostUSD = 10000;
        }

        const finalFbPoints = baseFbPoints;
        const finalWaPoints = baseWaPoints;

        const summaryCost = document.getElementById('xaaobpe28o');
        const summaryBonusPct = document.getElementById('qtmqs3sswp');
        const summaryFbTotal = document.getElementById('xl39vkuv1s');
        const summaryWaTotal = document.getElementById('k7z19dhok1');

        if (summaryCost) summaryCost.innerHTML = `<i class="fa-solid fa-dollar-sign"></i> <span>$${totalCostUSD.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>`;
        if (summaryBonusPct) {
            summaryBonusPct.innerHTML = `<i class="fa-solid fa-tag"></i> <span>تسعير مباشر</span>`;
            summaryBonusPct.style.color = "var(--text-muted)";
        }
        if (summaryFbTotal) {
            summaryFbTotal.innerHTML = `<i class="fa-brands fa-facebook"></i> <span>${finalFbPoints.toLocaleString('en-US')} نقطة</span>`;
        }
        if (summaryWaTotal) {
            summaryWaTotal.innerHTML = `<i class="fa-brands fa-whatsapp"></i> <span>${finalWaPoints.toLocaleString('en-US')} نقطة</span>`;
        }

        return {
            totalCostUSD,
            finalFbPoints,
            finalWaPoints
        };
    };

    /**
     * تنفيذ شراء النقاط المخصصة من الحاسبة
     */
    async function executeCustomCalculatorExchange() {
        const config = global.FritreeStoreConfig;
        const calcData = updateInteractiveCalculator();
        const usdCost = calcData.totalCostUSD;

        if (usdCost < 0.01) {
            alert("تنبيه: الحد الأدنى للشراء هو $0.01 (1 سنت)!");
            return;
        }
        if (usdCost > 10000.00) {
            alert("تنبيه: الحد الأقصى للشراء في المرة الواحدة هو $10,000.00 دولار!");
            return;
        }

        const activeBalance = global.FritreeAppState ? global.FritreeAppState.getPoints() : 0.00;
        if (activeBalance < usdCost) {
            alert(`رصيد محفظتك المتاح ($${activeBalance.toFixed(2)}) غير كافٍ لإتمام الشراء بتكلفة $${usdCost.toFixed(2)}.\n\nيرجى شحن محفظتك أولاً بالدولار.`);
            return;
        }

        const fbPts = calcData.finalFbPoints;
        const waPts = calcData.finalWaPoints;

        let promptMsg = `تأكيد الشراء المباشر للنقاط:\n\nالتكلفة الإجمالية: $${usdCost.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}\n`;
        if (fbPts > 0) promptMsg += `- فيسبوك: +${fbPts.toLocaleString('en-US')}\n`;
        if (waPts > 0) promptMsg += `- واتساب: +${waPts.toLocaleString('en-US')}\n`;
        promptMsg += `\nهل تريد تأكيد العملية والخصم من المحفظة؟`;

        if (confirm(promptMsg)) {
            const descDeduct = `شراء مباشر من المتجر عبر الحاسبة التفاعلية: -$${usdCost.toFixed(2)}`;
            const success = await global.FritreeAppState.deductPoints(usdCost, descDeduct);

            if (success) {
                const balanceAfterTx = activeBalance - usdCost;
                const computedSignature = await config.calculateExchangeSignature('combo', fbPts + waPts, usdCost, balanceAfterTx);
                if (global.FritreeStorage) {
                    await global.FritreeStorage.set('last_exchange_receipt_sig', computedSignature);
                }

                if (fbPts > 0) {
                    const descFb = `شحن نقاط فيسبوك من المتجر: +${fbPts.toLocaleString('en-US')}`;
                    await global.FritreeAppState.addFbCards(fbPts, descFb);
                }
                if (waPts > 0) {
                    const descWa = `شحن نقاط واتساب من المتجر: +${waPts.toLocaleString('en-US')}`;
                    await global.FritreeAppState.addWaCards(waPts, descWa);
                }

                await global.FritreeAppState.saveAccountData();
                if (global.FritreeShellLayout) global.FritreeShellLayout.updatePointsUI();

                const successMsg = `تم الشراء بنجاح!\nتم شحن الأرصدة لمحفظتك الموحدة فوراً.`;
                alert(successMsg);

                if (typeof window.addLog === 'function') {
                    window.addLog(successMsg, 'success');
                }
                if (global.FritreeWallet && typeof global.FritreeWallet.renderLedgerTable === 'function') {
                    await global.FritreeWallet.renderLedgerTable();
                }
            } else {
                alert("خطأ: تعثر خصم الرصيد من المحفظة.");
            }
        }
    }

    /**
     * رسم بطاقات باقات الشحن الترويجية المعتمدة
     */
    const renderAllPromoPackagesGrid = () => {
        const config = global.FritreeStoreConfig;
        const container = document.getElementById('cxvg048mcg');
        if (!container || !config || !config.ALL_PROMO_PACKAGES) return;
        container.innerHTML = '';

        config.ALL_PROMO_PACKAGES.forEach(pkg => {
            const card = document.createElement('div');
            card.className = 'xs53x0rzq7 zcjbe1otmg';
            card.style.cssText = `
                background: var(--bg-card);
                border: 1px solid var(--border);
                border-radius: var(--radius-lg);
                padding: 14px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                text-align: right;
                direction: rtl;
                position: relative;
                box-shadow: var(--shadow-xs);
                box-sizing: border-box;
            `;

            const topRow = document.createElement('div');
            topRow.style.cssText = 'display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;';
            topRow.innerHTML = `
                <strong style="font-size: 12px; display: flex; align-items: center; gap: 5px; color: var(--text-main);">
                    <i class="${pkg.icon || (pkg.platform === 'fb' ? 'fa-brands fa-facebook' : 'fa-brands fa-whatsapp')}" style="color: ${pkg.color}; font-size: 14px;"></i> 
                    <span>${pkg.name}</span>
                </strong>
                <span style="font-size: 9px; font-weight: 800; background: var(--bg-subtle); padding: 2px 8px; border-radius: var(--radius-pill); border: 1px solid var(--border); display: inline-flex; align-items: center; gap: 4px; color: ${pkg.color};">
                    <i class="fa-solid fa-ribbon"></i> <span>${pkg.badge}</span>
                </span>
            `;

            const midRow = document.createElement('div');
            midRow.style.cssText = 'margin-bottom: 12px; text-align: right;';
            midRow.innerHTML = `
                <div style="font-size: 18px; color: ${pkg.color}; font-weight: 900; font-family: var(--font-code); margin-bottom: 2px; display: flex; align-items: center; gap: 4px;">
                    <i class="fa-solid fa-tag" style="font-size: 13px;"></i> <span>$${pkg.cost.toLocaleString('en-US', { minimumFractionDigits: 2 })}</span>
                </div>
                <strong style="font-size: 12px; color: var(--text-main); display: flex; align-items: center; gap: 4px; font-weight: 800;">
                    <i class="fa-solid fa-circle-check" style="color: var(--success);"></i>
                    <span style="font-family: var(--font-code);">+${pkg.totalPoints.toLocaleString('en-US')}</span> 
                    <span style="font-size: 9.5px; font-weight: 700; color: var(--text-muted);">نقطة إرسال صافية</span>
                </strong>
                <span style="font-size: 9.5px; display: block; margin-top: 4px; line-height: 1.4; font-weight: 600; color: var(--text-muted);"><i class="fa-solid fa-info-circle"></i> ${pkg.desc}</span>
            `;

            const buyBtn = document.createElement('button');
            buyBtn.type = 'button';
            buyBtn.className = 'itdnt14mss';
            buyBtn.style.cssText = `width: 100%; padding: 8px; font-size: 11px; font-weight: 800; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer; min-height: 32px;`;
            buyBtn.innerHTML = `<i class="fa-solid fa-bolt"></i> <span>شراء وتفعيل الحزمة الآن</span>`;
            buyBtn.onclick = () => executeDirectPackagePurchase(pkg);

            card.appendChild(topRow);
            card.appendChild(midRow);
            card.appendChild(buyBtn);
            container.appendChild(card);
        });
    };

    /**
     * تنفيذ الشراء المباشر للباقة الترويجية
     * @param {Object} pkg 
     */
    async function executeDirectPackagePurchase(pkg) {
        if (!pkg) return;
        const config = global.FritreeStoreConfig;
        const usdCost = parseFloat(pkg.cost) || 0.00;
        const activeBalance = global.FritreeAppState ? global.FritreeAppState.getPoints() : 0.00;

        if (activeBalance < usdCost) {
            alert(`رصيد محفظتك المتاح ($${activeBalance.toFixed(2)}) غير كافٍ لشراء ${pkg.name} بتكلفة $${usdCost.toLocaleString('en-US')}.\n\nيرجى شحن محفظتك أولاً.`);
            return;
        }

        if (confirm(`تأكيد الشراء:\n\nهل أنت متأكد من خصم $${usdCost.toLocaleString('en-US')} من المحفظة لشراء "${pkg.name}" وإضافة +${pkg.totalPoints.toLocaleString('en-US')} نقطة لحسابك؟`)) {
            const descDeduct = `شراء وتفعيل حزمة [${pkg.name}]: -$${usdCost.toLocaleString('en-US')}`;
            const success = await global.FritreeAppState.deductPoints(usdCost, descDeduct);

            if (success) {
                const balanceAfterTx = activeBalance - usdCost;
                if (config && typeof config.calculateExchangeSignature === 'function') {
                    const computedSignature = await config.calculateExchangeSignature(pkg.platform, pkg.totalPoints, usdCost, balanceAfterTx);
                    if (global.FritreeStorage) {
                        await global.FritreeStorage.set('last_exchange_receipt_sig', computedSignature);
                    }
                }

                if (pkg.platform === 'fb') {
                    const descFb = `شحن نقاط فيسبوك من حزمة [${pkg.name}]: +${pkg.totalPoints.toLocaleString('en-US')}`;
                    await global.FritreeAppState.addFbCards(pkg.totalPoints, descFb);
                } else if (pkg.platform === 'wa') {
                    const descWa = `شحن نقاط واتساب من حزمة [${pkg.name}]: +${pkg.totalPoints.toLocaleString('en-US')}`;
                    await global.FritreeAppState.addWaCards(pkg.totalPoints, descWa);
                }

                await global.FritreeAppState.saveAccountData();
                if (global.FritreeShellLayout) global.FritreeShellLayout.updatePointsUI();

                const successMsg = `تم تفعيل الحزمة بنجاح!\nتم إضافة +${pkg.totalPoints.toLocaleString('en-US')} نقطة لحسابك فوراً.`;
                alert(successMsg);

                if (typeof window.addLog === 'function') {
                    window.addLog(successMsg, 'success');
                }
                if (global.FritreeWallet && typeof global.FritreeWallet.renderLedgerTable === 'function') {
                    await global.FritreeWallet.renderLedgerTable();
                }
            } else {
                alert("حدث خطأ غير متوقع أثناء محاولة خصم الأرصدة من المحفظة.");
            }
        }
    }

    /**
     * ربط أحداث متجر النقاط
     */
    const bindStoreEvents = () => {
        const btnByUsd = document.getElementById('e1kue4bxi8');
        const btnByPts = document.getElementById('oppazp520b');
        const containerUsdMode = document.getElementById('ssaw6xzw1u');
        const containerPtsMode = document.getElementById('ijac87awiy');

        if (btnByUsd && btnByPts) {
            btnByUsd.onclick = () => {
                btnByUsd.classList.add('vn5qn7dmpk');
                btnByPts.classList.remove('vn5qn7dmpk');
                if (containerUsdMode) containerUsdMode.style.display = 'flex';
                if (containerPtsMode) containerPtsMode.style.display = 'none';
                updateInteractiveCalculator();
            };

            btnByPts.onclick = () => {
                btnByPts.classList.add('vn5qn7dmpk');
                btnByUsd.classList.remove('vn5qn7dmpk');
                if (containerPtsMode) containerPtsMode.style.display = 'flex';
                if (containerUsdMode) containerUsdMode.style.display = 'none';
                updateInteractiveCalculator();
            };
        }

        const usdInp = document.getElementById('jkfrigkx79');
        const usdSlider = document.getElementById('d59w7te1vj');
        const splitSlider = document.getElementById('e89vbjxky3');

        if (usdInp) {
            usdInp.oninput = () => {
                let val = parseFloat(usdInp.value) || 0.01;
                if (val > 10000) val = 10000;
                usdInp.value = val;
                updateInteractiveCalculator();
            };
            usdInp.onchange = updateInteractiveCalculator;
        }

        if (usdSlider) {
            usdSlider.oninput = (e) => {
                if (usdInp) usdInp.value = parseFloat(e.target.value);
                updateInteractiveCalculator();
            };
        }

        if (splitSlider) {
            splitSlider.oninput = updateInteractiveCalculator;
        }

        const fbPtsInp = document.getElementById('ra4lnuh31g');
        const waPtsInp = document.getElementById('obapd8lbcc');

        if (fbPtsInp) fbPtsInp.oninput = updateInteractiveCalculator;
        if (waPtsInp) waPtsInp.oninput = updateInteractiveCalculator;

        const executeExchangeBtn = document.getElementById('fmkoglcexo');
        if (executeExchangeBtn) {
            executeExchangeBtn.onclick = executeCustomCalculatorExchange;
        }

        const btnGoSupport = document.getElementById('bcs0nsg7st');
        if (btnGoSupport) {
            btnGoSupport.onclick = () => {
                window.location.hash = 'xrsxtjzo87';
            };
        }
    };

    /**
     * تهيئة وحدة متجر النقاط
     */
    const initStoreModule = () => {
        const sidebar = document.getElementById('bmh59axx92');
        const mainContentArea = document.getElementById('s7ihkirolg');
        if (!sidebar || !mainContentArea) return false;

        buildStorePane();
        bindStoreEvents();
        renderAllPromoPackagesGrid();
        updateInteractiveCalculator();
        return true;
    };

    /**
     * تصدير وحدة واجهة المتجر
     */
    global.FritreeStore = {
        init: initStoreModule,
        buyPackage: executeDirectPackagePurchase,
        updateCalculator: updateInteractiveCalculator,
        packages: global.FritreeStoreConfig?.ALL_PROMO_PACKAGES || []
    };

    if (typeof document !== 'undefined') {
        if (!initStoreModule()) {
            document.addEventListener('DOMContentLoaded', initStoreModule);
            window.addEventListener('load', initStoreModule);
        }
    }

})(typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : this);