support-ui.js

/**

 * @fileoverview Support Helpdesk, Currency Exchange Calculator & Payment Gateways UI Engine

 * @module ui/support-ui

 * @description واجهة مركز الدعم المباشر، حاسبة تحويل العملات المباشرة، بوابات الدفع والتحويل البنكي، وتوليد تذاكر الشحن الموثقة.

 */

(global => {
    'use strict';

    const SUPPORT_SALT = global.FritreeAppConstants?.SECURITY_SALTS?.SUPPORT_SALT || 
        "FritreeSupportHelpdeskSymmetricValidationMatrix_2026_StrictSecure";

    /**

     * حساب التوقيع الرقمي لسلامة بيانات الدعم الفني

     * @param {string} accountId 

     * @returns {Promise<string>}

     */
    async function calculateSupportSignature(accountId) {
        const payloadText = `SUPPORT_HELP:${accountId}:${SUPPORT_SALT}`;
        if (global.FritreeCrypto && typeof global.FritreeCrypto.sha256 === 'function') {
            return await global.FritreeCrypto.sha256(payloadText);
        }
        let hash = 0;
        for (let i = 0; i < payloadText.length; i++) {
            const char = payloadText.charCodeAt(i);
            hash = ((hash << 5) - hash) + char;
            hash |= 0;
        }
        return "support_sig_fallback_" + Math.abs(hash).toString(16);
    }

    /**

     * بناء الهيكل البصري لقسم الدعم الفني وحاسبة العملات وبوابات الدفع بالـ DOM

     */
    const buildSupportLayout = () => {
        const contentArea = document.getElementById('s7ihkirolg');
        if (!contentArea) return;

        const sidebar = document.getElementById('bmh59axx92');
        if (sidebar && !sidebar.querySelector('[data-target="xrsxtjzo87"]')) {
            const navItem = document.createElement('div');
            navItem.className = 'f2rj8bz2yt';
            navItem.setAttribute('data-target', 'xrsxtjzo87');
            navItem.innerHTML = '<i class="fa-solid fa-headset"></i> <span>الدعم والشحن المالي</span>';
            sidebar.appendChild(navItem);
            navItem.addEventListener('click', () => {
                window.location.hash = 'xrsxtjzo87';
            });
        }

        const host = document.getElementById('fritree-dynamic-panes-host') || contentArea;
        let pane = document.getElementById('xrsxtjzo87');
        if (!pane) {
            pane = document.createElement('section');
            pane.className = 'rjiai07g77';
            pane.id = 'xrsxtjzo87';
            host.appendChild(pane);
        } else if (pane.parentElement !== host) {
            host.appendChild(pane);
        }

        let grid = pane.querySelector('#ovnw7b9lmg');
        if (!grid) {
            grid = document.createElement('div');
            grid.id = 'ovnw7b9lmg';
            grid.className = 'xd506q5mar';
            grid.style.cssText = 'display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 35vw, 1fr), 1fr)); gap: 14px; margin-bottom: 16px; direction: rtl; width: 100%; box-sizing: border-box;';
            pane.appendChild(grid);
        }

        // 1. العمود الأول: مركز الدعم الفني وشات الواتساب
        let supportCol = grid.querySelector('#chtnqegnou');
        if (!supportCol) {
            supportCol = document.createElement('div');
            supportCol.className = 'd5tp7way8h';
            supportCol.id = 'chtnqegnou';
            supportCol.style.cssText = 'padding: clamp(14px, 1.8vw, 22px); display: flex; flex-direction: column; height: 100%; direction: rtl; text-align: right; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); box-sizing: border-box;';
            supportCol.innerHTML = `

                <div class="cm41ch7urz" style="border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; direction: rtl; flex-wrap: wrap; gap: 6px;">

                    <span style="font-size: 14.5px; font-weight: 900; display: flex; align-items: center; gap: 8px; color: var(--text-main);">

                        <i class="fa-solid fa-headset" style="color: #d97706;"></i> 

                        <span>مركز الدعم الفني والشحن الفوري</span>

                    </span>

                    <span style="font-size: 9.5px; font-weight: 800; padding: 2px 8px; border-radius: var(--radius-pill); border: 1px solid var(--success-border); background: var(--success-light); color: var(--success-hover); display: inline-flex; align-items: center; gap: 4px;">

                        <i class="fa-solid fa-clock-rotate-left"></i> <span>خدمة 24/7 متواصلة</span>

                    </span>

                </div>

                <p style="font-size: 11.5px; color: var(--text-muted); margin-bottom: 14px; line-height: 1.5; text-align: right; font-weight: 600;">

                    <i class="fa-solid fa-comment-sms" style="color: var(--primary); margin-left: 4px;"></i> 

                    <span>فريق الدعم المخصص متاح على مدار الساعة للإجابة على استفساراتك وتأكيد شحن أرصدة المحفظة ونقاط النشر والبث فورياً.</span>

                </p>

                <div style="display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px;">

                    <div>

                        <label style="font-size: 11px; font-weight: 700; margin-bottom: 4px; display: block; color: var(--text-secondary);"><i class="fa-brands fa-whatsapp" style="color: var(--wa-brand);"></i> <span>رقم الواتساب المباشر للدعم والشحن:</span></label>

                        <div style="font-size: 14px; font-weight: 700; border: 1px solid var(--border); padding: 10px 14px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: space-between; gap: 8px; direction: ltr; background: var(--bg-subtle);">

                            <span style="display: flex; align-items: center; gap: 8px; font-family: var(--font-code); color: var(--text-main);">

                                <i class="fa-brands fa-whatsapp fa-lg" style="color: var(--wa-brand);"></i> <span>+201096896689</span>

                            </span>

                            <span style="font-size: 9.5px; font-weight: 800; padding: 2px 8px; border-radius: var(--radius-pill); border: 1px solid var(--success-border); background: var(--success-light); color: var(--success-hover); display: inline-flex; align-items: center; gap: 4px; direction: rtl;">

                                <span style="display: inline-block; width: 6px; height: 6px; background: var(--success); border-radius: 50%;"></span>

                                <span>متصل الآن</span>

                            </span>

                        </div>

                    </div>

                    <div>

                        <label style="font-size: 11px; font-weight: 700; margin-bottom: 4px; display: block; color: var(--text-secondary);"><i class="fa-solid fa-id-card" style="color: var(--primary);"></i> <span>كود جهازك الموثق (128 حرف):</span></label>

                        <div style="display: flex; gap: 6px; align-items: center; direction: ltr;">

                            <input type="text" id="an7xl5rgcc" readonly style="flex: 1; padding: 8px 10px; font-size: 9.5px; font-weight: 700; font-family: var(--font-code); border: 1px solid var(--border); border-radius: var(--radius-md); text-align: left; background: var(--bg-subtle);" value="جاري جلب كود الجهاز الرقمي...">

                            <button id="zayjah9bha" class="ipxi2jz4g0" style="padding: 8px 12px; min-height: 36px; border-radius: var(--radius-md);" title="نسخ كود الجهاز"><i class="fa-solid fa-copy" style="margin:0;"></i> </button>

                        </div>

                    </div>

                </div>

                <button id="t7zdv53427" class="itdnt14mss" style="width: 100%; margin-top: auto; padding: 12px; font-size: 12.5px; font-weight: 800; display: flex; justify-content: center; align-items: center; gap: 6px; border-radius: var(--radius-md); background: var(--wa-brand); border-color: var(--wa-brand);">

                    <i class="fa-brands fa-whatsapp" style="font-size: 16px;"></i> 

                    <span>بدء محادثة واتساب مباشرة مع الدعم والشحن</span>

                </button>

            `;
            grid.appendChild(supportCol);
        }

        // 2. العمود الثاني: حاسبة تحويل العملات وتوليد تذاكر الشحن الموثقة
        let calcCol = grid.querySelector('#p266i7uuqq');
        if (!calcCol) {
            calcCol = document.createElement('div');
            calcCol.className = 'd5tp7way8h';
            calcCol.id = 'p266i7uuqq';
            calcCol.style.cssText = 'padding: clamp(14px, 1.8vw, 22px); display: flex; flex-direction: column; height: 100%; direction: rtl; text-align: right; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); box-sizing: border-box;';
            calcCol.innerHTML = `

                <div class="cm41ch7urz" style="border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; direction: rtl; flex-wrap: wrap; gap: 6px;">

                    <span style="font-size: 14.5px; font-weight: 900; display: flex; align-items: center; gap: 8px; color: var(--text-main);">

                        <i class="fa-solid fa-calculator" style="color: var(--primary);"></i> 

                        <span>حاسبة العملات وتوليد تذاكر الشحن</span>

                    </span>

                    <button type="button" id="btn-refresh-live-rates" class="ipxi2jz4g0" style="font-size: 10px; padding: 4px 8px; border-radius: var(--radius-sm); font-weight: 700; min-height: 28px;" title="تحديث أسعار الصرف الحية">

                        <i class="fa-solid fa-rotate" id="fl89095b2h" style="margin-left: 3px;"></i> <span>تحديث الأسعار</span>

                    </button>

                </div>



                <div id="nz4u9dnl2a" style="font-size: 10px; font-weight: 700; background: var(--bg-subtle); padding: 6px 10px; border-radius: var(--radius-md); border: 1px solid var(--border); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; color: var(--text-secondary);">

                    <i class="fa-solid fa-circle-check" style="color: var(--success);"></i> <span>جاري جلب أحدث أسعار الصرف العالمية الحية...</span>

                </div>



                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 10px;">

                    <div class="d0uttwsjz2" style="margin: 0;">

                        <label style="font-weight: 700; font-size: 11px;"><i class="fa-solid fa-money-bill-transfer"></i> <span>العملة المحولة:</span></label>

                        <select id="nakt4bs0fk" class="xy26ymifmf" style="padding: 7px 10px; font-weight: 700;">

                            <option value="EGP" selected>جنيه مصري (EGP)</option>

                            <option value="USD">دولار أمريكي (USD)</option>

                            <option value="SAR">ريال سعودي (SAR)</option>

                            <option value="AED">درهم إماراتي (AED)</option>

                            <option value="QAR">ريال قطري (QAR)</option>

                            <option value="EUR">يورو (EUR)</option>

                            <option value="GBP">جنيه إسترليني (GBP)</option>

                            <option value="KWD">دينار كويتي (KWD)</option>

                            <option value="CAD">دولار كندي (CAD)</option>

                            <option value="AUD">دولار أسترالي (AUD)</option>

                            <option value="CHF">فرنك سويسري (CHF)</option>

                        </select>

                    </div>

                    <div class="d0uttwsjz2" style="margin: 0;">

                        <label style="font-weight: 700; font-size: 11px;"><i class="fa-solid fa-coins"></i> <span>المبلغ المحلي:</span></label>

                        <input type="number" id="rjr8i1f9f3" value="5000" min="1" step="10" class="xy26ymifmf" style="padding: 7px 10px; text-align: center; font-weight: 900; font-size: 14px; font-family: var(--font-code);">

                    </div>

                </div>



                <!-- سعر الصرف الحي -->

                <div style="background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 12px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; font-weight: 700; color: var(--text-secondary);">

                    <span><i class="fa-solid fa-chart-line" style="color: var(--primary);"></i> <span>سعر الصرف المباشر:</span></span>

                    <span id="gw1x4qf392" style="direction: ltr; font-family: var(--font-code); color: var(--text-main);">1 USD = 50.00 EGP</span>

                </div>



                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 14px;">

                    <div class="d0uttwsjz2" style="margin: 0;">

                        <label style="font-weight: 700; font-size: 11px;"><i class="fa-solid fa-wallet"></i> <span>المستلم بالمحفظة:</span></label>

                        <select id="d0iuamglk9" class="xy26ymifmf" style="padding: 7px 10px; font-weight: 700;">

                            <option value="USD" selected>دولار أمريكي (USD)</option>

                            <option value="EGP">جنيه مصري (EGP)</option>

                            <option value="SAR">ريال سعودي (SAR)</option>

                            <option value="AED">درهم إماراتي (AED)</option>

                            <option value="EUR">يورو (EUR)</option>

                        </select>

                    </div>

                    <div class="d0uttwsjz2" style="margin: 0;">

                        <label style="font-weight: 700; font-size: 11px;"><i class="fa-solid fa-hand-holding-dollar"></i> <span>صافي الرصيد ($):</span></label>

                        <input type="number" id="ln7azkypv1" value="100.00" min="1" step="1" class="xy26ymifmf" style="padding: 7px 10px; text-align: center; font-weight: 900; font-size: 14px; font-family: var(--font-code); color: var(--success);">

                    </div>

                </div>



                <button type="button" id="btn-generate-purchase-ticket" class="itdnt14mss" style="width: 100%; margin-top: auto; padding: 12px; font-size: 12px; font-weight: 800; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; gap: 6px;">

                    <i class="fa-solid fa-file-invoice-dollar"></i> 

                    <span>توليد تذكرة شحن وتأكيد رصيد موثقة على الواتساب</span>

                </button>

            `;
            grid.appendChild(calcCol);
        }

        buildGatewaysLayout(pane);
    };

    /**

     * بناء قسم بوابات الدفع البنكية والمحافظ الإلكترونية

     */
    const buildGatewaysLayout = (pane) => {
        let gatewaysCard = pane.querySelector('#j85twrlin1');
        if (gatewaysCard) return;

        gatewaysCard = document.createElement('div');
        gatewaysCard.className = 'd5tp7way8h';
        gatewaysCard.id = 'j85twrlin1';
        gatewaysCard.style.cssText = 'padding: clamp(14px, 1.8vw, 24px); margin-top: 14px; direction: rtl; text-align: right; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); box-sizing: border-box;';
        gatewaysCard.innerHTML = `

            <div class="cm41ch7urz" style="border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; width: 100%; direction: rtl; flex-wrap: wrap; gap: 6px;">

                <span style="font-size: 14.5px; font-weight: 900; display: flex; align-items: center; gap: 8px; color: var(--text-main);">

                    <i class="fa-solid fa-building-columns" style="color: var(--primary);"></i> 

                    <span>طرق الدفع والتحويل المعتمدة لشحن المحفظة</span>

                </span>

                <span style="font-size: 10.5px; font-weight: 700; color: var(--success); display: flex; align-items: center; gap: 4px;">

                    <i class="fa-solid fa-shield-halved"></i> 

                    <span>حساب معتمد وموثق</span>

                </span>

            </div>



            <!-- تبويبات طرق الدفع -->

            <div class="pfe6btieb6" style="margin-bottom: 14px;">

                <div class="n9cqm6ze7d vn5qn7dmpk" id="bnm76w554q" style="flex: 1; text-align: center;" data-wallet-sub="p7clpd6ekl">

                    <i class="fa-solid fa-building-columns"></i> <span>التحويل البنكي</span>

                </div>

                <div class="n9cqm6ze7d" id="s0savkddt1" style="flex: 1; text-align: center;" data-wallet-sub="de5zx14cj5">

                    <i class="fa-solid fa-mobile-screen-button"></i> <span>إنستاباي</span>

                </div>

                <div class="n9cqm6ze7d" id="e6s5hu1kwh" style="flex: 1; text-align: center;" data-wallet-sub="io4or4ksqt">

                    <i class="fa-solid fa-wallet"></i> <span>محفظة رقمية</span>

                </div>

            </div>



            <!-- 1. التحويل البنكي CIB -->

            <div id="p7clpd6ekl" class="gitkevh3xv" style="display: block; direction: rtl; text-align: right;">

                <p style="font-size: 11.5px; color: var(--text-muted); margin-bottom: 12px; font-weight: 600;">

                    <i class="fa-solid fa-circle-info" style="color: var(--primary); margin-left: 4px;"></i> 

                    <span>تحويل بنكي مباشر لحسابنا في البنك التجاري الدولي (CIB). اختر عملة التحويل بالأسفل لنسخ رقم الحساب المخصص.</span>

                </p>

                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 25vw, 1fr), 1fr)); gap: 12px; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; background: var(--bg-subtle);">

                    <div class="d0uttwsjz2" style="margin: 0;">

                        <label style="font-weight: 700; font-size: 11px; margin-bottom: 4px;"><i class="fa-solid fa-coins"></i> <span>عملة التحويل البنكي:</span></label>

                        <select id="guxwjyecsq" class="xy26ymifmf" style="padding: 8px 10px; font-weight: 700;">

                            <option value="AUD">دولار أسترالي (AUD)</option>

                            <option value="CAD">دولار كندي (CAD)</option>

                            <option value="EGP" selected>جنيه مصري (EGP)</option>

                            <option value="EUR">يورو (EUR)</option>

                            <option value="GBP">جنيه إسترليني (GBP)</option>

                            <option value="QAR">ريال قطري (QAR)</option>

                            <option value="SAR">ريال سعودي (SAR)</option>

                            <option value="CHF">فرنك سويسري (CHF)</option>

                            <option value="AED">درهم إماراتي (AED)</option>

                            <option value="USD">دولار أمريكي (USD)</option>

                        </select>

                        <div id="mwgyafhyi4" style="margin-top: 6px; font-size: 9.5px; font-weight: 700; padding: 4px 8px; border-radius: var(--radius-sm); border: 1px solid var(--success-border); background: var(--success-light); color: var(--success-hover); display: flex; align-items: center; gap: 4px;">

                            <i class="fa-solid fa-circle-check"></i> 

                            <span id="g4zn4yhcp4">تحويل مباشر بسعر الصرف الرسمي وبدون أي عمولة</span>

                        </div>

                    </div>

                    <div style="display: flex; flex-direction: column; gap: 6px; border-right: 1px dashed var(--border); padding-right: 14px;" id="p78oq51sn0">

                        <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed var(--border); padding-bottom: 4px; font-size: 11px;">

                            <span style="font-weight: 700; color: var(--text-muted);"><i class="fa-solid fa-building"></i> <span>البنك المستلم:</span></span>

                            <strong style="font-size: 11.5px; color: var(--text-main);">البنك التجاري الدولي (CIB - Egypt)</strong>

                        </div>

                        <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed var(--border); padding-bottom: 4px; font-size: 11px;">

                            <span style="font-weight: 700; color: var(--text-muted);"><i class="fa-solid fa-user"></i> <span>اسم صاحب الحساب:</span></span>

                            <strong style="font-size: 10.5px; font-family: var(--font-sans); color: var(--text-main);" id="xrlai2qd42">Mohamed Ahmed Mohamed Farouk</strong>

                        </div>

                        <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 2px; font-size: 11px; flex-wrap: wrap; gap: 6px;">

                            <span style="font-weight: 700; color: var(--text-muted);"><i class="fa-solid fa-hashtag"></i> <span>رقم الحساب للنسخ:</span></span>

                            <div style="display: flex; gap: 6px; align-items: center; direction: ltr;">

                                <input type="text" id="jfjeb63r79" readonly style="padding: 4px 8px; font-size: 12px; font-weight: 900; font-family: var(--font-code); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); width: 140px; text-align: center;" value="100054187089">

                                <button id="ucfq23zy85" class="ipxi2jz4g0" style="padding: 4px 8px; min-height: 28px; border-radius: var(--radius-sm);" title="نسخ رقم الحساب البنكي"><i class="fa-solid fa-copy" style="margin: 0;"></i> </button>

                            </div>

                        </div>

                        <div style="margin-top: 4px; text-align: left; direction: ltr;">

                            <button type="button" id="cs0slpgdna" class="ipxi2jz4g0" style="font-size: 9.5px; padding: 3px 8px; min-height: 26px; height: auto; font-weight: 700; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 4px;">

                                <i class="fa-solid fa-calculator" style="color: var(--primary);"></i> <span>مزامنة مع حاسبة الصرف</span>

                            </button>

                        </div>

                    </div>

                </div>

            </div>



            <!-- 2. تحويل إنستاباي -->

            <div id="de5zx14cj5" class="gitkevh3xv" style="display: none; direction: rtl; text-align: right;">

                <p style="font-size: 11.5px; color: var(--text-muted); margin-bottom: 12px; font-weight: 600;">

                    <i class="fa-solid fa-circle-info" style="color: var(--primary); margin-left: 4px;"></i> 

                    <span>تحويل مالي فوري وبدون عمولات لعنوان حسابنا على تطبيق إنستاباي أو رقم الموبايل المخصص.</span>

                </p>

                <div style="display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; background: var(--bg-subtle);">

                    <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed var(--border); padding-bottom: 6px; font-size: 11px;">

                        <span style="font-weight: 700; color: var(--text-muted);"><i class="fa-solid fa-bolt" style="color: #8b5cf6;"></i> <span>شبكة التحويل:</span></span>

                        <strong style="font-size: 11.5px; color: var(--text-main);">إنستاباي مصر (Instapay Egypt)</strong>

                    </div>

                    <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed var(--border); padding-bottom: 6px; font-size: 11px;">

                        <span style="font-weight: 700; color: var(--text-muted);"><i class="fa-solid fa-user"></i> <span>اسم المستلم:</span></span>

                        <strong style="font-size: 11px; font-family: var(--font-sans); color: var(--text-main);">Mohamed Ahmed Mohamed Farouk</strong>

                    </div>

                    <div style="display: flex; justify-content: space-between; align-items: center; font-size: 11px; flex-wrap: wrap; gap: 6px;">

                        <span style="font-weight: 700; color: var(--text-muted);"><i class="fa-solid fa-phone"></i> <span>عنوان إنستاباي / الموبايل:</span></span>

                        <div style="display: flex; gap: 6px; align-items: center; direction: ltr;">

                            <input type="text" id="ng4bw51trj" readonly style="padding: 4px 8px; font-size: 12px; font-weight: 900; font-family: var(--font-code); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); width: 140px; text-align: center;" value="01096896689">

                            <button id="teay3xy449" class="ipxi2jz4g0" style="padding: 4px 8px; min-height: 28px; border-radius: var(--radius-sm);" title="نسخ عنوان إنستاباي"><i class="fa-solid fa-copy" style="margin: 0;"></i> </button>

                        </div>

                    </div>

                </div>

            </div>



            <!-- 3. المحافظ الإلكترونية -->

            <div id="io4or4ksqt" class="gitkevh3xv" style="display: none; direction: rtl; text-align: right;">

                <p style="font-size: 11.5px; color: var(--text-muted); margin-bottom: 12px; font-weight: 600;">

                    <i class="fa-solid fa-circle-info" style="color: var(--primary); margin-left: 4px;"></i> 

                    <span>تحويل كاش فوري ومباشر من أي محفظة إلكترونية (فودافون كاش، أورنج كاش، اتصالات كاش، وي باي، الخ...).</span>

                </p>

                <div style="display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; background: var(--bg-subtle);">

                    <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed var(--border); padding-bottom: 6px; font-size: 11px;">

                        <span style="font-weight: 700; color: var(--text-muted);"><i class="fa-solid fa-mobile-screen" style="color: var(--danger);"></i> <span>المحفظة المستلمة:</span></span>

                        <strong style="font-size: 11.5px; color: var(--text-main);">فودافون كاش (Vodafone Cash)</strong>

                    </div>

                    <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed var(--border); padding-bottom: 6px; font-size: 11px;">

                        <span style="font-weight: 700; color: var(--text-muted);"><i class="fa-solid fa-user"></i> <span>اسم صاحب المحفظة:</span></span>

                        <strong style="font-size: 11px; font-family: var(--font-sans); color: var(--text-main);">Mohamed Ahmed Mohamed Farouk</strong>

                    </div>

                    <div style="display: flex; justify-content: space-between; align-items: center; font-size: 11px; flex-wrap: wrap; gap: 6px;">

                        <span style="font-weight: 700; color: var(--text-muted);"><i class="fa-solid fa-phone"></i> <span>رقم تحويل الكاش:</span></span>

                        <div style="display: flex; gap: 6px; align-items: center; direction: ltr;">

                            <input type="text" id="ta0fqz0p8e" readonly style="padding: 4px 8px; font-size: 12px; font-weight: 900; font-family: var(--font-code); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); width: 140px; text-align: center;" value="01096896689">

                            <button id="bsx15xd744" class="ipxi2jz4g0" style="padding: 4px 8px; min-height: 28px; border-radius: var(--radius-sm);" title="نسخ رقم المحفظة"><i class="fa-solid fa-copy" style="margin: 0;"></i> </button>

                        </div>

                    </div>

                </div>

            </div>

        `;
        pane.appendChild(gatewaysCard);
    };

    /**

     * تحديث كود الجهاز في حقل العرض

     */
    const updateWorkspaceIDDisplay = async () => {
        const idDisplay = document.getElementById('an7xl5rgcc');
        if (idDisplay && global.FritreeCrypto && typeof global.FritreeCrypto.getOrGenerateAccountId === 'function') {
            const currentId = await global.FritreeCrypto.getOrGenerateAccountId();
            idDisplay.value = currentId;
            const computedSignature = await calculateSupportSignature(currentId);
            if (global.FritreeStorage) {
                await global.FritreeStorage.set('support_security_checksum', computedSignature);
            }
        }
    };

    /**

     * إطلاق محادثة الدعم والشحن المباشرة عبر واتساب

     */
    const triggerSupportWhatsAppChat = async () => {
        if (!global.FritreeCrypto) return;
        const currentAccountId = await global.FritreeCrypto.getOrGenerateAccountId();
        const supportNumber = global.FritreeBankingConfig?.RECEIVERS?.SUPPORT_WHATSAPP_CLEAN || "201096896689";

        const messageText = `أهلاً يا فريق دعم فريتري، كود جهازي الموثق هو:\n\n${currentAccountId}\n\nأحتاج للاستفسار وتأكيد شحن أرصدة المحفظة ونقاط النشر التلقائي لحسابي. شكراً لكم!`;
        const waUrl = `https://wa.me/${supportNumber}?text=${encodeURIComponent(messageText)}`;
        window.open(waUrl, '_blank');

        if (typeof window.addLog === 'function') {
            window.addLog("الدعم الفني: تم فتح محادثة الواتساب المباشرة مع خدمة العملاء بنجاح.", 'success');
        }
    };

    /**

     * ربط أحداث القنوات الفرعية والنسخ وحاسبة العملات

     */
    const bindSupportEventListeners = () => {
        const chatBtn = document.getElementById('t7zdv53427');
        const idDisplayField = document.getElementById('an7xl5rgcc');
        const copyIdBtn = document.getElementById('zayjah9bha');

        if (chatBtn) chatBtn.onclick = triggerSupportWhatsAppChat;

        const handleCopy = () => {
            if (!idDisplayField) return;
            navigator.clipboard.writeText(idDisplayField.value).then(() => {
                if (typeof window.addLog === 'function') {
                    window.addLog("نسخ آمن: تم نسخ كود الجهاز بنجاح.", 'success');
                }
                const originalBg = idDisplayField.style.background;
                idDisplayField.style.background = 'var(--success-light)'; 
                setTimeout(() => { idDisplayField.style.background = originalBg; }, 1500);

                if (copyIdBtn) {
                    const originalHtml = copyIdBtn.innerHTML;
                    copyIdBtn.innerHTML = '<i class="fa-solid fa-check" style="color:var(--success-hover);"></i> ';
                    setTimeout(() => { copyIdBtn.innerHTML = originalHtml; }, 1500);
                }
            });
        };

        if (idDisplayField) idDisplayField.onclick = handleCopy;
        if (copyIdBtn) copyIdBtn.onclick = handleCopy;

        // 1. ربط حاسبة تحويل العملات
        const payCurrencySelect = document.getElementById('nakt4bs0fk');
        const receiveCurrencySelect = document.getElementById('d0iuamglk9');
        const payAmountInput = document.getElementById('rjr8i1f9f3');
        const receiveAmountInput = document.getElementById('ln7azkypv1');
        const refreshRatesBtn = document.getElementById('btn-refresh-live-rates');
        const generateTicketBtn = document.getElementById('btn-generate-purchase-ticket');

        if (payCurrencySelect) {
            payCurrencySelect.onchange = () => {
                if (global.FritreeExchangeRatesService) {
                    global.FritreeExchangeRatesService.calculateCurrencies('payment');
                }
            };
        }

        if (receiveCurrencySelect) {
            receiveCurrencySelect.onchange = () => {
                if (global.FritreeExchangeRatesService) {
                    global.FritreeExchangeRatesService.calculateCurrencies('payment');
                }
            };
        }

        if (payAmountInput) {
            payAmountInput.oninput = () => {
                if (global.FritreeExchangeRatesService) {
                    global.FritreeExchangeRatesService.calculateCurrencies('payment');
                }
            };
        }

        if (receiveAmountInput) {
            receiveAmountInput.oninput = () => {
                if (global.FritreeExchangeRatesService) {
                    global.FritreeExchangeRatesService.calculateCurrencies('receive');
                }
            };
        }

        if (refreshRatesBtn) {
            refreshRatesBtn.onclick = () => {
                if (global.FritreeExchangeRatesService) {
                    global.FritreeExchangeRatesService.syncRates();
                }
            };
        }

        if (generateTicketBtn) {
            generateTicketBtn.onclick = () => {
                if (global.FritreeExchangeRatesService) {
                    global.FritreeExchangeRatesService.generateTicket();
                }
            };
        }

        // 2. تبديل تبويبات قنوات الدفع
        const tabs = document.querySelectorAll('.pfe6btieb6 .n9cqm6ze7d[data-wallet-sub]');
        const validGatewayPaneIds = ['p7clpd6ekl', 'de5zx14cj5', 'io4or4ksqt'];

        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                const targetPaneId = tab.getAttribute('data-wallet-sub');
                if (!validGatewayPaneIds.includes(targetPaneId)) return;

                const siblingTabs = tab.parentNode.querySelectorAll('.n9cqm6ze7d[data-wallet-sub]');
                siblingTabs.forEach(t => t.classList.remove('vn5qn7dmpk'));
                tab.classList.add('vn5qn7dmpk');

                const parentGatewaysCard = document.getElementById('j85twrlin1');
                if (parentGatewaysCard) {
                    const panes = parentGatewaysCard.querySelectorAll('.gitkevh3xv');
                    panes.forEach(p => {
                        if (validGatewayPaneIds.includes(p.id)) {
                            p.style.display = (p.id === targetPaneId) ? 'block' : 'none';
                        }
                    });
                }
            });
        });

        // 3. ربط تبديل العملات في التحويل البنكي
        const currencySelect = document.getElementById('guxwjyecsq');
        const bankAccountInput = document.getElementById('jfjeb63r79');
        const syncToCalcBtn = document.getElementById('cs0slpgdna');

        if (currencySelect && bankAccountInput) {
            currencySelect.onchange = async (e) => {
                const selected = e.target.value;
                const accounts = global.FritreeBankingConfig?.BANK_ACCOUNTS || {};
                if (accounts[selected]) {
                    bankAccountInput.value = accounts[selected];
                    if (payCurrencySelect) {
                        payCurrencySelect.value = selected;
                        if (global.FritreeExchangeRatesService) {
                            global.FritreeExchangeRatesService.calculateCurrencies('payment');
                        }
                    }
                }
            };
        }

        if (syncToCalcBtn && currencySelect) {
            syncToCalcBtn.onclick = () => {
                const selectedCurr = currencySelect.value;
                if (payCurrencySelect) {
                    payCurrencySelect.value = selectedCurr;
                    if (global.FritreeExchangeRatesService) {
                        global.FritreeExchangeRatesService.calculateCurrencies('payment');
                    }
                }
                const calcCard = document.getElementById('p266i7uuqq');
                if (calcCard) {
                    calcCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    calcCard.style.outline = '2px solid var(--primary)';
                    setTimeout(() => { calcCard.style.outline = 'none'; }, 2000);
                }
            };
        }

        // 4. أزرار نسخ معلومات الدفع
        const bindCopyBtn = (btnId, inputId, labelNameAr) => {
            const btn = document.getElementById(btnId);
            const input = document.getElementById(inputId);
            if (btn && input) {
                btn.onclick = () => {
                    navigator.clipboard.writeText(input.value).then(() => {
                        const originalHtml = btn.innerHTML;
                        btn.innerHTML = '<i class="fa-solid fa-check" style="color:var(--success-hover);"></i> ';
                        if (typeof window.addLog === 'function') {
                            window.addLog(`نسخ آمن: تم نسخ معلومات التحويل الخاصة بـ [${labelNameAr}] بنجاح.`, "success");
                        }
                        setTimeout(() => { btn.innerHTML = originalHtml; }, 2000);
                    });
                };
            }
        };

        bindCopyBtn('ucfq23zy85', 'jfjeb63r79', "البنك التجاري الدولي CIB");
        bindCopyBtn('teay3xy449', 'ng4bw51trj', "عنوان إنستاباي");
        bindCopyBtn('bsx15xd744', 'ta0fqz0p8e', "محفظة فودافون كاش");
    };

    /**

     * تهيئة وحدة الدعم الفني والحاسبة

     */
    const initSupport = async () => {
        const sidebar = document.getElementById('bmh59axx92');
        const mainContentArea = document.getElementById('s7ihkirolg');
        if (!sidebar || !mainContentArea) return false;

        buildSupportLayout();
        await updateWorkspaceIDDisplay();
        bindSupportEventListeners();

        if (global.FritreeExchangeRatesService && typeof global.FritreeExchangeRatesService.syncRates === 'function') {
            global.FritreeExchangeRatesService.syncRates();
        }

        return true;
    };

    /**

     * تصدير وحدة واجهة الدعم الفني

     */
    global.FritreeSupportUI = {
        init: initSupport,
        triggerSupportChat: triggerSupportWhatsAppChat,
        updateIDDisplay: updateWorkspaceIDDisplay,
        calculateSignature: calculateSupportSignature
    };

    global.FritreeHelpdesk = global.FritreeSupportUI;
    global.FritreePaymentGateways = global.FritreeSupportUI;

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

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