@extends('admin.layout')
@section('title', 'Users')
@section('subtitle', $users->total() . ' total')

@section('content')
<div class="bg-white rounded-lg shadow-sm border border-slate-200 p-4 mb-4">
    <form method="GET" class="flex flex-wrap gap-3 items-end">
        <div class="flex-1 min-w-64">
            <label class="block text-xs text-slate-500 mb-1">Search</label>
            <input type="text" name="search" value="{{ request('search') }}" placeholder="name / email / battle name"
                   class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
        </div>
        <div>
            <label class="block text-xs text-slate-500 mb-1">Filter</label>
            <select name="filter" class="rounded-md border border-slate-300 px-3 py-2 text-sm">
                <option value="">All users</option>
                <option value="banned" @selected(request('filter') === 'banned')>Banned</option>
                <option value="admins" @selected(request('filter') === 'admins')>Admins</option>
            </select>
        </div>
        <button class="bg-slate-900 text-white px-4 py-2 rounded-md text-sm">Filter</button>
        @if (request('search') || request('filter'))
            <a href="{{ route('admin.users.index') }}" class="px-4 py-2 text-sm text-slate-600">Reset</a>
        @endif
    </form>
</div>

<div class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
    <table class="w-full text-sm">
        <thead class="bg-slate-50 border-b border-slate-200 text-xs uppercase text-slate-500">
            <tr>
                <th class="text-left px-4 py-3">User</th>
                <th class="text-left px-4 py-3">Email</th>
                <th class="text-right px-4 py-3">Level / XP</th>
                <th class="text-right px-4 py-3">Coins</th>
                <th class="text-right px-4 py-3">Energy</th>
                <th class="text-right px-4 py-3">Games</th>
                <th class="text-left px-4 py-3">Status</th>
                <th class="px-4 py-3"></th>
            </tr>
        </thead>
        <tbody class="divide-y">
            @forelse ($users as $user)
                <tr class="hover:bg-slate-50">
                    <td class="px-4 py-3">
                        <div class="font-medium">{{ $user->battle_name ?? '—' }}</div>
                        <div class="text-xs text-slate-500">{{ $user->name }}</div>
                    </td>
                    <td class="px-4 py-3 text-slate-600">{{ $user->email }}</td>
                    <td class="px-4 py-3 text-right">
                        <div class="font-semibold">Lv {{ $user->level }}</div>
                        <div class="text-xs text-slate-500">{{ number_format($user->xp) }} XP</div>
                    </td>
                    <td class="px-4 py-3 text-right">{{ number_format($user->coins) }}</td>
                    <td class="px-4 py-3 text-right">{{ $user->energy }}</td>
                    <td class="px-4 py-3 text-right">
                        <div>{{ $user->games_played }}</div>
                        <div class="text-xs text-emerald-600">{{ $user->games_won }} won</div>
                    </td>
                    <td class="px-4 py-3">
                        @if ($user->is_banned)
                            <span class="bg-red-100 text-red-700 px-2 py-0.5 rounded text-xs">Banned</span>
                        @endif
                        @if ($user->is_admin)
                            <span class="bg-purple-100 text-purple-700 px-2 py-0.5 rounded text-xs">Admin</span>
                        @endif
                        @if (! $user->is_banned && ! $user->is_admin)
                            <span class="text-slate-400 text-xs">active</span>
                        @endif
                    </td>
                    <td class="px-4 py-3 text-right">
                        <a href="{{ route('admin.users.show', $user) }}" class="text-blue-600 hover:underline text-sm">View</a>
                    </td>
                </tr>
            @empty
                <tr><td colspan="8" class="px-4 py-8 text-center text-slate-500">No users match.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>

<div class="mt-4">{{ $users->links() }}</div>
@endsection