<?php
$currentPage = 'fans';
$pageType = 'fans';
$bodyClass = 'fans-page';
$userId = isset($_SESSION['user_id']) ? $_SESSION['user_id'] : null;

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

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

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

<script>
window.HuSNS_Fans = {
    baseUrl: '<?php echo Helper::getBaseUrl(); ?>',
    userId: <?php echo $userId ? $userId : 'null'; ?>
};
</script>

<!-- 粉丝/关注页面 -->
<div class="fans-wrapper">
    <!-- 页面头部 -->
    <div class="fans-header">
        <div class="header-bg"></div>
        <div class="header-content">
            <a href="javascript:history.back();" class="fans-back">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="15 18 9 12 15 6"></polyline>
                </svg>
            </a>
            <h1 class="fans-title">
                <svg class="title-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                    <circle cx="9" cy="7" r="4"></circle>
                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                </svg>
                <span>我的关注</span>
            </h1>
            <a href="<?php echo Helper::getBaseUrl(); ?>/?r=mobile/discover" class="fans-actions">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="11" cy="11" r="8"></circle>
                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                </svg>
            </a>
        </div>
    </div>

    <!-- 标签切换栏 -->
    <div class="follow-tabs">
        <div class="follow-tab-bar">
            <div class="follow-tab-item active" data-tab="following" onclick="switchTab('following')">
                <svg class="tab-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                </svg>
                <span>已关注</span>
                <span class="tab-count" id="followingCount">0</span>
            </div>
            <div class="follow-tab-item" data-tab="followers" onclick="switchTab('followers')">
                <svg class="tab-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                    <circle cx="8.5" cy="7" r="4"></circle>
                    <line x1="20" y1="8" x2="20" y2="14"></line>
                    <line x1="23" y1="11" x2="17" y2="11"></line>
                </svg>
                <span>被关注</span>
                <span class="tab-count" id="followersCount">0</span>
            </div>
            <div class="tab-indicator"></div>
        </div>
    </div>

    <!-- 已关注列表 -->
    <div class="tab-content active" id="tab-following">
        <div class="user-list" id="followingList">
            <div class="empty-state">
                <div class="empty-icon">
                    <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                    </svg>
                </div>
                <div class="empty-text">暂无关注</div>
                <div class="empty-subtext">快去发现感兴趣的人吧</div>
                <a href="<?php echo Helper::getBaseUrl(); ?>/?r=mobile/discover" class="empty-action">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="11" cy="11" r="8"></circle>
                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                    </svg>
                    发现好友
                </a>
            </div>
        </div>
        <div class="load-more" id="followingLoadMore" style="display:none;">
            <button class="load-more-btn" id="followingLoadMoreBtn">加载更多</button>
        </div>
    </div>

    <!-- 被关注列表 -->
    <div class="tab-content" id="tab-followers">
        <div class="user-list" id="followersList">
            <div class="empty-state">
                <div class="empty-icon">
                    <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                        <circle cx="9" cy="7" r="4"></circle>
                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                        <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                    </svg>
                </div>
                <div class="empty-text">暂无粉丝</div>
                <div class="empty-subtext">发布优质内容吸引粉丝关注</div>
                <a href="<?php echo Helper::getBaseUrl(); ?>/?r=mobile/feed" class="empty-action">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 19l7-7 3 3-7 7-3-3z"></path>
                        <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path>
                        <path d="M2 2l7.586 7.586"></path>
                        <circle cx="11" cy="11" r="2"></circle>
                    </svg>
                    发布动态
                </a>
            </div>
        </div>
        <div class="load-more" id="followersLoadMore" style="display:none;">
            <button class="load-more-btn" id="followersLoadMoreBtn">加载更多</button>
        </div>
    </div>
</div>
