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

{% block title %}Messages — Admin{% endblock %}
{% block page_title %}Messages de contact{% endblock %}
{% block page_subtitle %}{{ messages|length }} message{{ messages|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">Messages</span>
</nav>

{# ── Filters ── #}
{% if messages|length > 0 %}
<div class="adm-card" style="padding:14px 20px;margin-bottom:8px;position:relative;z-index:1">
    <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap">
        <div class="adm-filter-search">
            <svg viewBox="0 0 24 24" style="width:13px;height:13px;stroke:var(--muted);fill:none;stroke-width:1.8;flex-shrink:0"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
            <input type="text" placeholder="Rechercher…" id="msg-search" aria-label="Rechercher un message">
        </div>
        <select class="adm-filter-sel" id="msg-status-filter">
            <option value="">Tous</option>
            <option value="unread">Non lus</option>
            <option value="read">Lus</option>
        </select>
    </div>
</div>
{% endif %}

<div class="adm-card" style="padding:0;overflow:visible">
    {% if messages|length == 0 %}
        <div style="padding:40px;text-align:center;color:var(--muted);position:relative;z-index:1">
            <p>Aucun message reçu.</p>
        </div>
    {% else %}
        <div class="adm-tbl-wrap" style="margin-top:0">
        <table id="msg-table">
            <thead>
                <tr>
                    <th style="width:30px"></th>
                    <th>Expéditeur</th>
                    <th>Sujet</th>
                    <th>Date</th>
                    <th style="width:100px">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for msg in messages %}
                <tr class="adm-contact-row{% if not msg.isRead %} adm-contact-row--unread{% endif %}"
                    data-name="{{ msg.firstName|lower }} {{ msg.lastName|lower }}"
                    data-subject="{{ msg.subject|lower }}"
                    data-email="{{ msg.email|lower }}"
                    data-read="{{ msg.isRead ? '1' : '0' }}">
                    <td>
                        <span class="adm-contact-dot{% if not msg.isRead %} active{% endif %}" title="{{ msg.isRead ? 'Lu' : 'Non lu' }}"></span>
                    </td>
                    <td>
                        <div style="font-weight:{% if not msg.isRead %}600{% else %}400{% endif %};font-size:.85rem">{{ msg.firstName }} {{ msg.lastName }}</div>
                        <div style="font-size:.72rem;color:var(--muted);font-weight:300">{{ msg.email }}</div>
                    </td>
                    <td style="font-size:.85rem;{% if not msg.isRead %}font-weight:500{% endif %}">{{ msg.subject }}</td>
                    <td style="font-size:.78rem;color:var(--muted)">{{ msg.createdAt ? msg.createdAt|date('d/m/Y H:i') : '—' }}</td>
                    <td>
                        <div class="adm-contact-actions">
                            <a href="{{ path('app_admin_contact_show', {uuid: msg.uuid}) }}" class="adm-act-btn" title="Lire" aria-label="Lire">
                                <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>
                            {% if is_granted('ROLE_ADMIN') %}
                            <button type="button" class="adm-act-btn del"
                                    data-delete-id="{{ msg.uuid }}"
                                    data-delete-name="{{ msg.firstName }} {{ msg.lastName }} — {{ msg.subject }}"
                                    data-delete-url="{{ path('app_admin_contact_delete', {uuid: msg.uuid}) }}"
                                    data-delete-token="{{ csrf_token('delete-' ~ msg.uuid) }}"
                                    title="Supprimer" aria-label="Supprimer">
                                <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>
                            {% endif %}
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        </div>
        <div id="msg-no-results" style="display:none;padding:30px;text-align:center;color:var(--muted);font-size:.85rem;position:relative;z-index:1">
            Aucun résultat trouvé.
        </div>
    {% endif %}
</div>

{# ── Delete modal ── #}
{% if messages|length > 0 %}
<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>Confirmer la suppression</h3>
        <p>Supprimer le message de <strong id="adm-delete-name"></strong> ?</p>
        <div class="adm-modal-foot">
            <button class="adm-btn adm-btn-g" id="adm-delete-cancel">Annuler</button>
            <form id="adm-delete-form" method="post" style="display:inline">
                <input type="hidden" name="_token" id="adm-delete-token">
                <button type="submit" class="adm-btn adm-btn-red">Supprimer</button>
            </form>
        </div>
    </div>
</div>
{% endif %}

{% endblock %}

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