rotation-groups-ui.js

/**
 * @fileoverview Rotation Custom Groups UI & Post Picker Modal
 * @module ui/rotation-groups-ui
 * @description بناء وإدارة واجهة حزم المنشورات المخصصة للتدوير ونافذة اختيار وتجميع المنشورات.
 */

(global => {
    'use strict';

    const state = global.FritreeRotationState;
    let activeGroupSelectedPosts = new Set();

    /**
     * بناء نافذة إنشاء أو تعديل حزمة المنشورات المخصصة بالـ DOM
     */
    const appendGroupModalLayout = () => {
        let modal = document.getElementById('ds9wa6kqc8');
        if (modal) return;

        modal = document.createElement('div');
        modal.className = 'cpzxome5dd';
        modal.id = 'ds9wa6kqc8';
        modal.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; z-index: var(--z-modal-backdrop); background-color: rgba(15, 23, 42, 0.65); direction: rtl; text-align: right; box-sizing: border-box;';
        modal.innerHTML = `
            <div class="s4yvtq9394" style="max-width: min(850px, 94vw); max-height: min(90vh, 880px); border-radius: var(--radius-xl); background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-modal);">
                <div class="x8pdlyq70a" style="border-bottom: 1px solid var(--border); padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; background: var(--bg-subtle);">
                    <div class="tooau3ykdi" style="font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 8px;">
                        <i class="fa-solid fa-layer-group" style="color: #8b5cf6;"></i> 
                        <span id="group-modal-title-text">إنشاء أو تعديل حزمة منشورات مخصصة</span>
                    </div>
                    <button class="bcuz086hu4" id="k3esjmg5ux">&times;</button>
                </div>
                <div class="zn6t0dl6ke" style="padding: clamp(14px, 1.5vw, 22px); max-height: 78vh; overflow-y: auto;">
                    <input type="hidden" id="onad6k1t7j">
                    
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 20vw, 280px), 1fr)); gap: 10px; margin-bottom: 10px;">
                        <div class="d0uttwsjz2" style="margin: 0;">
                            <label style="font-weight: 700; font-size: 11.5px;"><i class="fa-solid fa-heading"></i> <span>اسم حزمة المنشورات المخصصة:</span></label>
                            <input type="text" id="yywkx0ogsz" class="xy26ymifmf" style="padding: 8px 12px; font-weight: 700;" placeholder="مثال: حزمة منشورات العقارات والفلل">
                        </div>
                        <div class="d0uttwsjz2" style="margin: 0;">
                            <label style="font-weight: 700; font-size: 11.5px;"><i class="fa-solid fa-circle-info"></i> <span>حالة الحزمة:</span></label>
                            <select id="bnhi6cbqml" class="x7fmsajit7" style="padding: 8px 10px; font-weight: 700; width: 100%;">
                                <option value="active" selected>نشطة ومتاحة في التدوير</option>
                                <option value="inactive">معطلة مؤقتاً ومستبعدة</option>
                            </select>
                        </div>
                    </div>

                    <div class="d0uttwsjz2" style="margin-bottom: 10px;">
                        <label style="font-weight: 700; font-size: 11.5px;"><i class="fa-solid fa-align-right"></i> <span>وصف الحزمة والغرض منها:</span></label>
                        <input type="text" id="tbzcy8uwaa" class="xy26ymifmf" style="padding: 8px 12px;" placeholder="اكتب وصفاً مختصراً للحزمة للتوضيح...">
                    </div>

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

                    <!-- صندوق تحديد واختيار المنشورات -->
                    <div style="border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 14px; margin-bottom: 14px; background: var(--bg-subtle);">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 6px;">
                            <label style="font-weight: 800; margin: 0; font-size: 12px; color: var(--text-main);">
                                <i class="fa-solid fa-list-check" style="color: #8b5cf6;"></i> <span>حدد المنشورات التابعة للحزمة من الأرشيف:</span>
                            </label>
                            <span id="chz5w0hml4" style="font-size: 10.5px; font-weight: 800; background: var(--bg-card); padding: 2px 8px; border-radius: var(--radius-pill); border: 1px solid var(--border); font-family: var(--font-code);">(تم اختيار: 0 منشور)</span>
                        </div>
                        <div style="position: relative; width: 100%; margin-bottom: 8px;">
                            <input type="text" id="dabqzyo58x" class="xy26ymifmf" style="padding: 6px 10px; font-size: 11px;" placeholder="ابحث لتصفية المنشورات المعروضة هنا...">
                        </div>
                        <div id="afusbip90m" style="max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); padding: 6px; display: flex; flex-direction: column; gap: 4px; box-sizing: border-box;"></div>
                    </div>

                    <button type="button" id="y8gh89syeu" class="itdnt14mss" style="width: 100%; padding: 11px; font-size: 12.5px; font-weight: 800; background: #8b5cf6; border-color: #8b5cf6;">
                        <i class="fa-solid fa-floppy-disk"></i> <span>حفظ وتوثيق حزمة المنشورات المخصصة</span>
                    </button>
                </div>
            </div>
        `;
        document.body.appendChild(modal);

        const closeBtn = document.getElementById('k3esjmg5ux');
        if (closeBtn) {
            closeBtn.onclick = () => {
                modal.style.display = 'none';
            };
        }

        const saveBtn = document.getElementById('y8gh89syeu');
        if (saveBtn) {
            saveBtn.onclick = savePostGroupData;
        }

        const searchInput = document.getElementById('dabqzyo58x');
        if (searchInput) {
            searchInput.oninput = () => {
                renderGroupPostPickerList(activeGroupSelectedPosts);
            };
        }
    };

    /**
     * رسم قائمة اختيار المنشورات داخل النافذة المنبثقة
     * @param {Set<string>} selectedPostIdsSet 
     */
    const renderGroupPostPickerList = (selectedPostIdsSet) => {
        const container = document.getElementById('afusbip90m');
        const countBadge = document.getElementById('chz5w0hml4');
        const filterQuery = (document.getElementById('dabqzyo58x')?.value || '').toLowerCase().trim();
        if (!container) return;
        container.innerHTML = '';

        if (countBadge) {
            countBadge.textContent = `(تم اختيار: ${selectedPostIdsSet.size.toLocaleString('en-US')} منشور)`;
        }

        const availablePosts = state.previousPostsData || [];
        if (availablePosts.length === 0) {
            container.innerHTML = '<div style="padding:15px; text-align:center; color:var(--text-muted); font-size:11.5px;"><i class="fa-solid fa-circle-info"></i> لا توجد منشورات مؤرشفة بالمكتبة حالياً. يرجى إضافة منشورات أولاً.</div>';
            return;
        }

        let renderedCount = 0;
        availablePosts.forEach(p => {
            const matchSearch = !filterQuery || 
                (p.title && p.title.toLowerCase().includes(filterQuery)) ||
                (p.text && p.text.toLowerCase().includes(filterQuery)) ||
                (p.keywords && p.keywords.some(k => k.toLowerCase().includes(filterQuery)));
            if (!matchSearch) return;

            renderedCount++;
            const isChecked = selectedPostIdsSet.has(p.id);
            const row = document.createElement('div');
            row.style.cssText = `
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 6px 10px;
                border-radius: var(--radius-sm);
                border: 1px solid ${isChecked ? '#8b5cf6' : 'var(--border)'};
                background: ${isChecked ? 'var(--purple-light)' : 'var(--bg-card)'};
                cursor: pointer;
                transition: background-color 0.15s, border-color 0.15s;
                box-sizing: border-box;
            `;
            row.innerHTML = `
                <input type="checkbox" value="${p.id}" ${isChecked ? 'checked' : ''} style="width:16px; height:16px; cursor:pointer; accent-color: #8b5cf6; flex-shrink: 0;">
                <div style="flex:1; min-width: 0; overflow:hidden;">
                    <strong style="font-size:11.5px; display:flex; align-items:center; gap:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text-main);">
                        <i class="fa-solid fa-file-lines" style="color: #8b5cf6;"></i> <span>${p.title || 'منشور بدون عنوان'}</span>
                    </strong>
                    <span style="font-size:10px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; margin-top:1px;">
                        ${p.text ? p.text.substring(0, 60) + '...' : '[صور/فيديو فقط]'}
                    </span>
                </div>
            `;

            const chk = row.querySelector('input[type="checkbox"]');
            row.onclick = (e) => {
                if (e.target !== chk) chk.checked = !chk.checked;
                if (chk.checked) {
                    selectedPostIdsSet.add(p.id);
                } else {
                    selectedPostIdsSet.delete(p.id);
                }
                renderGroupPostPickerList(selectedPostIdsSet);
            };

            container.appendChild(row);
        });

        if (renderedCount === 0) {
            container.innerHTML = '<div style="padding:15px; text-align:center; color:var(--text-muted); font-size:11.5px;"><i class="fa-solid fa-circle-question"></i> لم يتم العثور على منشورات مطابقة للبحث.</div>';
        }
    };

    /**
     * فتح نافذة إنشاء أو تعديل حزمة المنشورات
     * @param {string|null} groupId 
     * @param {Array<string>} preselectedPostIds 
     */
    const openEditGroupModal = (groupId = null, preselectedPostIds = []) => {
        appendGroupModalLayout();
        const modal = document.getElementById('ds9wa6kqc8');
        const titleLbl = document.getElementById('group-modal-title-text');
        const idInp = document.getElementById('onad6k1t7j');
        const nameInp = document.getElementById('yywkx0ogsz');
        const descInp = document.getElementById('tbzcy8uwaa');
        const statusSelect = document.getElementById('bnhi6cbqml');
        const tagsInp = document.getElementById('r6i2ogrga9');
        const searchInput = document.getElementById('dabqzyo58x');

        if (searchInput) searchInput.value = '';

        if (groupId) {
            const group = (state.postGroupsData || []).find(g => g.id === groupId);
            if (group) {
                idInp.value = group.id; 
                nameInp.value = group.name || '';
                descInp.value = group.description || '';
                statusSelect.value = group.status || 'active';
                tagsInp.value = group.tags ? group.tags.join(', ') : '';
                activeGroupSelectedPosts = new Set(group.postIds || []);
                if (titleLbl) titleLbl.innerHTML = `<i class="fa-solid fa-pen-to-square" style="color:#8b5cf6;"></i> <span>تعديل حزمة المنشورات: "${group.name}"</span>`;
            }
        } else {
            idInp.value = '';
            nameInp.value = '';
            descInp.value = '';
            statusSelect.value = 'active';
            tagsInp.value = '';
            activeGroupSelectedPosts = new Set(preselectedPostIds || []);
            if (titleLbl) titleLbl.innerHTML = `<i class="fa-solid fa-layer-group" style="color:#8b5cf6;"></i> <span>إنشاء حزمة منشورات مخصصة جديدة</span>`;
        }

        renderGroupPostPickerList(activeGroupSelectedPosts);
        if (modal) modal.style.display = 'flex';
    };

    /**
     * حفظ بيانات حزمة المنشورات في الذاكرة والتخزين المشفر
     */
    const savePostGroupData = async () => {
        const idVal = (document.getElementById('onad6k1t7j')?.value || '').trim();
        const nameVal = (document.getElementById('yywkx0ogsz')?.value || '').trim();
        const descVal = (document.getElementById('tbzcy8uwaa')?.value || '').trim();
        const statusVal = document.getElementById('bnhi6cbqml')?.value || 'active';
        const tagsVal = document.getElementById('r6i2ogrga9')?.value || '';

        if (!nameVal) {
            alert('يرجى كتابة اسم واضح ومميز للحزمة!');
            return;
        }

        const selectedPostIds = Array.from(activeGroupSelectedPosts);

        if (selectedPostIds.length === 0) {
            alert('حدد منشوراً واحداً على الأقل من القائمة لإضافته للحزمة!');
            return;
        }

        const tagsArray = tagsVal.split(',').map(s => s.trim().toLowerCase()).filter(s => s);

        if (!Array.isArray(state.postGroupsData)) {
            state.postGroupsData = [];
        }

        if (idVal) {
            const group = state.postGroupsData.find(g => g.id === idVal);
            if (group) {
                group.name = nameVal;
                group.description = descVal;
                group.status = statusVal;
                group.tags = tagsArray;
                group.postIds = selectedPostIds;
                group.updatedAt = new Date().toISOString();
            }
        } else {
            const newGroupId = 'grp_' + Date.now() + '_' + Math.random().toString(36).substr(2, 4);
            const newGroup = {
                id: newGroupId,
                name: nameVal,
                description: descVal,
                status: statusVal,
                tags: tagsArray,
                postIds: selectedPostIds,
                createdAt: new Date().toISOString()
            };
            state.postGroupsData.unshift(newGroup);
        }

        if (global.FritreeStorage) {
            await global.FritreeStorage.set('local_post_groups', state.postGroupsData);
        }

        if (global.FritreeRotationStore && typeof global.FritreeRotationStore.save === 'function') {
            await global.FritreeRotationStore.save();
        }

        renderPostGroupsGrid();

        const modal = document.getElementById('ds9wa6kqc8');
        if (modal) modal.style.display = 'none';

        if (typeof window.addLog === 'function') {
            window.addLog(`تم بنجاح حفظ وتأمين حزمة المنشورات المخصصة "${nameVal}" وبداخلها [${selectedPostIds.length}] منشورات.`, 'success');
        }

        alert(`تم حفظ وتحديث حزمة المنشورات "${nameVal}" بنجاح!`);
    };

    /**
     * رسم شبكة حزم المنشورات المخصصة
     */
    const renderPostGroupsGrid = () => {
        const container = document.getElementById('ol8f7kxcxu');
        if (!container) return;
        container.innerHTML = '';

        const searchQuery = (document.getElementById('z1pixj1rxo')?.value || '').toLowerCase().trim();
        const statusFilter = document.getElementById('ll0i3bsngj')?.value || 'all';

        const filteredGroups = (state.postGroupsData || []).filter(g => {
            const matchesSearch = !searchQuery || 
                (g.name && g.name.toLowerCase().includes(searchQuery)) ||
                (g.description && g.description.toLowerCase().includes(searchQuery)) ||
                (g.tags && g.tags.some(t => t.toLowerCase().includes(searchQuery)));

            let matchesStatus = true;
            if (statusFilter === 'active') matchesStatus = g.status === 'active';
            else if (statusFilter === 'inactive') matchesStatus = g.status === 'inactive';

            return matchesSearch && matchesStatus;
        });

        if (filteredGroups.length === 0) {
            container.innerHTML = `
                <div style="background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:35px 20px; text-align:center; color:var(--text-muted);">
                    <i class="fa-solid fa-layer-group" style="font-size:32px; display:block; margin-bottom:8px; color: #8b5cf6;"></i> 
                    <strong style="font-size:13px; display:block; margin-bottom:4px; color:var(--text-main);">لا توجد حزم منشورات مخصصة مطابقة حالياً</strong>
                    <span style="font-size:11.5px;">اضغط على زر "حزمة مخصصة جديدة" لتجميع المنشورات المحددة للتدوير.</span>
                </div>
            `;
            return;
        }

        // 1. عرض البطاقات (Cards View)
        if (state.groupViewMode === 'cards') {
            const grid = document.createElement('div');
            grid.style.cssText = 'display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(260px, 25vw, 320px), 1fr)); gap: 12px; box-sizing: border-box;';

            filteredGroups.forEach(group => {
                const associatedPosts = (state.previousPostsData || []).filter(p => (group.postIds || []).includes(p.id));
                const activePostsCount = associatedPosts.filter(p => p.status === 'active').length;

                const card = document.createElement('div');
                card.style.cssText = `
                    background: var(--bg-card);
                    border: 1px solid ${group.status === 'active' ? 'var(--purple-border)' : 'var(--border)'};
                    border-radius: var(--radius-lg);
                    padding: 14px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    gap: 10px;
                    direction: rtl;
                    text-align: right;
                    position: relative;
                    box-shadow: var(--shadow-xs);
                    box-sizing: border-box;
                `;
                card.innerHTML = `
                    <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;">
                        <div style="min-width: 0; flex: 1;">
                            <strong style="font-size: 13px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-main);">
                                <i class="fa-solid fa-folder-closed" style="color: #8b5cf6;"></i> <span>${group.name}</span>
                            </strong>
                            <span style="font-size: 9.5px; margin-top: 1px; display: block; color: var(--text-muted); font-family: var(--font-code);">
                                كود: ${group.id}
                            </span>
                            <span style="font-size: 11px; margin-top: 3px; display: block; color: var(--text-secondary); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                ${group.description || 'لا يوجد وصف مخصص'}
                            </span>
                        </div>
                        <span class="go30y9mfgh ${group.status === 'active' ? 'success' : 'failed'}">
                            ${group.status === 'active' ? 'نشطة' : 'معطلة'}
                        </span>
                    </div>

                    <div style="background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 10px; display: flex; flex-direction: column; gap: 4px;">
                        <div style="display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 700;">
                            <span style="color: var(--text-muted);"><i class="fa-solid fa-file-lines"></i> <span>المنشورات بالحزمة:</span></span>
                            <strong style="color: var(--text-main); font-family: var(--font-code);">${(group.postIds || []).length.toLocaleString('en-US')} (${activePostsCount} نشط)</strong>
                        </div>
                        <div style="display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px;">
                            ${associatedPosts.slice(0, 3).map(p => `
                                <span style="font-size: 9px; background: var(--purple-light); border: 1px solid var(--purple-border); color: var(--purple); padding: 1px 5px; border-radius: 4px; white-space: nowrap; max-width: 90px; overflow: hidden; text-overflow: ellipsis; font-weight: 700;">
                                    ${p.title || 'منشور'}
                                </span>
                            `).join('')}
                            ${associatedPosts.length > 3 ? `<span style="font-size: 9px; font-weight: 800; color: #8b5cf6;">+${associatedPosts.length - 3} المزيد</span>` : ''}
                        </div>
                    </div>

                    <div style="display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); padding-top: 8px; margin-top: 2px;">
                        <span style="font-size: 9.5px; color: var(--text-muted); font-family: var(--font-code);">
                            <i class="fa-regular fa-calendar"></i> <span>${new Date(group.createdAt || Date.now()).toLocaleDateString('en-US')}</span>
                        </span>
                        <div style="display: flex; gap: 4px;">
                            <button type="button" class="ipxi2jz4g0 xq67gme26p" style="padding: 3px 8px; font-size: 10px; min-height: 28px;" title="تغيير حالة المجموعة">
                                <i class="fa-solid ${group.status === 'active' ? 'fa-pause' : 'fa-play'}"></i> <span>${group.status === 'active' ? 'تعطيل' : 'تفعيل'}</span>
                            </button>
                            <button type="button" class="ipxi2jz4g0 xb7cu30cd5" style="padding: 3px 8px; font-size: 10px; min-height: 28px;" title="تعديل الحزمة والمنشورات">
                                <i class="fa-solid fa-pen-to-square"></i> <span>تعديل</span>
                            </button>
                            <button type="button" class="btn-danger cvrh2lhgbj" style="padding: 3px 8px; font-size: 10px; min-height: 28px;" title="حذف الحزمة">
                                <i class="fa-solid fa-trash"></i> 
                            </button>
                        </div>
                    </div>
                `;

                card.querySelector('.xq67gme26p').onclick = async () => {
                    group.status = group.status === 'active' ? 'inactive' : 'active';
                    if (global.FritreeStorage) {
                        await global.FritreeStorage.set('local_post_groups', state.postGroupsData);
                    }
                    renderPostGroupsGrid();
                };

                card.querySelector('.xb7cu30cd5').onclick = () => {
                    openEditGroupModal(group.id);
                };

                card.querySelector('.cvrh2lhgbj').onclick = async () => {
                    if (confirm(`هل أنت متأكد من حذف حزمة المنشورات "${group.name}"؟ (المنشورات نفسها لن تُحذف من الأرشيف).`)) {
                        state.postGroupsData = state.postGroupsData.filter(g => g.id !== group.id);
                        if (global.FritreeStorage) {
                            await global.FritreeStorage.set('local_post_groups', state.postGroupsData);
                        }
                        renderPostGroupsGrid();
                    }
                };

                grid.appendChild(card);
            });

            container.appendChild(grid);
        } else {
            // 2. عرض الجدول (Table View)
            const tableBox = document.createElement('div');
            tableBox.className = 'diktqr0h64';
            tableBox.style.cssText = 'max-height: 520px;';
            tableBox.innerHTML = `
                <table style="width: 100%; border-collapse: collapse; direction: rtl; text-align: right;">
                    <thead>
                        <tr>
                            <th style="width: 25%; padding: 10px 8px;"><i class="fa-solid fa-heading"></i> <span>اسم الحزمة</span></th>
                            <th style="width: 32%; padding: 10px 8px;"><i class="fa-solid fa-align-right"></i> <span>الوصف</span></th>
                            <th style="width: 15%; padding: 10px 8px; text-align: center;"><i class="fa-solid fa-file-lines"></i> <span>المنشورات</span></th>
                            <th style="width: 14%; padding: 10px 8px; text-align: center;"><i class="fa-solid fa-circle-info"></i> <span>الحالة</span></th>
                            <th style="width: 14%; padding: 10px 8px; text-align: center;">الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody id="lboswjm57m"></tbody>
                </table>
            `;

            const tbody = tableBox.querySelector('#lboswjm57m');
            filteredGroups.forEach(group => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td style="padding: 10px 8px; font-weight: 700;">
                        <i class="fa-solid fa-layer-group" style="color: #8b5cf6; margin-left: 4px;"></i> <span style="color:var(--text-main);">${group.name}</span>
                        <div style="font-size: 9px; color: var(--text-muted); font-family: var(--font-code);">كود: ${group.id}</div>
                    </td>
                    <td style="padding: 10px 8px; font-size: 11px; color: var(--text-secondary);">
                        ${group.description || 'لا يوجد وصف مخصص'}
                    </td>
                    <td style="padding: 10px 8px; text-align: center; font-weight: 700; font-family: var(--font-code);">
                        ${(group.postIds || []).length.toLocaleString('en-US')} منشور
                    </td>
                    <td style="padding: 10px 8px; text-align: center;">
                        <span class="go30y9mfgh ${group.status === 'active' ? 'success' : 'failed'}">
                            ${group.status === 'active' ? 'نشطة' : 'معطلة'}
                        </span>
                    </td>
                    <td style="padding: 10px 8px; text-align: center;">
                        <div style="display: flex; gap: 4px; justify-content: center;">
                            <button type="button" class="f3ko84hxzm zdffbc2hoa" title="تغيير الحالة"><i class="fa-solid ${group.status === 'active' ? 'fa-pause' : 'fa-play'}"></i> </button>
                            <button type="button" class="f3ko84hxzm k4j50z448o" title="تعديل"><i class="fa-solid fa-pen-to-square"></i> </button>
                            <button type="button" class="f3ko84hxzm h2o7c0chyq" style="color:var(--danger);" title="حذف"><i class="fa-solid fa-trash"></i> </button>
                        </div>
                    </td>
                `;

                tr.querySelector('.zdffbc2hoa').onclick = async () => {
                    group.status = group.status === 'active' ? 'inactive' : 'active';
                    if (global.FritreeStorage) {
                        await global.FritreeStorage.set('local_post_groups', state.postGroupsData);
                    }
                    renderPostGroupsGrid();
                };

                tr.querySelector('.k4j50z448o').onclick = () => {
                    openEditGroupModal(group.id);
                };

                tr.querySelector('.h2o7c0chyq').onclick = async () => {
                    if (confirm(`هل أنت متأكد من حذف حزمة المنشورات "${group.name}"؟`)) {
                        state.postGroupsData = state.postGroupsData.filter(g => g.id !== group.id);
                        if (global.FritreeStorage) {
                            await global.FritreeStorage.set('local_post_groups', state.postGroupsData);
                        }
                        renderPostGroupsGrid();
                    }
                };

                tbody.appendChild(tr);
            });

            container.appendChild(tableBox);
        }
    };

    /**
     * ربط أحداث الفلاتر والتبديل
     */
    const bindGroupFiltersAndEvents = () => {
        const searchInput = document.getElementById('z1pixj1rxo');
        const statusSelect = document.getElementById('ll0i3bsngj');
        const btnCards = document.getElementById('cdrij5tie2');
        const btnTable = document.getElementById('sy0af55ns2');

        if (searchInput) searchInput.oninput = renderPostGroupsGrid;
        if (statusSelect) statusSelect.onchange = renderPostGroupsGrid;

        if (btnCards && btnTable) {
            btnCards.onclick = () => {
                state.groupViewMode = 'cards';
                btnCards.classList.add('vn5qn7dmpk');
                btnTable.classList.remove('vn5qn7dmpk');
                renderPostGroupsGrid();
            };
            btnTable.onclick = () => {
                state.groupViewMode = 'table';
                btnTable.classList.add('vn5qn7dmpk');
                btnCards.classList.remove('vn5qn7dmpk');
                renderPostGroupsGrid();
            };
        }
    };

    /**
     * تهيئة وحدة حزم المنشورات المخصصة
     */
    const initGroupsModule = () => {
        appendGroupModalLayout();
        bindGroupFiltersAndEvents();
        renderPostGroupsGrid();
        return true;
    };

    /**
     * تصدير وحدة واجهة حزم المنشورات
     */
    global.FritreeRotationGroups = {
        init: initGroupsModule,
        openModal: openEditGroupModal,
        saveGroup: savePostGroupData,
        renderGrid: renderPostGroupsGrid
    };

    if (typeof document !== 'undefined') {
        if (document.readyState === 'complete' || document.readyState === 'interactive') {
            initGroupsModule();
        } else {
            document.addEventListener('DOMContentLoaded', initGroupsModule);
        }
    }

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