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

{% block title %}Demandes de suivi - Na+{% endblock %}

{% block body %}
<main id="contenu" style="padding: 2rem; max-width: 600px; margin: 0 auto;">

    <h1 style="color: var(--royal, #1a2e5a); font-size: 1.4rem; margin-bottom: 1.5rem;">
        Demandes de suivi
        {% if pending|length > 0 %}
            <span style="background: #e74c3c; color: white; font-size: 0.8rem; border-radius: 12px; padding: 0.2rem 0.6rem; margin-left: 0.5rem; vertical-align: middle;">
                {{ pending|length }}
            </span>
        {% endif %}
    </h1>

    {% if pending|length == 0 %}
        <div class="card" style="padding: 2rem; text-align: center; color: #aaa;">
            Aucune demande en attente.
        </div>
    {% else %}
        {% for follow in pending %}
            <div class="card" style="padding: 1rem 1.25rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 1rem;"
                 id="request-{{ follow.follower.id }}">

                {# Avatar #}
                {% if follow.follower.avatarPath %}
                    <img src="/uploads/avatars/{{ follow.follower.avatarPath }}" alt="Avatar"
                         style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid #f5c400; flex-shrink: 0;">
                {% else %}
                    <div style="width: 50px; height: 50px; border-radius: 50%; background: var(--royal, #1a2e5a); color: #f5c400; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1rem; flex-shrink: 0;">
                        {{ follow.follower.firstName|first|upper }}{{ follow.follower.lastName|first|upper }}
                    </div>
                {% endif %}

                {# Nom + date #}
                <div style="flex: 1; min-width: 0;">
                    <div style="font-weight: 700; color: var(--royal, #1a2e5a);">{{ follow.follower.displayName }}</div>
                    <div style="font-size: 0.78rem; color: #aaa;">{{ follow.createdAt|date('d/m/Y à H:i') }}</div>
                </div>

                {# Boutons #}
                <div style="display: flex; gap: 0.5rem; flex-shrink: 0;">
                    <button onclick="handleRequest({{ follow.follower.id }}, 'accepter')"
                            class="btn btn-primary btn-sm">
                        Accepter
                    </button>
                    <button onclick="handleRequest({{ follow.follower.id }}, 'retirer')"
                            class="btn btn-secondary btn-sm">
                        Refuser
                    </button>
                </div>
            </div>
        {% endfor %}
    {% endif %}

    <div style="margin-top: 1.5rem; text-align: center;">
        <a href="{{ path('app_feed', {'_locale': app.request.locale}) }}" style="font-size: 0.85rem; color: #aaa;">
            ← Retour au fil d'actu
        </a>
    </div>

</main>

<script>
async function handleRequest(userId, action) {
    const locale = document.documentElement.lang || 'fr';
    try {
        const res = await fetch(`/${locale}/membre/${userId}/${action}`, {
            method: 'POST',
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        });
        if (res.ok) {
            const card = document.getElementById('request-' + userId);
            if (card) card.remove();
        }
    } catch (e) {
        console.error('Erreur:', e);
    }
}
</script>
{% endblock %}