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

{% block title %}Utilisateurs{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">👥 Utilisateurs</h1>
    <p class="page-subtitle">{{ usersWithStats|length }} compte(s) enregistré(s)</p>
</div>

{# ── BARRE DE RECHERCHE ──────────────────────────────────────────── #}
<div class="card" style="padding: 16px 20px;">
    <form method="get" action="{{ path('app_admin_users') }}" style="display: flex; gap: 12px; align-items: center;">
        <input type="text" name="search" value="{{ search ?? '' }}"
               placeholder="Rechercher par nom, email, entreprise…"
               style="flex: 1; padding: 10px 14px; border: 1.5px solid #e5e5ea; border-radius: 10px; font-size: 14px; font-family: inherit;">
        <button type="submit" class="btn btn-primary btn-sm">🔍 Rechercher</button>
        {% if search is defined and search %}
            <a href="{{ path('app_admin_users') }}" class="btn btn-secondary btn-sm">✕ Effacer</a>
        {% endif %}
    </form>
</div>

{# ── TABLEAU ─────────────────────────────────────────────────────── #}
<div class="card mt-3">
    {% if usersWithStats is empty %}
        <div class="empty-state">
            <div class="empty-state-icon">👥</div>
            <div class="empty-state-title">Aucun utilisateur trouvé</div>
            {% if search is defined and search %}
                <p>Aucun résultat pour « {{ search }} ».</p>
            {% endif %}
        </div>
    {% else %}
        <div class="table-container">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Utilisateur</th>
                        <th>Email</th>
                        <th>Inscription</th>
                        <th>Dernière connexion</th>
                        <th class="text-center">Commandes</th>
                        <th class="text-right">Total dépensé</th>
                        <th class="text-center">Rôle</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in usersWithStats %}
                        {% set u = row.user %}
                        <tr>
                            <td>
                                <div style="display: flex; align-items: center; gap: 10px;">
                                    <div class="user-avatar" style="width: 34px; height: 34px; font-size: 13px; flex-shrink: 0;">
                                        {{ u.initiales }}
                                    </div>
                                    <div>
                                        <div style="font-weight: 600; font-size: 14px;">
                                            {{ u.fullName ?: '—' }}
                                        </div>
                                        {% if u.entreprise %}
                                            <div style="font-size: 12px; color: #86868b;">{{ u.entreprise }}</div>
                                        {% endif %}
                                    </div>
                                </div>
                            </td>
                            <td>
                                <a href="mailto:{{ u.email }}" class="link" style="font-size: 13px;">
                                    {{ u.email }}
                                </a>
                                {% if not u.isVerified %}
                                    <span style="font-size: 11px; color: #e67700; display: block;">⚠️ Non vérifié</span>
                                {% endif %}
                            </td>
                            <td class="text-muted">
                                <span class="local-date" data-utc="{{ u.createdAt|date('Y-m-d\\TH:i:s', 'UTC') }}Z">
                                    {{ u.createdAt|date('d/m/Y') }}
                                </span>
                            </td>
                            <td class="text-muted">
                                {% if u.lastLoginAt %}
                                    <span class="local-datetime" data-utc="{{ u.lastLoginAt|date('Y-m-d\\TH:i:s', 'UTC') }}Z">
                                        {{ u.lastLoginAt|date('d/m/Y H:i') }}
                                    </span>
                                {% else %}
                                    <span style="color: #c7c7cc;">Jamais</span>
                                {% endif %}
                            </td>
                            <td class="text-center">
                                <strong>{{ row.commandes_count }}</strong>
                            </td>
                            <td class="text-right">
                                <strong style="color: #1d1d1f;">
                                    {{ row.total_spent|number_format(2, ',', ' ') }} €
                                </strong>
                            </td>
                            <td class="text-center">
                                {% if 'ROLE_ADMIN' in u.roles %}
                                    <span class="admin-badge">Admin</span>
                                {% else %}
                                    <span class="badge badge-paid">Client</span>
                                {% endif %}
                            </td>
                            <td class="text-right">
                                <a href="{{ path('app_admin_user_show', {id: u.id}) }}"
                                   class="btn btn-secondary btn-sm">
                                    Voir →
                                </a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}
</div>
{% endblock %}