/**
 * Posts Management Page for KSTools License Manager
 * 貼文發布管理頁面
 */

class PostsPage {
    constructor() {
        this.posts = [];
        this.users = [];  // 用戶列表（用於選擇收件人）
        this.filters = {
            productType: 'all',
            status: 'all'
        };
        this.currentEditPost = null;
        this.selectedEmails = [];  // 當前選中的收件人
    }

    async render(container) {
        container.innerHTML = `
            <div class="posts-page">
                <div class="page-header mb-4">
                    <div class="d-flex justify-between align-center">
                        <div>
                            <h2>貼文發布</h2>
                            <p class="text-secondary">管理版本更新貼文與郵件通知</p>
                        </div>
                        <div class="d-flex gap-2">
                            <button class="btn btn-success" onclick="postsPage.createNewPost()">
                                <i class="fas fa-plus"></i>
                                新增公告
                            </button>
                            <button class="btn btn-secondary" onclick="postsPage.refreshPosts()">
                                <i class="fas fa-sync-alt"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 篩選區 -->
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="filters-container">
                            <div class="filter-group">
                                <label class="filter-label">類型</label>
                                <div class="filter-buttons" id="productTypeFilter">
                                    <button type="button" class="filter-btn active" data-value="all">全部</button>
                                    <button type="button" class="filter-btn" data-value="revit">Revit</button>
                                    <button type="button" class="filter-btn" data-value="autocad">AutoCAD</button>
                                    <button type="button" class="filter-btn" data-value="announcement">公告</button>
                                </div>
                            </div>
                            <div class="filter-group">
                                <label class="filter-label">狀態</label>
                                <div class="filter-buttons" id="statusFilter">
                                    <button type="button" class="filter-btn active" data-value="all">全部</button>
                                    <button type="button" class="filter-btn" data-value="draft">草稿</button>
                                    <button type="button" class="filter-btn" data-value="sent">已發送</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 貼文統計 -->
                <div class="stats-row mb-4" id="postsStats">
                    <div class="stat-card">
                        <div class="stat-icon"><i class="fas fa-file-alt"></i></div>
                        <div class="stat-info">
                            <span class="stat-value" id="statTotal">-</span>
                            <span class="stat-label">總貼文數</span>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon draft"><i class="fas fa-edit"></i></div>
                        <div class="stat-info">
                            <span class="stat-value" id="statDraft">-</span>
                            <span class="stat-label">草稿</span>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon sent"><i class="fas fa-envelope"></i></div>
                        <div class="stat-info">
                            <span class="stat-value" id="statSent">-</span>
                            <span class="stat-label">已發送</span>
                        </div>
                    </div>
                </div>

                <!-- 貼文列表 -->
                <div class="posts-grid" id="postsGrid">
                    <div class="text-center mt-5">
                        <div class="spinner mb-3"></div>
                        <p>載入貼文中...</p>
                    </div>
                </div>
            </div>

            <!-- 編輯 Modal -->
            <div class="modal-overlay" id="editPostModal" style="display: none;">
                <div class="modal-dialog modal-lg">
                    <div class="modal-header">
                        <h3 class="modal-title">編輯貼文</h3>
                        <button class="modal-close" onclick="postsPage.closeEditModal()">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="editPostForm">
                            <div class="form-group">
                                <label class="form-label">主旨</label>
                                <input type="text" id="editSubject" class="form-input" placeholder="輸入郵件主旨..." required>
                            </div>
                            <div class="form-group">
                                <label class="form-label">內容</label>
                                <textarea id="editContent" class="form-textarea" rows="8" placeholder="輸入貼文內容..." required></textarea>
                                <small class="form-hint">可使用 {download_link} 變數，系統會自動替換為下載連結</small>
                            </div>
                            <div class="form-group">
                                <label class="form-label">收件人</label>
                                <div class="recipient-controls mb-2">
                                    <button type="button" class="btn btn-sm btn-secondary" onclick="postsPage.selectAllUsers()">
                                        <i class="fas fa-check-double"></i> 全選
                                    </button>
                                    <button type="button" class="btn btn-sm btn-secondary" onclick="postsPage.deselectAllUsers()">
                                        <i class="fas fa-times"></i> 取消全選
                                    </button>
                                    <span class="selected-count" id="selectedCount">已選擇: 0 位用戶</span>
                                </div>
                                <div class="recipient-list" id="recipientList">
                                    <div class="text-center p-3">
                                        <div class="spinner-sm"></div>
                                        <small>載入用戶列表...</small>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary" onclick="postsPage.closeEditModal()">取消</button>
                        <button class="btn btn-primary" onclick="postsPage.savePost()">
                            <i class="fas fa-save"></i> 儲存
                        </button>
                    </div>
                </div>
            </div>

            <!-- 新增公告 Modal -->
            <div class="modal-overlay" id="newPostModal" style="display: none;">
                <div class="modal-dialog">
                    <div class="modal-header">
                        <h3 class="modal-title">新增公告</h3>
                        <button class="modal-close" onclick="postsPage.closeNewPostModal()">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="newPostForm">
                            <div class="form-group">
                                <label class="form-label">公告類型</label>
                                <select id="newPostType" class="form-select">
                                    <option value="announcement">一般公告</option>
                                    <option value="emergency">緊急通知</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">主旨</label>
                                <input type="text" id="newPostSubject" class="form-input" placeholder="輸入公告主旨..." required>
                            </div>
                            <div class="form-group">
                                <label class="form-label">內容</label>
                                <textarea id="newPostContent" class="form-textarea" rows="6" placeholder="輸入公告內容..." required></textarea>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary" onclick="postsPage.closeNewPostModal()">取消</button>
                        <button class="btn btn-success" onclick="postsPage.submitNewPost()">
                            <i class="fas fa-plus"></i> 建立公告
                        </button>
                    </div>
                </div>
            </div>
        `;

        this.setupEventHandlers();
        await this.loadPosts();
    }

