@extends('layouts.super-admin', ['title' => 'Users - Booklio Super Admin', 'pageTitle' => 'Users Management', 'active' => 'users'])

@section('content')
    <div class="space-y-5">
        <div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
            <p class="text-sm font-semibold text-booklio-muted">Manage platform users across super admins, business owners, and staff.</p>
            <x-ui.button data-booklio-placeholder="User invitations will be connected to email delivery in the backend notification phase."><x-ui.icon name="user-plus" class="h-4 w-4" />Invite User</x-ui.button>
        </div>

        <x-ui.card title="Users Management" description="Real platform user directory with business context.">
            <form method="GET" action="{{ route('super-admin.users.index') }}" class="mb-4 grid gap-3 lg:grid-cols-[minmax(0,1fr)_220px_auto_auto]">
                <x-form.input name="q" label="Search" value="{{ $filters['q'] ?? '' }}" placeholder="Name or email" />
                <x-form.select name="role" label="Role" value="{{ $filters['role'] ?? 'all' }}" :options="$roles" />
                <div class="flex items-end">
                    <x-ui.button type="submit" class="w-full">Filter</x-ui.button>
                </div>
                <div class="flex items-end">
                    <x-ui.button href="{{ route('super-admin.users.index') }}" variant="secondary" class="w-full">Reset</x-ui.button>
                </div>
            </form>

            <x-ui.table :headers="['Name', 'Email', 'Role', 'Business', 'Status', 'Joined', 'Actions']">
                @forelse ($users as $user)
                    @php($business = $user->ownedBusinesses->first() ?? $user->businesses->first())
                    <tr class="hover:bg-slate-50">
                        <td class="font-extrabold">
                            <span class="block max-w-[180px] truncate">{{ $user->name }}</span>
                        </td>
                        <td class="text-booklio-muted">
                            <span class="block max-w-[240px] break-words">{{ $user->email }}</span>
                        </td>
                        <td class="font-bold">{{ \Illuminate\Support\Str::headline($user->role) }}</td>
                        <td class="font-semibold">
                            <span class="block max-w-[220px] truncate">{{ $business?->name ?? 'Platform' }}</span>
                        </td>
                        <td>
                            <x-ui.badge :variant="$user->email_verified_at ? 'success' : 'warning'">{{ $user->email_verified_at ? 'Active' : 'Unverified' }}</x-ui.badge>
                        </td>
                        <td>{{ $user->created_at?->format('M d, Y') ?? '-' }}</td>
                        <td><x-ui.button size="sm" variant="secondary" data-booklio-placeholder="User management actions will be enabled after account administration policies are finalized.">Manage</x-ui.button></td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center text-booklio-muted">No users found for the selected filters.</td>
                    </tr>
                @endforelse
            </x-ui.table>

            <x-ui.pagination :paginator="$users" class="mt-4" />
        </x-ui.card>
    </div>
@endsection