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

{% block title %}Gestion utilisateurs — Admin{% endblock %}
{% block page_title %}Gestion utilisateurs{% endblock %}
{% block page_subtitle %}{{ users|length }} utilisateur{{ users|length > 1 ? 's' : '' }} enregistré{{ users|length > 1 ? 's' : '' }}{% endblock %}

{% block admin_body %}

{# ── Breadcrumb ── #}
<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">Utilisateurs</span>
</nav>

{# ── Filters ── #}
<div class="adm-card adm-filters-card">
    <div class="adm-filters-row">
        <div class="adm-filter-search">
            <svg viewBox="0 0 24 24" stroke-width="1.8"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
            <input type="text" placeholder="Rechercher par nom, email…" id="adm-search-input" aria-label="Rechercher un utilisateur">
        </div>
        <select class="adm-filter-sel" id="adm-role-filter">
            <option value="">Tous les rôles</option>
            {% if is_granted('ROLE_SUPER_ADMIN') %}
            <option value="super_admin">Super Admin</option>
            {% endif %}
            <option value="admin">Admin</option>
            <option value="intern">Stagiaire</option>
            <option value="user">Utilisateur</option>
        </select>
        <select class="adm-filter-sel" id="adm-status-filter">
            <option value="">Tous les statuts</option>
            <option value="active">Actif</option>
            <option value="provisional">Provisoire</option>
            <option value="unverified">Non vérifié</option>
            <option value="banned">Banni</option>
        </select>
        <select class="adm-filter-sel" id="adm-provider-filter">
            <option value="">Tous les fournisseurs</option>
            <option value="email">Email</option>
            <option value="google">Google</option>
        </select>
        <button type="button" class="adm-btn adm-btn-g adm-btn-sm" id="adm-reset-filters" 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-count-label">{{ users|length }} utilisateur{{ users|length > 1 ? 's' : '' }}</span>
        <div style="display:flex;gap:4px">
            <button type="button" class="adm-sort-btn active" data-sort="recent">Plus récents</button>
            <button type="button" class="adm-sort-btn" data-sort="name">Nom A→Z</button>
            <button type="button" class="adm-sort-btn" data-sort="email">Email</button>
            <button type="button" class="adm-sort-btn" data-sort="role">Rôle</button>
        </div>
        {% if is_granted('ROLE_ADMIN') %}
        <div style="display:flex;gap:6px;margin-left:auto">
            {% if users|length > 0 %}
            {% if is_granted('ROLE_SUPER_ADMIN') %}
            <a href="{{ path('app_admin_user_export_sql') }}" class="adm-btn adm-btn-g adm-btn-sm">
                <svg viewBox="0 0 24 24" style="margin-right:4px"><path d="M4 7V4a2 2 0 0 1 2-2h8.5L20 7.5V20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-3"/><polyline points="14 2 14 8 20 8"/><path d="M4 15h9"/><polyline points="10 12 7 15 10 18"/></svg>
                Exporter SQL
            </a>
            {% endif %}
            <a href="{{ path('app_admin_user_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>
                Exporter CSV
            </a>
            {% endif %}
            <a href="{{ path('app_admin_user_new') }}" class="adm-btn adm-btn-p adm-btn-sm">
                <svg viewBox="0 0 24 24" style="margin-right:4px"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                Nouvel utilisateur
            </a>
        </div>
        {% endif %}
    </div>
</div>

{# ── Table ── #}
<div class="adm-card adm-crud-card">
    <div class="adm-crud-header">
        <span class="adm-sh-title">Liste des utilisateurs</span>
    </div>
    <div class="adm-crud-wrap">
        <table id="adm-users-table">
            <thead>
                <tr>
                    <th>Utilisateur</th>
                    <th>Email</th>
                    <th>Fournisseur</th>
                    <th>Rôle</th>
                    <th>Statut</th>
                    <th>Inscrit le</th>
                    <th style="width:130px;text-align:right">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for user in users %}
                <tr data-name="{{ user.firstName|lower }} {{ user.lastName|lower }}"
                    data-email="{{ user.email|lower }}"
                    data-role="{{ 'ROLE_SUPER_ADMIN' in user.roles ? 'super_admin' : ('ROLE_ADMIN' in user.roles ? 'admin' : ('ROLE_INTERN' in user.roles ? 'intern' : 'user')) }}"
                    data-status="{{ user.isBanned ? 'banned' : (user.mustChangePassword ? 'provisional' : (user.isVerified ? 'active' : 'unverified')) }}"
                    data-provider="{{ user.provider ?? 'email' }}"
                    data-date="{{ user.createdAt ? user.createdAt|date('U') : '0' }}"
                    data-role-order="{{ 'ROLE_SUPER_ADMIN' in user.roles ? '1' : ('ROLE_ADMIN' in user.roles ? '2' : ('ROLE_INTERN' in user.roles ? '3' : '4')) }}">
                    <td>
                        <div class="adm-u-cell">
                            <div class="adm-u-av" style="background:linear-gradient(135deg,var(--accent),var(--accent2)){% if user.isBanned %};opacity:.4{% endif %}">
                                {{ user.firstName|first|upper }}{{ user.lastName|first|upper }}
                            </div>
                            <div>
                                <div class="adm-u-name">{{ user.firstName }} {{ user.lastName }}</div>
                            </div>
                        </div>
                    </td>
                    <td><span class="adm-u-email" style="font-size:.8rem">{{ user.email }}</span></td>
                    <td>
                        {% if user.provider == 'google' %}
                            <span class="adm-pill adm-pill-admin">Google</span>
                        {% else %}
                            <span class="adm-pill adm-pill-user">Email</span>
                        {% endif %}
                    </td>
                    <td>{% include 'admin/user/_role.html.twig' with {roles: user.roles} %}</td>
                    <td>
                        {% if user.isBanned %}
                            <span class="adm-pill adm-pill-banned">Banni</span>
                        {% elseif user.mustChangePassword %}
                            <span class="adm-pill adm-pill-paused">Provisoire</span>
                        {% elseif user.isVerified %}
                            <span class="adm-pill adm-pill-active">Actif</span>
                        {% else %}
                            <span class="adm-pill adm-pill-trial">Non vérifié</span>
                        {% endif %}
                    </td>
                    <td style="font-size:.78rem;color:var(--muted)">{{ user.createdAt ? user.createdAt|date('d/m/Y') : '—' }}</td>
                    <td>
                        <div class="adm-user-actions">
                            {# Fiche #}
                            <a href="{{ path('app_admin_user_show', {uuid: user.uuid}) }}" class="adm-act-btn" title="Voir la fiche" aria-label="Voir la fiche">
                                <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') %}
                            {# Edit #}
                            <a href="{{ path('app_admin_user_edit', {uuid: user.uuid}) }}" class="adm-act-btn" title="Modifier" aria-label="Modifier">
                                <svg viewBox="0 0 24 24"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                            </a>
                            {% if user != app.user %}
                            {# Ban/Unban #}
                            <button type="button" class="adm-act-btn ban" title="{{ user.isBanned ? 'Débannir' : 'Bannir' }}" aria-label="{{ user.isBanned ? 'Débannir' : 'Bannir' }}"
                                    data-ban-name="{{ user.firstName }} {{ user.lastName }}"
                                    data-ban-url="{{ path('app_admin_user_ban', {uuid: user.uuid}) }}"
                                    data-ban-token="{{ csrf_token('ban-' ~ user.uuid) }}"
                                    data-ban-action="{{ user.isBanned ? 'unban' : 'ban' }}">
                                {% if user.isBanned %}
                                    <svg viewBox="0 0 24 24"><path d="M12 22c5.52 0 10-4.48 10-10S17.52 2 12 2 2 6.48 2 12s4.48 10 10 10z"/><path d="M8 12h8"/></svg>
                                {% else %}
                                    <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>
                                {% endif %}
                            </button>
                            {# Delete #}
                            <button type="button" class="adm-act-btn del" title="Supprimer" aria-label="Supprimer"
                                    data-delete-id="{{ user.uuid }}"
                                    data-delete-name="{{ user.firstName }} {{ user.lastName }}"
                                    data-delete-url="{{ path('app_admin_user_delete', {uuid: user.uuid}) }}"
                                    data-delete-token="{{ csrf_token('delete-' ~ user.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>
                            {% endif %}
                            {% endif %}
                        </div>
                    </td>
                </tr>
                {% else %}
                <tr><td colspan="7" style="text-align:center;padding:32px;color:var(--muted)">Aucun utilisateur.</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>Confirmer la suppression</h3>
        <p>Vous êtes sur le point de supprimer <strong id="adm-delete-name"></strong>. Cette action est irréversible.</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>
            Toutes les données associées seront définitivement supprimées.
        </div>
        <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">
                    <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>
                    Supprimer
                </button>
            </form>
        </div>
    </div>
</div>

{# ── Ban modal ── #}
<div class="adm-modal-overlay" id="adm-ban-overlay">
    <div class="adm-modal" onclick="event.stopPropagation()">
        <div class="adm-modal-icon" id="adm-ban-icon">
            <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>
        </div>
        <h3 id="adm-ban-title">Confirmer le bannissement</h3>
        <p id="adm-ban-text">Vous êtes sur le point de bannir <strong id="adm-ban-name"></strong>. L'utilisateur ne pourra plus se connecter.</p>
        <div class="adm-modal-warn" id="adm-ban-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-ban-warn-text">L'utilisateur sera immédiatement déconnecté et bloqué.</span>
        </div>
        <div class="adm-modal-foot">
            <button class="adm-btn adm-btn-g" id="adm-ban-cancel">Annuler</button>
            <form id="adm-ban-form" method="post" style="display:inline">
                <input type="hidden" name="_token" id="adm-ban-token">
                <button type="submit" class="adm-btn adm-btn-red" id="adm-ban-submit">
                    <svg viewBox="0 0 24 24" style="width:14px;height:14px;margin-right:4px"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>
                    <span id="adm-ban-submit-label">Bannir</span>
                </button>
            </form>
        </div>
    </div>
</div>

{% endblock %}

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