{% extends 'admin/_layout.html.twig' %}

{% block title %}Activités — Admin{% endblock %}
{% block page_title %}Journal d'activité{% endblock %}
{% block page_subtitle %}{{ activities|length }} action{{ activities|length > 1 ? 's' : '' }}{% endblock %}

{% block admin_body %}
<nav class="adm-breadcrumb">
    <svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
    <a href="{{ path('app_admin') }}">Dashboard</a>
    <span class="adm-bc-sep">›</span>
    <span class="adm-bc-current">Journal d'activité</span>
</nav>

{# ── Filters ── #}
<div class="adm-card adm-filters-card">
    <div class="adm-filters-row">
        <select class="adm-filter-sel" id="adm-cat-filter">
            <option value="">Toutes les catégories</option>
            <option value="user">Utilisateurs</option>
            <option value="social">Réseaux sociaux</option>
            <option value="contact">Messages</option>
            <option value="cookie">Cookies</option>
            <option value="cookie_category">Catégories cookies</option>
            <option value="parameter">Paramètres</option>
            <option value="integration">Intégrations</option>
            <option value="seo">SEO</option>
            <option value="legal">Pages légales</option>
            <option value="error_page">Pages d'erreur</option>
            <option value="error_log">Erreurs</option>
        </select>
        <select class="adm-filter-sel" id="adm-action-filter">
            <option value="">Toutes les actions</option>
            <option value="created">Création</option>
            <option value="updated">Modification</option>
            <option value="deleted">Suppression</option>
            <option value="toggled">Toggle</option>
            <option value="banned">Bannissement</option>
            <option value="unbanned">Débannissement</option>
            <option value="resolved">Résolution</option>
            <option value="replied">Réponse</option>
            <option value="reordered">Réorganisation</option>
            <option value="reset_password">Réinitialisation MDP</option>
            <option value="received">Réception</option>
            <option value="batch_deleted">Suppression en masse</option>
            <option value="batch_resolved">Résolution en masse</option>
        </select>
        <button type="button" class="adm-btn adm-btn-g adm-btn-sm" id="adm-act-reset" style="display:none">
            <svg viewBox="0 0 24 24" style="margin-right:4px"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-4.95"/></svg>
            Réinitialiser
        </button>
    </div>
    <div class="adm-filters-meta">
        <span id="adm-act-count"></span>
        {% if is_granted('ROLE_ADMIN') and activities|length > 0 %}
        <div style="display:flex;gap:6px;margin-left:auto">
            <a href="{{ path('app_admin_activity_export') }}" class="adm-btn adm-btn-g adm-btn-sm">
                <svg viewBox="0 0 24 24" style="margin-right:4px"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                CSV
            </a>
        </div>
        {% endif %}
    </div>
</div>

{# ── Table ── #}
<div class="adm-card" style="padding:0;overflow:visible">
    <div class="adm-tbl-wrap" style="margin-top:0">
        <table>
            <thead>
                <tr>
                    <th style="width:40px"></th>
                    <th>Date</th>
                    <th>Catégorie</th>
                    <th>Description</th>
                    <th>Par</th>
                </tr>
            </thead>
            <tbody>
                {% for a in activities %}
                {% set _act = a.action %}
                {% set _cat = a.category %}
                {# Dot color by action #}
                {% if _act == 'deleted' or _act == 'batch_deleted' or _act == 'banned' %}
                    {% set _color = 'var(--red)' %}
                {% elseif _act == 'created' or _act == 'received' or _act == 'resolved' or _act == 'batch_resolved' or _act == 'unbanned' %}
                    {% set _color = 'var(--green)' %}
                {% elseif _act == 'updated' or _act == 'reordered' %}
                    {% set _color = 'var(--accent)' %}
                {% elseif _act == 'toggled' or _act == 'reset_password' %}
                    {% set _color = 'var(--orange)' %}
                {% elseif _act == 'replied' %}
                    {% set _color = 'var(--accent2)' %}
                {% else %}
                    {% set _color = 'var(--muted)' %}
                {% endif %}
                {# Badge class by category #}
                {% if _cat == 'user' %}
                    {% set _badge = 'adm-pill-user' %}
                {% elseif _cat == 'social' %}
                    {% set _badge = 'adm-pill-active' %}
                {% elseif _cat == 'contact' %}
                    {% set _badge = 'adm-pill-intern' %}
                {% elseif _cat == 'cookie' or _cat == 'cookie_category' %}
                    {% set _badge = 'adm-pill-paused' %}
                {% elseif _cat == 'parameter' %}
                    {% set _badge = 'adm-pill-super-admin' %}
                {% elseif _cat == 'integration' %}
                    {% set _badge = 'adm-pill-trial' %}
                {% elseif _cat == 'seo' or _cat == 'legal' or _cat == 'error_page' %}
                    {% set _badge = 'adm-pill-admin' %}
                {% elseif _cat == 'error_log' %}
                    {% set _badge = 'adm-pill-banned' %}
                {% else %}
                    {% set _badge = 'adm-pill-trial' %}
                {% endif %}
                <tr data-category="{{ _cat }}" data-action="{{ _act }}">
                    <td>
                        <span style="width:8px;height:8px;border-radius:50%;display:inline-block;background:{{ _color }}"></span>
                    </td>
                    <td style="font-size:.78rem;color:var(--muted);white-space:nowrap">{{ a.createdAt|date('d/m/Y H:i:s') }}</td>
                    <td><span class="adm-pill {{ _badge }}">{{ _cat }}</span></td>
                    <td style="font-size:.82rem">{{ a.description }}</td>
                    <td style="font-size:.78rem;color:var(--muted)">{{ a.performedBy ?? '—' }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="adm-pagination" id="adm-pagination"></div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
(function () {
    var catFilter = document.getElementById('adm-cat-filter');
    var actFilter = document.getElementById('adm-action-filter');
    var countLabel = document.getElementById('adm-act-count');
    var resetBtn = document.getElementById('adm-act-reset');
    var rows = Array.from(document.querySelectorAll('table tbody tr[data-category]'));
    var tbody = document.querySelector('table tbody');
    var emptyRow = null;
    var PAGE_SIZE = 20, currentPage = 1;

    function getVisible() {
        var cat = catFilter.value, act = actFilter.value;
        return rows.filter(function (tr) {
            return (!cat || tr.dataset.category === cat)
                && (!act || tr.dataset.action === act);
        });
    }

    function render() {
        var visible = getVisible(), total = visible.length;
        var pages = Math.max(1, Math.ceil(total / PAGE_SIZE));
        if (currentPage > pages) currentPage = pages;
        var start = (currentPage - 1) * PAGE_SIZE, end = start + PAGE_SIZE;
        rows.forEach(function (tr) { tr.style.display = 'none'; });
        visible.forEach(function (tr, i) { tr.style.display = (i >= start && i < end) ? '' : 'none'; });
        countLabel.textContent = total + ' activit\u00e9' + (total > 1 ? 's' : '');

        if (total === 0 && !emptyRow) {
            emptyRow = document.createElement('tr');
            emptyRow.innerHTML = '<td colspan="5" style="text-align:center;padding:32px;color:var(--muted)">Aucun r\u00e9sultat trouv\u00e9.</td>';
            tbody.appendChild(emptyRow);
        }
        if (emptyRow) emptyRow.style.display = total === 0 ? '' : 'none';

        renderPagination(pages, total, start, Math.min(end, total));
    }

    function updateResetBtn() {
        resetBtn.style.display = (catFilter.value || actFilter.value) ? '' : 'none';
    }

    function renderPagination(pages, total, start, end) {
        var c = document.getElementById('adm-pagination');
        if (total <= PAGE_SIZE) { c.innerHTML = ''; return; }
        var h = '<span class="adm-pag-info">Affichage <strong>' + (start + 1) + '-' + end + '</strong> sur <strong>' + total + '</strong></span><div class="adm-pag-nav">';
        h += '<a class="adm-pag-btn' + (currentPage <= 1 ? ' disabled' : '') + '" data-page="' + (currentPage - 1) + '"><svg viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg></a>';
        for (var i = 1; i <= pages; i++) {
            if (i === 1 || i === pages || Math.abs(i - currentPage) <= 1)
                h += '<a class="adm-pag-btn' + (i === currentPage ? ' active' : '') + '" data-page="' + i + '">' + i + '</a>';
            else if (i === 2 || i === pages - 1)
                h += '<span style="padding:0 4px;color:var(--muted)">\u2026</span>';
        }
        h += '<a class="adm-pag-btn' + (currentPage >= pages ? ' disabled' : '') + '" data-page="' + (currentPage + 1) + '"><svg viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg></a></div>';
        c.innerHTML = h;
        c.querySelectorAll('.adm-pag-btn:not(.disabled)').forEach(function (b) {
            b.style.cursor = 'pointer';
            b.addEventListener('click', function () { currentPage = parseInt(this.dataset.page); render(); });
        });
    }

    catFilter.addEventListener('change', function () { currentPage = 1; render(); updateResetBtn(); });
    actFilter.addEventListener('change', function () { currentPage = 1; render(); updateResetBtn(); });
    resetBtn.addEventListener('click', function () {
        catFilter.value = '';
        actFilter.value = '';
        currentPage = 1;
        render();
        updateResetBtn();
    });
    render();
})();
</script>
{% endblock %}