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

{% block title %}Communautés - Na+{% endblock %}

{% block body %}
<main id="contenu" style="padding: 1.5rem 1rem; box-sizing: border-box; max-width: 860px; margin: 0 auto;">

    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem;">
        <h1 style="margin: 0; font-size: 1.4rem; color: var(--royal, #1a2e5a);">Communautés</h1>
        <a href="{{ path('app_community_create', {'_locale': app.request.locale}) }}" class="btn btn-primary btn-sm">
            + Créer une communauté
        </a>
    </div>

    {# ===== MES COMMUNAUTÉS ===== #}
    {% if joined|length > 0 %}
    <div class="card" style="padding: 1.5rem; margin-bottom: 1.5rem;">
        <h2 style="margin: 0 0 1rem 0; font-size: 1rem; color: var(--royal, #1a2e5a); border-bottom: 2px solid var(--royal, #1a2e5a); padding-bottom: 0.5rem;">
            Mes communautés ({{ joined|length }})
        </h2>
        <div style="display: flex; flex-direction: column; gap: 0.75rem;">
            {% for community in joined %}
                <div style="display: flex; align-items: center; gap: 1rem; padding: 0.75rem; background: #f8f9fa; border-radius: 8px;">
                    {% if community.avatarPath %}
                        <img src="/uploads/communities/{{ community.avatarPath }}" alt=""
                             style="width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid #f5c400; flex-shrink: 0;">
                    {% else %}
                        <div style="width: 48px; height: 48px; 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;">
                            {{ community.name|first|upper }}
                        </div>
                    {% endif %}
                    <div style="flex: 1; min-width: 0;">
                        <div style="font-weight: 700; color: var(--royal, #1a2e5a);">{{ community.name }}</div>
                        {% if community.description %}
                            <div style="font-size: 0.82rem; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ community.description }}</div>
                        {% endif %}
                        <div style="font-size: 0.75rem; color: #aaa; margin-top: 0.1rem;">
                            {{ community.acceptedMembersCount }} membre(s)
                            {% if community.founder == app.user %} · <strong style="color: #f5c400;">Fondateur</strong>{% endif %}
                        </div>
                    </div>
                    <div style="display: flex; gap: 0.5rem; flex-shrink: 0;">
                        <a href="{{ path('app_feed', {'_locale': app.request.locale, 'tab': community.id}) }}" class="btn btn-primary btn-sm">Fil</a>
                        <a href="{{ path('app_community_view', {'_locale': app.request.locale, 'id': community.id}) }}" class="btn btn-secondary btn-sm">Gérer</a>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    {# ===== DÉCOUVRIR ===== #}
    <div class="card" style="padding: 1.5rem;">
        <h2 style="margin: 0 0 1rem 0; font-size: 1rem; color: var(--royal, #1a2e5a); border-bottom: 2px solid var(--royal, #1a2e5a); padding-bottom: 0.5rem;">
            Découvrir ({{ available|length }})
        </h2>
        {% if available|length == 0 %}
            <p style="color: #aaa; text-align: center;">Tu as rejoint toutes les communautés disponibles !</p>
        {% else %}
            <div style="display: flex; flex-direction: column; gap: 0.75rem;">
                {% for community in available %}
                    {% set isPendingInvite = community.id in pendingIds %}
                    <div style="display: flex; align-items: center; gap: 1rem; padding: 0.75rem; background: #f8f9fa; border-radius: 8px;" id="community-{{ community.id }}">
                        {% if community.avatarPath %}
                            <img src="/uploads/communities/{{ community.avatarPath }}" alt=""
                                 style="width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid #eee; flex-shrink: 0;">
                        {% else %}
                            <div style="width: 48px; height: 48px; border-radius: 50%; background: #6c757d; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1rem; flex-shrink: 0;">
                                {{ community.name|first|upper }}
                            </div>
                        {% endif %}
                        <div style="flex: 1; min-width: 0;">
                            <div style="font-weight: 700; color: var(--royal, #1a2e5a);">{{ community.name }}</div>
                            {% if community.description %}
                                <div style="font-size: 0.82rem; color: #888;">{{ community.description }}</div>
                            {% endif %}
                            <div style="font-size: 0.75rem; color: #aaa; margin-top: 0.1rem;">
                                {{ community.acceptedMembersCount }} membre(s) · Fondateur : {{ community.founder.displayName }}
                            </div>
                        </div>

                        {# Boutons selon le statut #}
                        {% if isPendingInvite %}
                            {# Invitation reçue du fondateur → Accepter / Refuser #}
                            <div id="invite-actions-{{ community.id }}" style="display: flex; gap: 0.5rem; flex-shrink: 0;">
                                <button onclick="acceptInvite({{ community.id }})"
                                        class="btn btn-primary btn-sm">
                                    Accepter
                                </button>
                                <button onclick="declineInvite({{ community.id }})"
                                        class="btn btn-secondary btn-sm">
                                    Refuser
                                </button>
                            </div>
                        {% else %}
                            {# Pas d'invitation → demande standard #}
                            <button id="join-btn-{{ community.id }}"
                                    onclick="joinCommunity({{ community.id }})"
                                    class="btn btn-primary btn-sm" style="flex-shrink: 0;">
                                Rejoindre
                            </button>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    </div>

</main>

<script>
// locale défini dans base.html.twig

async function joinCommunity(id) {
    const res = await fetch(`/${locale}/communautes/${id}/rejoindre`, {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
    });
    if (res.ok) {
        const btn = document.getElementById('join-btn-' + id);
        btn.textContent = 'En attente…';
        btn.disabled = true;
        btn.classList.replace('btn-primary', 'btn-secondary');
    }
}

async function acceptInvite(id) {
    const res = await fetch(`/${locale}/communautes/${id}/accepter-invitation`, {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
    });
    if (res.ok) {
        // Recharger la page pour déplacer la communauté dans "Mes communautés"
        window.location.reload();
    }
}

async function declineInvite(id) {
    const res = await fetch(`/${locale}/communautes/${id}/refuser-invitation`, {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
    });
    if (res.ok) {
        // Masquer la ligne sans recharger
        const row = document.getElementById('community-' + id);
        if (row) row.remove();
    }
}
</script>
{% endblock %}