@php
    $canManageMembers = app(\App\Services\Frontdesk\FrontdeskPermissions::class)->can(
        auth()->user() ? app(\App\Services\Frontdesk\OrganizationResolver::class)->memberFor(auth()->user(), $organization) : null,
        'admin.members.manage'
    );
@endphp

<x-app-layout title="Team">
    <x-settings.page title="Team" description="Manage who can access Frontdesk, their roles, and which branch each member belongs to.">
        <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
            <div class="flex flex-wrap items-center gap-2 text-sm">
                <a href="{{ route('frontdesk.settings') }}" class="text-slate-500 hover:text-slate-800">Settings</a>
                <span class="text-slate-300">/</span>
                <span class="font-medium text-slate-900">Team</span>
                @if (app(\App\Services\Frontdesk\FrontdeskPermissions::class)->can(
                    auth()->user() ? app(\App\Services\Frontdesk\OrganizationResolver::class)->memberFor(auth()->user(), $organization) : null,
                    'admin.branches.view'
                ))
                    <a href="{{ route('frontdesk.branches.index') }}" class="ml-3 text-indigo-600 hover:text-indigo-800">Branches</a>
                @endif
            </div>
            @if ($canManageMembers)
                <a href="{{ route('frontdesk.members.create') }}" class="btn-primary">Add member</a>
            @endif
        </div>

        <x-settings.card title="Team members" description="{{ number_format($heroStats['total']) }} members · {{ number_format($heroStats['admins']) }} administrators · {{ number_format($heroStats['branch_scoped']) }} branch-scoped">
            @if ($members->isEmpty())
                <p class="text-sm text-slate-500">No team members yet.</p>
            @else
                <div class="overflow-x-auto">
                    <table class="min-w-full text-sm">
                        <thead class="text-left text-xs uppercase text-slate-500">
                            <tr>
                                <th class="pb-2 pr-4">Member</th>
                                <th class="pb-2 pr-4">Role</th>
                                <th class="pb-2 pr-4">Branch</th>
                                <th class="pb-2"></th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @foreach ($members as $member)
                                @php
                                    $display = str_contains($member->user_ref, '@')
                                        ? $member->user_ref
                                        : (\App\Models\User::where('public_id', $member->user_ref)->value('email') ?? $member->user_ref);
                                @endphp
                                <tr>
                                    <td class="py-3 pr-4">{{ $display }}</td>
                                    <td class="py-3 pr-4">{{ $roles[$member->role] ?? $member->role }}</td>
                                    <td class="py-3 pr-4">{{ $member->branch?->name ?? 'All branches' }}</td>
                                    <td class="py-3 text-right">
                                        @if ($canManageMembers && $member->user_ref !== auth()->user()->public_id)
                                            <x-confirm-dialog
                                                :name="'remove-member-'.$member->id"
                                                title="Remove this member?"
                                                message="They will lose access to this Frontdesk organization."
                                                :action="route('frontdesk.members.destroy', $member)"
                                                method="DELETE"
                                                confirm-label="Remove member"
                                            >
                                                <x-slot:trigger>
                                                    <button type="button" class="text-sm font-medium text-red-600 hover:text-red-800">Remove</button>
                                                </x-slot:trigger>
                                            </x-confirm-dialog>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </x-settings.card>
    </x-settings.page>
</x-app-layout>