    setupEventHandlers() {
        // 產品類型篩選
        const productTypeFilter = document.getElementById('productTypeFilter');
        if (productTypeFilter) {
            productTypeFilter.addEventListener('click', (e) => {
                const btn = e.target.closest('.filter-btn');
                if (btn) {
                    productTypeFilter.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
                    btn.classList.add('active');
                    this.filters.productType = btn.dataset.value;
                    this.displayPosts();
                }
            });
        }

        // 狀態篩選
        const statusFilter = document.getElementById('statusFilter');
        if (statusFilter) {
            statusFilter.addEventListener('click', (e) => {
                const btn = e.target.closest('.filter-btn');
                if (btn) {
                    statusFilter.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
                    btn.classList.add('active');
                    this.filters.status = btn.dataset.value;
                    this.displayPosts();
                }
            });
        }

        // Modal 背景點擊關閉
        const modal = document.getElementById('editPostModal');
        if (modal) {
            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    this.closeEditModal();
                }
            });
        }
    }

    async loadPosts() {
        try {
            const result = await api.getPosts();
            this.posts = result.posts || [];
            this.updateStats();
            this.displayPosts();
        } catch (error) {
            console.error('Load posts error:', error);
            const grid = document.getElementById('postsGrid');
            if (grid) {
                grid.innerHTML = `
                    <div class="empty-state">
                        <i class="fas fa-exclamation-circle"></i>
                        <h3>載入失敗</h3>
                        <p>${error.message}</p>
                        <button class="btn btn-primary" onclick="postsPage.refreshPosts()">重試</button>
                    </div>
                `;
            }
        }
    }

    updateStats() {
        const total = this.posts.length;
        const draft = this.posts.filter(p => p.status === 'draft' || p.status === 'published').length;
        const sent = this.posts.filter(p => p.status === 'sent').length;

        document.getElementById('statTotal').textContent = total;
        document.getElementById('statDraft').textContent = draft;
        document.getElementById('statSent').textContent = sent;
    }

    displayPosts() {
        const grid = document.getElementById('postsGrid');
        if (!grid) return;

        // 篩選貼文
        let filteredPosts = this.posts;

        if (this.filters.productType !== 'all') {
            filteredPosts = filteredPosts.filter(p => p.product_type === this.filters.productType);
        }

        if (this.filters.status !== 'all') {
            filteredPosts = filteredPosts.filter(p => p.status === this.filters.status);
        }

        if (filteredPosts.length === 0) {
            grid.innerHTML = `
                <div class="empty-state">
                    <i class="fas fa-inbox"></i>
                    <h3>沒有貼文</h3>
                    <p>當發布新版本時，系統會自動建立貼文草稿</p>
                </div>
            `;
            return;
        }

        grid.innerHTML = filteredPosts.map(post => this.createPostCard(post)).join('');
    }

    createPostCard(post) {
        let productBadge;
        if (post.product_type === 'revit') {
            productBadge = '<span class="product-badge revit">Revit</span>';
        } else if (post.product_type === 'autocad') {
            productBadge = '<span class="product-badge autocad">AutoCAD</span>';
        } else {
            productBadge = '<span class="product-badge announcement">公告</span>';
        }

        const statusBadge = this.getStatusBadge(post.status);
        const createdDate = new Date(post.created_at).toLocaleDateString('zh-TW');

        // 如果主旨為空，顯示版本資訊作為標題
        let displaySubject;
        if (post.subject) {
            displaySubject = post.subject;
        } else if (post.product_type === 'announcement') {
            displaySubject = '新公告（待編輯）';
        } else if (post.title) {
            // 如果有版本標題，顯示版本標題
            displaySubject = `${post.product_type === 'revit' ? 'Revit' : 'AutoCAD'} v${post.version} - ${post.title}`;
        } else {
            displaySubject = `${post.product_type === 'revit' ? 'Revit' : 'AutoCAD'} v${post.version} 版本更新`;
        }

        // 如果內容為空，顯示提示訊息
        const contentPreview = post.content
            ? this.truncateText(post.content, 150)
            : '尚未編輯貼文內容，請點擊編輯按鈕填寫';

        // 收件人資訊
        const recipientCount = post.selected_emails && post.selected_emails.length > 0
            ? post.selected_emails.length
            : '全部';

        // 統一的操作按鈕（簡化流程：所有狀態都可以編輯和發送）
        const emailLogs = post.email_logs || [];
        const sendCount = emailLogs.length;
        const sentInfo = sendCount > 0
            ? `<small class="sent-info" onclick="postsPage.viewEmailLogs('${post.id}')" style="cursor:pointer;" title="點擊查看發送記錄">
                <i class="fas fa-history"></i> 已發送 ${sendCount} 次
               </small>`
            : '';

        const actionButtons = `
            ${sentInfo}
            <button class="btn btn-sm btn-secondary" onclick="postsPage.editPost('${post.id}')" title="編輯">
                <i class="fas fa-edit"></i>
            </button>
            <button class="btn btn-sm btn-primary" onclick="postsPage.sendEmail('${post.id}')" title="發送郵件">
                <i class="fas fa-envelope"></i>
            </button>
            <button class="btn btn-sm btn-danger" onclick="postsPage.deletePost('${post.id}')" title="刪除">
                <i class="fas fa-trash"></i>
            </button>
        `;

        // 版本顯示
        const versionDisplay = post.product_type === 'announcement'
            ? ''
            : `<span class="post-version">v${post.version}</span>`;

        return `
            <div class="post-card" data-id="${post.id}">
                <div class="post-card-header">
                    <div class="post-badges">
                        ${productBadge}
                        ${statusBadge}
                    </div>
                    ${versionDisplay}
                </div>
                <div class="post-card-body">
                    <h4 class="post-subject">${this.escapeHtml(displaySubject)}</h4>
                    <p class="post-content-preview ${!post.content ? 'text-muted' : ''}">${this.escapeHtml(contentPreview)}</p>
                </div>
                <div class="post-card-footer">
                    <div class="post-meta">
                        <span class="post-date">
                            <i class="fas fa-calendar"></i> ${createdDate}
                        </span>
                        <span class="post-recipients">
                            <i class="fas fa-users"></i> ${recipientCount}
                        </span>
                    </div>
                    <div class="post-actions">
                        ${actionButtons}
                    </div>
                </div>
            </div>
        `;
    }

    getStatusBadge(status) {
        const badges = {
            draft: '<span class="status-badge draft"><i class="fas fa-edit"></i> 草稿</span>',
            published: '<span class="status-badge draft"><i class="fas fa-edit"></i> 草稿</span>',
            sent: '<span class="status-badge sent"><i class="fas fa-envelope"></i> 已發送</span>'
        };
        return badges[status] || '';
    }

    truncateText(text, maxLength) {
        if (!text) return '';
        if (text.length <= maxLength) return text;
        return text.substring(0, maxLength) + '...';
    }

    escapeHtml(text) {
        if (!text) return '';
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    closeEditModal() {
        const modal = document.getElementById('editPostModal');
        modal.classList.remove('active');
        modal.style.display = 'none';
        modal.style.opacity = '';
        modal.style.visibility = '';
        this.currentEditPost = null;
        this.selectedEmails = [];
    }

    // 發布貼文
    async publishPost(postId) {
        const post = this.posts.find(p => p.id === postId);
        if (!post) return;

        // 檢查主旨和內容是否已填寫
        if (!post.subject || !post.content) {
            Utils.showError('無法發布', '請先填寫貼文主旨和內容');
            this.editPost(postId);  // 自動開啟編輯視窗
            return;
        }

        const confirmed = confirm(`確定要發布「${post.subject}」嗎？\n\n發布後將無法再編輯內容。`);
        if (!confirmed) return;

        try {
            await api.publishPost(postId, false);
            Utils.showSuccess('貼文已發布');
            await this.loadPosts();
        } catch (error) {
            Utils.handleError(error, '發布貼文時');
        }
    }

    // 發送郵件（簡化流程：可重複發送）
    async sendEmail(postId) {
        const post = this.posts.find(p => p.id === postId);
        if (!post) return;

        // 檢查主旨和內容
        if (!post.subject || !post.content) {
            Utils.showError('無法發送', '請先填寫貼文主旨和內容');
            this.editPost(postId);
            return;
        }

        const recipientInfo = post.selected_emails && post.selected_emails.length > 0
            ? `${post.selected_emails.length} 位指定用戶`
            : '所有啟用用戶';

        const productName = post.product_type === 'revit' ? 'Revit'
            : post.product_type === 'autocad' ? 'AutoCAD'
            : '公告';

        const emailLogs = post.email_logs || [];
        const resendWarning = emailLogs.length > 0
            ? `\n⚠️ 此貼文已發送過 ${emailLogs.length} 次`
            : '';

        const confirmed = confirm(
            `確定要發送郵件通知嗎？\n\n` +
            `主旨：${post.subject}\n` +
            `類型：${productName}\n` +
            `收件人：${recipientInfo}` +
            `${resendWarning}\n\n` +
            `發送後無法撤回。`
        );
        if (!confirmed) return;

        try {
            // 使用貼文中儲存的收件人列表
            const result = await api.sendPostEmailSelective(postId, post.selected_emails);
            const totalSends = result.total_sends || (emailLogs.length + 1);
            Utils.showSuccess(`郵件已發送給 ${result.recipient_count || 0} 位用戶（第 ${totalSends} 次發送）`);
            await this.loadPosts();
        } catch (error) {
            Utils.handleError(error, '發送郵件時');
        }
    }

    // 查看貼文（已發送的）
    viewPost(postId) {
        const post = this.posts.find(p => p.id === postId);
        if (!post) return;

        // 顯示唯讀 modal
        this.currentEditPost = null;
        document.getElementById('editSubject').value = post.subject;
        document.getElementById('editSubject').disabled = true;
        document.getElementById('editContent').value = post.content;
        document.getElementById('editContent').disabled = true;

        // 修改 modal 標題和按鈕
        const modal = document.getElementById('editPostModal');
        modal.querySelector('.modal-title').textContent = '查看貼文';
        modal.querySelector('.modal-footer').innerHTML = `
            <button class="btn btn-secondary" onclick="postsPage.closeViewModal()">關閉</button>
        `;

        // 顯示 modal
        modal.classList.add('active');
        modal.style.display = 'flex';
        modal.style.opacity = '1';
        modal.style.visibility = 'visible';
    }

    closeViewModal() {
        const modal = document.getElementById('editPostModal');

        // 隱藏 modal
        modal.classList.remove('active');
        modal.style.display = 'none';
        modal.style.opacity = '';
        modal.style.visibility = '';

        // 恢復編輯功能
        document.getElementById('editSubject').disabled = false;
        document.getElementById('editContent').disabled = false;
        modal.querySelector('.modal-title').textContent = '編輯貼文';
        modal.querySelector('.modal-footer').innerHTML = `
            <button class="btn btn-secondary" onclick="postsPage.closeEditModal()">取消</button>
            <button class="btn btn-primary" onclick="postsPage.savePost()">
                <i class="fas fa-save"></i> 儲存
            </button>
        `;
    }

    // 查看郵件發送記錄
    viewEmailLogs(postId) {
        const post = this.posts.find(p => p.id === postId);
        if (!post) return;

        const emailLogs = post.email_logs || [];
        if (emailLogs.length === 0) {
            Utils.showInfo('發送記錄', '此貼文尚未發送過郵件');
            return;
        }

        // 建立發送記錄 HTML
        const logsHtml = emailLogs.map((log, index) => {
            const sentAt = new Date(log.sent_at).toLocaleString('zh-TW');
            const recipients = log.recipients_preview || [];
            const recipientText = recipients.length > 0
                ? recipients.join(', ') + (log.recipient_count > recipients.length ? ` 等 ${log.recipient_count} 人` : '')
                : `${log.recipient_count} 位用戶`;

            return `
                <div class="email-log-item">
                    <div class="log-header">
                        <span class="log-number">#${emailLogs.length - index}</span>
                        <span class="log-time"><i class="fas fa-clock"></i> ${sentAt}</span>
                    </div>
                    <div class="log-details">
                        <div><i class="fas fa-user"></i> 發送者: ${log.sent_by || '未知'}</div>
                        <div><i class="fas fa-users"></i> 收件人: ${recipientText}</div>
                    </div>
                </div>
            `;
        }).reverse().join('');

        // 使用編輯 Modal 顯示發送記錄
        const modal = document.getElementById('editPostModal');
        modal.querySelector('.modal-title').textContent = '郵件發送記錄';
        modal.querySelector('.modal-body').innerHTML = `
            <div class="email-logs-container">
                <div class="post-info mb-3">
                    <strong>主旨:</strong> ${this.escapeHtml(post.subject || '(未設定)')}
                </div>
                <div class="logs-list">
                    ${logsHtml}
                </div>
            </div>
        `;
        modal.querySelector('.modal-footer').innerHTML = `
            <button class="btn btn-secondary" onclick="postsPage.closeEmailLogsModal()">關閉</button>
        `;

        modal.classList.add('active');
        modal.style.display = 'flex';
        modal.style.opacity = '1';
        modal.style.visibility = 'visible';
    }

    closeEmailLogsModal() {
        const modal = document.getElementById('editPostModal');
        modal.classList.remove('active');
        modal.style.display = 'none';
        modal.style.opacity = '';
        modal.style.visibility = '';

        // 恢復原本的 modal 內容
        modal.querySelector('.modal-title').textContent = '編輯貼文';
        modal.querySelector('.modal-body').innerHTML = `
            <form id="editPostForm">
                <div class="form-group">
                    <label class="form-label">主旨</label>
                    <input type="text" id="editSubject" class="form-input" placeholder="輸入郵件主旨..." required>
                </div>
                <div class="form-group">
                    <label class="form-label">內容</label>
                    <textarea id="editContent" class="form-textarea" rows="8" placeholder="輸入貼文內容..." required></textarea>
                    <small class="form-hint">可使用 {download_link} 變數，系統會自動替換為下載連結</small>
                </div>
                <div class="form-group">
                    <label class="form-label">收件人</label>
                    <div class="recipient-controls mb-2">
                        <button type="button" class="btn btn-sm btn-secondary" onclick="postsPage.selectAllUsers()">
                            <i class="fas fa-check-double"></i> 全選
                        </button>
                        <button type="button" class="btn btn-sm btn-secondary" onclick="postsPage.deselectAllUsers()">
                            <i class="fas fa-times"></i> 取消全選
                        </button>
                        <span class="selected-count" id="selectedCount">已選擇: 0 位用戶</span>
                    </div>
                    <div class="recipient-list" id="recipientList">
                        <div class="text-center p-3">
                            <div class="spinner-sm"></div>
                            <small>載入用戶列表...</small>
                        </div>
                    </div>
                </div>
            </form>
        `;
        modal.querySelector('.modal-footer').innerHTML = `
            <button class="btn btn-secondary" onclick="postsPage.closeEditModal()">取消</button>
            <button class="btn btn-primary" onclick="postsPage.savePost()">
                <i class="fas fa-save"></i> 儲存
            </button>
        `;
    }

    // 刪除貼文
    async deletePost(postId) {
        const post = this.posts.find(p => p.id === postId);
        if (!post) return;

        const displayName = post.subject || `${post.product_type} v${post.version} 版本更新`;
        const confirmed = confirm(`確定要刪除「${displayName}」嗎？\n\n此操作無法復原。`);
        if (!confirmed) return;

        try {
            await api.deletePost(postId);
            Utils.showSuccess('貼文已刪除');
            await this.loadPosts();
        } catch (error) {
            Utils.handleError(error, '刪除貼文時');
        }
    }

    async refreshPosts() {
        const grid = document.getElementById('postsGrid');
        if (grid) {
            grid.innerHTML = `
                <div class="text-center mt-5">
                    <div class="spinner mb-3"></div>
                    <p>載入貼文中...</p>
                </div>
            `;
        }
        await this.loadPosts();
        Utils.showSuccess('已重新整理');
    }

    async refresh() {
        await this.loadPosts();
    }

    // ==================== 用戶選擇功能 ====================

    async loadUsers() {
        try {
            const result = await api.getUserEmails();
            this.users = result.users || [];
            return this.users;
        } catch (error) {
            console.error('Load users error:', error);
            this.users = [];
            return [];
        }
    }

    renderRecipientList() {
        const container = document.getElementById('recipientList');
        if (!container) return;

        if (this.users.length === 0) {
            container.innerHTML = `
                <div class="empty-state-sm">
                    <i class="fas fa-users"></i>
                    <p>沒有找到用戶</p>
                </div>
            `;
            return;
        }

        const html = this.users.map(user => {
            const isChecked = this.selectedEmails.includes(user.email);
            const statusClass = user.status === 'active' ? 'active' : 'inactive';
            return `
                <label class="recipient-item ${statusClass}">
                    <input type="checkbox"
                           value="${user.email}"
                           ${isChecked ? 'checked' : ''}
                           onchange="postsPage.toggleUserSelection('${user.email}')">
                    <span class="recipient-info">
                        <span class="recipient-name">${this.escapeHtml(user.user_name || user.email)}</span>
                        <span class="recipient-email">${user.email}</span>
                    </span>
                    <span class="recipient-status ${statusClass}">${user.status === 'active' ? '啟用' : '停用'}</span>
                </label>
            `;
        }).join('');

        container.innerHTML = html;
        this.updateSelectedCount();
    }

    toggleUserSelection(email) {
        const index = this.selectedEmails.indexOf(email);
        if (index > -1) {
            this.selectedEmails.splice(index, 1);
        } else {
            this.selectedEmails.push(email);
        }
        this.updateSelectedCount();
    }

    selectAllUsers() {
        this.selectedEmails = this.users.map(u => u.email);
        this.renderRecipientList();
    }

    deselectAllUsers() {
        this.selectedEmails = [];
        this.renderRecipientList();
    }

    updateSelectedCount() {
        const countEl = document.getElementById('selectedCount');
        if (countEl) {
            const count = this.selectedEmails.length;
            const total = this.users.length;
            countEl.textContent = count === 0
                ? `已選擇: 全部用戶 (${total} 位)`
                : `已選擇: ${count} / ${total} 位用戶`;
        }
    }

    // ==================== 新增公告功能 ====================

    createNewPost() {
        try {
            console.log('createNewPost called');
            const modal = document.getElementById('newPostModal');
            console.log('Modal element:', modal);

            if (!modal) {
                console.error('newPostModal not found!');
                Utils.showError('錯誤', '無法開啟新增公告視窗');
                return;
            }

            document.getElementById('newPostType').value = 'announcement';
            document.getElementById('newPostSubject').value = '';
            document.getElementById('newPostContent').value = '';

            // 顯示 modal（使用 active class 和 inline style 雙重確保）
            modal.classList.add('active');
            modal.style.display = 'flex';
            modal.style.opacity = '1';
            modal.style.visibility = 'visible';

            console.log('Modal should be visible now');
        } catch (error) {
            console.error('createNewPost error:', error);
            Utils.showError('錯誤', error.message);
        }
    }

    closeNewPostModal() {
        const modal = document.getElementById('newPostModal');
        modal.classList.remove('active');
        modal.style.display = 'none';
        modal.style.opacity = '';
        modal.style.visibility = '';
    }

    async submitNewPost() {
        const postType = document.getElementById('newPostType').value;
        const subject = document.getElementById('newPostSubject').value.trim();
        const content = document.getElementById('newPostContent').value.trim();

        if (!subject || !content) {
            Utils.showError('驗證錯誤', '請填寫主旨和內容');
            return;
        }

        try {
            await api.createManualPost({ post_type: postType, subject, content });
            Utils.showSuccess('公告已建立');
            this.closeNewPostModal();
            await this.loadPosts();
        } catch (error) {
            Utils.handleError(error, '建立公告時');
        }
    }

    // ==================== 更新編輯功能 ====================

    // 編輯貼文（允許任何狀態編輯）
    async editPost(postId) {
        const post = this.posts.find(p => p.id === postId);
        if (!post) return;

        this.currentEditPost = post;
        document.getElementById('editSubject').value = post.subject || '';
        document.getElementById('editContent').value = post.content || '';

        // 載入用戶列表並設定已選擇的收件人
        this.selectedEmails = post.selected_emails || [];

        // 顯示載入中
        document.getElementById('recipientList').innerHTML = `
            <div class="text-center p-3">
                <div class="spinner-sm"></div>
                <small>載入用戶列表...</small>
            </div>
        `;

        // 顯示 modal（使用 active class 和 inline style 雙重確保）
        const modal = document.getElementById('editPostModal');
        modal.classList.add('active');
        modal.style.display = 'flex';
        modal.style.opacity = '1';
        modal.style.visibility = 'visible';

        // 載入用戶列表
        await this.loadUsers();

        // 如果沒有預設選擇，則全選
        if (this.selectedEmails.length === 0) {
            this.selectedEmails = this.users.map(u => u.email);
        }

        this.renderRecipientList();
    }

    async savePost() {
        if (!this.currentEditPost) return;

        const subject = document.getElementById('editSubject').value.trim();
        const content = document.getElementById('editContent').value.trim();

        if (!subject || !content) {
            Utils.showError('驗證錯誤', '請填寫主旨和內容');
            return;
        }

        try {
            // 如果全選或沒選，則設為空陣列（表示全部用戶）
            const emailsToSave = this.selectedEmails.length === this.users.length
                ? []
                : this.selectedEmails;

            await api.updatePost(this.currentEditPost.id, {
                subject,
                content,
                selected_emails: emailsToSave
            });
            Utils.showSuccess('貼文已更新');
            this.closeEditModal();
            await this.loadPosts();
        } catch (error) {
            Utils.handleError(error, '更新貼文時');
        }
    }

    destroy() {
        this.posts = [];
        this.users = [];
        this.currentEditPost = null;
        this.selectedEmails = [];
    }
}

// Create global instance
window.postsPage = new PostsPage();