@php $fmt = app(\App\Services\Formatter::class); @endphp

<div>
    <x-ui.page-header
        title="Staff users"
        subtitle="Who can operate this panel. Verifying payments is the power to give away subscriptions — grant it deliberately."
    />

    <x-resource.toolbar placeholder="Name, email or phone…" create-label="Add staff" :can-create="$this->canManage()" />

    @unless ($this->canManage())
        <div class="mb-4 rounded-lg border border-slate-200 bg-slate-50 p-3 text-xs text-slate-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300">
            Only a super admin can add or change staff accounts. You are seeing this list read-only.
        </div>
    @endunless

    <x-ui.card :padded="false">
        <x-ui.table>
            <x-slot:head>
                <tr>
                    <x-ui.th sortable="{{ $sortField }}" field="name" :direction="$sortDirection">Name</x-ui.th>
                    <x-ui.th sortable="{{ $sortField }}" field="email" :direction="$sortDirection">Email</x-ui.th>
                    <x-ui.th sortable="{{ $sortField }}" field="role" :direction="$sortDirection">Role</x-ui.th>
                    <th>Can</th>
                    <x-ui.th sortable="{{ $sortField }}" field="last_login_at" :direction="$sortDirection">Last signed in</x-ui.th>
                    <th>Status</th>
                    <th></th>
                </tr>
            </x-slot:head>

            @foreach ($rows as $user)
                <tr>
                    <td>
                        <div class="flex items-center gap-2">
                            <x-ui.avatar :src="$user->avatar_url" :name="$user->name" size="8" />
                            <span class="font-medium">{{ $user->name }}</span>
                            @if ($user->id === auth()->id())
                                <x-ui.badge color="blue">You</x-ui.badge>
                            @endif
                        </div>
                    </td>

                    <td class="text-xs">
                        {{ $user->email }}
                        @if ($user->phone)
                            <p class="tabular text-slate-500">{{ $user->phone }}</p>
                        @endif
                    </td>

                    <td><x-ui.badge :color="$user->isSuperAdmin() ? 'purple' : 'gray'">{{ $user->roleLabel() }}</x-ui.badge></td>

                    <td class="text-xs text-slate-500">
                        @php
                            $can = array_filter([
                                $user->canVerifyPayments() ? 'verify payments' : null,
                                $user->canManageTenants() ? 'manage shops' : null,
                                $user->canManageCatalog() ? 'edit plans' : null,
                                $user->canManageStaff() ? 'manage staff' : null,
                            ]);
                        @endphp
                        {{ $can ? implode(', ', $can) : 'view only' }}
                    </td>

                    <td class="text-xs text-slate-500">{{ $fmt->ago($user->last_login_at) }}</td>

                    <td>
                        <x-ui.badge :color="$user->is_active ? 'green' : 'gray'">
                            {{ $user->is_active ? 'Active' : 'Disabled' }}
                        </x-ui.badge>
                    </td>

                    <td>
                        <x-resource.row-actions :id="$user->id"
                                                :can-edit="$this->canManage()"
                                                :can-delete="$this->canManage() && $user->id !== auth()->id()" />
                    </td>
                </tr>
            @endforeach
        </x-ui.table>

        <x-resource.pagination :rows="$rows" />
    </x-ui.card>

    <x-ui.modal show="showForm" :title="$editingId ? 'Edit staff user' : 'Add staff user'" close-action="closeForm">
        <div class="grid gap-3 sm:grid-cols-2">
            <x-ui.input label="Full name" wire:model="form.name" required :error="$errors->first('form.name')" />
            <x-ui.input label="Email" type="email" wire:model="form.email" required :error="$errors->first('form.email')" />
            <x-ui.input label="Phone" wire:model="form.phone" :error="$errors->first('form.phone')" />

            <x-ui.select label="Role" wire:model="form.role" :options="$roles" required
                         :error="$errors->first('form.role')" />

            <div class="sm:col-span-2">
                <x-ui.input
                    :label="$editingId ? 'New password (leave blank to keep the current one)' : 'Password'"
                    wire:model="password"
                    :error="$errors->first('password')"
                    hint="At least 10 characters with letters and numbers."
                />
            </div>

            <div class="sm:col-span-2">
                <x-ui.toggle wire:model="form.is_active" label="Account is active"
                             hint="Disabling is the right move when somebody leaves — it keeps their audit trail intact." />
            </div>
        </div>

        {{-- A short, honest explanation beats a permissions matrix nobody reads. --}}
        <div class="mt-4 rounded-lg bg-slate-50 p-3 text-xs text-slate-600 dark:bg-slate-800 dark:text-slate-300">
            <p class="font-semibold">What each role can do</p>
            <ul class="mt-1 space-y-0.5">
                <li><strong>Support</strong> — read everything, change nothing.</li>
                <li><strong>Accountant</strong> — verify and reject payments.</li>
                <li><strong>Admin</strong> — the above, plus shops, subscriptions, plans and accounts.</li>
                <li><strong>Super Admin</strong> — everything, including this screen.</li>
            </ul>
        </div>

        <x-slot:footer>
            <x-ui.button wire:click="closeForm">Cancel</x-ui.button>
            <x-ui.button variant="primary" wire:click="saveResource" loading="saveResource">Save user</x-ui.button>
        </x-slot:footer>
    </x-ui.modal>

    <x-resource.delete-confirm label="staff user" />
</div>