shell-layout.js

/**

 * @fileoverview App Shell, Main Dashboard Layout, PWA Install Banner & Live Monitoring Console

 * @module ui/shell-layout

 * @description بناء الهيكل البصري للتطبيق، شريط الإحصائيات العلوي، شريط تثبيت تطبيق الهاتف PWA، لوحة الأوامر السريعة، وشاشة مراقبة الحملات الحية.

 */

(global => {
    'use strict';

    /**

     * بناء الهيكل الخارجي وشريط الترويسة العلوي وشريط تثبيت الـ PWA

     */
    function buildOuterWorkspaceLayout() {
        if (document.getElementById('s7ihkirolg')) return;

        const shell = document.createElement('div');
        shell.className = 'irhpamtq54';
        shell.style.cssText = 'max-width: min(1680px, 98vw); margin: 0 auto; width: 100%; direction: rtl; text-align: right; box-sizing: border-box;';
        shell.innerHTML = `

            <div class="m4lmkqf6g6" style="grid-template-columns: 1fr; width: 100%;">

                <aside class="yrxwz6d21i" id="bmh59axx92" style="display: none !important;"></aside>

                <main class="e9nzyvdz8z" id="s7ihkirolg" style="width: 100%; min-width: 0;">

                    

                    <!-- شريط تنبيه وتثبيت تطبيق الهاتف PWA -->

                    <div id="fritree-pwa-install-banner" class="d5tp7way8h" style="display: none; border: 1px solid var(--primary-border); background: var(--primary-light); padding: 12px 16px; margin: 0; box-sizing: border-box; border-radius: var(--radius-lg);">

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

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

                                <div style="width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;">

                                    <i class="fa-solid fa-mobile-screen-button"></i>

                                </div>

                                <div>

                                    <strong style="font-size: 13px; color: var(--text-main); display: block;"><i class="fa-solid fa-cloud-arrow-down"></i> <span>تثبيت تطبيق فريتري على جهازك</span></strong>

                                    <span style="font-size: 11px; color: var(--text-secondary); font-weight: 600;">ثبّت المنصة في قائمة تطبيقات هاتفك للوصول السريع بدون فتح المتصفح.</span>

                                </div>

                            </div>

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

                                <button type="button" id="btn-pwa-grant-perms" class="ipxi2jz4g0" style="padding: 6px 12px; font-size: 11px; font-weight: 800; min-height: 32px;" title="تفعيل صلاحيات الإشعارات وقفل الشاشة">

                                    <i class="fa-solid fa-shield-halved" style="color: var(--primary);"></i> <span>تفعيل الصلاحيات</span>

                                </button>

                                <button type="button" id="btn-pwa-install-app" class="itdnt14mss" style="padding: 6px 14px; font-size: 11.5px; font-weight: 800; min-height: 32px;">

                                    <i class="fa-solid fa-download"></i> <span>تثبيت التطبيق الآن</span>

                                </button>

                            </div>

                        </div>

                    </div>



                    <header style="flex-wrap: wrap; gap: 10px; box-sizing: border-box;" id="tqg8vnolvo">

                        <div class="swy9zjes8j" style="flex-wrap: wrap; width: 100%; justify-content: space-between; align-items: center; gap: 8px;">

                            <div style="display: flex; gap: 8px; align-items: center; flex-wrap: wrap;">

                                <img src="icon.png" id="uzyaoqkxib" data-target="h7qak5tprs" alt="الصفحة الرئيسية" style="cursor: pointer; user-select: none; -webkit-user-drag: none;" title="الصفحة الرئيسية">

                                <div id="b8imusheoz" class="zcsc0rlnfn" style="border: 1px solid var(--border); cursor: pointer;" title="نقاط النشر المتاحة لفيسبوك - اضغط لفتح المحرر">

                                    <i class="fa-brands fa-facebook" style="color: #1877f2;"></i> 

                                    <span>فيسبوك: </span><span id="n2jtnhukcl" style="font-family: var(--font-code);">0</span>

                                </div>

                                <div id="nog5je6ddx" class="zcsc0rlnfn" style="border: 1px solid var(--border); cursor: pointer;" title="نقاط البث المتاحة لواتساب - اضغط لفتح المحرر">

                                    <i class="fa-brands fa-whatsapp" style="color: #00a884;"></i> 

                                    <span>واتساب: </span><span id="b8bid195p8" style="font-family: var(--font-code);">0</span>

                                </div>

                                <div id="frtal49mqm" class="zcsc0rlnfn yellow" style="cursor: pointer;" title="اضغط لفتح المحفظة الموحدة">

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

                                    <span>محفظة: $</span><span id="q20kc2pzo4" style="font-family: var(--font-code);">0.00</span>

                                </div>

                                <button type="button" id="fritree-pwa-install-btn" class="itdnt14mss" style="display: none; padding: 4px 10px; font-size: 11px; min-height: 32px; border-radius: var(--radius-pill);" title="تثبيت التطبيق على جهازك">

                                    <i class="fa-solid fa-download"></i> <span>تثبيت التطبيق</span>

                                </button>

                            </div>

                        </div>

                    </header>

                    

                    <div id="ns1lig1nty" class="d5tp7way8h" style="display: none; border: 1px solid var(--danger-border); background: var(--danger-light); padding: 14px; margin: 0; box-sizing: border-box;">

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

                            <i class="fa-solid fa-triangle-exclamation fa-2x" style="color: var(--danger);"></i> 

                            <div>

                                <h4 style="font-size: 13px; margin: 0; font-weight: 800; color: var(--danger);"><i class="fa-solid fa-link-slash"></i> <span>واتساب ويب غير متصل</span></h4>

                                <p style="font-size: 11px; margin: 2px 0 0 0; color: var(--text-secondary);"><i class="fa-solid fa-circle-info"></i> <span>افتح واتساب ويب واعمل ربط للجلسة عشان تقدر تبعت الرسائل بأمان وسلاسة.</span></p>

                            </div>

                        </div>

                    </div>

                    

                    <!-- الحاوية المخصصة لعرض صفحات وأقسام الموقع في الأعلى -->

                    <div id="fritree-dynamic-panes-host" style="display: flex; flex-direction: column; gap: var(--space-md); width: 100%;"></div>

                </main>

            </div>

        `;
        document.body.appendChild(shell);
        bindPwaBannerEvents();
    }

    /**

     * ربط أحداث شريط تثبيت الـ PWA والصلاحيات

     */
    function bindPwaBannerEvents() {
        const installBtnHeader = document.getElementById('fritree-pwa-install-btn');
        const installBtnBanner = document.getElementById('btn-pwa-install-app');
        const permsBtn = document.getElementById('btn-pwa-grant-perms');

        const handleInstall = () => {
            if (global.FritreePWABridge && typeof global.FritreePWABridge.promptInstall === 'function') {
                global.FritreePWABridge.promptInstall();
            }
        };

        if (installBtnHeader) installBtnHeader.onclick = handleInstall;
        if (installBtnBanner) installBtnBanner.onclick = handleInstall;

        if (permsBtn) {
            permsBtn.onclick = async () => {
                if (global.FritreePWABridge && typeof global.FritreePWABridge.requestAllPermissions === 'function') {
                    permsBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> <span>جاري التفعيل...</span>';
                    const res = await global.FritreePWABridge.requestAllPermissions();
                    permsBtn.innerHTML = '<i class="fa-solid fa-check" style="color:var(--success);"></i> <span>تم تفعيل الصلاحيات</span>';
                    alert(`تم تفعيل الصلاحيات بنجاح:\n- الإشعارات: ${res.notifications ? 'مفعلة ✔' : 'مرفوضة'}\n- منع إغلاق الشاشة: ${res.wakeLock ? 'مفعل ✔' : 'غير مدعوم'}`);
                }
            };
        }
    }

    /**

     * بناء شاشة لوحة المعلومات والوصول السريع (Home Hub)

     */
    function buildDashboardPane() {
        if (document.getElementById('h7qak5tprs')) return;

        const pane = document.createElement('section');
        pane.className = 'rjiai07g77 vn5qn7dmpk';
        pane.id = 'h7qak5tprs';
        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); box-sizing: border-box;">

                <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; border-bottom: 1.5px dashed var(--border); padding-bottom: 12px; margin-bottom: 8px;">

                    <div>

                        <strong style="font-size: clamp(14px, 1.1vw, 16px); display: flex; align-items: center; gap: 8px; color: var(--text-main);">

                            <i class="fa-solid fa-bolt" style="color: var(--primary);"></i> <span>مركز الأوامر والوصول السريع المباشر</span>

                        </strong>

                        <span style="font-size: 11px; margin-top: 3px; display: block; font-weight: 700; color: var(--text-muted);">

                            <i class="fa-solid fa-hand-pointer"></i> ادخل على أي قسم أو أداة بضغطة زر واحدة بس!

                        </span>

                    </div>

                </div>

                <div class="dor4fqny2d">

                    <button type="button" class="h91buejhw9" data-target="sf1xx5vcac">

                        <i class="fa-brands fa-facebook" style="color: #1877f2;"></i> <span>منشور فيسبوك</span>

                    </button>

                    <button type="button" class="h91buejhw9" data-target="sf8pufcpyl">

                        <i class="fa-brands fa-whatsapp" style="color: #00a884;"></i> <span>إرسال واتساب</span>

                    </button>

                    <button type="button" class="h91buejhw9" data-target="ss7cgkeahf">

                        <i class="fa-solid fa-calendar-plus" style="color: #3b82f6;"></i> <span>جدولة حملة</span>

                    </button>

                    <button type="button" class="h91buejhw9" data-target="i2ohy2hnfl">

                        <i class="fa-solid fa-arrows-spin" style="color: #0d9488;"></i> <span>تدوير المحتوى</span>

                    </button>

                    <button type="button" class="h91buejhw9" data-target="ny517knjde">

                        <i class="fa-solid fa-address-book" style="color: #0284c7;"></i> <span>جهات الاتصال</span>

                    </button>

                    <button type="button" class="h91buejhw9" data-target="gaap721x61">

                        <i class="fa-solid fa-calendar-check" style="color: #1d4ed8;"></i> <span>تقويم الأجندة</span>

                    </button>

                    <button type="button" class="h91buejhw9" data-target="j2nzw12azj">

                        <i class="fa-solid fa-wallet" style="color: #b45309;"></i> <span>المحفظة والخزنة</span>

                    </button>

                    <button type="button" class="h91buejhw9" data-target="dc1z57si9s">

                        <i class="fa-solid fa-cart-shopping" style="color: #7c3aed;"></i> <span>متجر النقاط</span>

                    </button>

                    <button type="button" class="h91buejhw9" data-target="qt3bcp0qq8">

                        <i class="fa-solid fa-user-shield" style="color: #6366f1;"></i> <span>أمان الحساب</span>

                    </button>

                    <button type="button" class="h91buejhw9" data-target="xhcwhbkzqe">

                        <i class="fa-solid fa-box-archive" style="color: #2563eb;"></i> <span>أرشيف الحملات</span>

                    </button>

                    <button type="button" class="h91buejhw9" data-target="oboufoudrv">

                        <i class="fa-solid fa-database" style="color: #059669;"></i> <span>تصدير واستيراد</span>

                    </button>

                    <button type="button" class="h91buejhw9" data-target="xrsxtjzo87">

                        <i class="fa-solid fa-headset" style="color: #d97706;"></i> <span>الدعم والشحن</span>

                    </button>

                </div>

            </div>



            <!-- بطاقات حالة الاتصال المباشر لفيسبوك وواتساب -->

            <div class="xd506q5mar" style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 0;">

                <div class="d5tp7way8h" style="margin: 0; padding: clamp(14px, 1.4vw, 18px); border-radius: var(--radius-lg); border: 1px solid var(--border);">

                    <div class="cm41ch7urz" style="margin-bottom: 10px; font-size: 14px;"><i class="fa-brands fa-facebook" style="color: #1877f2;"></i> <span>حالة اتصال فيسبوك</span></div>

                    <div class="xd506q5mar" style="grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 0;">

                        <div class="r6wq5imop6" id="d769nsyxio" style="padding: 12px; cursor: pointer; border: 1px solid var(--border);" title="اضغط لفتح فيسبوك داخل نافذة معزولة للتوثيق">

                            <div class="kisn3ao2tz" id="mbgc4irrsa" style="font-size: 14px;"><i class="fa-solid fa-plug-circle-xmark"></i> <span>غير متصل</span></div>

                            <div class="h7ren96m5v"><i class="fa-solid fa-signal"></i> <span>حالة الجلسة</span></div>

                        </div>

                        <div class="r6wq5imop6" style="padding: 12px; border: 1px solid var(--border);">

                            <div class="kisn3ao2tz" id="ua07ivc7rv" style="font-size: 16px; font-family: var(--font-code);"><i class="fa-solid fa-users"></i> 0</div>

                            <div class="h7ren96m5v"><i class="fa-solid fa-users"></i> <span>الجروبات المزامنة</span></div>

                        </div>

                    </div>

                </div>

                <div class="d5tp7way8h" style="margin: 0; padding: clamp(14px, 1.4vw, 18px); border-radius: var(--radius-lg); border: 1px solid var(--border);">

                    <div class="cm41ch7urz" style="margin-bottom: 10px; font-size: 14px;"><i class="fa-brands fa-whatsapp" style="color: #00a884;"></i> <span>حالة اتصال واتساب</span></div>

                    <div class="xd506q5mar" style="grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 0;">

                        <div class="r6wq5imop6" id="hzo3r22pug" style="padding: 12px; cursor: pointer; border: 1px solid var(--border);" title="اضغط لمزامنة جلسة واتساب ويب">

                            <div class="kisn3ao2tz" id="hii0s83z9e" style="font-size: 14px;"><i class="fa-solid fa-plug-circle-xmark"></i> <span>غير متصل</span></div>

                            <div class="h7ren96m5v"><i class="fa-solid fa-plug"></i> <span>حالة الجلسة</span></div>

                        </div>

                        <div class="r6wq5imop6" style="padding: 12px; border: 1px solid var(--border);">

                            <div class="kisn3ao2tz" id="e0d7uvlv6x" style="font-size: 16px; font-family: var(--font-code);"><i class="fa-solid fa-paper-plane"></i> 0</div>

                            <div class="h7ren96m5v"><i class="fa-solid fa-clock"></i> <span>المرسل النهاردة</span></div>

                        </div>

                    </div>

                </div>

            </div>



            <!-- بطاقة محرك التخفي ومحاكاة السلوك البشري -->

            <div class="d5tp7way8h" id="zkc6tibykk" style="margin: 0; padding: clamp(14px, 1.4vw, 18px); border-radius: var(--radius-lg); border: 1px solid var(--border);">

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

                    <div>

                        <h4 style="font-size: 14px; margin: 0; font-weight: 900; color: var(--text-main); display: flex; align-items: center; gap: 6px;">

                            <i class="fa-solid fa-shield-halved" style="color: var(--primary);"></i> <span>محرك التخفي ومحاكاة السلوك البشري</span>

                        </h4>

                        <p style="font-size: 11px; margin: 4px 0 0 0; color: var(--text-muted); font-weight: 600;"><i class="fa-solid fa-lock-open"></i> <span>دروع التمويه متفعلة لحماية حسابك من الحظر أوتوماتيك.</span></p>

                    </div>

                    <div style="display: flex; gap: 8px;">

                        <button id="n3jlayvv4s" class="ipxi2jz4g0" style="cursor: pointer; font-size: 11.5px; padding: 6px 12px;"><i class="fa-solid fa-sliders"></i> <span>تعديل الدروع</span></button>

                    </div>

                </div>

                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 10px; border-top: 1px solid var(--border); padding-top: 12px; text-align: center;">

                    <div style="padding: 10px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-subtle);">

                        <div style="font-size: 13px; font-weight: 800; font-family: var(--font-code); color: var(--text-main);" id="cryhyw49fg"><i class="fa-solid fa-arrows-up-down"></i> <span>250 بكسل</span></div>

                        <div style="font-size: 10px; color: var(--text-muted); margin-top: 2px; font-weight: 700;"><i class="fa-solid fa-circle-nodes"></i> <span>خطوة التصفح</span></div>

                    </div>

                    <div style="padding: 10px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-subtle);">

                        <div style="font-size: 13px; font-weight: 800; font-family: var(--font-code); color: var(--text-main);" id="qvdbfnv1sv"><i class="fa-solid fa-rotate"></i> <span>4 دورات</span></div>

                        <div style="font-size: 10px; color: var(--text-muted); margin-top: 2px; font-weight: 700;"><i class="fa-solid fa-book-open"></i> <span>محاكاة القراءة</span></div>

                    </div>

                    <div style="padding: 10px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-subtle);">

                        <div style="font-size: 13px; font-weight: 800; font-family: var(--font-code); color: var(--text-main);" id="a1tu62e9st"><i class="fa-solid fa-bezier-curve"></i> <span>5 مسارات</span></div>

                        <div style="font-size: 10px; color: var(--text-muted); margin-top: 2px; font-weight: 700;"><i class="fa-solid fa-arrow-pointer"></i> <span>مسارات الماوس</span></div>

                    </div>

                </div>

            </div>



            <!-- بطاقة التحديات اليومية وترقية المستوى -->

            <div class="d5tp7way8h" style="margin: 0; padding: clamp(14px, 1.4vw, 18px); border-radius: var(--radius-lg); border: 1px solid var(--border);">

                <div class="cm41ch7urz" style="margin-bottom: 6px; font-size: 14px;">

                    <span><i class="fa-solid fa-list-check" style="color: var(--primary);"></i> <span>التحديات اليومية وترقية المستوى (XP)</span></span>

                </div>

                <p style="font-size: 11.5px; color: var(--text-muted); margin-bottom: 10px; font-weight: 600;"><i class="fa-solid fa-fire" style="color: #f59e0b;"></i> <span>شغل حملاتك عشان تجمع نقاط خبرة وترقي حسابك وتاخد أرصدة شحن مجانية فوراً!</span></p>

                <div id="i1zkb75b5a" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; direction: rtl; text-align: right;"></div>

            </div>

        `;

        const host = document.getElementById('fritree-dynamic-panes-host') || document.getElementById('s7ihkirolg');
        if (host) {
            host.appendChild(pane);
        }
    }

    /**

     * بناء شاشة مراقبة الحملات المباشرة والأداء والـ Terminal

     */
    function buildLiveMonitoringConsole() {
        const contentArea = document.getElementById('s7ihkirolg');
        if (!contentArea || document.getElementById('cxyr0eirov')) return;

        const processPanel = document.createElement('div');
        processPanel.className = 'd5tp7way8h zcjbe1otmg';
        processPanel.id = 'cxyr0eirov';
        processPanel.style.cssText = 'margin-top: 14px; padding: clamp(14px, 1.6vw, 22px); border-radius: var(--radius-xl); border: 1px solid var(--border); direction: rtl; text-align: right; background: var(--bg-card); width: 100%; box-sizing: border-box;';
        processPanel.innerHTML = `

            <div class="cm41ch7urz" style="margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 10px;">

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

                <span style="font-weight: 900; font-size: 14.5px;">شاشة متابعة الحملات المباشرة والأداء</span>

            </div>

            <div class="xd506q5mar" style="grid-template-columns: repeat(auto-fit, minmax(clamp(110px, 9vw, 140px), 1fr)); gap: 8px; margin-bottom: 12px;">

                <div class="r6wq5imop6"><div class="kisn3ao2tz" id="uns2dhjlx2"><i class="fa-solid fa-users" style="font-size:15px; color:#1877f2;"></i> 0</div><div class="h7ren96m5v"><span>جروبات فيسبوك</span></div></div>

                <div class="r6wq5imop6"><div class="kisn3ao2tz" id="yn082h7vxq"><i class="fa-solid fa-thumbs-up" style="font-size:15px; color:#10b981;"></i> 0</div><div class="h7ren96m5v"><span>منشورات ناجحة</span></div></div>

                <div class="r6wq5imop6"><div class="kisn3ao2tz" id="pe147sfejg"><i class="fa-solid fa-hourglass-half" style="font-size:15px; color:#f59e0b;"></i> 0</div><div class="h7ren96m5v"><span>قيد المراجعة</span></div></div>

                <div class="r6wq5imop6"><div class="kisn3ao2tz" id="c2hyj1dsyf"><i class="fa-solid fa-triangle-exclamation" style="font-size:15px; color:#ef4444;"></i> 0</div><div class="h7ren96m5v"><span>منشورات مرفوضة</span></div></div>

                <div class="r6wq5imop6"><div class="kisn3ao2tz" id="n5kl1m8coi"><i class="fa-solid fa-address-book" style="font-size:15px; color:#00a884;"></i> 0</div><div class="h7ren96m5v"><span>مستلمي واتساب</span></div></div>

                <div class="r6wq5imop6"><div class="kisn3ao2tz" id="hig5lc1irj"><i class="fa-solid fa-paper-plane" style="font-size:15px; color:#00a884;"></i> 0</div><div class="h7ren96m5v"><span>رسائل مرسلة</span></div></div>

            </div>

            <div class="xd506q5mar dg59hwiq63" style="grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin-bottom: 12px;">

                <div class="r6wq5imop6"><div class="kisn3ao2tz" id="ctldyt8www" style="font-family: var(--font-code);"><i class="fa-solid fa-clock" style="font-size:15px;"></i> 00:00:00</div><div class="h7ren96m5v"><i class="fa-solid fa-stopwatch"></i> <span>وقت النشر الفعلي</span></div></div>

                <div class="r6wq5imop6"><div class="kisn3ao2tz" id="idrsed82qy" style="font-family: var(--font-code);"><i class="fa-solid fa-hourglass-start" style="font-size:15px;"></i> 00:00:00</div><div class="h7ren96m5v"><i class="fa-solid fa-hourglass-start"></i> <span>أوقات الانتظار والتبريد</span></div></div>

                <div class="r6wq5imop6" id="h4we1yzu71" style="cursor: pointer; border: 1px solid var(--border);" title="اضغط لفتح إعدادات فترات الانتظار والمحاكي">

                    <div class="kisn3ao2tz" id="e8fmmjhyng" style="font-family: var(--font-code);"><i class="fa-solid fa-gauge" style="font-size:15px; color:#6366f1;"></i> 60 ثانية</div>

                    <div class="h7ren96m5v"><i class="fa-solid fa-gauge"></i> <span>متوسط فترة التبريد</span></div>

                </div>

            </div>

            <div id="ybx74js4oc" style="margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px dashed var(--border); padding-bottom: 10px;">

                <div id="o49zivp1bg" style="display: block;">

                    <div style="display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 800; color: var(--text-main); margin-bottom: 4px;">

                        <span id="o6po6u1x7f"><i class="fa-brands fa-facebook" style="color: #1877f2;"></i> <span>معدل تقدم إرسال حملة فيسبوك النشطة:</span></span>

                        <span id="gu66d84s18" style="font-family: var(--font-code);">0%</span>

                    </div>

                    <div class="s58rzsrk81"><div class="xv12sshgcd" id="yuc3c21zr2"></div></div>

                </div>

            </div>

            <div>

                <div style="display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 800; color: var(--text-main); margin-bottom: 4px;">

                    <span id="khxupgp5kg"><i class="fa-brands fa-whatsapp" style="color: #00a884;"></i> <span>معدل تقدم إرسال حملة الواتساب النشطة:</span></span>

                    <span id="z5eisfkgpg" style="font-family: var(--font-code);">0%</span>

                </div>

                <div class="s58rzsrk81"><div class="xv12sshgcd" id="vsc6h9bses" style="background: linear-gradient(90deg, #10b981, #059669);"></div></div>

            </div>

        `;
        contentArea.appendChild(processPanel);

        const logsGrid = document.createElement('div');
        logsGrid.className = 'xd506q5mar zcjbe1otmg';
        logsGrid.style.cssText = 'grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 28vw, 420px), 1fr)); gap: 12px; margin-top: 12px; direction: rtl; text-align: right; width: 100%; box-sizing: border-box;';
        logsGrid.innerHTML = `

            <div class="xqkt2dawl5" style="margin: 0; padding: 14px; border-radius: var(--radius-lg); box-sizing: border-box;">

                <div class="wczdtelsho" style="padding-bottom: 8px; margin-bottom: 8px;">

                    <span class="z32huijvo4"><i class="fa-solid fa-terminal"></i> <span>سجل الأوامر المباشر ورصد الـ XP</span></span>

                    <div style="display:flex; gap: 6px;">

                        <button id="wjdexzlzuv" class="ipxi2jz4g0" title="مسح سجل الأوامر" style="background:#1e293b; color:white; border:none; padding:4px 8px; border-radius:4px; cursor:pointer; min-height:28px;"><i class="fa-solid fa-broom"></i> </button>

                        <button id="s24x8dpijy" class="ipxi2jz4g0" title="إيقاف مؤقت لشاشة السجل" style="background:#1e293b; color:white; border:none; padding:4px 8px; border-radius:4px; cursor:pointer; min-height:28px;"><i class="fa-solid fa-pause"></i> </button>

                    </div>

                </div>

                <div class="l892o3saqa" id="r99bttinj8" style="height: 240px;">

                    <div class="xat4o6cs3m"><span class="fe5xz6pikv">[00:00:00]</span><span class="ma43slkxth"><i class="fa-solid fa-shield-halved"></i> <span>تم تشغيل بيئة العمل ورادار الأمان والتحديث المباشر بنجاح!</span></span></div>

                </div>

            </div>

            <div class="d5tp7way8h" style="margin: 0; padding: 14px; border-radius: var(--radius-lg); max-height: 320px; overflow-y: auto; box-sizing: border-box; border: 1px solid var(--border);">

                <div class="cm41ch7urz" style="margin-bottom: 8px; font-size: 13.5px;"><i class="fa-solid fa-link" style="color: var(--primary);"></i> <span>سجل النشر المباشر وروابط الإثبات</span></div>

                <div class="diktqr0h64" style="max-height: 220px; border: none; border-radius: 0;">

                    <table id="rne8yohkuk" style="width: 100%; min-width: 320px;">

                        <thead>

                            <tr>

                                <th style="width: 35%; text-align: right;"><i class="fa-solid fa-bullseye"></i> <span>الوجهة المستهدفة</span></th>

                                <th style="width: 25%; text-align: center;"><i class="fa-solid fa-circle-info"></i> <span>الحالة</span></th>

                                <th style="width: 40%; text-align: center;"><i class="fa-solid fa-check"></i> <span>الرابط / الخطأ</span></th>

                            </tr>

                        </thead>

                        <tbody>

                            <tr id="tslozgkksi"><td colspan="3" style="text-align: center; color: var(--text-muted); padding: 20px; font-size: 11.5px;"><i class="fa-solid fa-circle-exclamation"></i> <span>روابط النشر والرسائل الناجحة ستظهر هنا فور إطلاق الحملة.</span></td></tr>

                        </tbody>

                    </table>

                </div>

            </div>

        `;
        contentArea.appendChild(logsGrid);

        const avgCard = document.getElementById('h4we1yzu71');
        if (avgCard) {
            avgCard.onclick = () => {
                if (global.FritreePacingUI && typeof global.FritreePacingUI.openModal === 'function') {
                    global.FritreePacingUI.openModal('fb');
                }
            };
        }
    }

    /**

     * تحديث قيم الأرصدة في شريط الترويسة ولوحة التحكم

     */
    async function updatePointsHeaderAndWidgets() {
        if (!global.FritreeAppState) return;
        await global.FritreeAppState.loadDashboardState();
        const state = global.FritreeAppState.getState();

        const badgeBalance = document.getElementById('q20kc2pzo4');
        const modalBalance = document.getElementById('qtjpvw26cb');
        const storeBalance = document.getElementById('u39mvrlgpk');
        const modalFbPoints = document.getElementById('unaqtenmf0');
        const modalWaPoints = document.getElementById('not0uqicjk');
        const fbB = document.getElementById('n2jtnhukcl');
        const waB = document.getElementById('b8bid195p8');

        const walletUsd = document.getElementById('urp3goak31');
        const walletFb = document.getElementById('jsfgartkej');
        const walletWa = document.getElementById('qul9lan6tq');

        if (badgeBalance) badgeBalance.textContent = state.usdPoints.toFixed(2);
        if (modalBalance) modalBalance.textContent = state.usdPoints.toFixed(2);
        if (storeBalance) storeBalance.textContent = state.usdPoints.toFixed(2);
        if (modalFbPoints) modalFbPoints.textContent = state.fbPoints.toLocaleString('en-US');
        if (modalWaPoints) modalWaPoints.textContent = state.waPoints.toLocaleString('en-US');
        if (fbB) fbB.textContent = state.fbPoints.toLocaleString('en-US');
        if (waB) waB.textContent = state.waPoints.toLocaleString('en-US');

        if (walletUsd) walletUsd.textContent = state.usdPoints.toFixed(2);
        if (walletFb) walletFb.textContent = state.fbPoints.toLocaleString('en-US');
        if (walletWa) walletWa.textContent = state.waPoints.toLocaleString('en-US');

        if (global.FritreeStorage) {
            const fbIntervals = await global.FritreeStorage.get('local_sleep_intervals_fb', null);
            const avgBadge = document.getElementById('e8fmmjhyng');
            if (avgBadge && fbIntervals) {
                let display = '60 ثانية';
                if (fbIntervals.mode === 'continuous' || fbIntervals.mode === 'random') {
                    const avg = Math.round(((fbIntervals.min || 45) + (fbIntervals.max || 120)) / 2);
                    display = `${avg} ثانية (~${fbIntervals.min}-${fbIntervals.max} ث)`;
                } else if (fbIntervals.mode === 'fixed') {
                    display = `${fbIntervals.fixed || 60} ثانية (ثابت)`;
                } else if (fbIntervals.mode === 'burst') {
                    display = `دفعة (${fbIntervals.burstCount} عمليات)`;
                }
                avgBadge.innerHTML = `<i class="fa-solid fa-gauge" style="font-size:14px; color:#6366f1;"></i> ${display}`;
            }
        }
    }

    /**

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

     */
    global.FritreeShellLayout = {
        buildOuterLayout: buildOuterWorkspaceLayout,
        buildDashboard: buildDashboardPane,
        buildMonitoringConsole: buildLiveMonitoringConsole,
        updatePointsUI: updatePointsHeaderAndWidgets,
        updateAccountUI: updatePointsHeaderAndWidgets
    };

    global.FritreeDashboard = global.FritreeDashboard || {};
    global.FritreeDashboard.updateAccountUI = updatePointsHeaderAndWidgets;
    global.FritreeDashboard.updatePointsUI = updatePointsHeaderAndWidgets;

    if (typeof document !== 'undefined') {
        buildOuterWorkspaceLayout();
        buildDashboardPane();
        buildLiveMonitoringConsole();
    }

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