<?php
/**
 * HuSNS - 推荐用户页面
 */
$currentPage = 'recommend';
$pageType = 'recommend';
$bodyClass = 'recommend-page';
$showBack = true;
$headerTitle = '推荐关注';
$this->setLayout('app');
?>
<style>
    .recommend-content {
        padding-bottom: 60px;
    }

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

    .recommend-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;
    }

    .user-list {
        padding: 8px;
    }

    .user-item {
        display: flex;
        align-items: center;
        padding: 12px;
        background: var(--card-color);
        border-radius: 12px;
        margin-bottom: 8px;
    }

    .user-avatar {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 16px;
        flex-shrink: 0;
    }

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

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

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

    .follow-btn {
        padding: 8px 20px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 600;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        flex-shrink: 0;
    }

    .follow-btn.follow {
        background: var(--primary-color);
        color: #fff;
    }

    .follow-btn.following {
        background: var(--background-color);
        color: var(--text-secondary-color);
        border: 1px solid var(--border-color);
    }

    .follow-btn:active {
        transform: scale(0.95);
    }

    .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;
    }

    .loading-more {
        text-align: center;
        padding: 16px;
        color: var(--text-secondary-color);
        font-size: 14px;
    }
</style>

<div class="recommend-content">
    <div class="recommend-header">
        <span class="recommend-title">推荐关注</span>
        <span class="refresh-btn" onclick="loadRecommendedUsers()">
            <span class="iconify" data-icon="mdi:refresh"></span>
            换一批
        </span>
    </div>

    <div class="user-list" id="userList">
        <div class="empty-state">
            <div class="empty-icon"><span class="iconify" data-icon="mdi:users"></span></div>
            <div class="empty-text">加载中...</div>
        </div>
    </div>
</div>

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

    function loadRecommendedUsers() {
        const list = document.getElementById('userList');
        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/getRecommendedUsers'); ?>')
            .then(r => r.json())
            .then(data => {
                if (data.code === 0 && data.data && data.data.items.length > 0) {
                    renderUsers(data.data.items);
                } else {
                    list.innerHTML = `
                        <div class="empty-state">
                            <div class="empty-icon"><span class="iconify" data-icon="mdi:users"></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 renderUsers(users) {
        const list = document.getElementById('userList');
        list.innerHTML = '';

        users.forEach(user => {
            const item = document.createElement('div');
            item.className = 'user-item';
            
            item.innerHTML = `
                <img class="user-avatar" src="${user.avatar || '/templates/mobile/images/avatar_default.png'}" alt="${user.username}">
                <div class="user-info">
                    <div class="user-name">${user.username}</div>
                    <div class="user-followers">${user.followers_count || 0} 粉丝</div>
                </div>
                <button class="follow-btn ${user.is_following ? 'following' : 'follow'}" 
                        data-user-id="${user.id}" 
                        onclick="toggleFollow(this, ${user.id})">
                    ${user.is_following ? '已关注' : '+ 关注'}
                </button>
            `;
            
            list.appendChild(item);
        });
    }

    function toggleFollow(btn, userId) {
        const isFollowing = btn.classList.contains('following');
        
        btn.disabled = true;
        btn.textContent = isFollowing ? '取消中...' : '关注中...';

        fetch('<?php echo $this->url('mobileApi/follow'); ?>', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({user_id: userId})
        })
        .then(r => r.json())
        .then(data => {
            if (data.code === 0) {
                if (isFollowing) {
                    btn.classList.remove('following');
                    btn.classList.add('follow');
                    btn.textContent = '+ 关注';
                } else {
                    btn.classList.remove('follow');
                    btn.classList.add('following');
                    btn.textContent = '已关注';
                }
            } else {
                showToast(data.message || '操作失败');
            }
            btn.disabled = false;
        })
        .catch(() => {
            showToast('操作失败');
            btn.disabled = false;
            btn.textContent = isFollowing ? '已关注' : '+ 关注';
        });
    }
</script>
