<?php
/**
 * HuSNS - 一款免费开源的社交平台
 * 
 * @author  HYR
 * @QQ      281900864
 * @website https://huyourui.com
 * @license MIT
 * @声明    严禁用于违法违规用途
 */
// 检查登录状态
$userId = isset($_SESSION['user_id']) ? $_SESSION['user_id'] : null;
if (!$userId) {
    $this->assign('showLoginModal', true);
}

$currentPage = 'notification';
$pageType = 'notification';
$bodyClass = 'notification-page';
$showTabbar = true;

// 页面特定CSS和JS文件
$pageCssFiles = [$this->themeUrl() . '/app/css/notification.css'];
$pageJsFiles = [$this->themeUrl() . '/app/js/notification.js'];

$this->assign('pageCssFiles', $pageCssFiles);
$this->assign('pageJsFiles', $pageJsFiles);

$this->setLayout('app');
?>

<script>
const BASE_URL = window.location.origin;

window.HuSNS_Notification = {
    currentType: '<?php echo isset($type) ? $type : 'all'; ?>'
};
</script>

<!-- 通知页面主容器 -->
<div class="notification-page-container">
    <!-- 顶部状态栏 -->
    <div class="notification-header">
        <div class="notification-header-bg"></div>
        <div class="notification-header-content">
            <div class="header-left">
                <h1 class="notification-title">通知</h1>
                <p class="notification-subtitle">你有 <span class="unread-count" id="unreadCount">0</span> 条未读消息</p>
            </div>
            <button class="mark-all-read-btn" onclick="markAllAsRead()">
                <svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M5 12h14M5 12l4-4m-4 4l4 4"/>
                </svg>
                <span class="btn-text">全部已读</span>
            </button>
        </div>
    </div>

    <!-- 分类标签 -->
    <div class="notification-category-tabs">
        <div class="tabs-scroll-wrapper">
            <div class="tabs-container">
                <button class="category-tab <?php echo (!isset($type) || $type === 'all') ? 'active' : ''; ?>" data-type="all">
                    <span class="tab-text">全部</span>
                    <span class="tab-badge" style="display:<?php echo isset($unreadCount) && $unreadCount > 0 ? 'inline-flex' : 'none'; ?>"><?php echo $unreadCount ?? 0; ?></span>
                </button>
                <button class="category-tab <?php echo isset($type) && $type === 'mentions' ? 'active' : ''; ?>" data-type="mentions">
                    <span class="tab-text">@我的</span>
                    <span class="tab-badge" style="display:<?php echo isset($mentionCount) && $mentionCount > 0 ? 'inline-flex' : 'none'; ?>"><?php echo $mentionCount ?? 0; ?></span>
                </button>
                <button class="category-tab <?php echo isset($type) && $type === 'likes' ? 'active' : ''; ?>" data-type="likes">
                    <span class="tab-text">赞</span>
                    <span class="tab-badge" style="display:<?php echo isset($likeCount) && $likeCount > 0 ? 'inline-flex' : 'none'; ?>"><?php echo $likeCount ?? 0; ?></span>
                </button>
                <button class="category-tab <?php echo isset($type) && $type === 'comments' ? 'active' : ''; ?>" data-type="comments">
                    <span class="tab-text">评论</span>
                    <span class="tab-badge" style="display:<?php echo isset($commentCount) && $commentCount > 0 ? 'inline-flex' : 'none'; ?>"><?php echo $commentCount ?? 0; ?></span>
                </button>
                <button class="category-tab <?php echo isset($type) && $type === 'message' ? 'active' : ''; ?>" data-type="message">
                    <span class="tab-text">私信</span>
                    <span class="tab-badge" style="display:<?php echo isset($messageCount) && $messageCount > 0 ? 'inline-flex' : 'none'; ?>"><?php echo $messageCount ?? 0; ?></span>
                </button>
            </div>
        </div>
    </div>

    <!-- 通知列表区域 -->
    <div class="notification-list-container">
        <div class="notification-list" id="notificationList">
            <div class="loading-state">
                <div class="loading-spinner"></div>
                <div class="loading-text">加载中...</div>
            </div>
        </div>
    </div>
</div>
