contacts-layout.js

/**
 * @fileoverview Contacts Management Page DOM Layout Builder
 * @module ui/contacts-layout
 * @description بناء الهيكل البصري لقسم جهات الاتصال، فلاتر البحث، محدد النطاق الرقمي، ونوافذ الاستيراد والتصدير.
 */

(global => {
    'use strict';

    /**
     * كائن بناء الهيكل البصري لجهات الاتصال
     */
    const ContactsLayoutBuilder = {
        /**
         * بناء وحقن واجهة قسم جهات الاتصال في الـ DOM
         * @returns {boolean} نجاح أو فشل البناء
         */
        buildLayout: function() {
            if (typeof document === 'undefined') return false;

            const sidebar = document.getElementById('bmh59axx92');
            const contentArea = document.getElementById('s7ihkirolg');
            if (!contentArea) return false;

            // إضافة رابط التنقل في القائمة الجانبية إن لم يكن موجوداً
            if (sidebar && !sidebar.querySelector('[data-target="ny517knjde"]')) {
                const navItem = document.createElement('div');
                navItem.className = 'f2rj8bz2yt';
                navItem.setAttribute('data-target', 'ny517knjde');
                navItem.setAttribute('id', 'k5qw55xfhm');
                navItem.innerHTML = '<i class="fa-solid fa-address-book"></i> <span>جهات الاتصال</span>';
                sidebar.appendChild(navItem);
                navItem.addEventListener('click', () => {
                    window.location.hash = 'ny517knjde';
                });
            }

            const host = document.getElementById('fritree-dynamic-panes-host') || contentArea;
            let pane = document.getElementById('ny517knjde');
            if (pane) {
                if (pane.parentElement !== host) {
                    host.appendChild(pane);
                }
                return true;
            }

            pane = document.createElement('section');
            pane.className = 'rjiai07g77';
            pane.id = 'ny517knjde';
            pane.innerHTML = `
                <div class="d5tp7way8h zcjbe1otmg" style="margin: 0; padding: clamp(14px, 1.8vw, 24px); border-radius: var(--radius-xl); direction: rtl; text-align: right; background: var(--bg-card); border: 1px solid var(--border); box-sizing: border-box;">
                    <!-- الترويسة وأزرار الإجراءات الرئيسية -->
                    <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 18px; flex-wrap: wrap; gap: 10px;">
                        <div>
                            <h2 style="font-size: clamp(15px, 1.2vw, 18px); font-weight: 900; display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-main);">
                                <i class="fa-solid fa-address-book" style="color: var(--primary);"></i> 
                                <span>إدارة جهات الاتصال وسجل العملاء</span>
                            </h2>
                            <p style="font-size: 11px; color: var(--text-muted); margin-top: 4px; font-weight: 700;">
                                <i class="fa-solid fa-list-ol"></i> 
                                <span>جهات الاتصال مرقمة تلقائياً بالتسلسل من 1 إلى آخر سجل لتسهيل التحديد بالنطاق الرقمي.</span>
                            </p>
                        </div>
                        <div style="display: flex; gap: 6px; flex-wrap: wrap; align-items: center;">
                            <div style="display: flex; background: var(--bg-subtle); border-radius: var(--radius-md); padding: 3px; border: 1px solid var(--border);">
                                <button type="button" id="gewqxqhw1a" class="ipxi2jz4g0 vn5qn7dmpk" style="padding: 5px 10px; font-size: 11px; border-radius: var(--radius-sm); height: auto;">
                                     <i class="fa-solid fa-list"></i> <span>جدول</span>
                                </button>
                                <button type="button" id="eqric71940" class="ipxi2jz4g0" style="padding: 5px 10px; font-size: 11px; border-radius: var(--radius-sm); height: auto;">
                                     <i class="fa-solid fa-table-cells-large"></i> <span>بطاقات</span>
                                </button>
                            </div>
                            <button type="button" id="e2rtgyindd" class="itdnt14mss" style="font-size: 11px; padding: 7px 12px; background: var(--wa-brand); border-color: var(--wa-brand);">
                                <i class="fa-solid fa-file-import"></i> <span>استيراد (CSV / vCard)</span>
                            </button>
                            <button type="button" id="nxybir7u8r" class="ipxi2jz4g0" style="font-size: 11px; padding: 7px 12px;">
                                 <i class="fa-solid fa-file-export"></i> <span>تصدير السجل</span>
                            </button>
                            <button type="button" id="lndjiz92pl" class="itdnt14mss" style="font-size: 11px; padding: 7px 12px;">
                                 <i class="fa-solid fa-user-plus"></i> <span>إضافة عميل</span>
                            </button>
                        </div>
                    </div>

                    <!-- بطاقات المؤشرات الإحصائية -->
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(130px, 11vw, 180px), 1fr)); gap: 10px; margin-bottom: 16px;">
                        <div class="r6wq5imop6" style="padding: 12px; border: 1px solid var(--border);">
                            <span class="h7ren96m5v" style="font-size: 10.5px;"><i class="fa-solid fa-users" style="color: var(--primary);"></i> <span>إجمالي العملاء</span></span>
                            <strong class="kisn3ao2tz" style="font-size: 18px; font-family: var(--font-code);" id="x7y3ihnuz6">0</strong>
                        </div>
                        <div class="r6wq5imop6" style="padding: 12px; border: 1px solid var(--border);">
                            <span class="h7ren96m5v" style="font-size: 10.5px;"><i class="fa-solid fa-crown" style="color: #eab308;"></i> <span>عملاء VIP والصفقات</span></span>
                            <strong class="kisn3ao2tz" style="font-size: 18px; font-family: var(--font-code); color: #eab308;" id="hl58n1vsdz">0</strong>
                        </div>
                        <div class="r6wq5imop6" style="padding: 12px; border: 1px solid var(--border);">
                            <span class="h7ren96m5v" style="font-size: 10.5px;"><i class="fa-solid fa-tags" style="color: var(--purple);"></i> <span>الوسوم والتصنيفات</span></span>
                            <strong class="kisn3ao2tz" style="font-size: 18px; font-family: var(--font-code); color: var(--purple);" id="z9imk5h96y">0</strong>
                        </div>
                        <div class="r6wq5imop6" style="padding: 12px; border: 1px solid var(--border);">
                            <span class="h7ren96m5v" style="font-size: 10.5px;"><i class="fa-solid fa-user-slash" style="color: var(--danger);"></i> <span>القائمة السوداء</span></span>
                            <strong class="kisn3ao2tz" style="font-size: 18px; font-family: var(--font-code); color: var(--danger);" id="xvhp7umte1">0</strong>
                        </div>
                    </div>

                    <!-- صندوق الفلاتر والبحث وتحديد النطاق -->
                    <div style="border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(12px, 1.4vw, 16px); margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--bg-subtle);">
                        <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 6px;">
                            <span style="font-size: 11.5px; font-weight: 800; color: var(--text-secondary);"><i class="fa-solid fa-filter" style="color: var(--primary);"></i> <span>الفلترة والبحث المتقدم:</span></span>
                            <span style="font-size: 11px; font-weight: 800; color: var(--text-main); font-family: var(--font-code);" id="qh64ktmllu"><span>المحدد حالياً: 0</span></span>
                        </div>

                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 16vw, 240px), 1fr)); gap: 8px;">
                            <input type="text" id="n1ysqfcdai" class="xy26ymifmf" placeholder="ابحث بالاسم، الرقم، الشركة، أو الملاحظات..." style="padding: 8px 12px; font-size: 11.5px;">
                            <select id="rk1gpbb0ma" class="xy26ymifmf" style="padding: 8px 10px; font-size: 11.5px;">
                                <option value="all" selected>كل التصنيفات والوسوم</option>
                            </select>
                            <select id="hqh1kdfr3z" class="xy26ymifmf" style="padding: 8px 10px; font-size: 11.5px;">
                                <option value="all" selected>كل مراحل المبيعات</option>
                                <option value="lead">عميل محتمل</option>
                                <option value="qualified">عميل مؤهل</option>
                                <option value="active">عميل حالي</option>
                                <option value="vip">عميل متميز</option>
                                <option value="won">صفقة مكتملة</option>
                                <option value="lost">غير مهتم</option>
                            </select>
                            <select id="ranpfg2wg4" class="xy26ymifmf" style="padding: 8px 10px; font-size: 11.5px;">
                                <option value="date_desc" selected>تاريخ الإضافة (الأحدث)</option>
                                <option value="date_asc">تاريخ الإضافة (الأقدم)</option>
                                <option value="name_asc">اسم العميل (أ - ي)</option>
                                <option value="name_desc">اسم العميل (ي - أ)</option>
                            </select>
                        </div>

                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(130px, 14vw, 180px), 1fr)); gap: 8px; align-items: center;">
                            <div class="d0uttwsjz2" style="margin:0;">
                                <select id="u8qlaic1mh" class="xy26ymifmf" style="padding: 6px 10px; font-size: 11px;">
                                    <option value="all" selected>حالة الحظر (الكل)</option>
                                    <option value="clean">الجهات الآمنة فقط</option>
                                    <option value="blacklisted">القائمة السوداء فقط</option>
                                </select>
                            </div>
                            <div class="d0uttwsjz2" style="margin:0;">
                                <input type="date" id="z3wip3m4zk" class="xy26ymifmf" style="padding: 6px 8px; font-size: 11px;" title="من تاريخ إضافة">
                            </div>
                            <div class="d0uttwsjz2" style="margin:0;">
                                <input type="date" id="m8dxissd3m" class="xy26ymifmf" style="padding: 6px 8px; font-size: 11px;" title="إلى تاريخ إضافة">
                            </div>
                            <div style="display: flex; gap: 6px;">
                                <button type="button" id="cdykxxbjv2" class="ipxi2jz4g0" style="font-size: 10.5px; padding: 6px 8px; flex: 1; min-height: 32px;" title="دمج جهات الاتصال المكررة">
                                     <i class="fa-solid fa-code-merge"></i> <span>دمج المكرر</span>
                                </button>
                                <button type="button" id="k7qyxs7zru" class="btn-danger" style="font-size: 10.5px; padding: 6px 8px; min-height: 32px;" title="مسح كافة جهات الاتصال">
                                     <i class="fa-solid fa-trash-can"></i> <span>مسح الكل</span>
                                </button>
                            </div>
                        </div>

                        <!-- شريط تحديد النطاق بالأرقام -->
                        <div class="mdtccbdij9" id="mdtccbdij9" style="background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 12px;">
                            <span class="hc3xy6hgkx" style="color: var(--text-main);">
                                <i class="fa-solid fa-arrow-down-1-9" style="color: var(--primary);"></i> 
                                <span>تحديد نطاق بالأرقام:</span>
                            </span>
                            <div style="display: flex; align-items: center; gap: 4px;">
                                <span style="font-size: 11px; font-weight: 700; color: var(--text-muted);">من:</span>
                                <input type="number" id="rv2zopf0tb" class="t0kogc0c45" min="1" placeholder="مثال: 1">
                            </div>
                            <div style="display: flex; align-items: center; gap: 4px;">
                                <span style="font-size: 11px; font-weight: 700; color: var(--text-muted);">إلى:</span>
                                <input type="number" id="wll7mokn3p" class="t0kogc0c45" min="1" placeholder="مثال: 50">
                            </div>
                            <button type="button" id="zc5zjdewes" class="aldh2lxs9x">
                                <i class="fa-solid fa-check-double"></i> <span>تحديد النطاق</span>
                            </button>
                            <button type="button" id="b7ab0plbsx" class="wew524j2fn" style="display:none;">
                                <i class="fa-solid fa-arrow-rotate-left"></i> <span>إلغاء</span>
                            </button>
                            <span class="n1vwftlwc8" id="xf7bx23hom" style="margin-right: auto; margin-left: 0;">
                                <i class="fa-solid fa-info-circle"></i> 
                                <span id="wsbcxjitau">حدد البداية والنهاية للتحديد السريع</span>
                            </span>
                        </div>

                        <!-- شريط العمليات الجماعية على المحددين -->
                        <div id="dox2qcnqg7" style="display: flex; gap: 6px; align-items: center; padding: 8px 12px; border-radius: var(--radius-md); border: 1px solid var(--border); flex-wrap: wrap; background: var(--bg-card);">
                            <span style="font-size: 11px; font-weight: 800; color: var(--text-secondary);"><i class="fa-solid fa-list-check" style="color: var(--primary);"></i> <span>إجراءات المحدد:</span></span>
                            <button type="button" id="ybvs0y4u4q" class="itdnt14mss" style="font-size: 10.5px; padding: 5px 12px; font-weight: 800; background: var(--wa-brand); border-color: var(--wa-brand); min-height: 30px;">
                                 <i class="fa-brands fa-whatsapp"></i> <span>إرسال حملة واتساب</span>
                            </button>
                            <button type="button" id="bfywn3ymkh" class="ipxi2jz4g0" style="font-size: 10.5px; padding: 5px 10px; min-height: 30px;">
                                 <i class="fa-solid fa-tag"></i> <span>إضافة وسم</span>
                            </button>
                            <button type="button" id="vfn8iv8lzf" class="ipxi2jz4g0" style="font-size: 10.5px; padding: 5px 10px; min-height: 30px;">
                                 <i class="fa-solid fa-trash-can"></i> <span>إزالة وسم</span>
                            </button>
                            <button type="button" id="amfm0v8cs5" class="ipxi2jz4g0" style="font-size: 10.5px; padding: 5px 10px; min-height: 30px;">
                                 <i class="fa-solid fa-user-check" style="color: var(--success);"></i> <span>إلغاء الحظر</span>
                            </button>
                            <button type="button" id="jik3jfr08m" class="ipxi2jz4g0" style="font-size: 10.5px; padding: 5px 10px; min-height: 30px;">
                                 <i class="fa-solid fa-user-slash" style="color: var(--danger);"></i> <span>حظر</span>
                            </button>
                            <button type="button" id="ygdgkhes7r" class="ipxi2jz4g0" style="font-size: 10.5px; padding: 5px 10px; min-height: 30px;">
                                 <i class="fa-solid fa-file-export"></i> <span>تصدير المحدد</span>
                            </button>
                            <button type="button" id="xt7egwiac3" class="btn-danger" style="font-size: 10.5px; padding: 5px 10px; min-height: 30px; margin-right: auto; margin-left: 0;">
                                 <i class="fa-solid fa-trash"></i> <span>حذف المحدد</span>
                            </button>
                        </div>
                    </div>

                    <!-- حاوية عرض الجدول والبطاقات -->
                    <div id="tu54lhiegr" style="width: 100%; box-sizing: border-box;"></div>
                </div>

                <!-- 1. نافذة إنشاء وتعديل بيانات العميل -->
                <div class="cpzxome5dd" id="g2vl6bip8z">
                    <div class="s4yvtq9394" style="max-width: min(780px, 94vw);">
                        <div class="x8pdlyq70a">
                            <div class="tooau3ykdi"><i class="fa-solid fa-user-pen" style="color: var(--primary);"></i> <span id="kvcvcii0b6">إضافة عميل جديد</span></div>
                            <button class="bcuz086hu4" id="z9jjbpxjm0">&times;</button>
                        </div>
                        <div class="zn6t0dl6ke">
                            <input type="hidden" id="qfv7jp577g">
                            
                            <div style="border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; background: var(--bg-subtle);">
                                <div class="d0uttwsjz2" style="margin-bottom: 8px;">
                                    <label style="font-weight: 700;"><i class="fa-solid fa-user"></i> <span>الاسم الكامل للعميل:</span></label>
                                    <input type="text" id="sdd0e5bwjh" class="xy26ymifmf" placeholder="مثال: خديجة أحمد">
                                </div>
                                <div class="d0uttwsjz2" style="margin:0;">
                                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
                                        <label style="font-weight: 700; margin: 0;"><i class="fa-solid fa-phone"></i> <span>أرقام الموبايل (كتابة الرقم بالسطر الأخير تنشئ سطراً جديداً تلقائياً):</span></label>
                                        <span id="o497sju1mo" style="display: none; font-size: 10px; font-weight: 700; background: var(--success-light); color: var(--success-hover); padding: 2px 8px; border-radius: var(--radius-pill); border: 1px solid var(--success-border);"></span>
                                    </div>
                                    <div id="pe2oiv9nvs" style="display: flex; flex-direction: column; gap: 4px;"></div>
                                </div>
                            </div>

                            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(130px, 14vw, 170px), 1fr)); gap: 8px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px; background: var(--bg-subtle);">
                                <div class="d0uttwsjz2" style="margin:0;">
                                    <label><i class="fa-solid fa-chart-line"></i> <span>مرحلة المبيعات:</span></label>
                                    <select id="foockjmk6s" class="xy26ymifmf" style="padding: 6px 8px; font-size: 11px;">
                                        <option value="lead">عميل محتمل</option>
                                        <option value="qualified">عميل مؤهل</option>
                                        <option value="active">عميل حالي</option>
                                        <option value="vip">عميل متميز VIP</option>
                                        <option value="won">صفقة مكتملة</option>
                                        <option value="lost">غير مهتم</option>
                                    </select>
                                </div>
                                <div class="d0uttwsjz2" style="margin:0;">
                                    <label><i class="fa-solid fa-bullseye"></i> <span>مصدر العميل:</span></label>
                                    <select id="x1cb3ek74e" class="xy26ymifmf" style="padding: 6px 8px; font-size: 11px;">
                                        <option value="facebook">إعلان فيسبوك</option>
                                        <option value="whatsapp">حملة واتساب</option>
                                        <option value="recommendation">توصية عميل</option>
                                        <option value="website">موقع إلكتروني</option>
                                        <option value="direct" selected>مباشر / أخرى</option>
                                    </select>
                                </div>
                                <div class="d0uttwsjz2" style="margin:0;">
                                    <label><i class="fa-solid fa-star"></i> <span>أولوية العميل:</span></label>
                                    <select id="g1oufrwen8" class="xy26ymifmf" style="padding: 6px 8px; font-size: 11px;">
                                        <option value="high_urgent">عالي جداً</option>
                                        <option value="high">مرتفع</option>
                                        <option value="medium" selected>متوسط</option>
                                        <option value="low">منخفض</option>
                                    </select>
                                </div>
                                <div class="d0uttwsjz2" style="margin:0;">
                                    <label><i class="fa-solid fa-calendar-day"></i> <span>تاريخ المتابعة القادمة:</span></label>
                                    <input type="date" id="s2admrtim1" class="xy26ymifmf" style="padding: 6px 8px; font-size: 11px;">
                                </div>
                            </div>

                            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px;">
                                <div class="d0uttwsjz2" style="margin:0;">
                                    <label><i class="fa-solid fa-building"></i> <span>اسم الشركة / المؤسسة:</span></label>
                                    <input type="text" id="bluyqoyzyu" class="xy26ymifmf" placeholder="مثال: شركة التطوير العقاري">
                                </div>
                                <div class="d0uttwsjz2" style="margin:0;">
                                    <label><i class="fa-solid fa-user-tie"></i> <span>المسمى الوظيفي:</span></label>
                                    <input type="text" id="hns86xlu9u" class="xy26ymifmf" placeholder="مدير المبيعات">
                                </div>
                                <div class="d0uttwsjz2" style="margin:0;">
                                    <label><i class="fa-solid fa-sitemap"></i> <span>القسم / الإدارة:</span></label>
                                    <input type="text" id="tai1zux829" class="xy26ymifmf" placeholder="إدارة التعاقدات">
                                </div>
                            </div>

                            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px;">
                                <div class="d0uttwsjz2" style="margin:0;">
                                    <label><i class="fa-solid fa-envelope"></i> <span>البريد الإلكتروني:</span></label>
                                    <input type="text" id="n8v43cmfzp" class="xy26ymifmf" placeholder="client@company.com" style="direction: ltr; text-align: left;">
                                </div>
                                <div class="d0uttwsjz2" style="margin:0;">
                                    <label><i class="fa-solid fa-comments"></i> <span>قناة التواصل المفضلة:</span></label>
                                    <select id="ftiovdh9zk" class="xy26ymifmf" style="padding: 8px 10px;">
                                        <option value="whatsapp" selected>واتساب مباشر</option>
                                        <option value="facebook">فيسبوك ماسنجر</option>
                                        <option value="call">اتصال هاتفي</option>
                                        <option value="email">بريد إلكتروني</option>
                                    </select>
                                </div>
                                <div class="d0uttwsjz2" style="margin:0;">
                                    <label><i class="fa-solid fa-clock"></i> <span>أفضل وقت للتواصل:</span></label>
                                    <select id="m6m8pmqk2g" class="xy26ymifmf" style="padding: 8px 10px;">
                                        <option value="any" selected>أي وقت</option>
                                        <option value="morning">الفترة الصباحية (9 ص - 2 ظ)</option>
                                        <option value="afternoon">الفترة المسائية (2 ظ - 8 م)</option>
                                    </select>
                                </div>
                            </div>

                            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px;">
                                <div class="d0uttwsjz2" style="margin:0;">
                                    <label><i class="fa-solid fa-location-dot"></i> <span>العنوان (الدولة / المدينة):</span></label>
                                    <input type="text" id="kgb8k4l7x8" class="xy26ymifmf" placeholder="مصر، القاهرة، التجمع الخامس">
                                </div>
                                <div class="d0uttwsjz2" style="margin:0;">
                                    <label><i class="fa-solid fa-globe"></i> <span>الموقع أو رابط الحساب:</span></label>
                                    <input type="text" id="c4aemm27ll" class="xy26ymifmf" placeholder="https://facebook.com/profile" style="direction: ltr; text-align: left;">
                                </div>
                            </div>

                            <div class="d0uttwsjz2" style="margin-bottom: 8px;">
                                <label><i class="fa-solid fa-tags"></i> <span>الوسوم والتصنيفات (افصل بفاصلة):</span></label>
                                <input type="text" id="abqk9m5uxg" class="xy26ymifmf" placeholder="مثال: عميل_مهم، عقارات، VIP">
                            </div>

                            <!-- الحقول المخصصة الإضافية -->
                            <div class="d0uttwsjz2" style="border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px; background: var(--bg-subtle);">
                                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
                                    <label style="font-weight: 700; color: var(--text-main); margin: 0;"><i class="fa-solid fa-plus-minus"></i> <span>حقول مخصصة إضافية:</span></label>
                                    <button type="button" id="duv92vxgty" class="ipxi2jz4g0" style="font-size: 10px; padding: 4px 8px; min-height: 28px;">
                                        <i class="fa-solid fa-plus"></i> <span>إضافة حقل</span>
                                    </button>
                                </div>
                                <div id="du5h7y5kct" style="display: flex; flex-direction: column; gap: 4px;"></div>
                            </div>

                            <div class="d0uttwsjz2" style="margin-bottom: 8px;">
                                <label><i class="fa-solid fa-note-sticky"></i> <span>ملاحظات العميل:</span></label>
                                <textarea id="ab9w3psogf" class="f0ngq4vbzj" style="height: 60px; min-height: 50px;" placeholder="اكتب أي ملاحظات خاصة بالعميل هنا..."></textarea>
                            </div>

                            <div class="mkxtd1c1kq" style="margin-bottom: 8px;">
                                <input type="checkbox" id="baysuwhq61">
                                <label for="baysuwhq61"><i class="fa-solid fa-user-slash" style="color: var(--danger);"></i> <span>إضافة للقائمة السوداء (استبعاد وحظر من الإرسال)</span></label>
                            </div>

                            <button type="button" id="du3bb5vayt" class="itdnt14mss" style="width: 100%; padding: 12px; font-size: 13px; font-weight: 800;">
                                <i class="fa-solid fa-floppy-disk"></i> <span>حفظ وتوثيق بيانات العميل فوراً</span>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 2. نافذة استيراد جهات الاتصال -->
                <div class="cpzxome5dd" id="gpifk7jnfx">
                    <div class="s4yvtq9394" style="max-width: min(580px, 94vw);">
                        <div class="x8pdlyq70a">
                            <div class="tooau3ykdi"><i class="fa-solid fa-file-import" style="color: var(--wa-brand);"></i> <span>استيراد جهات الاتصال</span></div>
                            <button class="bcuz086hu4" id="nx0cpoqxzw">&times;</button>
                        </div>
                        <div class="zn6t0dl6ke">
                            <div class="jbhynmzpf2" id="h525b2cyd0">
                                <i class="fa-solid fa-cloud-arrow-up fa-3x" style="color: var(--wa-brand); margin-bottom: 6px;"></i>
                                <strong style="font-size: 13px;"><i class="fa-solid fa-file-arrow-up"></i> <span>اسحب وأفلت الملف هنا، أو اضغط لاختياره من جهازك</span></strong>
                                <span style="font-size: 10.5px; color: var(--text-muted);"><i class="fa-solid fa-info-circle"></i> <span>يدعم ملفات: Google Contacts CSV, vCard (.vcf), وملفات CSV / TXT العادية.</span></span>
                                <input type="file" id="fi0jafn7lc" accept=".csv,.vcf,.txt" style="display: none;">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 3. نافذة تصدير جهات الاتصال -->
                <div class="cpzxome5dd" id="rbqob9x718">
                    <div class="s4yvtq9394" style="max-width: min(480px, 94vw);">
                        <div class="x8pdlyq70a">
                            <div class="tooau3ykdi"><i class="fa-solid fa-file-export" style="color: var(--primary);"></i> <span>تصدير جهات الاتصال</span></div>
                            <button class="bcuz086hu4" id="has3vfwumz">&times;</button>
                        </div>
                        <div class="zn6t0dl6ke">
                            <div class="d0uttwsjz2" style="margin-bottom: 14px;">
                                <label style="font-weight: 700;"><i class="fa-solid fa-file-code"></i> <span>اختر صيغة الملف للتصدير:</span></label>
                                <select id="nealj97cx2" class="xy26ymifmf" style="padding: 10px; font-weight: 700;">
                                    <option value="vcf" selected>ملف vCard (.vcf) لـ Android & iOS</option>
                                    <option value="google_csv">ملف Google Contacts CSV القياسي</option>
                                    <option value="csv">ملف CSV متوافق مع Excel</option>
                                    <option value="json">ملف JSON لنسخ البيانات</option>
                                </select>
                            </div>
                            <button type="button" id="nah2wji7pd" class="itdnt14mss" style="width: 100%; padding: 12px; font-size: 12.5px; font-weight: 800;">
                                <i class="fa-solid fa-download"></i> <span>تنزيل وتصدير الملف فوراً</span>
                            </button>
                        </div>
                    </div>
                </div>
            `;

            host.appendChild(pane);
            return true;
        }
    };

    /**
     * تصدير وحدة بناء واجهة جهات الاتصال
     */
    global.FritreeContactsLayout = ContactsLayoutBuilder;

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