<div class="admin-users-page">
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-2">
        <div>
            <div class="loot-muted">Users / List</div>
            <h1 class="loot-section-title mb-0">Users</h1>
        </div>
        <div class="d-flex gap-1">
            <a class="btn btn-outline-light" href="{{ route('admin.export.users', ['search' => $search]) }}">
                <i data-feather="download" class="me-50"></i>Export CSV
            </a>
            <a class="btn btn-loot" href="{{ route('register') }}" target="_blank">
                <i data-feather="user-plus" class="me-50"></i>
                New user
            </a>
        </div>
    </div>

    <div class="loot-admin-grid mb-2">
        <div class="loot-admin-card">
            <span>Users</span>
            <strong>{{ number_format($stats['count']) }}</strong>
            <p class="loot-muted mb-0">Total number of users</p>
        </div>
        <div class="loot-admin-card">
            <span>Today Users</span>
            <strong>{{ number_format($stats['today']) }}</strong>
            <p class="loot-muted mb-0">Users registered today</p>
        </div>
        <div class="loot-admin-card">
            <span>Banned Users</span>
            <strong>{{ number_format($stats['banned']) }}</strong>
            <p class="loot-muted mb-0">Restricted accounts</p>
        </div>
        <div class="loot-admin-card">
            <span>Verification</span>
            <strong>{{ $users->whereNotNull('email_verified_at')->count() }}/{{ $users->count() }}</strong>
            <p class="loot-muted mb-0">Verified on this page</p>
        </div>
    </div>

    <div class="card admin-users-card">
        <div class="card-body admin-users-filter-panel border-bottom">
            <div class="admin-users-filters">
                <div class="admin-users-field admin-users-search">
                    <label for="search">Search users</label>
                    <input wire:model.debounce.350ms="search" id="search" type="search"
                           class="form-control" placeholder="Search by email or username">
                </div>
                <div class="admin-users-field">
                    <label for="user-status-filter">Account status</label>
                    <select wire:model="statusFilter" id="user-status-filter" class="form-select">
                        <option value="">All statuses</option>
                        <option value="active">Active</option>
                        <option value="banned">Banned</option>
                    </select>
                </div>
                <div class="admin-users-field">
                    <label for="user-verification-filter">Email verification</label>
                    <select wire:model="verificationFilter" id="user-verification-filter" class="form-select">
                        <option value="">Any verification</option>
                        <option value="verified">Verified</option>
                        <option value="unverified">Unverified</option>
                    </select>
                </div>
                <div class="admin-users-field">
                    <label for="user-role-filter">Role</label>
                    <select wire:model="roleFilter" id="user-role-filter" class="form-select">
                        <option value="">All roles</option>
                        <option value="user">Users</option>
                        <option value="support">Support</option>
                        <option value="moderator">Moderators</option>
                        <option value="admin">Administrators</option>
                    </select>
                </div>
                <div class="admin-users-field">
                    <label for="user-privacy-filter">Profile privacy</label>
                    <select wire:model="privacyFilter" id="user-privacy-filter" class="form-select">
                        <option value="">Any privacy</option>
                        <option value="public">Public activity</option>
                        <option value="private">Private activity</option>
                    </select>
                </div>
                <div class="admin-users-field">
                    <label for="user-sort">Sort by</label>
                    <select wire:model="sortBy" id="user-sort" class="form-select">
                        <option value="newest">Newest</option>
                        <option value="oldest">Oldest</option>
                        <option value="balance_desc">Highest balance</option>
                        <option value="earnings_desc">Highest earnings</option>
                        <option value="username">Username A–Z</option>
                    </select>
                </div>
                <div class="admin-users-field admin-users-per-page">
                    <label for="users-per-page">Rows</label>
                    <select wire:model="perPage" id="users-per-page" class="form-select">
                        <option value="10">10 per page</option>
                        <option value="25">25 per page</option>
                        <option value="50">50 per page</option>
                    </select>
                </div>
            </div>
            <div class="admin-users-bulkbar">
                <div class="admin-users-filter-actions">
                    <span class="loot-muted">{{ count($selectedUsers) }} selected on this page</span>
                    <button type="button" class="btn btn-outline-light admin-users-reset" wire:click="resetFilters">
                        <i data-feather="rotate-ccw" class="me-50" aria-hidden="true"></i>Reset filters
                    </button>
                </div>
                <div class="admin-users-bulk-actions">
                    <label class="visually-hidden" for="users-bulk-action">Bulk action</label>
                    <select wire:model.defer="bulkAction" id="users-bulk-action" class="form-select">
                        <option value="">Bulk actions</option>
                        <option value="verify_email">Verify email</option>
                        <option value="ban">Ban users</option>
                        <option value="unban">Unban users</option>
                        <option value="make_admin">Make admin</option>
                        <option value="remove_admin">Remove admin</option>
                        <option value="add_100">Add 100 points</option>
                    </select>
                    <button type="button" class="btn btn-loot" wire:click="applyBulkAction">
                        Apply
                    </button>
                </div>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                <tr>
                    <th style="width: 44px;">
                        <input class="form-check-input" type="checkbox" wire:model="selectPage" aria-label="Select all users on this page">
                    </th>
                    <th>User</th>
                    <th>Verified</th>
                    <th>Face</th>
                    <th>Role</th>
                    <th>User ID</th>
                    <th>Level</th>
                    <th>Balance</th>
                    <th>Privacy</th>
                    <th>Country</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                @foreach($users as $user)
                    @php
                        $level = max(1, (int) floor($user->total_points / 1000) + 1);
                        $country = $user->registered_ip ? strtoupper(substr(md5($user->registered_ip), 0, 2)) : '--';
                    @endphp
                    <tr>
                        <td>
                            <input class="form-check-input" type="checkbox" wire:model="selectedUsers" value="{{ $user->id }}" aria-label="Select {{ $user->username }}">
                        </td>
                        <td>
                            <div class="d-flex align-items-center">
                                <img class="rounded-circle me-1" src="{{ $user->avatar() }}" alt="{{ $user->name() }}"
                                     height="38" width="38">
                                <div>
                                    <div class="fw-bolder">
                                        {{ $user->username }}
                                        <a href="{{ route('admin.users.view', ['id' => $user->id]) }}" class="ms-50">
                                            <i data-feather="external-link"></i>
                                        </a>
                                    </div>
                                    <div class="loot-muted">{{ $user->email }}</div>
                                </div>
                            </div>
                        </td>
                        <td>
                            @if($user->email_verified_at)
                                <span class="loot-status success"><i data-feather="check-circle" class="me-50"></i>Verified</span>
                            @else
                                <button class="btn btn-sm btn-outline-warning" wire:click="verifyEmail({{ $user->id }})">
                                    Verify email
                                </button>
                            @endif
                        </td>
                        <td>
                            @php $face = $user->latestFaceVerification; @endphp
                            @if($face?->status === 'approved')
                                <span class="loot-status success">Approved</span>
                            @elseif($face?->status === 'duplicate_review')
                                <span class="loot-status warning">Review</span>
                            @elseif($face?->status === 'pending')
                                <span class="loot-status warning">Pending</span>
                            @elseif($face?->status === 'rejected')
                                <span class="loot-status danger">Rejected</span>
                            @else
                                <span class="loot-status">None</span>
                            @endif
                        </td>
                        <td>
                            <button class="btn btn-sm {{ $user->is_admin ? 'btn-outline-danger' : 'btn-outline-success' }}"
                                    wire:click="toggleAdmin({{ $user->id }})">
                                {{ $user->is_admin ? 'Admin' : 'User' }}
                            </button>
                        </td>
                        <td><span class="loot-status success">{{ 32320 + $user->id }}</span></td>
                        <td><span class="loot-status danger">{{ $level }}</span></td>
                        <td><strong>{{ format_coins_as_usd($user->current_points) }}</strong><small class="d-block loot-muted">{{ number_format($user->current_points, 0) }} coins</small></td>
                        <td>
                            @if($user->is_profile_private)
                                <span class="loot-status warning">Private activity</span>
                            @else
                                <span class="loot-status success">Public activity</span>
                            @endif
                        </td>
                        <td><span class="loot-status">{{ $country }}</span></td>
                        <td class="text-nowrap">
                            <a href="{{ route('admin.users.view', ['id' => $user->id]) }}" class="btn btn-sm btn-outline-light">
                                View
                            </a>
                            <button class="btn btn-sm btn-outline-info" wire:click="addPoints({{ $user->id }}, 100)">
                                +100
                            </button>
                            <button class="btn btn-sm {{ $user->is_banned ? 'btn-outline-success' : 'btn-outline-danger' }}"
                                    wire:click="toggleBan({{ $user->id }})">
                                {{ $user->is_banned ? 'Unban' : 'Ban' }}
                            </button>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>

        <div class="card-body d-flex flex-wrap justify-content-between align-items-center">
            <span>Showing {{ $users->firstItem() }} to {{ $users->lastItem() }} of {{ number_format($users->total()) }} results</span>
            {{ $users->links() }}
        </div>
    </div>
</div>

@push('scripts')
    <script>
        document.addEventListener('toasts', event => {
            toastr[event.detail.type](event.detail.message, event.detail.title);
        });
    </script>
@endpush
