{% extends 'gestion/_base.html.twig' %}
{% set active = 'notifications' %}

{% block title %}Notifications{% endblock %}

{% set typeIcons = {
    'vente': 'green',
    'livraison': 'green',
    'suivi_anomalie': 'red',
    'reservation': 'ember',
    'demande_affutage': 'dark',
    'systeme': 'neutral'
} %}

{% block content %}
    <div class="adm-page-head">
        <div>
            <span class="adm-eyebrow">Pilotage</span>
            <h1 class="adm-page-title">Notifications</h1>
            <p class="adm-page-sub">{{ unread }} non lue{{ unread > 1 ? 's' }} — ventes, livraisons, anomalies, réservations.</p>
        </div>
        <div class="adm-page-head-actions">
            {% if unread > 0 %}
                <button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" id="notif-read-all">Tout marquer lu</button>
            {% endif %}
        </div>
    </div>

    <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;">
        <a class="adm-btn adm-btn--sm {{ filtre is null ? '' : 'adm-btn--ghost' }}" href="{{ path('gestion_notifications') }}">Toutes</a>
        {% for type in types %}
            <a class="adm-btn adm-btn--sm {{ filtre == type.value ? '' : 'adm-btn--ghost' }}" href="{{ path('gestion_notifications', {type: type.value}) }}">{{ type.label }}</a>
        {% endfor %}
    </div>

    {% if notifications is empty %}
        <div class="adm-card"><div class="adm-empty"><p>Aucune notification{{ filtre ? ' de ce type' }}.</p></div></div>
    {% else %}
        <div class="adm-card" style="padding:0;">
            {# Sous 768 px, la ligne se replie : badge de type, puis le texte,
               puis les actions pleine largeur (cf. §18 du DS). #}
            {% for notification in notifications %}
                <div class="adm-notif-row{{ notification.read ? ' is-read' }}" data-notif-row="{{ notification.id }}">
                    <span class="adm-badge adm-badge--{{ typeIcons[notification.type.value] }}" style="margin-top:2px;">{{ notification.type.label }}</span>
                    <div class="adm-notif-body">
                        <strong style="font-size:0.9rem;">{{ notification.titre }}</strong>
                        {% if notification.message %}<div style="font-size:0.82rem;color:var(--v2-ink-soft);margin-top:2px;">{{ notification.message }}</div>{% endif %}
                        <div class="adm-mono" style="font-size:0.7rem;color:var(--v2-ink-soft);margin-top:4px;">{{ notification.createdAt|date('d/m/Y H:i') }}</div>
                    </div>
                    <div class="adm-notif-actions">
                        {% if notification.url %}
                            <a class="adm-btn adm-btn--ghost adm-btn--sm" href="{{ notification.url }}">Voir</a>
                        {% endif %}
                        {% if not notification.read %}
                            <button type="button" class="adm-btn adm-btn--ghost adm-btn--sm" data-notif-read="{{ notification.id }}" title="Marquer lu" aria-label="Marquer comme lu">✓</button>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>
    {% endif %}
{% endblock %}

{% block scripts %}
<script>
(function () {
    'use strict';
    document.addEventListener('click', function (e) {
        var read = e.target.closest('[data-notif-read]');
        if (read) {
            admFetch('/gestion/api/notifications/' + read.getAttribute('data-notif-read') + '/read', { body: {} })
                .then(function () {
                    var row = read.closest('[data-notif-row]');
                    row.classList.add('is-read');
                    read.remove();
                });
        }
    });
    var all = document.getElementById('notif-read-all');
    if (all) {
        all.addEventListener('click', function () {
            admFetch('/gestion/api/notifications/read-all', { body: {} })
                .then(function () { window.location.reload(); });
        });
    }
})();
</script>
{% endblock %}