<?php
$currentPage = 'follows';
$pageType = 'follows';
$bodyClass = 'follows-page';
$userId = isset($_SESSION['user_id']) ? $_SESSION['user_id'] : null;
$this->setLayout('app');
?>
<style>
    .user-list {
        background: var(--card-color);
        border-radius: 12px;
        margin: 12px;
        overflow: hidden;
    }
    
    .user-item {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        border-bottom: 1px solid var(--border-color);
    }
    
    .user-item:last-child {
        border-bottom: none;
    }
    
    .user-item-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        margin-right: 12px;
        flex-shrink: 0;
    }
    
    .user-item-info {
        flex: 1;
    }
    
    .user-item-name {
        font-weight: 600;
        font-size: 15px;
        color: var(--text-color);
        margin-bottom: 2px;
    }
    
    .user-item-bio {
        font-size: 13px;
        color: var(--text-secondary-color);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .follow-btn {
        padding: 6px 16px;
        border-radius: 16px;
        font-size: 13px;
        cursor: pointer;
        border: none;
    }
    
    .follow-btn.following {
        background: var(--background-color);
        color: var(--text-color);
    }
    
    .follow-btn.not-following {
        background: var(--primary-color);
        color: white;
    }
    
    .empty-user {
        padding: 60px 20px;
        text-align: center;
    }
</style>

<div class="user-list" id="followsList">
    <div class="empty-state">
        <div class="empty-icon">⏳</div>
        <div class="empty-text">加载中...</div>
    </div>
</div>

<div class="load-more" id="loadMoreContainer" style="display:none;">
    <button class="load-more-btn" id="loadMoreBtn">加载更多</button>
</div>

<script>
const API_BASE = '<?php echo $this->url('api/mobile'); ?>';
let currentPage = 1;
let isLoading = false;
let hasMore = true;
let followsData = [];

document.addEventListener('DOMContentLoaded', function() {
    loadFollows();
    document.getElementById('loadMoreBtn').addEventListener('click', loadMoreFollows);
});

async function loadFollows() {
    if (isLoading) return;
    isLoading = true;
    
    try {
        const response = await fetch(API_BASE + '/userInfo');
        const result = await response.json();
        
        if (result.code === 0 && result.data && result.data.logged_in) {
            const userId = result.data.user.id;
            const followsRes = await fetch(API_BASE + '/searchUsers?keyword=&page=' + currentPage);
            const followsResult = await followsRes.json();
            
            // 暂时显示空状态，等待后端API支持
            document.getElementById('followsList').innerHTML = `
                <div class="empty-state">
                    <div class="empty-icon">👥</div>
                    <div class="empty-text">暂无关注</div>
                    <div class="empty-subtext">关注更多感兴趣的用户</div>
                </div>
            `;
        }
    } catch (error) {
        console.error('加载失败:', error);
    }
    
    isLoading = false;
}

async function loadMoreFollows() {
    if (isLoading || !hasMore) return;
    currentPage++;
    isLoading = true;
    
    const btn = document.getElementById('loadMoreBtn');
    btn.textContent = '加载中...';
    
    await loadFollows();
    
    btn.textContent = hasMore ? '加载更多' : '没有更多了';
    isLoading = false;
}
</script>
