<?php
/**
 * HuSNS - 一款免费开源的社交平台
 *
 * @author  HYR
 * @QQ      281900864
 * @website https://huyourui.com
 * @license MIT
 * @声明    严禁用于违法违规用途
 */
$currentPage = 'hot';
$pageType = 'hot';
$bodyClass = 'hot-page';
$showTabbar = true;
$page = isset($page) ? $page : 1;
$type = isset($type) ? $type : 'day';
$posts = isset($posts) ? $posts : [];
$userId = isset($_SESSION['user_id']) ? $_SESSION['user_id'] : null;
$isAdmin = isset($_SESSION['is_admin']) && $_SESSION['is_admin'] ? true : false;

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

// 将页面特定资源添加到视图数据中
$this->assign('pageCssFiles', $pageCssFiles);
$this->assign('pageJsFiles', $pageJsFiles);

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

<!-- 热门页面 -->
<div class="hot-wrapper">
    <!-- 页面头部 -->
    <div class="hot-header">
        <a href="javascript:history.back();" class="hot-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="hot-title">
            <span class="hot-title-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/>
                </svg>
            </span>
            <span>热门排行</span>
        </h1>
        <div class="hot-actions">
            <button class="hot-refresh-btn" onclick="location.reload()">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="23 4 23 10 17 10"></polyline>
                    <polyline points="1 20 1 14 7 14"></polyline>
                    <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
                </svg>
            </button>
        </div>
    </div>

    <!-- 热门标签栏 -->
    <div class="hot-tabs">
        <div class="hot-tab-bar">
            <button class="hot-tab-item active" data-type="day">
                <span class="tab-icon">
                    <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
                        <circle cx="12" cy="12" r="5"/>
                    </svg>
                </span>
                <span>今日</span>
            </button>
            <button class="hot-tab-item" data-type="week">
                <span class="tab-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
                        <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                        <line x1="16" y1="2" x2="16" y2="6"></line>
                        <line x1="8" y1="2" x2="8" y2="6"></line>
                        <line x1="3" y1="10" x2="21" y2="10"></line>
                    </svg>
                </span>
                <span>本周</span>
            </button>
            <button class="hot-tab-item" data-type="month">
                <span class="tab-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                        <polyline points="14 2 14 8 20 8"></polyline>
                        <line x1="16" y1="13" x2="8" y2="13"></line>
                        <line x1="16" y1="17" x2="8" y2="17"></line>
                    </svg>
                </span>
                <span>本月</span>
            </button>
            <button class="hot-tab-item" data-type="recommend">
                <span class="tab-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
                        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                    </svg>
                </span>
                <span>推荐</span>
            </button>
        </div>
        <!-- 滑动指示器 -->
        <div class="tab-slide-indicator"></div>
    </div>
    
    <!-- 热门帖子列表 -->
    <div class="post-list" id="hotPostList">
        <?php if (!empty($posts)): ?>
        <?php $rank = 1; foreach ($posts as $post): ?>
        <?php 
            $isOwner = $userId && $userId == ($post['user_id'] ?? 0);
            $post['rank'] = $rank;
        ?>
        <div class="hot-rank-wrapper <?php echo $rank <= 3 ? 'top-rank' : ''; ?>">
            <div class="hot-rank <?php echo $rank <= 3 ? 'top' . $rank : ''; ?>">
                <?php if ($rank <= 3): ?>
                <span class="rank-medal">
                    <?php if ($rank === 1): ?>
                    <svg viewBox="0 0 24 24" fill="currentColor" class="medal-icon gold">
                        <path d="M12 2L9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2z"/>
                    </svg>
                    <?php elseif ($rank === 2): ?>
                    <svg viewBox="0 0 24 24" fill="currentColor" class="medal-icon silver">
                        <path d="M12 2L9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2z"/>
                    </svg>
                    <?php else: ?>
                    <svg viewBox="0 0 24 24" fill="currentColor" class="medal-icon bronze">
                        <path d="M12 2L9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2z"/>
                    </svg>
                    <?php endif; ?>
                </span>
                <?php else: ?>
                <span class="rank-number"><?php echo $rank; ?></span>
                <?php endif; ?>
            </div>
            <?php include $this->themePath() . '/components/post-card.php'; ?>
            <?php if ($rank <= 3): ?>
            <div class="hot-rank-badge rank-<?php echo $rank; ?>">
                <span class="badge-text">TOP <?php echo $rank; ?></span>
            </div>
            <?php endif; ?>
        </div>
        <?php $rank++; endforeach; ?>
        <?php else: ?>
        <div class="hot-empty">
            <div class="hot-empty-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="64" height="64">
                    <path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/>
                </svg>
            </div>
            <p class="hot-empty-text">暂无热门内容</p>
            <p class="hot-empty-hint">快去发布动态吧</p>
        </div>
        <?php endif; ?>
    </div>
    
    <!-- 加载更多 -->
    <div class="load-more" id="loadMoreContainer" style="display:none;">
        <button class="load-more-btn" id="loadMoreBtn">加载更多</button>
    </div>
</div>