@php
    $dateLocale = \App\Support\AppLocale::carbon();
    $searchTrim = trim($search);
    $users = collect($finance->users());
    $selected = $selectedUserId !== null ? \App\Models\User::query()->find($selectedUserId) : null;
    $filtered = $users->filter(function ($u) use ($searchTrim) {
        $q = mb_strtolower($searchTrim);
        if ($q === '') {
            return true;
        }

        return str_contains(mb_strtolower($u['name'] ?? ''), $q) || str_contains(mb_strtolower($u['email'] ?? ''), $q);
    });
    if ($roleFilter !== 'all') {
        $filtered = $filtered->filter(fn ($u) => (string) ($u['role'] ?? '') === $roleFilter);
    }
    if ($statusFilter !== 'all') {
        $filtered = $filtered->filter(fn ($u) => (string) ($u['status'] ?? '') === $statusFilter);
    }
@endphp

<div>
<x-top-bar
    :title="__('budgets.nav.users')"
    :subtitle="__('budgets.users_page.subtitle', ['count' => $users->count()])"
/>
<x-context-tabs :items="[
    ['href' => route('admin'), 'label' => __('budgets.nav.admin'), 'active' => request()->routeIs('admin')],
    ['href' => route('admin.users'), 'label' => __('budgets.nav.users'), 'active' => request()->routeIs('admin.users*')],
    ['href' => route('admin.analytics'), 'label' => __('budgets.nav.analytics'), 'active' => request()->routeIs('admin.analytics')],
    ['href' => route('admin.plans'), 'label' => __('budgets.admin_console.plans_tab'), 'active' => request()->routeIs('admin.plans')],
    ['href' => route('admin.pricing'), 'label' => __('budgets.admin_console.pricing_tab'), 'active' => request()->routeIs('admin.pricing')],
    ['href' => route('admin.system-settings'), 'label' => __('budgets.admin_console.system_tab'), 'active' => request()->routeIs('admin.system-settings')],
]" />

<div class="relative mb-4">
    <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none"></i>
    <input
        type="search"
        wire:model.live.debounce.350ms="search"
        placeholder="{{ __('budgets.users_page.search_placeholder') }}"
        class="flex w-full rounded-xl border border-input bg-background pl-10 h-10 px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
    />
</div>

<div class="mb-4 grid gap-2 sm:grid-cols-2">
    <select wire:model.change="roleFilter" class="flex h-10 w-full rounded-xl border border-input bg-background px-3 text-sm">
        <option value="all">{{ __('budgets.users_page.filter_all_roles') }}</option>
        <option value="super_admin">{{ __('budgets.users_page.roles.super_admin') }}</option>
        <option value="admin">{{ __('budgets.users_page.roles.admin') }}</option>
        <option value="user">{{ __('budgets.users_page.roles.user') }}</option>
    </select>
    <select wire:model.change="statusFilter" class="flex h-10 w-full rounded-xl border border-input bg-background px-3 text-sm">
        <option value="all">{{ __('budgets.users_page.filter_all_statuses') }}</option>
        <option value="active">{{ __('budgets.users_page.statuses.active') }}</option>
        <option value="suspended">{{ __('budgets.users_page.statuses.suspended') }}</option>
    </select>
</div>

@if ($filtered->isEmpty())
    <div class="mb-6 rounded-2xl border border-dashed border-border/70 bg-muted/20 px-6 py-12 text-center shadow-card">
        <p class="text-sm font-semibold text-foreground">{{ __('budgets.users_page.empty_title') }}</p>
        <p class="mt-2 text-xs text-muted-foreground">
            @if ($users->isEmpty())
                {{ __('budgets.users_page.empty_hint') }}
            @else
                {{ __('budgets.users_page.empty_filtered') }}
            @endif
        </p>
    </div>
