<?php
/**
 * HuSNS - 热门话题页面
 */
$currentPage = 'topics';
$pageType = 'topics';
$bodyClass = 'topics-page';
$showBack = true;
$headerTitle = '热门话题';
$this->setLayout('app');
?>
<style>
    .topics-content {
        padding-bottom: 60px;
    }

    .topics-header {
        padding: 16px;
        background: var(--card-color);
        border-bottom: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .topics-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-color);
    }

    .refresh-btn {
        font-size: 14px;
        color: var(--primary-color);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .topic-list {
        padding: 8px;
    }

    .topic-item {
        display: flex;
        align-items: center;
        padding: 16px 12px;
        background: var(--card-color);
        border-radius: 12px;
        margin-bottom: 8px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .topic-item:active {
        background: var(--border-color);
    }

    .topic-rank {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 600;
        margin-right: 16px;
        flex-shrink: 0;
    }

    .topic-rank.top1 {
        background: linear-gradient(135deg, #FF6B6B, #FF4757);
        color: #fff;
    }

    .topic-rank.top2 {
        background: linear-gradient(135deg, #FFA502, #FF7F50);
        color: #fff;
    }

    .topic-rank.top3 {
        background: linear-gradient(135deg, #FFD700, #FFA500);
        color: #fff;
    }

    .topic-rank.normal {
        background: var(--background-color);
        color: var(--text-secondary-color);
    }

    .topic-info {
        flex: 1;
        overflow: hidden;
    }

    .topic-name {
        font-weight: 600;
        font-size: 15px;
        color: var(--text-color);
        margin-bottom: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .topic-stats {
        font-size: 13px;
        color: var(--text-secondary-color);
    }

    .topic-trend {
        margin-left: 12px;
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .trend-icon {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }

    .trend-up {
        background: #E8F5E9;
        color: #4CAF50;
    }

    .trend-down {
        background: #FFEBEE;
        color: #F44336;
    }

    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 80px 20px;
        text-align: center;
    }

    .empty-icon {
        font-size: 64px;
        margin-bottom: 16px;
        opacity: 0.3;
    }

    .empty-text {
        font-size: 16px;
        color: var(--text-secondary-color);
        margin-bottom: 8px;
    }

    .empty-subtext {
        font-size: 14px;
        color: var(--text-tertiary-color);
    }
</style>

<div class="topics-content">
    <div class="topics-header">
        <span class="topics-title">🔥 热门话题榜</span>
        <span class="refresh-btn" onclick="loadHotTopics()">
            <span class="iconify" data-icon="mdi:refresh"></span>
            刷新
        </span>
    </div>

    <div class="topic-list" id="topicList">
        <div class="empty-state">
            <div class="empty-icon"><span class="iconify" data-icon="mdi:loader"></span></div>
            <div class="empty-text">加载中...</div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        loadHotTopics();
    });

    function loadHotTopics() {
        const list = document.getElementById('topicList');
        list.innerHTML = '<div class="empty-state"><div class="empty-icon"><span class="iconify" data-icon="mdi:refresh" style="animation: spin 1s linear infinite;"></span></div><div class="empty-text">加载中...</div></div>';

        fetch('<?php echo $this->url('mobileApi/getHotTopics'); ?>')
            .then(r => r.json())
            .then(data => {
                if (data.code === 0 && data.data && data.data.items.length > 0) {
                    renderTopics(data.data.items);
                } else {
                    list.innerHTML = `
                        <div class="empty-state">
                            <div class="empty-icon"><span class="iconify" data-icon="mdi:hash"></span></div>
                            <div class="empty-text">暂无热门话题</div>
                            <div class="empty-subtext">快来发布第一个话题吧</div>
                        </div>
                    `;
                }
            })
            .catch(() => {
                list.innerHTML = `
                    <div class="empty-state">
                        <div class="empty-icon"><span class="iconify" data-icon="mdi:alert-circle"></span></div>
                        <div class="empty-text">加载失败</div>
                        <div class="empty-subtext">点击刷新重试</div>
                    </div>
                `;
            });
    }

    function renderTopics(topics) {
        const list = document.getElementById('topicList');
        list.innerHTML = '';

        topics.forEach((topic, index) => {
            const rank = index + 1;
            const item = document.createElement('div');
            item.className = 'topic-item';
            item.addEventListener('click', () => {
                window.location.href = '<?php echo $this->url('mobile/topic?keyword='); ?>' + encodeURIComponent(topic.name);
            });

            let rankClass = 'normal';
            if (rank === 1) rankClass = 'top1';
            else if (rank === 2) rankClass = 'top2';
            else if (rank === 3) rankClass = 'top3';

            item.innerHTML = `
                <div class="topic-rank ${rankClass}">${rank}</div>
                <div class="topic-info">
                    <div class="topic-name">#${topic.name}#</div>
                    <div class="topic-stats">${topic.count || 0} 条动态</div>
                </div>
                <div class="topic-trend">
                    <div class="trend-icon ${topic.is_pinned ? 'trend-up' : 'trend-up'}">
                        ${topic.is_pinned ? '<span class="iconify" data-icon="mdi:pin"></span>' : '<span class="iconify" data-icon="mdi:trending-up"></span>'}
                    </div>
                </div>
            `;

            list.appendChild(item);
        });
    }
</script>
