<?php
/**
 * defaultpro 移动端关注列表
 */
$currentPage = 'follows';
$pageType = 'follows';
$bodyClass = 'follows-page';
$showBack = true;
$headerTitle = '我的关注';
$this->setLayout('app');
?>
<div class="user-list" id="followsList">
    <div class="loading-indicator">
        <div class="loading-spinner"></div>
    </div>
</div>

<style>
.user-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--border-color);
}

.user-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--card-bg);
}

.user-item-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-right: 12px;
}

.user-item-info {
    flex: 1;
}

.user-item-name {
    font-weight: 500;
    margin-bottom: 4px;
}

.user-item-bio {
    font-size: 12px;
    color: var(--text-muted);
}

.user-item-btn {
    padding: 6px 16px;
    border-radius: 4px;
    border: 1px solid var(--primary-color);
    background: none;
    color: var(--primary-color);
    font-size: 12px;
    cursor: pointer;
}

.user-item-btn.followed {
    background: var(--primary-color);
    color: #fff;
}
</style>

<script>
(function() {
    var page = 1;
    var loading = false;
    var hasMore = true;
    var userId = <?= $_SESSION['user_id'] ?>;
    
    function loadFollows() {
        if (loading || !hasMore) return;
        loading = true;
        
        $.get(App.baseUrl + '/mobileApi/userFollows', {user_id: userId, page: page}, function(res) {
            if (res.code === 0) {
                var items = res.data.items || [];
                var html = items.map(function(u) {
                    return '<div class="user-item">'+
                        '<a href="'+App.baseUrl+'/mobile/user?username='+encodeURIComponent(u.username)+'">'+
                        '<img class="user-item-avatar" src="'+u.avatar+'" alt="'+u.username+'">'+
                        '</a>'+
                        '<a href="'+App.baseUrl+'/mobile/user?username='+encodeURIComponent(u.username)+'" class="user-item-info">'+
                            '<div class="user-item-name">'+escapeHtml(u.username)+'</div>'+
                            '<div class="user-item-bio">'+(u.bio || '这个人很懒')+'</div>'+
                        '</a>'+
                        '<button class="user-item-btn followed" data-id="'+u.id+'">已关注</button>'+
                    '</div>';
                }).join('');
                if (page === 1 && items.length === 0) {
                    $('#followsList').html('<div class="empty-state"><i class="fa-solid fa-users"></i>暂无关注</div>');
                } else {
                    $('#followsList').append(html);
                }
                hasMore = res.data.pagination ? res.data.pagination.has_more : false;
                page++;
            }
            loading = false;
        });
    }
    
    loadFollows();
})();
</script>
