{% extends 'layouts/base.html' %}
{% load static %}
{% load i18n %}
{% load social_tags %}
{% load l10n %}

{% block title %} {% trans "Seguindo por" %} {{ profile_user.get_full_name|default:profile_user.username }} {% endblock title %}

{% block content %}
<div class="container-fluid py-4">
  <div class="row">
    <div class="col-lg-8 mx-auto">
      
      <div class="card">
        <div class="card-header">
          <div class="d-flex align-items-center justify-content-between">
            <div class="d-flex align-items-center">
              <a href="{% url 'social:user_profile' profile_user.username %}" class="btn btn-link text-decoration-none me-3">
                <i class="bi bi-arrow-left"></i>
              </a>
              <div>
                <h4 class="mb-0">
                  <i class="bi bi-person-check"></i> {% trans "Seguindo" %}
                </h4>
                <small class="text-muted">
                  {% trans "Pessoas que" %} {{ profile_user.get_full_name|default:profile_user.username }} {% trans "segue" %}
                </small>
              </div>
            </div>
            <div>
              <a href="{% url 'social:feed' %}" class="btn btn-primary">
                <i class="bi bi-house"></i> {% trans "Feed" %}
              </a>
            </div>
          </div>
        </div>
        <div class="card-body">
          
          {% if following %}
            <div class="row">
              {% for follow in following %}
                <div class="col-md-6 mb-3">
                  <div class="d-flex align-items-center p-3 border rounded">
                    <div class="avatar-container me-3" style="width: 50px; height: 50px; border-radius: 50%; overflow: hidden;">
                      {% if follow.following.avatar %}
                        <img src="{% url 'serve_files:serve_decrypted_file_with_timestamp' 'home' 'user' 'avatar' follow.following.uuid timestamp %}" 
                             alt="Avatar" class="w-100 h-100" style="object-fit: cover;">
                      {% else %}
                        <img src="{% static 'assets/img/team/generic_user.png' %}" 
                             alt="Avatar" class="w-100 h-100" style="object-fit: cover;">
                      {% endif %}
                    </div>
                    <div class="flex-grow-1">
                      <h6 class="mb-1">
                        <a href="{% url 'social:user_profile' follow.following.username %}" class="text-decoration-none">
                          {{ follow.following.get_full_name|default:follow.following.username }}
                        </a>
                      </h6>
                      <p class="text-muted mb-1">@{{ follow.following.username }}</p>
                      {% if follow.following.social_profile and follow.following.social_profile.bio %}
                        <small class="text-muted">{{ follow.following.social_profile.bio|truncatechars:50 }}</small>
                      {% endif %}
                    </div>
                    <div class="ms-3">
                      {% if user != follow.following %}
                        {% if user == profile_user %}
                          <!-- Se é a página do próprio usuário, sempre mostra "Seguindo" (pode deixar de seguir) -->
                          <button class="btn btn-success btn-sm follow-btn" data-user-id="{% localize off %}{{ follow.following.id }}{% endlocalize %}">
                            <i class="bi bi-person-check"></i> {% trans "Seguindo" %}
                          </button>
                        {% else %}
                          <!-- Se é página de outro usuário, verifica se o usuário atual segue esta pessoa -->
                          <button class="btn btn-outline-primary btn-sm follow-btn" data-user-id="{% localize off %}{{ follow.following.id }}{% endlocalize %}">
                            {% if user in follow.following.followers.all %}
                              <i class="bi bi-person-check"></i> {% trans "Seguindo" %}
                            {% else %}
                              <i class="bi bi-person-plus"></i> {% trans "Seguir" %}
                            {% endif %}
                          </button>
                        {% endif %}
                      {% endif %}
                    </div>
                  </div>
                </div>
              {% endfor %}
            </div>
          {% else %}
            <div class="text-center py-5">
              <i class="bi bi-person-check display-1 text-muted"></i>
              <h4 class="mt-3">
                {% if user == profile_user %}
                  {% trans "Você ainda não segue ninguém" %}
                {% else %}
                  {% trans "Este usuário ainda não segue ninguém" %}
                {% endif %}
              </h4>
              <p class="text-muted">
                {% if user == profile_user %}
                  {% trans "Comece a seguir pessoas para ver seus posts no feed!" %}
                {% else %}
                  {% trans "Este usuário ainda não começou a seguir pessoas." %}
                {% endif %}
              </p>
              {% if user == profile_user %}
                <a href="{% url 'social:search' %}" class="btn btn-primary">
                  <i class="bi bi-search"></i> {% trans "Buscar pessoas" %}
                </a>
              {% endif %}
            </div>
          {% endif %}
          
        </div>
      </div>
      
    </div>
  </div>
</div>

<!-- Token CSRF para JavaScript -->
{% csrf_token %}

<!-- JavaScript para follow/unfollow -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Follow/Unfollow
    document.querySelectorAll('.follow-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            const userId = parseInt(this.dataset.userId);
            const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]');
            
            if (!userId || isNaN(userId)) {
                console.error('ID do usuário inválido:', this.dataset.userId);
                return;
            }
            
            if (!csrfToken) {
                console.error('CSRF token não encontrado');
                return;
            }
            
            // Salvar estado original para rollback em caso de erro
            const originalHTML = this.innerHTML;
            const originalClasses = this.className;
            
            // Mostrar estado de carregamento
            this.innerHTML = '<i class="bi bi-arrow-repeat"></i> {% trans "Processando..." %}';
            this.disabled = true;
            
            fetch(`/social/user/${userId}/follow/`, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': csrfToken.value,
                },
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    if (data.following) {
                        // Agora está seguindo
                        this.innerHTML = '<i class="bi bi-person-check"></i> {% trans "Seguindo" %}';
                        this.className = 'btn btn-success btn-sm follow-btn';
                    } else {
                        // Parou de seguir
                        this.innerHTML = '<i class="bi bi-person-plus"></i> {% trans "Seguir" %}';
                        this.className = 'btn btn-outline-primary btn-sm follow-btn';
                        
                        // Se estivermos na página "meus seguindo" e o usuário parou de seguir,
                        // remover o usuário da lista
                        const isMyFollowingPage = window.location.pathname.includes('/{{ user.username }}/following/');
                        if (isMyFollowingPage && !data.following) {
                            const userCard = this.closest('.col-md-6');
                            if (userCard) {
                                userCard.style.transition = 'opacity 0.3s ease';
                                userCard.style.opacity = '0.5';
                                setTimeout(() => {
                                    userCard.remove();
                                    
                                    // Verificar se não há mais usuários
                                    const remainingUsers = document.querySelectorAll('.col-md-6').length;
                                    if (remainingUsers === 0) {
                                        location.reload(); // Recarregar para mostrar a mensagem "não segue ninguém"
                                    }
                                }, 500);
                            }
                        }
                    }
                } else {
                    // Erro na resposta
                    this.innerHTML = originalHTML;
                    this.className = originalClasses;
                    alert(data.error || 'Erro ao processar solicitação');
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                // Restaurar estado original
                this.innerHTML = originalHTML;
                this.className = originalClasses;
                alert('Erro de conexão. Tente novamente.');
            })
            .finally(() => {
                this.disabled = false;
            });
        });
    });
});
</script>
{% endblock content %}