<div class="space-y-6">

    {{-- Header --}}
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-xl font-semibold text-gray-800">{{ t('admin.users.title') }}</h1>
            <p class="text-sm text-gray-500 mt-1">{{ $users->total() }} {{ t('admin.users.total') }}</p>
        </div>
    </div>

    {{-- Tabs + Suche --}}
    <div class="bg-white border border-gray-100 rounded-xl shadow-sm">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 px-4 pt-3 pb-0">
            {{-- Tabs --}}
            @php
                $tabs = [
                    'all'       => ['label' => t('admin.users.all'),       'icon' => null,           'color' => 'indigo'],
                    'active'    => ['label' => t('admin.users.active'),    'icon' => null,           'color' => 'indigo'],
                    'suspended' => ['label' => t('admin.users.suspended'), 'icon' => null,           'color' => 'indigo'],
                    'blocked'   => ['label' => t('admin.users.blocked'),   'icon' => null,           'color' => 'indigo'],
                    'staff'     => ['label' => t('admin.users.team'),      'icon' => 'shield-check', 'color' => 'purple'],
                ];
            @endphp
            <div class="flex gap-1">
                @foreach($tabs as $key => $t)
                    @php
                        $active = $tab === $key;
                        $count  = $counts[$key] ?? 0;
                        $color  = $t['color'];

                        $tabClasses = $active
                            ? "bg-{$color}-600 text-white border-{$color}-600"
                            : ($color === 'purple'
                                ? 'bg-white text-purple-500 border-purple-200 hover:border-purple-300 hover:text-purple-700'
                                : 'bg-white text-gray-500 border-gray-200 hover:border-gray-300 hover:text-gray-700');
                    @endphp
                    <button wire:click="setTab('{{ $key }}')"
                            class="px-3 py-1.5 rounded-lg text-xs font-medium border transition-all flex items-center gap-1.5 {{ $tabClasses }}">
                        @if($t['icon'])
                            <x-dynamic-component :component="'heroicon-s-' . $t['icon']" class="w-3 h-3"/>
                        @endif
                        {{ $t['label'] }}
                        <span class="text-[10px] {{ $active ? "text-{$color}-200" : ($color === 'purple' ? 'text-purple-300' : 'text-gray-400') }}">{{ $count }}</span>
                    </button>
                @endforeach
            </div>

            {{-- Suche --}}
            <div class="relative w-full sm:w-64 pb-3 sm:pb-0">
                <x-heroicon-o-magnifying-glass class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"/>
                <input type="text" wire:model.live.debounce.300ms="search"
                       placeholder="{{ t('admin.users.search') }}"
                       class="w-full pl-9 pr-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-indigo-400 placeholder:text-gray-400">
            </div>
        </div>
        <div class="border-t border-gray-100"></div>
    </div>

    {{-- Users Table --}}
    <div class="bg-white border border-gray-100 rounded-xl shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-gray-100 text-left text-xs text-gray-500 uppercase tracking-wider">
                        <th class="px-5 py-3">{{ t('admin.users.user') }}</th>
                        <th class="px-5 py-3">{{ t('admin.users.plan') }}</th>
                        <th class="px-5 py-3">{{ t('common.status') }}</th>
                        <th class="px-5 py-3">{{ t('admin.users.events') }}</th>
                        <th class="px-5 py-3">{{ t('admin.users.logs') }}</th>
                        <th class="px-5 py-3">{{ t('admin.users.registered') }}</th>
                        <th class="px-5 py-3">{{ t('admin.users.last_login') }}</th>
                        <th class="px-5 py-3">{{ t('common.actions') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @forelse($users as $user)
                        <tr class="hover:bg-gray-50/50">
                            <td class="px-5 py-3">
                                <div class="flex items-center gap-2.5">
                                    {{-- Avatar --}}
                                    <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold shrink-0
                                        {{ $user->role->hierarchy() >= 2 ? 'bg-purple-100 text-purple-700' : 'bg-gray-100 text-gray-500' }}">
                                        {{ strtoupper(substr($user->name, 0, 1)) }}
                                    </div>
                                    <div class="min-w-0">
                                        <div class="flex items-center gap-1.5">
                                            <a href="{{ route('admin.users.detail', $user) }}" wire:navigate class="text-indigo-600 hover:text-indigo-700 font-medium truncate">
                                                {{ $user->name }}
                                            </a>
                                            @if($user->role !== \App\Enums\UserRole::User)
                                                <span class="inline-flex items-center gap-0.5 text-[9px] font-semibold px-1.5 py-0.5 rounded-md {{ $user->role->badgeBg() }} {{ $user->role->badgeText() }} shrink-0">
                                                    <x-dynamic-component :component="'heroicon-s-' . $user->role->icon()" class="w-2.5 h-2.5"/>
                                                    {{ $user->role->label() }}
                                                </span>
                                            @endif
                                        </div>
                                        <p class="text-xs text-gray-400 truncate">{{ $user->email }}</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-5 py-3">
                                @if($user->subscription?->plan)
                                    <span class="text-[10px] font-medium px-1.5 py-0.5 rounded-md bg-indigo-50 text-indigo-700">
                                        {{ $user->subscription->plan->name }}
                                    </span>
                                @else
                                    <span class="text-[10px] font-medium px-1.5 py-0.5 rounded-md bg-gray-100 text-gray-500">Free</span>
                                @endif
                            </td>
                            <td class="px-5 py-3">
                                @php
                                    $statusBadge = match($user->status) {
                                        \App\Enums\UserStatus::Active    => 'bg-green-50 text-green-700',
                                        \App\Enums\UserStatus::Blocked   => 'bg-red-50 text-red-700',
                                        \App\Enums\UserStatus::Suspended => 'bg-amber-50 text-amber-700',
                                        default                          => 'bg-gray-100 text-gray-600',
                                    };
                                    $statusLabel = match($user->status) {
                                        \App\Enums\UserStatus::Active    => t('admin.users.active'),
                                        \App\Enums\UserStatus::Blocked   => t('admin.users.blocked'),
                                        \App\Enums\UserStatus::Suspended => t('admin.users.suspended'),
                                        default                          => $user->status?->value ?? '-',
                                    };
                                @endphp
                                <span class="text-[10px] font-medium px-1.5 py-0.5 rounded-md {{ $statusBadge }}">{{ $statusLabel }}</span>
                            </td>
                            <td class="px-5 py-3 text-gray-500">{{ $user->events_count }}</td>
                            <td class="px-5 py-3 text-gray-500">{{ $user->agent_logs_count }}</td>
                            <td class="px-5 py-3 text-gray-400 text-xs">{{ $user->created_at?->format('d.m.Y') }}</td>
                            <td class="px-5 py-3 text-gray-400 text-xs">{{ $user->updated_at?->diffForHumans() }}</td>
                            <td class="px-5 py-3">
                                <div class="flex items-center gap-2">
                                    <a href="{{ route('admin.users.detail', $user) }}" wire:navigate class="text-indigo-600 hover:text-indigo-700" title="{{ t('common.details') }}">
                                        <x-heroicon-o-eye class="w-4 h-4"/>
                                    </a>
                                    <a href="{{ route('admin.users.calendar', $user) }}" wire:navigate class="text-gray-400 hover:text-gray-600" title="{{ t('admin.users.calendar') }}">
                                        <x-heroicon-o-calendar class="w-4 h-4"/>
                                    </a>

                                    {{-- Status Dropdown --}}
                                    <div x-data="{ open: false }" class="relative">
                                        <button @click="open = !open" class="text-gray-400 hover:text-gray-600" title="{{ t('admin.users.change_status') }}">
                                            <x-heroicon-o-ellipsis-vertical class="w-4 h-4"/>
                                        </button>
                                        <div x-show="open" @click.away="open = false" x-cloak
                                             class="absolute right-0 mt-1 w-36 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1">
                                            @foreach(['active' => t('admin.users.active'), 'suspended' => t('admin.users.suspended'), 'blocked' => t('admin.users.blocked')] as $val => $label)
                                                @if($user->status?->value !== $val)
                                                    <button wire:click="updateStatus('{{ $user->id }}', '{{ $val }}')"
                                                            @click="open = false"
                                                            class="w-full text-left px-3 py-1.5 text-xs text-gray-600 hover:bg-gray-50">
                                                        {{ $label }}
                                                    </button>
                                                @endif
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-5 py-8 text-center text-gray-400">{{ t('admin.users.not_found') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

    </div>

    {{-- Pagination --}}
    @if($users->hasPages())
        <div class="flex items-center justify-between text-sm text-gray-500 pt-3">
            <span class="text-xs">
                {{ $users->firstItem() }}–{{ $users->lastItem() }} {{ t('admin.users.of_total', ['total' => $users->total()]) }}
            </span>
            <div class="flex gap-1">
                @if($users->onFirstPage())
                    <span class="px-3 py-1.5 rounded-lg border border-gray-100 text-gray-300 text-xs cursor-default">‹</span>
                @else
                    <button wire:click="previousPage"
                            class="px-3 py-1.5 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 text-xs transition-colors">‹</button>
                @endif

                @foreach($users->getUrlRange(max(1, $users->currentPage() - 2), min($users->lastPage(), $users->currentPage() + 2)) as $page => $url)
                    <button wire:click="gotoPage({{ $page }})"
                            class="px-3 py-1.5 rounded-lg border text-xs transition-colors
                                {{ $page === $users->currentPage()
                                    ? 'bg-indigo-600 text-white border-indigo-600'
                                    : 'border-gray-200 text-gray-600 hover:bg-gray-50' }}">
                        {{ $page }}
                    </button>
                @endforeach

                @if($users->hasMorePages())
                    <button wire:click="nextPage"
                            class="px-3 py-1.5 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 text-xs transition-colors">›</button>
                @else
                    <span class="px-3 py-1.5 rounded-lg border border-gray-100 text-gray-300 text-xs cursor-default">›</span>
                @endif
            </div>
        </div>
    @endif

</div>
