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

{% block title %} {% trans "Seguidores de" %} {{ 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-people"></i> {% trans "Seguidores" %}
                </h4>
                <small class="text-muted">
                  {% trans "Pessoas que seguem" %} {{ profile_user.get_full_name|default:profile_user.username }}
                </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 followers %}
            <div class="row">
              {% for follow in followers %}
                <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.follower.avatar %}
                        <img src="{% url 'serve_files:serve_decrypted_file_with_timestamp' 'home' 'user' 'avatar' follow.follower.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.follower.username %}" class="text-decoration-none">
                          {{ follow.follower.get_full_name|default:follow.follower.username }}
                        </a>
                      </h6>
                      <p class="text-muted mb-1">@{{ follow.follower.username }}</p>
                      {% if follow.follower.social_profile and follow.follower.social_profile.bio %}
                        <small class="text-muted">{{ follow.follower.social_profile.bio|truncatechars:50 }}</small>
                      {% endif %}
                    </div>
                    <div class="ms-3">
                      {% if user != follow.follower %}
                        <!-- Verificar se você segue de volta este seguidor -->
                        {% if follow.follower.id in user_following_ids %}
                          <!-- Você já segue esta pessoa de volta -->
                          <button class="btn btn-success btn-sm follow-btn" data-user-id="{% localize off %}{{ follow.follower.id }}{% endlocalize %}">
                            <i class="bi bi-person-check"></i> {% trans "Seguindo" %}
                          </button>
                        {% else %}
                          <!-- Você não segue esta pessoa ainda (seguir de volta) -->
                          <button class="btn btn-outline-primary btn-sm follow-btn" data-user-id="{% localize off %}{{ follow.follower.id }}{% endlocalize %}">
                            <i class="bi bi-person-plus"></i> {% trans "Seguir de volta" %}
                          </button>
                        {% endif %}
                      {% endif %}
                    </div>
                  </div>
                </div>
              {% endfor %}
            </div>
          {% else %}
            <div class="text-center py-5">
              <i class="bi bi-people display-1 text-muted"></i>
              <h4 class="mt-3">
                {% if user == profile_user %}
                  {% trans "Você ainda não tem seguidores" %}
                {% else %}
                  {% trans "Este usuário ainda não tem seguidores" %}
                {% endif %}
              </h4>
              <p class="text-muted">
                {% if user == profile_user %}
                  {% trans "Compartilhe conteúdo interessante para atrair seguidores!" %}
                {% else %}
                  {% trans "Seja o primeiro a seguir!" %}
                {% endif %}
              </p>
              {% if user != profile_user %}
                <button class="btn btn-primary follow-btn" data-user-id="{% localize off %}{{ profile_user.id }}{% endlocalize %}">
                  <i class="bi bi-person-plus"></i> {% trans "Seguir" %}
                </button>
              {% 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 na página de seguidores
    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 você está seguindo de volta
                        this.innerHTML = '<i class="bi bi-person-check"></i> {% trans "Seguindo" %}';
                        this.className = 'btn btn-success btn-sm follow-btn';
                    } else {
                        // Parou de seguir de volta
                        this.innerHTML = '<i class="bi bi-person-plus"></i> {% trans "Seguir de volta" %}';
                        this.className = 'btn btn-outline-primary btn-sm follow-btn';
                    }
                } 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 %}