<?php
/**
 * HuSNS - 一款免费开源的社交平台
 * 
 * 圈子动态列表页面
 */
$currentPage = 'circlePosts';
$pageType = 'circlePosts';
$bodyClass = 'circle-posts-page';
$circleId = isset($circleId) ? $circleId : 0;
$circleName = isset($circleName) ? $circleName : '';

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

<!-- 页面特定CSS文件 -->
<link rel="stylesheet" href="<?php echo $this->themeUrl(); ?>/app/css/styles.css">
<link rel="stylesheet" href="<?php echo $this->themeUrl(); ?>/app/css/circle-posts.css">
<link rel="stylesheet" href="<?php echo $this->themeUrl(); ?>/css/dialog.css">

<script>
window.HuSNS_CirclePosts = {
    themeUrl: '<?php echo $this->themeUrl(); ?>',
    circleId: <?php echo $circleId; ?>,
    currentPage: <?php echo !empty($posts) && count($posts) >= 10 ? '2' : '1'; ?>,
    apiUrls: {
        getCircleInfo: '<?php echo Helper::getBaseUrl(); ?>?r=mobileApi/getCircleInfo&circle_id=',
        getCirclePosts: '<?php echo Helper::getBaseUrl(); ?>?r=mobileApi/getCirclePosts&circle_id=',
        joinCircle: '<?php echo Helper::getBaseUrl(); ?>?r=mobileApi/joinCircle',
        exitCircle: '<?php echo Helper::getBaseUrl(); ?>?r=mobileApi/exitCircle'
    },
    urls: {
        circlePosts: '<?php echo Helper::url('mobile/circlePosts'); ?>'
    }
};
</script>

<div class="circle-posts-content">
    <!-- 圈子头部信息 -->
    <div class="circle-header" id="circleHeader">
        <div class="circle-cover" id="circleCover">
            <button class="back-btn" onclick="goBack()">
                <svg viewBox="0 0 24 24" fill="currentColor">
                    <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
                </svg>
            </button>
        </div>
        <div class="circle-info">
            <div class="circle-header-row">
                <img class="circle-avatar" id="circleAvatar" src="<?php echo $this->themeUrl(); ?>/images/default-circle.png" alt="">
                <div class="circle-name-wrapper">
                    <div class="circle-name-row">
                        <h1 class="circle-name" id="circleName"><?php echo $this->escape($circleName); ?></h1>
                        <span class="circle-verified-badge" id="circleVerify" style="display:none;">
                            <svg viewBox="0 0 24 24" fill="#007AFF"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
                            <span id="verifyType">已认证</span>
                            <span class="verify-info" id="verifyInfoText"></span>
                        </span>
                    </div>
                    <div class="circle-desc" id="circleDesc">暂无介绍</div>
                </div>
            </div>
            <div class="circle-meta">
                <span class="meta-item"><strong id="memberCount">0</strong> 成员</span>
                <span class="meta-divider"></span>
                <span class="meta-item"><strong id="postCount">0</strong> 动态</span>
            </div>
            <div class="circle-actions">
                <button class="circle-action-btn primary" id="joinBtn" onclick="toggleJoin()">
                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 9V7c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-2h-2zm-1-2v2H5V7h12zm5 9c-.83 0-1.5-.67-1.5-1.5S20.17 11 21 11s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/></svg>
                    <span id="joinBtnText">加入圈子</span>
                </button>
                <button class="circle-action-btn danger" id="exitBtn" onclick="exitCircle()" style="display:none;">
                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 3H8v9H3v2h5v9h2v-9h9v-2h-9V3zm-1 2h2v5h-2V5z"/></svg>
                    <span>退出圈子</span>
                </button>
                <button class="circle-action-btn" onclick="shareCircle()">
                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c-.35-.27-.83-.27-1.18 0l-6.98 4.16C1.45 16.5 1 15.42 1 14.2V5.8c0-1.22.45-2.3 1.17-3.08L7.95.72c.76-.46 1.6-.46 2.36 0l6.78 4.12c.72.44 1.17 1.52 1.17 2.7v8.4c0 1.22-.45 2.3-1.17 3.08l-.95.63c-.54.38-1.25.59-1.98.59z"/></svg>
                    分享
                </button>
            </div>
        </div>
    </div>

    <!-- 动态列表 -->
    <div class="post-list" id="postList">
        <div class="empty-state" id="emptyState">
            <div class="empty-icon">📭</div>
            <div class="empty-title">暂无动态</div>
            <div class="empty-desc">成为第一个发布动态的人吧</div>
            <button class="empty-action" onclick="goPublish()">发布动态</button>
        </div>
    </div>

    <!-- 加载更多 -->
    <div class="load-more" id="loadMore" <?php echo !empty($posts) && count($posts) >= 10 ? '' : 'style="display:none;"'; ?>>
        <button class="load-more-btn" id="loadMoreBtn" onclick="loadMore()">加载更多</button>
    </div>
</div>

<!-- 页面特定JS文件 -->
<script src="<?php echo $this->themeUrl(); ?>/js/dialog.js"></script>
<script src="<?php echo $this->themeUrl(); ?>/app/js/circle-posts.js"></script>