document.addEventListener('DOMContentLoaded', function() {
    const markAsReadBtn = document.getElementById('markAsReadBtn');

    if (markAsReadBtn) {
        // 获取通知ID
        const notificationCard = document.querySelector('.notification-card');
        const notificationId = notificationCard ? notificationCard.dataset.id : null;

        if (notificationId) {
            // 添加点击事件监听器
            markAsReadBtn.addEventListener('click', function() {
                markAsRead(notificationId);
            });

            // 页面加载时自动标记为已读（可选功能，取决于需求）
            // 如果想要在用户打开通知详情页时自动标记为已读，取消下面的注释
            // markAsRead(notificationId);
        }
    }

    // 标记通知为已读的函数
    function markAsRead(notificationId) {
        fetch(`/announcement/notification/${notificationId}/mark-read`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 更新UI
                const notificationCard = document.querySelector('.notification-card');
                if (notificationCard) {
                    notificationCard.classList.remove('unread');
                }

                // 更新状态标签
                const statusContainer = document.querySelector('.notification-status');
                if (statusContainer) {
                    statusContainer.innerHTML = '<span class="read-badge">已读</span>';
                }

                // 隐藏标记为已读按钮
                if (markAsReadBtn) {
                    markAsReadBtn.style.display = 'none';
                }

                // 更新通知计数（如果有导航栏通知计数）
                updateNotificationCount();
            }
        })
        .catch(error => console.error('Error:', error));
    }

    // 更新通知计数
    function updateNotificationCount() {
        fetch('/announcement/notifications/count')
            .then(response => response.json())
            .then(data => {
                const badge = document.querySelector('.notifications .badge');
                if (data.count > 0) {
                    if (badge) {
                        badge.textContent = data.count;
                    } else {
                        const notificationsElement = document.querySelector('.notifications');
                        if (notificationsElement) {
                            const newBadge = document.createElement('span');
                            newBadge.className = 'badge';
                            newBadge.textContent = data.count;
                            notificationsElement.appendChild(newBadge);
                        }
                    }
                } else {
                    if (badge) {
                        badge.remove();
                    }
                }
            })
            .catch(error => console.error('Error:', error));
    }
});