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

{% block title %}{{ community.name }} - Na+{% endblock %}

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

    <div style="margin-bottom: 1rem;">
        <a href="{{ path('app_community_index', {'_locale': app.request.locale}) }}" style="font-size: 0.85rem; color: #aaa;">← Retour aux communautés</a>
    </div>

    {% for msg in app.flashes('success') %}
        <div style="background: #d4edda; color: #155724; padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem;">{{ msg }}</div>
    {% endfor %}

    {# ===== HEADER ===== #}
    <div class="card" style="padding: 1.25rem 1.5rem; display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem;">
        {% if community.avatarPath %}
            <img src="/uploads/communities/{{ community.avatarPath }}" alt=""
                 style="width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid #f5c400; flex-shrink: 0;">
        {% else %}
            <div style="width: 72px; height: 72px; border-radius: 50%; background: var(--royal, #1a2e5a); color: #f5c400; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: bold; flex-shrink: 0;">
                {{ community.name|first|upper }}
            </div>
        {% endif %}
        <div style="flex: 1;">
            <h1 style="margin: 0; font-size: 1.4rem; color: var(--royal, #1a2e5a);">{{ community.name }}</h1>
            {% if community.description %}
                <div style="color: #888; font-size: 0.9rem; margin-top: 0.2rem;">{{ community.description }}</div>
            {% endif %}
            <div style="font-size: 0.78rem; color: #aaa; margin-top: 0.3rem;">
                {{ community.acceptedMembersCount }} membre(s) · Fondateur : {{ community.founder.displayName }} · Créée le {{ community.createdAt|date('d/m/Y') }}
            </div>
        </div>
        <div style="flex-shrink: 0; display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end;">
            {% if isFounder %}
                <a href="{{ path('app_feed', {'_locale': app.request.locale, 'tab': community.id}) }}" class="btn btn-primary btn-sm">Voir le fil</a>
                <button onclick="openEditCommunity()" class="btn btn-secondary btn-sm">Modifier</button>
                <button onclick="deleteCommunity({{ community.id }})" class="btn btn-sm" style="background:#fef2f2;color:#dc2626;border:1px solid #fca5a5;">Supprimer</button>
            {% elseif isMember %}
                <a href="{{ path('app_feed', {'_locale': app.request.locale, 'tab': community.id}) }}" class="btn btn-primary btn-sm">Voir le fil</a>
                <button id="leave-btn" onclick="leaveCommunity({{ community.id }})" class="btn btn-secondary btn-sm">Quitter</button>
            {% elseif isPending %}
                <button onclick="acceptInvite({{ community.id }})" class="btn btn-primary btn-sm">Accepter l'invitation</button>
                <button onclick="declineInvite({{ community.id }})" class="btn btn-secondary btn-sm">Refuser</button>
            {% else %}
                <button id="join-btn" onclick="joinCommunity({{ community.id }})" class="btn btn-primary btn-sm">Rejoindre</button>
            {% endif %}
        </div>
    </div>

    {# ===== INVITER UN MEMBRE (fondateur) ===== #}
    {% if isFounder %}
    <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;">
            Inviter un membre
        </h2>
        <div style="display: flex; gap: 0.5rem;">
            <input type="text" id="invite-search" placeholder="Pseudo ou nom..."
                   style="flex: 1; padding: 0.45rem 0.75rem; border: 1px solid #ddd; border-radius: 6px; font-size: 0.875rem;">
            <button onclick="searchMember()" class="btn btn-primary btn-sm">Rechercher</button>
        </div>
        <div id="invite-results" style="margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem;"></div>
        <div id="invite-status" style="margin-top: 0.5rem; font-size: 0.85rem; min-height: 1rem;"></div>
    </div>
    {% endif %}

    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">

        {# ===== DEMANDES EN ATTENTE (fondateur) ===== #}
        {% if isFounder and pendingList|length > 0 %}

            {# Séparer demandes entrantes (user) et invitations sortantes (founder) #}
            {% set incomingRequests = [] %}
            {% set outgoingInvites = [] %}
            {% for membership in pendingList %}
                {% if membership.initiatedByUser %}
                    {% set incomingRequests = incomingRequests|merge([membership]) %}
                {% else %}
                    {% set outgoingInvites = outgoingInvites|merge([membership]) %}
                {% endif %}
            {% endfor %}

            <div style="display: flex; flex-direction: column; gap: 1.5rem;">

                {# Demandes entrantes : l'utilisateur veut rejoindre → Accepter / Refuser #}
                {% if incomingRequests|length > 0 %}
                <div class="card" style="padding: 1.5rem;">
                    <h2 style="margin: 0 0 1rem 0; font-size: 1rem; color: #e74c3c; border-bottom: 2px solid #e74c3c; padding-bottom: 0.5rem;">
                        Demandes ({{ incomingRequests|length }})
                    </h2>
                    <div style="display: flex; flex-direction: column; gap: 0.75rem;">
                        {% for membership in incomingRequests %}
                            <div style="display: flex; align-items: center; gap: 0.75rem;" id="pending-{{ membership.user.id }}">
                                {% if membership.user.avatarPath %}
                                    <img src="/uploads/avatars/{{ membership.user.avatarPath }}" alt=""
                                         style="width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #f5c400; flex-shrink: 0;">
                                {% else %}
                                    <div style="width: 40px; height: 40px; border-radius: 50%; background: var(--royal, #1a2e5a); color: #f5c400; display: flex; align-items: center; justify-content: center; font-weight: bold; flex-shrink: 0;">
                                        {{ membership.user.firstName|first|upper }}
                                    </div>
                                {% endif %}
                                <div style="flex: 1; font-size: 0.875rem; font-weight: 600; color: var(--royal, #1a2e5a);">
                                    {{ membership.user.displayName }}
                                </div>
                                <div style="display: flex; gap: 0.4rem; flex-shrink: 0;">
                                    <button onclick="acceptMember({{ community.id }}, {{ membership.user.id }})" class="btn btn-primary btn-sm">Accepter</button>
                                    <button onclick="excludeMember({{ community.id }}, {{ membership.user.id }})" class="btn btn-secondary btn-sm">Refuser</button>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                {# Invitations sortantes : le fondateur a invité → En attente de réponse #}
                {% if outgoingInvites|length > 0 %}
                <div class="card" style="padding: 1.5rem;">
                    <h2 style="margin: 0 0 1rem 0; font-size: 1rem; color: #f5a623; border-bottom: 2px solid #f5a623; padding-bottom: 0.5rem;">
                        Invitations envoyées ({{ outgoingInvites|length }})
                    </h2>
                    <div style="display: flex; flex-direction: column; gap: 0.75rem;">
                        {% for membership in outgoingInvites %}
                            <div style="display: flex; align-items: center; gap: 0.75rem;" id="pending-{{ membership.user.id }}">
                                {% if membership.user.avatarPath %}
                                    <img src="/uploads/avatars/{{ membership.user.avatarPath }}" alt=""
                                         style="width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #eee; flex-shrink: 0;">
                                {% else %}
                                    <div style="width: 40px; height: 40px; border-radius: 50%; background: #6c757d; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; flex-shrink: 0;">
                                        {{ membership.user.firstName|first|upper }}
                                    </div>
                                {% endif %}
                                <div style="flex: 1; font-size: 0.875rem; font-weight: 600; color: var(--royal, #1a2e5a);">
                                    {{ membership.user.displayName }}
                                </div>
                                <span style="font-size: 0.78rem; color: #aaa; font-style: italic; flex-shrink: 0;">
                                    En attente de réponse…
                                </span>
                            </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

            </div>
        {% endif %}

        {# ===== MEMBRES ACCEPTÉS ===== #}
        <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;">
                Membres ({{ memberList|length }})
            </h2>
            {% if memberList|length == 0 %}
                <p style="color: #aaa; font-size: 0.85rem; text-align: center;">Aucun membre pour l'instant.</p>
            {% else %}
                <div style="display: flex; flex-direction: column; gap: 0.6rem;">
                    {% for membership in memberList %}
                        <div style="display: flex; align-items: center; gap: 0.75rem;" id="member-{{ membership.user.id }}">
                            {% if membership.user.avatarPath %}
                                <img src="/uploads/avatars/{{ membership.user.avatarPath }}" alt=""
                                     style="width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid #f5c400; flex-shrink: 0;">
                            {% else %}
                                <div style="width: 36px; height: 36px; border-radius: 50%; background: var(--royal, #1a2e5a); color: #f5c400; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.85rem; flex-shrink: 0;">
                                    {{ membership.user.firstName|first|upper }}
                                </div>
                            {% endif %}
                            <div style="flex: 1; font-size: 0.875rem; color: var(--royal, #1a2e5a);">
                                {{ membership.user.displayName }}
                            </div>
                            {% if isFounder %}
                                <div style="position: relative;">
                                    <button onclick="toggleMemberMenu({{ membership.user.id }})"
                                            style="background: none; border: none; cursor: pointer; color: #bbb; font-size: 1rem; padding: 0.2rem 0.4rem; letter-spacing: 1px;">
                                        •••
                                    </button>
                                    <div id="member-menu-{{ membership.user.id }}"
                                         style="display: none; position: absolute; right: 0; top: 100%; background: white; border: 1px solid #eee; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 100; min-width: 180px; overflow: hidden;">
                                        <button onclick="excludeMember({{ community.id }}, {{ membership.user.id }})"
                                                style="display: block; width: 100%; text-align: left; padding: 0.6rem 1rem; background: none; border: none; cursor: pointer; font-size: 0.875rem; color: #555; border-bottom: 1px solid #f5f5f5;">
                                            Exclure
                                        </button>
                                        <button onclick="excludeAndReport({{ community.id }}, {{ membership.user.id }})"
                                                style="display: block; width: 100%; text-align: left; padding: 0.6rem 1rem; background: none; border: none; cursor: pointer; font-size: 0.875rem; color: #dc3545;">
                                            Exclure et signaler
                                        </button>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        </div>

    </div>

    {# ===== POPUP MODIFIER COMMUNAUTÉ (fondateur) ===== #}
    {% if isFounder %}
    <div id="edit-community-overlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:500;align-items:center;justify-content:center;padding:1rem;">
        <div style="background:white;border-radius:12px;padding:1.5rem;width:100%;max-width:480px;box-shadow:0 8px 32px rgba(0,0,0,0.2);position:relative;">
            <button onclick="closeEditCommunity()" style="position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:1.3rem;cursor:pointer;color:#9ca3af;">✕</button>
            <h2 style="margin:0 0 1rem;font-size:1rem;color:var(--royal,#1a2e5a);border-bottom:2px solid var(--royal,#1a2e5a);padding-bottom:0.4rem;">Modifier la communauté</h2>

            <div style="display:flex;flex-direction:column;gap:0.75rem;">
                <div>
                    <label style="font-size:0.78rem;color:#6b7280;display:block;margin-bottom:0.15rem;">Nom</label>
                    <input type="text" id="edit-community-name" value="{{ community.name }}"
                           style="width:100%;padding:0.4rem 0.5rem;border:1px solid #e5e7eb;border-radius:6px;font-size:0.875rem;box-sizing:border-box;">
                </div>
                <div>
                    <label style="font-size:0.78rem;color:#6b7280;display:block;margin-bottom:0.15rem;">Description</label>
                    <textarea id="edit-community-desc" rows="3"
                              style="width:100%;padding:0.4rem 0.5rem;border:1px solid #e5e7eb;border-radius:6px;font-size:0.875rem;box-sizing:border-box;resize:vertical;">{{ community.description ?? '' }}</textarea>
                </div>
                <div>
                    <label style="font-size:0.78rem;color:#6b7280;display:block;margin-bottom:0.15rem;">Avatar (optionnel)</label>
                    {% if community.avatarPath %}
                        <img src="/uploads/communities/{{ community.avatarPath }}" alt="" id="edit-avatar-preview"
                             style="width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid #f5c400;margin-bottom:0.4rem;display:block;">
                    {% endif %}
                    <input type="file" id="edit-community-avatar" accept="image/jpeg,image/png,image/webp"
                           style="font-size:0.82rem;">
                </div>
            </div>

            <div style="margin-top:1rem;display:flex;gap:0.5rem;justify-content:flex-end;">
                <button onclick="closeEditCommunity()" style="padding:0.4rem 1rem;border:1px solid #e5e7eb;border-radius:6px;background:white;cursor:pointer;font-size:0.82rem;">Annuler</button>
                <button onclick="saveCommunity({{ community.id }})" style="padding:0.4rem 1rem;background:var(--royal,#1a2e5a);color:#f5c400;border:none;border-radius:6px;cursor:pointer;font-size:0.82rem;font-weight:700;">Enregistrer</button>
            </div>
            <div id="edit-community-status" style="margin-top:0.3rem;font-size:0.78rem;min-height:1rem;text-align:center;"></div>
        </div>
    </div>
    {% endif %}

</main>

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

function openEditCommunity() {
    var overlay = document.getElementById('edit-community-overlay');
    if (overlay) { overlay.style.display = 'flex'; }
}
function closeEditCommunity() {
    var overlay = document.getElementById('edit-community-overlay');
    if (overlay) { overlay.style.display = 'none'; }
}

function saveCommunity(communityId) {
    var status = document.getElementById('edit-community-status');
    var formData = new FormData();
    formData.append('name', document.getElementById('edit-community-name').value.trim());
    formData.append('description', document.getElementById('edit-community-desc').value.trim());
    var avatarInput = document.getElementById('edit-community-avatar');
    if (avatarInput && avatarInput.files[0]) {
        formData.append('avatar', avatarInput.files[0]);
    }
    fetch('/' + locale + '/communautes/' + communityId + '/modifier', {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        body: formData
    }).then(r => r.json()).then(function(data) {
        if (data.success) {
            status.style.color = '#28a745';
            status.textContent = 'Enregistré !';
            setTimeout(function() { location.reload(); }, 800);
        } else {
            status.style.color = '#e74c3c';
            status.textContent = data.error || 'Erreur.';
        }
    });
}

function deleteCommunity(communityId) {
    if (!confirm('Supprimer définitivement cette communauté ? Tous les membres seront exclus.')) return;
    if (!confirm('Dernière confirmation — cette action est irréversible.')) return;
    fetch('/' + locale + '/communautes/' + communityId + '/supprimer', {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
    }).then(r => r.json()).then(function(data) {
        if (data.success) {
            window.location.href = '/' + locale + '/communautes';
        } else {
            alert(data.error || 'Erreur lors de la suppression.');
        }
    });
}

function toggleMemberMenu(userId) {
    document.querySelectorAll('[id^="member-menu-"]').forEach(m => {
        if (m.id !== 'member-menu-' + userId) m.style.display = 'none';
    });
    const menu = document.getElementById('member-menu-' + userId);
    if (menu) menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
}
document.addEventListener('click', e => {
    if (!e.target.closest('[id^="member-menu-"]') && !e.target.closest('button[onclick^="toggleMemberMenu"]')) {
        document.querySelectorAll('[id^="member-menu-"]').forEach(m => m.style.display = 'none');
    }
});

function searchMember() {
    const q = document.getElementById('invite-search').value.trim();
    if (!q) return;
    fetch('/' + locale + '/na/membres/recherche?q=' + encodeURIComponent(q), {
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(res => res.json())
    .then(data => {
        const container = document.getElementById('invite-results');
        container.innerHTML = '';
        if (data.length === 0) {
            container.innerHTML = '<div style="color:#aaa;font-size:0.85rem;">Aucun résultat.</div>';
            return;
        }
        data.forEach(member => {
            const div = document.createElement('div');
            div.style.cssText = 'display:flex;align-items:center;gap:0.75rem;padding:0.5rem;background:#f8f9fa;border-radius:6px;';
            div.innerHTML = '<div style="flex:1;font-size:0.875rem;font-weight:600;color:var(--royal,#1a2e5a);">' + member.name + '</div>'
                + '<button onclick="inviteMember(' + member.id + ')" class="btn btn-primary btn-sm">Inviter</button>';
            container.appendChild(div);
        });
    });
}

document.getElementById('invite-search') && document.getElementById('invite-search').addEventListener('keydown', function(e) {
    if (e.key === 'Enter') searchMember();
});

function inviteMember(userId) {
    const status = document.getElementById('invite-status');
    const formData = new FormData();
    formData.append('user_id', userId);
    fetch('/' + locale + '/communautes/{{ community.id }}/inviter', {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        body: formData
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            status.style.color = '#28a745';
            status.textContent = data.name + ' a été invité(e) !';
            document.getElementById('invite-results').innerHTML = '';
            document.getElementById('invite-search').value = '';
        } else {
            status.style.color = '#e74c3c';
            status.textContent = data.error || 'Erreur.';
        }
    });
}

function acceptInvite(id) {
    fetch('/' + locale + '/communautes/' + id + '/accepter-invitation', {
        method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest' }
    }).then(res => { if (res.ok) location.reload(); });
}

function declineInvite(id) {
    if (!confirm('Refuser cette invitation ?')) return;
    fetch('/' + locale + '/communautes/' + id + '/refuser-invitation', {
        method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest' }
    }).then(res => { if (res.ok) location.reload(); });
}

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

function leaveCommunity(id) {
    if (!confirm('Quitter cette communauté ?')) return;
    fetch('/' + locale + '/communautes/' + id + '/quitter', {
        method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest' }
    }).then(res => { if (res.ok) location.reload(); });
}

function acceptMember(communityId, userId) {
    fetch('/' + locale + '/communautes/' + communityId + '/accepter/' + userId, {
        method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest' }
    }).then(res => {
        if (res.ok) location.reload();
    });
}

function excludeMember(communityId, userId) {
    if (!confirm('Exclure ce membre ?')) return;
    fetch('/' + locale + '/communautes/' + communityId + '/exclure/' + userId, {
        method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest' }
    }).then(res => {
        if (res.ok) {
            document.getElementById('pending-' + userId) && document.getElementById('pending-' + userId).remove();
            document.getElementById('member-' + userId) && document.getElementById('member-' + userId).remove();
        }
    });
}

function excludeAndReport(communityId, userId) {
    if (!confirm('Exclure et signaler ce membre ?')) return;
    fetch('/' + locale + '/communautes/' + communityId + '/exclure/' + userId, {
        method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest' }
    }).then(() => {
        fetch('/' + locale + '/membre/' + userId + '/signaler', {
            method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest' }
        });
        document.getElementById('member-' + userId) && document.getElementById('member-' + userId).remove();
    });
}
</script>
{% endblock %}