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);