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

{% block title %}Erreurs — Admin{% endblock %}
{% block page_title %}Journal des erreurs{% endblock %}
{% block page_subtitle %}{{ unresolvedCount }} non résolu{{ unresolvedCount > 1 ? 'es' : '' }}{% 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 des erreurs</span>
</nav>

{# ── Filters + Bulk ── #}
<div class="adm-card adm-filters-card">
    <div class="adm-filters-row">
        <select class="adm-filter-sel" id="adm-level-filter">
            <option value="">Tous les niveaux</option>
            <option value="error">Error</option>
            <option value="critical">Critical</option>
            <option value="alert">Alert</option>
            <option value="emergency">Emergency</option>
        </select>
        <select class="adm-filter-sel" id="adm-status-filter">
            <option value="">Tous les statuts</option>
            <option value="unresolved">Non résolues</option>
            <option value="resolved">Résolues</option>
        </select>
        <button type="button" class="adm-btn adm-btn-g adm-btn-sm" id="adm-log-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>
        <span id="adm-bulk-bar" style="display:none;align-items:center;gap:8px;margin-left:auto"
              data-delete-url="{{ path('app_admin_error_log_batch_delete') }}"
              data-delete-token="{{ csrf_token('batch-delete-logs') }}"
              data-resolve-url="{{ path('app_admin_error_log_batch_resolve') }}"
              data-resolve-token="{{ csrf_token('batch-resolve-logs') }}">
            <span id="adm-bulk-count" style="font-size:.82rem;font-weight:500;color:var(--text)"></span>
            <button type="button" class="adm-btn adm-btn-sm" id="adm-bulk-resolve" style="background:rgba(94,207,174,.1);border:1.5px solid rgba(94,207,174,.25);color:var(--green)">
                <svg viewBox="0 0 24 24" style="width:13px;height:13px;margin-right:4px"><polyline points="20 6 9 17 4 12"/></svg>
                Résolu
            </button>
            <button type="button" class="adm-btn adm-btn-red adm-btn-sm" id="adm-bulk-delete">
                <svg viewBox="0 0 24 24" style="width:13px;height:13px;margin-right:4px"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
                Supprimer
            </button>
            <button type="button" class="adm-btn adm-btn-g adm-btn-sm" id="adm-bulk-cancel">Désélectionner</button>
        </span>
    </div>
    <div class="adm-filters-meta">
        <span id="adm-log-count"></span>
        {% if logs|length > 0 %}
        <div style="display:flex;gap:6px;margin-left:auto">
            <a href="{{ path('app_admin_error_log_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:36px"><input type="checkbox" id="adm-check-all" class="adm-check" aria-label="Tout sélectionner"></th>
                    <th style="width:40px"></th>
                    <th>Date</th>
                    <th>Niveau</th>
                    <th>Message</th>
                    <th>URL</th>
                    <th>Utilisateur</th>
                    <th style="width:100px">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for log in logs %}
                <tr id="log-row-{{ log.uuid }}"
                    data-level="{{ log.level }}"
                    data-status="{{ log.resolved ? 'resolved' : 'unresolved' }}"
                    style="{% if not log.resolved %}background:rgba(255,107,138,.03){% endif %}"
                >
                    <td><input type="checkbox" class="adm-check log-check" value="{{ log.uuid }}" aria-label="Sélectionner"></td>
                    <td>
                        <span style="width:8px;height:8px;border-radius:50%;display:inline-block;{% if not log.resolved %}background:var(--red);box-shadow:0 0 6px rgba(255,107,138,.4){% else %}background:rgba(180,190,220,.3){% endif %}"></span>
                    </td>
                    <td style="font-size:.78rem;color:var(--muted);white-space:nowrap">{{ log.occurredAt|date('d/m/Y H:i:s') }}</td>
                    <td>
                        {% if log.level == 'emergency' %}
                            <span class="adm-pill adm-pill-banned">{{ log.level|upper }}</span>
                        {% elseif log.level == 'alert' %}
                            <span class="adm-pill adm-pill-super-admin">{{ log.level|upper }}</span>
                        {% elseif log.level == 'critical' %}
                            <span class="adm-pill adm-pill-admin">{{ log.level|upper }}</span>
                        {% else %}
                            <span class="adm-pill adm-pill-paused">{{ log.level|upper }}</span>
                        {% endif %}
                    </td>
                    <td style="font-size:.82rem;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="{{ log.message }}">{{ log.message|length > 100 ? log.message[:100] ~ '…' : log.message }}</td>
                    <td style="font-size:.72rem;color:var(--muted);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ log.url ?? '—' }}</td>
                    <td style="font-size:.78rem;color:var(--muted)">{{ log.userEmail ?? '—' }}</td>
                    <td>
                        <div style="display:flex;gap:5px">
                            <a href="{{ path('app_admin_error_log_show', {uuid: log.uuid}) }}" class="adm-act-btn" title="Détails" aria-label="Détails">
                                <svg viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                            </a>
                            <button type="button" class="adm-act-btn log-resolve-btn" title="{{ log.resolved ? 'Marquer non résolu' : 'Marquer résolu' }}" aria-label="{{ log.resolved ? 'Marquer non résolu' : 'Marquer résolu' }}"
                                    data-id="{{ log.uuid }}"
                                    data-url="{{ path('app_admin_error_log_resolve', {uuid: log.uuid}) }}"
                                    data-token="{{ csrf_token('resolve-' ~ log.uuid) }}">
                                {% if log.resolved %}
                                    <svg viewBox="0 0 24 24" style="stroke:var(--green)"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                                {% else %}
                                    <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
                                {% endif %}
                            </button>
                            <button type="button" class="adm-act-btn del log-delete-btn" title="Supprimer"
                                    data-id="{{ log.uuid }}"
                                    data-url="{{ path('app_admin_error_log_delete', {uuid: log.uuid}) }}"
                                    data-token="{{ csrf_token('delete-' ~ log.uuid) }}">
                                <svg viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>
                            </button>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="adm-pagination" id="adm-pagination"></div>
</div>
{# ── Delete modal ── #}
<div class="adm-modal-overlay" id="adm-delete-overlay">
    <div class="adm-modal" onclick="event.stopPropagation()">
        <div class="adm-modal-icon">
            <svg viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>
        </div>
        <h3 id="adm-delete-title">Confirmer la suppression</h3>
        <p id="adm-delete-text">Vous êtes sur le point de supprimer cette erreur.</p>
        <div class="adm-modal-warn">
            <svg viewBox="0 0 24 24"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
            <span id="adm-delete-warn">Cette action est irréversible.</span>
        </div>
        <div class="adm-modal-foot">
            <button class="adm-btn adm-btn-g" id="adm-delete-cancel">Annuler</button>
            <button type="button" class="adm-btn adm-btn-red" id="adm-delete-confirm">
                <svg viewBox="0 0 24 24" style="width:14px;height:14px;margin-right:4px"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
                <span id="adm-delete-confirm-label">Supprimer</span>
            </button>
        </div>
    </div>
</div>

{% endblock %}

{% block javascripts %}
{{ parent() }}
<script src="{{ asset('js/admin-error-log.js') }}"></script>
{% endblock %}