{% extends 'base.html.twig' %}

{% trans_default_domain "Social" %}

{% block title %}
    {{ 'social.followers'|trans }} - {{ profileUser.firstName ~ ' ' ~ profileUser.lastName }}
{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
    :root {
        --primary-color: #00A550;
        --primary-hover: #008844;
        --accent-color: #ff8600;
        --text-color: #333;
        --text-muted: #666;
        --border-color: #e0e0e0;
        --bg-light: #f8f9fa;
        --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
        --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
        --radius: 12px;
    }
    .social-page { padding: 20px 0 40px; background: var(--bg-light); min-height: 100vh; }
    .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 16px; }
    .page-header h1 { margin: 0; font-size: 1.5rem; color: var(--text-color); display: flex; align-items: center; gap: 12px; }
    .page-header h1 i { color: var(--primary-color); }
    .back-link { color: var(--primary-color); text-decoration: none; font-size: 14px; }
    .back-link:hover { text-decoration: underline; }

    .tabs-container { background: white; border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 24px; overflow: hidden; }
    .tabs-nav { display: flex; border-bottom: 1px solid var(--border-color); }
    .tab-btn { padding: 14px 24px; font-size: 14px; font-weight: 500; color: var(--text-muted); text-decoration: none; border-bottom: 3px solid transparent; transition: all 0.3s; display: flex; align-items: center; gap: 8px; }
    .tab-btn:hover { color: var(--primary-color); background: #f9f9f9; text-decoration: none; }
    .tab-btn.active { color: var(--primary-color); border-bottom-color: var(--primary-color); background: #f0fff5; }
    .tab-btn .badge { background: var(--primary-color); color: white; padding: 2px 8px; border-radius: 12px; font-size: 12px; }

    .user-card { background: white; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px 20px; margin-bottom: 12px; display: flex; align-items: center; gap: 16px; transition: all 0.3s; border: 1px solid transparent; }
    .user-card:hover { box-shadow: var(--shadow-md); border-color: #e8f5e9; }
    .user-card-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-color); flex-shrink: 0; }
    .user-card-info { flex: 1; min-width: 0; }
    .user-card-info h4 { margin: 0 0 4px 0; font-size: 15px; }
    .user-card-info h4 a { color: var(--text-color); text-decoration: none; }
    .user-card-info h4 a:hover { color: var(--primary-color); }
    .user-card-info p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .user-card-info .field-label { font-size: 12px; color: var(--primary-color); margin-top: 4px; }

    .follow-btn { padding: 8px 20px; border-radius: 20px; font-size: 13px; font-weight: 500; border: 2px solid var(--primary-color); cursor: pointer; transition: all 0.3s; white-space: nowrap; }
    .follow-btn.follow { background: var(--primary-color); color: white; }
    .follow-btn.follow:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
    .follow-btn.following { background: white; color: var(--primary-color); }
    .follow-btn.following:hover { background: #ffe0e0; color: #dc3545; border-color: #dc3545; }
    .follow-btn.following:hover::after { content: ''; }

    .pagination-wrapper { text-align: center; margin-top: 24px; }
    .pagination-wrapper .btn-page { display: inline-block; padding: 8px 16px; margin: 0 4px; border-radius: 6px; border: 1px solid var(--border-color); color: var(--text-color); text-decoration: none; font-size: 14px; transition: all 0.3s; }
    .pagination-wrapper .btn-page:hover { background: var(--primary-color); color: white; border-color: var(--primary-color); }
    .pagination-wrapper .btn-page.active { background: var(--primary-color); color: white; border-color: var(--primary-color); }

    .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
    .empty-state i { font-size: 48px; color: #ddd; margin-bottom: 16px; display: block; }

    @media (max-width: 767px) {
        .user-card { flex-wrap: wrap; }
        .user-card-avatar { width: 44px; height: 44px; }
    }
</style>
{% endblock %}

{% block body %}
<div class="social-page">
    <div class="container">
        <div class="page-header">
            <h1>
                <i class="fa fa-users"></i>
                {{ profileUser.firstName ~ ' ' ~ profileUser.lastName }}
            </h1>
            <a href="{{ path('user_profile_show', {'username': profileUser.username}) }}" class="back-link">
                <i class="fa fa-arrow-left"></i> {{ 'profile.back_to_profile'|trans({}, 'FOSUserBundle') }}
            </a>
        </div>

        {# Followers / Following Tabs #}
        <div class="tabs-container">
            <div class="tabs-nav">
                <a href="{{ path('user_followers', {'username': profileUser.username}) }}"
                   class="tab-btn {{ tab == 'followers' ? 'active' : '' }}">
                    <i class="fa fa-users"></i>
                    {{ 'social.followers'|trans }}
                    <span class="badge">{{ totalFollowers is defined ? totalFollowers : profileUser.followersCount }}</span>
                </a>
                <a href="{{ path('user_following', {'username': profileUser.username}) }}"
                   class="tab-btn {{ tab == 'following' ? 'active' : '' }}">
                    <i class="fa fa-user-plus"></i>
                    {{ 'social.following_list'|trans }}
                    <span class="badge">{{ profileUser.followingCount }}</span>
                </a>
            </div>
        </div>

        {# User List #}
        {% if followers|length > 0 %}
            {% for follower in followers %}

                <div class="user-card">
                    <img src="{{ follower.webPath }}" alt="{{ follower.firstName }}" class="user-card-avatar">
                    <div class="user-card-info">
                        <h4><a href="{{ path('user_profile_show', {'username': follower.username}) }}">{{ follower.firstName ~ ' ' ~ follower.lastName }}</a></h4>
                        {% if follower.bio %}
                            <p>{{ follower.bio|slice(0, 100) }}</p>
                        {% endif %}
                        {% if follower.studyField %}
                            <div class="field-label"><i class="fa fa-graduation-cap"></i> {{ follower.studyField }}</div>
                        {% endif %}
                    </div>
                    {% if currentUser and currentUser.id != follower.id %}
                        <button class="follow-btn {{ currentUser.isFollowing(follower) ? 'following' : 'follow' }}"
                                data-user-id="{{ follower.id }}"
                                onclick="toggleFollow(this)">
                            {{ currentUser.isFollowing(follower) ? 'social.following'|trans : 'social.follow'|trans }}
                        </button>
                    {% endif %}
                </div>
            {% endfor %}

            {# Pagination #}
            {% if totalPages > 1 %}
                <div class="pagination-wrapper">
                    {% for p in 1..totalPages %}
                        <a href="{{ path('user_followers', {'username': profileUser.username, 'page': p}) }}"
                           class="btn-page {{ currentPage == p ? 'active' : '' }}">{{ p }}</a>
                    {% endfor %}
                </div>
            {% endif %}
        {% else %}
            <div class="empty-state">
                <i class="fa fa-users"></i>
                <h4>{{ 'social.no_followers_yet'|trans }}</h4>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
function toggleFollow(btn) {
    var userId = btn.getAttribute('data-user-id');
    var isFollowing = btn.classList.contains('following');
    var url = isFollowing ? '/api/unfollow/' + userId : '/api/follow/' + userId;

    fetch(url, { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest' } })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.status === 'followed') {
                btn.classList.remove('follow');
                btn.classList.add('following');
                btn.textContent = '{{ "social.following"|trans }}';
            } else if (data.status === 'unfollowed') {
                btn.classList.remove('following');
                btn.classList.add('follow');
                btn.textContent = '{{ "social.follow"|trans }}';
            }
        })
        .catch(function(err) { console.error('Follow error:', err); });
}
</script>
{% endblock %}