@extends('admin.layout')

@section('title', 'Gestion des utilisateurs')

@section('content')
<style>
    .users-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
    .users-header .header-left { display: flex; align-items: flex-start; gap: 0.5rem; }
    .users-header .back-link { color: #6b7280; text-decoration: none; font-size: 0.9rem; margin-top: 0.15rem; display: inline-flex; align-items: center; }
    .users-header .back-link:hover { color: #1a1a1a; }
    .users-header h1 { font-size: 1.5rem; font-weight: 700; color: #1a1a1a; margin: 0 0 0.25rem 0; }
    .users-header .subtitle { font-size: 0.9rem; color: #6b7280; margin: 0 0 1rem 0; }
    .users-header .actions { display: flex; gap: 0.75rem; }
    .btn { display: inline-flex; align-items: center; gap: 8px; padding: 0.5rem 1rem; border-radius: 8px; font-size: 0.9rem; font-weight: 500; text-decoration: none; border: none; cursor: pointer; }
    .btn-outline { background: #f3f4f6; border: 1px solid #e5e7eb; color: #374151; }
    .btn-outline:hover { background: #e5e7eb; }
    .btn-primary { background: #DC143C; color: #fff; }
    .btn-primary:hover { background: #d35400; }
    .toolbar { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.25rem; }
    .toolbar .search-wrap { flex: 1; min-width: 220px; position: relative; }
    .toolbar .search-wrap .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 0.95rem; }
    .toolbar .search-wrap input { width: 100%; padding: 0.6rem 1rem 0.6rem 40px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 0.9rem; }
    .toolbar .search-wrap input:focus { outline: none; border-color: #DC143C; }
    .toolbar .filters { display: flex; gap: 0.75rem; align-items: center; }
    .toolbar select { padding: 0.6rem 2rem 0.6rem 0.75rem; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 0.9rem; background: #fff; color: #374151; }
    .toolbar .filters .filter-label { font-size: 0.85rem; color: #6b7280; }
    .users-table-wrap { background: #fff; border-radius: 12px; border: 1px solid #e5e7eb; overflow: hidden; }
    .users-table { width: 100%; border-collapse: collapse; }
    .users-table th { text-align: left; padding: 0.85rem 1rem; font-size: 0.7rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; background: #f9fafb; border-bottom: 1px solid #eee; }
    .users-table td { padding: 0.85rem 1rem; border-bottom: 1px solid #f3f4f6; font-size: 0.9rem; }
    .users-table tr:last-child td { border-bottom: none; }
    .users-table .user-cell { display: flex; align-items: center; gap: 12px; }
    .users-table .user-avatar { width: 40px; height: 40px; border-radius: 50%; background: #e5e7eb; color: #6b7280; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.95rem; flex-shrink: 0; }
    .users-table .user-info .user-name { font-weight: 600; color: #1a1a1a; }
    .users-table .user-info .user-email { font-size: 0.8rem; color: #6b7280; }
    .tag { display: inline-block; padding: 0.25rem 0.6rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; }
    .tag-role-user { background: #f3f4f6; color: #374151; }
    .tag-role-admin { background: #DC143C; color: #fff; }
    .tag-active { background: #22c55e; color: #fff; }
    .tag-blocked { background: #ef4444; color: #fff; }
    .tag-pending { background: #eab308; color: #fff; }
    .users-table .actions-cell { display: flex; align-items: center; gap: 4px; }
    .users-table .actions-cell .icon-btn { width: 34px; height: 34px; border: none; background: transparent; border-radius: 8px; cursor: pointer; color: #6b7280; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; text-decoration: none; }
    .users-table .actions-cell .icon-btn:hover { background: #f3f4f6; color: #1a1a1a; }
    .users-table .actions-cell .dropdown { position: relative; display: inline-block; }
    .users-table .actions-cell .dropdown-menu { display: none; position: absolute; right: 0; top: 100%; margin-top: 4px; background: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.15); min-width: 180px; z-index: 10; padding: 4px 0; border: 1px solid #e5e7eb; }
    .users-table .actions-cell .dropdown.open .dropdown-menu { display: block; }
    .users-table .actions-cell .dropdown-menu button, .users-table .actions-cell .dropdown-menu a { width: 100%; text-align: left; padding: 0.5rem 1rem; border: none; background: none; cursor: pointer; font-size: 0.9rem; color: #374151; text-decoration: none; display: flex; align-items: center; gap: 8px; }
    .users-table .actions-cell .dropdown-menu button:hover, .users-table .actions-cell .dropdown-menu a:hover { background: #f3f4f6; }
    .users-table .actions-cell .dropdown-menu .danger { color: #dc2626; }
    .users-table .actions-cell .dropdown-menu .success { color: #059669; }
    .empty-state { padding: 3rem; text-align: center; color: #6b7280; }
</style>

<div class="users-header">
    <div class="header-left">
        <a href="#" class="back-link"><i class="fa-solid fa-arrow-left"></i></a>
        <div>
            <h1>Gestion des utilisateurs</h1>
            <p class="subtitle">Suivez les comptes, les rôles et les statuts de la plateforme.</p>
        </div>
    </div>
    <div class="actions">
        <a href="#" class="btn btn-outline"><i class="fa-solid fa-download"></i> Exporter</a>
        <a href="#" class="btn btn-primary"><i class="fa-solid fa-plus"></i> Ajouter un utilisateur</a>
    </div>
</div>

<form method="GET" action="{{ route('admin.users.index') }}">
    <div class="toolbar">
        <div class="search-wrap">
            <i class="fa-solid fa-magnifying-glass search-icon"></i>
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Rechercher par nom, email ou téléphone...">
        </div>
        <div class="filters">
            <select name="status">
                <option value="">Statut : Tous</option>
                <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Actif</option>
                <option value="blocked" {{ request('status') === 'blocked' ? 'selected' : '' }}>Banni</option>
            </select>
            <select name="identity">
                <option value="">Identité : Tous</option>
                <option value="pending" {{ request('identity') === 'pending' ? 'selected' : '' }}>En attente{{ ($pendingIdentity ?? 0) > 0 ? ' ('.$pendingIdentity.')' : '' }}</option>
                <option value="approved" {{ request('identity') === 'approved' ? 'selected' : '' }}>Approuvé</option>
                <option value="rejected" {{ request('identity') === 'rejected' ? 'selected' : '' }}>Refusé</option>
                <option value="none" {{ request('identity') === 'none' ? 'selected' : '' }}>Non soumis</option>
            </select>
            <select name="role">
                <option value="">Rôle : Tous</option>
                <option value="user" {{ request('role', 'user') === 'user' ? 'selected' : '' }}>Utilisateur</option>
                <option value="admin">Admin</option>
            </select>
        </div>
        <button type="submit" class="btn btn-outline">Filtrer</button>
    </div>
</form>

<div class="users-table-wrap">
    <table class="users-table">
        <thead>
            <tr>
                <th>Utilisateur</th>
                <th>Rôle</th>
                <th>Statut</th>
                <th>Identité</th>
                <th>Inscription</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse($users as $user)
            <tr>
                <td>
                    <div class="user-cell">
                        <div class="user-avatar">{{ strtoupper(mb_substr($user->name ?? $user->first_name ?? '?', 0, 1)) }}</div>
                        <div class="user-info">
                            <div class="user-name">{{ $user->name ?? $user->first_name ?? '—' }}</div>
                            <div class="user-email">{{ $user->email }}</div>
                        </div>
                    </div>
                </td>
                <td>
                    @if($user->is_admin)
                        <span class="tag tag-role-admin">Admin</span>
                    @else
                        <span class="tag tag-role-user">Utilisateur</span>
                    @endif
                </td>
                <td>
                    @if($user->is_blocked)
                        <span class="tag tag-blocked">Banni</span>
                    @else
                        <span class="tag tag-active">Actif</span>
                    @endif
                </td>
                <td>
                    @php
                        $idStatus = $user->identity_status ?? 'none';
                        $idTags = ['none' => ['Non soumis', 'tag-pending'], 'pending' => ['En attente', 'tag-pending'], 'approved' => ['OK', 'tag-active'], 'rejected' => ['Refusé', 'tag-blocked']];
                        [$idLabel, $idClass] = $idTags[$idStatus] ?? ['—', 'tag-pending'];
                    @endphp
                    <span class="tag {{ $idClass }}">{{ $idLabel }}</span>
                </td>
                <td>
                    @php
                        $created = $user->created_at;
                        if ($created->isToday()) {
                            $inscription = "Aujourd'hui, " . $created->format('H:i');
                        } elseif ($created->isYesterday()) {
                            $inscription = "Hier, " . $created->format('H:i');
                        } elseif ($created->diffInDays(now()) <= 7) {
                            $inscription = 'Il y a ' . $created->diffInDays(now()) . ' jour' . ($created->diffInDays(now()) > 1 ? 's' : '');
                        } else {
                            $inscription = $created->format('d M Y');
                        }
                    @endphp
                    {{ $inscription }}
                </td>
                <td>
                    <div class="actions-cell">
                        <a href="{{ route('admin.users.show', $user) }}" class="icon-btn" title="Voir le profil"><i class="fa-solid fa-eye"></i></a>
                        <div class="dropdown" data-dropdown>
                            <button type="button" class="icon-btn" title="Plus d'options"><i class="fa-solid fa-ellipsis-vertical"></i></button>
                            <div class="dropdown-menu">
                                @if($user->is_blocked)
                                    <form action="{{ route('admin.users.unblock', $user) }}" method="POST" style="margin:0;">
                                        @csrf
                                        <button type="submit" class="success"><i class="fa-solid fa-check"></i> Valider le compte</button>
                                    </form>
                                @else
                                    <form action="{{ route('admin.users.block', $user) }}" method="POST" style="margin:0;" onsubmit="return confirm('Bloquer ce compte ?');">
                                        @csrf
                                        <button type="submit" class="danger"><i class="fa-solid fa-ban"></i> Bloquer le compte</button>
                                    </form>
                                @endif
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            @empty
            <tr><td colspan="6"><div class="empty-state">Aucun utilisateur trouvé.</div></td></tr>
            @endforelse
        </tbody>
    </table>
    {{ $users->withQueryString()->links('pagination.admin') }}
</div>

<script>
document.querySelectorAll('[data-dropdown]').forEach(function(outer) {
    var btn = outer.querySelector('button');
    var menu = outer.querySelector('.dropdown-menu');
    if (!btn || !menu) return;
    btn.addEventListener('click', function(e) {
        e.stopPropagation();
        outer.classList.toggle('open');
    });
});
document.addEventListener('click', function() {
    document.querySelectorAll('.dropdown.open').forEach(function(el) { el.classList.remove('open'); });
});
</script>
@endsection