@else
<div class="bg-card rounded-xl border border-border overflow-hidden">
    <div class="grid grid-cols-[1fr_1fr_auto_auto_auto] gap-4 px-4 py-2.5 border-b border-border text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
        <span>{{ __('budgets.users_page.col_name') }}</span>
        <span>{{ __('budgets.users_page.col_email') }}</span>
        <span>{{ __('budgets.users_page.col_role') }}</span>
        <span>{{ __('budgets.users_page.col_status') }}</span>
        <span>{{ __('budgets.users_page.col_plan') }}</span>
    </div>
    @foreach ($filtered as $i => $u)
        @php
            $role = $u['role'] ?? 'user';
            $status = $u['status'] ?? 'active';
            $plan = $u['plan'] ?? 'free';
            $roleBadge = match ($role) {
                'superadmin', 'super_admin' => 'bg-primary/10 text-primary',
                'admin' => 'bg-info/10 text-info',
                default => 'bg-muted text-muted-foreground',
            };
            $statusBadge = match ($status) {
                'active' => 'bg-primary/10 text-primary',
                'inactive' => 'bg-muted text-muted-foreground',
                'suspended' => 'bg-expense/10 text-expense',
                default => 'bg-muted text-muted-foreground',
            };
            $roleIcon = match ($role) {
                'superadmin', 'super_admin' => 'crown',
                'admin' => 'shield',
                default => 'user',
            };
            $roles = (array) __('budgets.users_page.roles');
            $roleLabel = is_array($roles)
                ? (string) ($roles[$role] ?? ($role === 'super_admin' ? ($roles['superadmin'] ?? $role) : $role))
                : $role;
            $statuses = (array) __('budgets.users_page.statuses');
            $statusLabel = is_array($statuses) && array_key_exists($status, $statuses) ? (string) $statuses[$status] : $status;
            $plans = (array) __('budgets.users_page.plans');
            $planLabel = is_array($plans) && array_key_exists($plan, $plans) ? (string) $plans[$plan] : $plan;
            $planBadge = $plan === 'premium' ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground';
            $initial = mb_strtoupper(mb_substr((string) ($u['name'] ?? '?'), 0, 1));
            $joined = \Carbon\Carbon::parse($u['joined'] ?? now())->locale($dateLocale)->translatedFormat('M Y');
        @endphp
        <div
            wire:key="user-{{ $u['id'] ?? $i }}"
            wire:click="selectUser({{ (int) str_replace('u-', '', (string) ($u['id'] ?? '0')) }})"
            class="grid grid-cols-[1fr_1fr_auto_auto_auto] gap-4 px-4 py-2.5 items-center hover:bg-surface-hover ios-list-row cursor-pointer border-b border-border last:border-0 {{ $selectedUserId === (int) str_replace('u-', '', (string) ($u['id'] ?? '0')) ? 'bg-primary/5' : '' }}"
        >
            <div class="flex items-center gap-2.5">
                <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-xs font-bold text-primary">{{ $initial }}</div>
                <div>
                    <p class="text-sm font-medium">{{ $u['name'] }}</p>
                    <p class="text-[10px] text-muted-foreground">{{ __('budgets.users_page.joined', ['date' => $joined]) }}</p>
                </div>
            </div>
            <p class="text-sm text-muted-foreground truncate">{{ $u['email'] }}</p>
            <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold flex items-center gap-1 {{ $roleBadge }}">
                <i data-lucide="{{ $roleIcon }}" class="w-3 h-3"></i>{{ $roleLabel }}
            </span>
            <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold {{ $statusBadge }}">{{ $statusLabel }}</span>
            <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold {{ $planBadge }}">{{ $planLabel }}</span>
        </div>
    @endforeach
</div>
@endif

@if ($selected !== null)
    <div class="mt-4 rounded-lg border border-border bg-card p-4">
        <div class="flex flex-wrap items-center justify-between gap-3">
            <div>
                <h3 class="text-sm font-semibold">{{ __('budgets.users_page.manage_title', ['name' => $selected->name]) }}</h3>
                <p class="text-xs text-muted-foreground">{{ $selected->email }}</p>
            </div>
            <a href="{{ route('admin.users.profile', ['user' => $selected->id]) }}" wire:navigate class="inline-flex items-center justify-center rounded-lg border border-border bg-background px-3 py-2 text-xs font-semibold hover:bg-muted/50 ios-transition-fast ios-press">
                {{ __('budgets.users_page.open_profile') }}
            </a>
        </div>
        <div class="mt-4 grid gap-3 sm:grid-cols-3">
            <select wire:model="selectedRole" class="flex h-10 w-full rounded-xl border border-input bg-background px-3 text-sm">
                <option value="super_admin">{{ __('budgets.users_page.roles.super_admin') }}</option>
                <option value="admin">{{ __('budgets.users_page.roles.admin') }}</option>
                <option value="user">{{ __('budgets.users_page.roles.user') }}</option>
            </select>
            <button type="button" wire:click="saveSelectedRole" class="inline-flex items-center justify-center rounded-lg bg-primary px-3 py-2 text-xs font-semibold text-primary-foreground ios-transition-fast ios-press">
                {{ __('budgets.users_page.update_role') }}
            </button>
            @if ($selected->suspended_at === null)
                <button type="button" wire:click="suspendSelectedUser" class="inline-flex items-center justify-center rounded-lg border border-expense/30 bg-expense/5 px-3 py-2 text-xs font-semibold text-expense ios-transition-fast ios-press">
                    {{ __('budgets.users_page.suspend_user') }}
                </button>
            @else
                <button type="button" wire:click="reactivateSelectedUser" class="inline-flex items-center justify-center rounded-lg border border-primary/30 bg-primary/5 px-3 py-2 text-xs font-semibold text-primary ios-transition-fast ios-press">
                    {{ __('budgets.users_page.reactivate_user') }}
                </button>
            @endif
        </div>
    </div>
@endif
</div>