<?php
/**
 * defaultpro 移动端热门页
 */
$currentPage = 'hot';
$pageType = 'hot';
$bodyClass = 'hot-page';
?>
<div class="m-post-list" id="postList">
    <div class="loading-state">
        <div class="loading-spinner"></div>
        加载中...
    </div>
</div>
<button class="m-load-more" id="loadMoreBtn" style="display:none;">
    <a href="javascript:void(0)" style="color:var(--primary-color);text-decoration:none;">加载更多</a>
</button>

<script>
(function() {
    var HotApp = {
        page: 1,
        loading: false,
        hasMore: true,
        
        init: function() {
            this.loadPosts();
            this.bindScroll();
            this.bindLoadMore();
        },
        
        loadPosts: function(isMore) {
            if (this.loading || (!isMore && !this.hasMore)) return;
            this.loading = true;
            
            var container = document.getElementById('postList');
            if (!isMore) {
                container.innerHTML = '<div class="loading-state"><div class="loading-spinner"></div>加载中...</div>';
            }
            
            var url = '<?= $this->url("mobileApi/posts") ?>?page=' + this.page + '&tab=hot';
            
            fetch(url, {
                method: 'GET',
                credentials: 'same-origin',
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(function(res) { return res.json(); })
            .then(function(data) {
                if (data.code === 0) {
                    var items = data.data.items || [];
                    if (items.length === 0 && !isMore) {
                        container.innerHTML = '<div class="m-empty"><div class="m-empty-icon">📭</div><div class="m-empty-text">暂无热门内容</div></div>';
                        HotApp.hasMore = false;
                    } else {
                        items.forEach(function(post) {
                            container.insertAdjacentHTML('beforeend', HotApp.renderPost(post));
                        });
                        HotApp.hasMore = data.data.pagination ? data.data.pagination.has_more : false;
                    }
                    HotApp.page++;
                    document.getElementById('loadMoreBtn').style.display = HotApp.hasMore ? 'block' : 'none';
                }
                HotApp.loading = false;
            })
            .catch(function() {
                container.innerHTML = '<div class="error-state">加载失败</div>';
                HotApp.loading = false;
            });
        },
        
        renderPost: function(post) {
            return '<div class="m-post-item" data-id="' + post.id + '">' +
                '<div class="m-post-header">' +
                '<a href="<?= $this->url("mobile/user") ?>?id=' + post.user_id + '"><img class="m-post-avatar" src="' + (post.avatar || '/templates/defaultpro/images/avatar_default.png') + '" alt=""></a>' +
                '<div class="m-post-user-info">' +
                '<a href="<?= $this->url("mobile/user") ?>?id=' + post.user_id + '" class="m-post-username">' + escapeHtml(post.username) + '</a>' +
                '<div class="m-post-time">' + (post.time_ago || '') + '</div>' +
                '</div></div>' +
                '<a href="<?= $this->url("mobile/detail") ?>?id=' + post.id + '" style="text-decoration:none;color:inherit;">' +
                '<div class="m-post-content">' + post.content + '</div></a>' +
                '<div class="m-post-actions">' +
                '<a href="<?= $this->url("mobile/detail") ?>?id=' + post.id + '" class="m-action-btn"><i class="m-action-icon fa-regular fa-comment"></i><span class="m-action-count">' + post.comments + '</span></a>' +
                '<button class="m-action-btn ' + (post.is_liked ? 'liked' : '') + '" onclick="HotApp.toggleLike(this, ' + post.id + ')"><i class="m-action-icon ' + (post.is_liked ? 'fa-solid' : 'fa-regular') + ' fa-heart"></i><span class="m-action-count">' + post.likes + '</span></button>' +
                '</div></div>';
        },
        
        bindScroll: function() {
            window.addEventListener('scroll', function() {
                if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 200) {
                    HotApp.loadPosts(true);
                }
            });
        },
        
        bindLoadMore: function() {
            document.getElementById('loadMoreBtn').addEventListener('click', function() {
                HotApp.loadPosts(true);
            });
        },
        
        toggleLike: function(btn, postId) {
            var isLiked = btn.classList.contains('liked');
            var url = isLiked ? '<?= $this->url("mobileApi/unlike") ?>' : '<?= $this->url("mobileApi/like") ?>';
            fetch(url, {
                method: 'POST',
                credentials: 'same-origin',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-Requested-With': 'XMLHttpRequest' },
                body: 'id=' + postId
            })
            .then(function(res) { return res.json(); })
            .then(function(data) {
                if (data.code === 0) {
                    var icon = btn.querySelector('i');
                    var count = btn.querySelector('.m-action-count');
                    btn.classList.toggle('liked');
                    if (btn.classList.contains('liked')) {
                        icon.className = 'm-action-icon fa-solid fa-heart';
                        icon.style.color = '#ff4757';
                    } else {
                        icon.className = 'm-action-icon fa-regular fa-heart';
                        icon.style.color = '';
                    }
                    if (count) count.textContent = data.data.likes || 0;
                }
            });
        }
    };
    
    HotApp.init();
    window.HotApp = HotApp;
})();
</script>
