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

{% block title %}Logs d'accès admin — NUM-ECARD{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        /* ── Centrage & largeur max ── */
        .logs-wrapper {
            max-width: 1400px;
            margin: 0 auto;
            padding: 1.5rem 1rem;
        }

        /* ── Tableau : colonnes ne cassent pas par défaut ── */
        .logs-table th,
        .logs-table td {
            vertical-align: middle;
            white-space: nowrap;
        }

        /* Seule la colonne Chemin peut s'étirer */
        .logs-table .col-path {
            white-space: normal;
            word-break: break-all;
            min-width: 160px;
        }

        /* ── Tablet 576–991px : scroll horizontal propre ── */
        @media (min-width: 576px) and (max-width: 991.98px) {
            .logs-table-wrapper {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            .logs-table { min-width: 860px; }
        }

        /* ── Mobile ≤ 575px : une carte par ligne ── */
        @media (max-width: 575.98px) {
            .logs-table-wrapper { overflow-x: auto; }
            .logs-table { min-width: 0; }

            .logs-table thead { display: none; }

            .logs-table tbody tr {
                display: block;
                border: 1px solid #dee2e6;
                border-radius: 8px;
                margin-bottom: .75rem;
                padding: .5rem .75rem;
                background: #fff;
                box-shadow: 0 1px 3px rgba(0,0,0,.07);
            }

            .logs-table tbody td {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                gap: .5rem;
                padding: .3rem 0;
                border: none;
                border-bottom: 1px solid #f0f0f0;
                white-space: normal;
                word-break: break-word;
                font-size: .82rem;
            }

            .logs-table tbody td:last-child { border-bottom: none; }

            .logs-table tbody td::before {
                content: attr(data-label);
                font-weight: 600;
                color: #495057;
                flex-shrink: 0;
                width: 88px;
                font-size: .78rem;
            }
        }

        /* ── Pagination centrée en mobile ── */
        @media (max-width: 767.98px) {
            .pagination-bar {
                flex-direction: column;
                align-items: center;
                gap: .5rem;
            }
        }
    </style>
{% endblock %}

{% block content %}
<div class="logs-wrapper">

    {# ── HEADER ─────────────────────────────────────────────────────────── #}
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-2 mb-4">
        <div>
            <h1 class="h3 mb-1">🔒 Logs d'accès administrateur</h1>
            <small class="text-muted">
                RGPD Art.&nbsp;5(1)(b) &amp; 5(2) — Référent RGPD uniquement —
                Purge le {{ purge_date|date('d/m/Y') }}
            </small>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            <span class="badge bg-secondary fs-6">{{ total }} entrée{{ total > 1 ? 's' : '' }}</span>
            <span class="badge bg-primary fs-6">{{ total_today }} aujourd'hui</span>
        </div>
    </div>

    {# ── FILTRES ─────────────────────────────────────────────────────────── #}
    <div class="card shadow-sm mb-4">
        <div class="card-body">
            <form method="get" class="row g-2 align-items-end">
                <div class="col-12 col-sm-6 col-md-3">
                    <label class="form-label small fw-semibold mb-1">Admin</label>
                    <select name="admin" class="form-select form-select-sm">
                        <option value="">— Tous —</option>
                        {% for email in admins %}
                            <option value="{{ email }}" {{ filters.admin == email ? 'selected' : '' }}>
                                {{ email }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-12 col-sm-6 col-md-3">
                    <label class="form-label small fw-semibold mb-1">Action</label>
                    <select name="action" class="form-select form-select-sm">
                        <option value="">— Toutes —</option>
                        {% for action in actions %}
                            <option value="{{ action }}" {{ filters.action == action ? 'selected' : '' }}>
                                {{ action }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-6 col-sm-4 col-md-2">
                    <label class="form-label small fw-semibold mb-1">Du</label>
                    <input type="date" name="date_from" class="form-control form-control-sm"
                           value="{{ filters.date_from }}">
                </div>
                <div class="col-6 col-sm-4 col-md-2">
                    <label class="form-label small fw-semibold mb-1">Au</label>
                    <input type="date" name="date_to" class="form-control form-control-sm"
                           value="{{ filters.date_to }}">
                </div>
                <div class="col-12 col-sm-4 col-md-2 d-flex gap-2">
                    <button type="submit" class="btn btn-primary btn-sm flex-grow-1">
                        🔍 Filtrer
                    </button>
                    <a href="{{ path('app_admin_logs') }}"
                       class="btn btn-outline-secondary btn-sm px-2" title="Réinitialiser">✖</a>
                </div>
            </form>
        </div>
    </div>

    {# ── TABLE ───────────────────────────────────────────────────────────── #}
    <div class="card shadow-sm">
        <div class="card-body p-0">

            {% if logs is empty %}
                <div class="text-center text-muted py-5">
                    <div class="fs-1">📋</div>
                    <p class="mt-2 mb-0">Aucun log pour ces critères.</p>
                </div>

            {% else %}
                <div class="logs-table-wrapper">
                    <table class="table table-sm table-hover table-striped mb-0 logs-table">
                        <thead class="table-dark">
                            <tr>
                                <th style="min-width:140px">Date / Heure</th>
                                <th style="min-width:170px">Admin</th>
                                <th style="min-width:165px">Action</th>
                                <th style="min-width:130px">Ressource</th>
                                <th class="col-path" style="min-width:180px">Chemin</th>
                                <th style="min-width:130px">IP (tronquée)</th>
                                <th style="min-width:70px" class="text-center">Ctx</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for log in logs %}
                                <tr>
                                    <td data-label="Date" class="small text-muted">
                                        {{ log.createdAt|date('d/m/Y') }}<br>
                                        <span class="text-secondary">{{ log.createdAt|date('H:i:s') }}</span>
                                    </td>
                                    <td data-label="Admin" class="small">
                                        {{ log.adminEmail }}
                                    </td>
                                    <td data-label="Action">
                                        <span class="badge {{ _self.actionBadge(log.action) }}">
                                            {{ log.action }}
                                        </span>
                                    </td>
                                    <td data-label="Ressource" class="small text-muted">
                                        {{ log.resource ?? '—' }}
                                    </td>
                                    <td data-label="Chemin" class="small font-monospace text-muted col-path">
                                        <span class="badge bg-light text-dark border me-1">{{ log.method }}</span>
                                        {{ log.path|length > 55 ? log.path|slice(0, 55) ~ '…' : log.path }}
                                    </td>
                                    <td data-label="IP" class="small font-monospace text-muted">
                                        {{ log.ipTronquee }}
                                    </td>
                                    <td data-label="Ctx" class="text-center">
                                        {% if log.context %}
                                            <button class="btn btn-outline-secondary btn-sm py-0 px-1"
                                                    data-bs-toggle="tooltip"
                                                    data-bs-placement="left"
                                                    title="{{ log.context|json_encode }}">
                                                <small>{…}</small>
                                            </button>
                                        {% else %}
                                            <span class="text-muted">—</span>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                {# ── PAGINATION ──────────────────────────────────────────── #}
                {% if total_pages > 1 %}
                    <div class="d-flex flex-wrap justify-content-between align-items-center
                                px-3 py-2 border-top gap-2 pagination-bar">
                        <small class="text-muted">
                            Page <strong>{{ current_page }}</strong> / {{ total_pages }}
                            &nbsp;·&nbsp; {{ total }} entrée{{ total > 1 ? 's' : '' }}
                        </small>
                        <nav aria-label="Pagination logs">
                            <ul class="pagination pagination-sm mb-0">
                                <li class="page-item {{ current_page == 1 ? 'disabled' : '' }}">
                                    <a class="page-link"
                                       href="{{ path('app_admin_logs', filters|merge({'page': 1})) }}"
                                       title="Première page">«</a>
                                </li>
                                <li class="page-item {{ current_page == 1 ? 'disabled' : '' }}">
                                    <a class="page-link"
                                       href="{{ path('app_admin_logs', filters|merge({'page': current_page - 1})) }}">‹</a>
                                </li>
                                {% for p in max(1, current_page - 2)..min(total_pages, current_page + 2) %}
                                    <li class="page-item {{ p == current_page ? 'active' : '' }}">
                                        <a class="page-link"
                                           href="{{ path('app_admin_logs', filters|merge({'page': p})) }}">{{ p }}</a>
                                    </li>
                                {% endfor %}
                                <li class="page-item {{ current_page == total_pages ? 'disabled' : '' }}">
                                    <a class="page-link"
                                       href="{{ path('app_admin_logs', filters|merge({'page': current_page + 1})) }}">›</a>
                                </li>
                                <li class="page-item {{ current_page == total_pages ? 'disabled' : '' }}">
                                    <a class="page-link"
                                       href="{{ path('app_admin_logs', filters|merge({'page': total_pages})) }}"
                                       title="Dernière page">»</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                {% endif %}

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

    {# ── NOTE RGPD ───────────────────────────────────────────────────────── #}
    <div class="alert alert-light border mt-4 small text-muted">
        <strong>🔒 RGPD — Notice :</strong>
        Logs collectés sur le fondement des Art.&nbsp;5(1)(b) et 5(2) RGPD.
        Usage autorisé : sécurité et audit interne exclusivement.
        Toute consultation à des fins commerciales ou disciplinaires est interdite.
        Purge automatique le {{ purge_date|date('d/m/Y') }}.
    </div>

</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
                new bootstrap.Tooltip(el, { html: false });
            });
        });
    </script>
{% endblock %}

{# ── MACRO : couleur du badge selon l'action ─────────────────────────── #}
{% macro actionBadge(action) %}
    {%- if action starts with 'delete' or action starts with 'revoke' -%}
        bg-danger
    {%- elseif action starts with 'edit' or action starts with 'update' or action starts with 'adjust' -%}
        bg-warning text-dark
    {%- elseif action starts with 'generate' or action starts with 'send' or action starts with 'push' -%}
        bg-info text-dark
    {%- elseif action starts with 'activate' or action starts with 'grant' or action starts with 'reactivate' -%}
        bg-success
    {%- elseif action starts with 'deactivate' or action starts with 'suspend' -%}
        bg-secondary
    {%- else -%}
        bg-primary
    {%- endif -%}
{% endmacro %}