{# templates/admin/audit/index.html.twig #}
{% extends 'admin/base_admin.html.twig' %}

{% block title %}Journal des accès backoffice — RGPD{% endblock %}

{% block content %}
<div class="container py-4">

    {# ── En-tête ── #}
    <div class="text-center mb-4">
        <h1 class="h3 mb-1">
            <i class="bi bi-shield-lock me-2 text-danger"></i>
            Journal des accès backoffice
        </h1>
        <p class="text-muted small mb-2">
            RGPD — Art. 32 &nbsp;|&nbsp; Accès réservé au Référent RGPD &nbsp;|&nbsp; Conservation : 6 mois glissants
        </p>
        <span class="badge bg-danger fs-6">{{ total }} entrée{{ total > 1 ? 's' : '' }}</span>
    </div>

    {# ── Filtres ── #}
    <form method="get" class="card card-body shadow-sm mb-4">
        <div class="row g-3 align-items-end justify-content-center">
            <div class="col-12 col-sm-6 col-md-3">
                <label class="form-label fw-semibold small">Du</label>
                <input type="date" name="from" value="{{ from }}" class="form-control">
            </div>
            <div class="col-12 col-sm-6 col-md-3">
                <label class="form-label fw-semibold small">Au</label>
                <input type="date" name="to" value="{{ to }}" class="form-control">
            </div>
            <div class="col-12 col-md-4">
                <label class="form-label fw-semibold small">Recherche (email, action, route…)</label>
                <input type="text" name="search" value="{{ search }}"
                       placeholder="ex : edit_user, /admin/cards, patrice@…"
                       class="form-control">
            </div>
            <div class="col-12 col-md-2 d-flex gap-2">
                <button type="submit" class="btn btn-danger flex-grow-1">
                    <i class="bi bi-search me-1"></i> Filtrer
                </button>
                <a href="{{ path('admin_audit_index') }}" class="btn btn-outline-secondary">
                    <i class="bi bi-x-lg"></i>
                </a>
            </div>
        </div>
    </form>

    {# ── Tableau ── #}
    {% if logs is empty %}
        <div class="alert alert-info text-center">
            <i class="bi bi-info-circle me-2"></i>
            Aucun log pour cette période.
        </div>
    {% else %}

    <div class="card shadow-sm">
        <div class="table-responsive">
            <table class="table table-hover table-sm align-middle mb-0">
                <thead class="table-dark text-center">
                    <tr>
                        <th class="ps-3 text-start">Date / Heure</th>
                        <th class="text-start">Administrateur</th>
                        <th>IP</th>
                        <th>Méthode</th>
                        <th class="text-start">Route</th>
                        <th>Action</th>
                        <th>Ressource</th>
                        <th>Contexte</th>
                    </tr>
                </thead>
                <tbody>
                {% for log in logs %}
                    <tr>
                        {# Date #}
                        <td class="ps-3 text-nowrap small text-muted">
                            {{ log.createdAt|date('d/m/Y') }}<br>
                            <strong class="text-dark">{{ log.createdAt|date('H:i:s') }}</strong>
                        </td>

                        {# Admin #}
                        <td class="small">
                            <span class="d-inline-block text-truncate" style="max-width:160px"
                                  title="{{ log.adminEmail }}">
                                {{ log.adminEmail }}
                            </span>
                            <br><span class="text-muted">#{{ log.adminId }}</span>
                        </td>

                        {# IP #}
                        <td class="small text-muted text-center text-nowrap">
                            {{ log.ipTronquee }}
                        </td>

                        {# Méthode #}
                        <td class="text-center">
                            {% set methodColor = {
                                'GET':    'secondary',
                                'POST':   'primary',
                                'PUT':    'warning',
                                'PATCH':  'warning',
                                'DELETE': 'danger'
                            } %}
                            <span class="badge bg-{{ methodColor[log.method] ?? 'secondary' }}">
                                {{ log.method }}
                            </span>
                        </td>

                        {# Route #}
                        <td class="small">
                            <code class="d-inline-block text-truncate" style="max-width:200px"
                                  title="{{ log.path }}">
                                {{ log.path }}
                            </code>
                        </td>

                        {# Action #}
                        <td class="text-center">
                            <span class="badge bg-light text-dark border">{{ log.action }}</span>
                        </td>

                        {# Ressource #}
                        <td class="small text-muted text-center">
                            {{ log.resource ?? '—' }}
                        </td>

                        {# Contexte JSON #}
                        <td class="text-center">
                            {% if log.context %}
                                <button type="button"
                                        class="btn btn-sm btn-outline-secondary py-0 px-2"
                                        data-bs-toggle="popover"
                                        data-bs-placement="left"
                                        data-bs-content="{{ log.context|json_encode }}"
                                        data-bs-trigger="click"
                                        title="Contexte JSON">
                                    <i class="bi bi-braces"></i>
                                </button>
                            {% else %}
                                <span class="text-muted">—</span>
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>{# /table-responsive #}
    </div>{# /card #}

    {# ── Pagination ── #}
    {% if pages > 1 %}
    <nav class="mt-4" aria-label="Pagination logs">
        <ul class="pagination pagination-sm justify-content-center flex-wrap">

            {# Précédent #}
            <li class="page-item {{ page == 1 ? 'disabled' : '' }}">
                <a class="page-link" href="{{ path('admin_audit_index', {
                    from: from, to: to, search: search, page: page - 1
                }) }}">‹</a>
            </li>

            {% for p in 1..pages %}
                <li class="page-item {{ p == page ? 'active' : '' }}">
                    <a class="page-link" href="{{ path('admin_audit_index', {
                        from: from, to: to, search: search, page: p
                    }) }}">{{ p }}</a>
                </li>
            {% endfor %}

            {# Suivant #}
            <li class="page-item {{ page == pages ? 'disabled' : '' }}">
                <a class="page-link" href="{{ path('admin_audit_index', {
                    from: from, to: to, search: search, page: page + 1
                }) }}">›</a>
            </li>

        </ul>
    </nav>
    {% endif %}

    {% endif %}{# end if logs #}

</div>{# /container #}
{% endblock %}

{# ── Popovers Bootstrap ── #}
{% block javascripts %}
    {{ parent() }}
    <script>
        document.querySelectorAll('[data-bs-toggle="popover"]').forEach(function (el) {
            new bootstrap.Popover(el);
        });
    </script>
{% endblock %}