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

{% block title %}Notifications - Na+{% endblock %}

{% block body %}
<main id="contenu" style="padding: 2rem; box-sizing: border-box; text-align: left !important; max-width: 700px; margin: 0 auto;">

    <h1 style="margin: 0 0 1rem 0; font-size: 1.4rem; color: var(--royal, #1a2e5a);">Notifications</h1>

    {# Compteurs par catégorie #}
    {% if notifications|length > 0 %}
    {% set cntFollow    = notifications|filter(n => n.type == 'follow_request'  and not n.isRead)|length %}
    {% set cntFollowOk  = notifications|filter(n => n.type == 'follow_accepted' and not n.isRead)|length %}
    {% set cntMsg       = notifications|filter(n => n.type == 'new_message'     and not n.isRead)|length %}
    {% set cntComment   = notifications|filter(n => n.type == 'new_comment'     and not n.isRead)|length %}
    {% set cntLike      = notifications|filter(n => n.type == 'new_like'        and not n.isRead)|length %}
    {% set cntCommunity = notifications|filter(n => n.type starts with 'community' and not n.isRead)|length %}
    {% if cntFollow + cntFollowOk + cntMsg + cntComment + cntLike + cntCommunity > 0 %}
    <div style="display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1.25rem;">
        {% if cntFollow > 0 %}
            <span style="background:#fff3e0;color:#e65100;border-radius:20px;padding:0.25rem 0.75rem;font-size:0.82rem;font-weight:600;">👤 {{ cntFollow }} demande{{ cntFollow > 1 ? 's' : '' }} de suivi</span>
        {% endif %}
        {% if cntFollowOk > 0 %}
            <span style="background:#e8f5e9;color:#2e7d32;border-radius:20px;padding:0.25rem 0.75rem;font-size:0.82rem;font-weight:600;">🤝 {{ cntFollowOk }} suivi{{ cntFollowOk > 1 ? 's' : '' }} accepté{{ cntFollowOk > 1 ? 's' : '' }}</span>
        {% endif %}
        {% if cntMsg > 0 %}
            <span style="background:#e3f2fd;color:#1565c0;border-radius:20px;padding:0.25rem 0.75rem;font-size:0.82rem;font-weight:600;">💬 {{ cntMsg }} nouveau{{ cntMsg > 1 ? 'x' : '' }} message{{ cntMsg > 1 ? 's' : '' }}</span>
        {% endif %}
        {% if cntComment > 0 %}
            <span style="background:#fce4ec;color:#880e4f;border-radius:20px;padding:0.25rem 0.75rem;font-size:0.82rem;font-weight:600;">🗨️ {{ cntComment }} commentaire{{ cntComment > 1 ? 's' : '' }}</span>
        {% endif %}
        {% if cntLike > 0 %}
            <span style="background:#fff8e1;color:#f57f17;border-radius:20px;padding:0.25rem 0.75rem;font-size:0.82rem;font-weight:600;">❤️ {{ cntLike }} like{{ cntLike > 1 ? 's' : '' }}</span>
        {% endif %}
        {% if cntCommunity > 0 %}
            <span style="background:#f3e5f5;color:#6a1b9a;border-radius:20px;padding:0.25rem 0.75rem;font-size:0.82rem;font-weight:600;">🏘️ {{ cntCommunity }} communauté{{ cntCommunity > 1 ? 's' : '' }}</span>
        {% endif %}
    </div>
    {% endif %}
    {% endif %}

    {% if notifications|length == 0 %}
        <div class="card" style="padding: 2rem; text-align: center; color: #aaa;">
            Aucune notification pour l'instant.
        </div>
    {% else %}
        <div style="display: flex; flex-direction: column; gap: 0.75rem;">
        {% for notif in notifications %}
            <div class="card" style="padding: 1rem 1.25rem; display: flex; align-items: center; gap: 1rem; {% if not notif.isRead %}border-left: 3px solid var(--royal, #1a2e5a);{% else %}opacity: 0.7;{% endif %}">

                {# Icône selon le type #}
                <div style="font-size: 1.4rem; flex-shrink: 0; width: 36px; text-align: center;">
                    {% if notif.type == 'community_invite' %}🏘️
                    {% elseif notif.type == 'community_request' %}📥
                    {% elseif notif.type == 'community_accepted' %}✅
                    {% elseif notif.type == 'follow_request' %}👤
                    {% elseif notif.type == 'follow_accepted' %}🤝
                    {% elseif notif.type == 'new_message' %}💬
                    {% elseif notif.type == 'new_comment' %}🗨️
                    {% elseif notif.type == 'new_like' %}❤️
                    {% else %}🔔{% endif %}
                </div>

                {# Contenu #}
                <div style="flex: 1; min-width: 0;">
                    <div style="font-size: 0.9rem; color: #333;">{{ notif.message }}</div>
                    <div style="font-size: 0.75rem; color: #aaa; margin-top: 0.2rem;">{{ notif.createdAt|date('d/m/Y à H:i') }}</div>
                    {% if notif.type == 'follow_request' and notif.sender and not notif.isRead %}
                    <div style="display:flex;gap:0.5rem;margin-top:0.5rem;" id="follow-actions-{{ notif.id }}">
                        <button onclick="acceptFollowPage({{ notif.sender.id }}, {{ notif.id }})" style="padding:0.3rem 0.9rem;background:var(--royal,#1a2e5a);color:#f5c400;border:none;border-radius:6px;font-size:0.82rem;cursor:pointer;font-weight:700;">Accepter</button>
                        <button onclick="refuseFollowPage({{ notif.sender.id }}, {{ notif.id }})" style="padding:0.3rem 0.9rem;background:#f3f4f6;color:#374151;border:none;border-radius:6px;font-size:0.82rem;cursor:pointer;">Refuser</button>
                    </div>
                    {% endif %}
                </div>

                {# Lien #}
                {% if notif.link %}
                    <a href="{{ notif.link }}" class="btn btn-primary btn-sm" style="flex-shrink: 0;">Voir</a>
                {% endif %}

            </div>
        {% endfor %}
        </div>
    {% endif %}



</main>



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

function acceptFollowPage(senderId, notifId) {
    fetch('/' + locale + '/membre/' + senderId + '/accepter', {
        method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json' }
    }).then(r => r.json()).then(function(data) {
        var actions = document.getElementById('follow-actions-' + notifId);
        if (actions) actions.innerHTML = '<span style="font-size:0.82rem;color:#22c55e;font-weight:700;">✓ Suivi accepté</span>';
        fetch('/' + locale + '/notifications/' + notifId + '/lire', { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest' } });
    });
}

function refuseFollowPage(senderId, notifId) {
    fetch('/' + locale + '/membre/' + senderId + '/retirer', {
        method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json' }
    }).then(function() {
        var actions = document.getElementById('follow-actions-' + notifId);
        if (actions) actions.innerHTML = '<span style="font-size:0.82rem;color:#9ca3af;">Refusé</span>';
        fetch('/' + locale + '/notifications/' + notifId + '/lire', { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest' } });
    });
}


</script>
{% endblock %}