{{-- All tenant resolution happens inside Livewire\Settings\Team::resolveCurrentAccount(). --}}
<section class="w-full">
    @include('partials.settings-heading')

    <flux:heading class="sr-only">{{ __('Team settings') }}</flux:heading>

    <x-settings.layout
        :heading="__('Team')"
        :subheading="__('Manage who can access this workspace.')"
        content-class="max-w-3xl"
    >
        <div class="flex flex-col gap-10">
            {{-- Invite a teammate card. Owners/admins only. --}}
            @if ($this->canManage)
                <section data-test="invite-card">
                    <div class="rounded-xl border border-neutral-200 bg-white p-6 dark:border-neutral-700 dark:bg-zinc-900">
                        <div class="flex flex-col gap-1">
                            <flux:heading size="lg">{{ __('Invite a teammate') }}</flux:heading>
                            <flux:subheading>{{ __('They\'ll receive an email with a link to join this workspace.') }}</flux:subheading>
                        </div>

                        <form
                            wire:submit="inviteMember"
                            class="mt-5 grid grid-cols-1 gap-3 sm:grid-cols-[minmax(0,1fr)_10rem_auto] sm:items-end"
                            data-test="invite-form"
                        >
                            <flux:input
                                wire:model="inviteEmail"
                                :label="__('Email')"
                                type="email"
                                required
                                autocomplete="off"
                                placeholder="name@example.com"
                                data-test="invite-email"
                            />

                            <flux:select wire:model="inviteRole" :label="__('Role')" data-test="invite-role">
                                @foreach ($this->assignableRoles as $role)
                                    <flux:select.option :value="$role" data-test="invite-role-option-{{ $role }}">
                                        {{ ucfirst($role) }}
                                    </flux:select.option>
                                @endforeach
                            </flux:select>

                            <flux:button
                                variant="primary"
                                type="submit"
                                class="w-full sm:w-auto"
                                data-test="invite-submit"
                            >
                                {{ __('Send invitation') }}
                            </flux:button>
                        </form>
                    </div>
                </section>
            @endif

            {{-- Members list --}}
            <section>
                <div class="flex flex-col gap-1">
                    <flux:heading size="lg">{{ __('Members') }}</flux:heading>
                    <flux:subheading>{{ __('People who currently have access to this workspace.') }}</flux:subheading>
                </div>

                <div class="mt-4 overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
                    <table class="w-full text-sm" data-test="members-table">
                        <thead class="bg-zinc-50 text-left text-xs uppercase tracking-wide text-zinc-500 dark:bg-zinc-900 dark:text-zinc-400">
                            <tr>
                                <th class="px-4 py-3">{{ __('Name') }}</th>
                                <th class="px-4 py-3">{{ __('Email') }}</th>
                                <th class="px-4 py-3 w-44">{{ __('Role') }}</th>
                                <th class="px-4 py-3 text-right whitespace-nowrap">{{ __('Joined') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">
                            @foreach ($this->members as $member)
                                <tr data-test="member-row" data-member-id="{{ $member->id }}">
                                    <td class="px-4 py-3 font-medium" data-test="member-name">
                                        {{ $member->name }}
                                        @if ($member->id === auth()->id())
                                            <span class="ml-1 text-xs text-zinc-500">({{ __('you') }})</span>
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 text-zinc-500 dark:text-zinc-400" data-test="member-email">{{ $member->email }}</td>
                                    <td class="px-4 py-3" data-test="member-role">
                                        @if ($this->canManage && $member->pivot->role !== \App\Models\Account::ROLE_OWNER)
                                            {{-- Role-change dropdown for non-owners. Owners
                                                 are a fixed badge — ownership transfer is a
                                                 separate future flow.

                                                 Each menu item hard-codes the target role
                                                 into wire:click, so the new role is sent
                                                 to Livewire as an unambiguous string —
                                                 no client-side event-value extraction,
                                                 which is unreliable across custom Flux
                                                 inputs. --}}
                                            <flux:dropdown align="start" data-test="member-role-dropdown">
                                                <flux:button
                                                    size="sm"
                                                    variant="ghost"
                                                    icon:trailing="chevron-down"
                                                    data-test="member-role-trigger"
                                                >
                                                    {{ ucfirst($member->pivot->role) }}
                                                </flux:button>

                                                <flux:menu>
                                                    @foreach ($this->assignableRoles as $role)
                                                        @if ($role !== $member->pivot->role)
                                                            <flux:menu.item
                                                                wire:click="changeMemberRole({{ $member->id }}, '{{ $role }}')"
                                                                data-test="member-role-option"
                                                                data-role="{{ $role }}"
                                                            >
                                                                {{ __('Change to :role', ['role' => ucfirst($role)]) }}
                                                            </flux:menu.item>
                                                        @endif
                                                    @endforeach
                                                </flux:menu>
                                            </flux:dropdown>
                                        @else
                                            <flux:badge
                                                size="sm"
                                                :color="$member->pivot->role === \App\Models\Account::ROLE_OWNER ? 'amber' : 'zinc'"
                                            >
                                                {{ ucfirst($member->pivot->role) }}
                                            </flux:badge>
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 text-right text-xs text-zinc-500 dark:text-zinc-400 whitespace-nowrap">
                                        @if ($member->pivot->joined_at)
                                            {{ \Illuminate\Support\Carbon::parse($member->pivot->joined_at)->format('M j, Y') }}
                                        @else
                                            —
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </section>

            {{-- Pending invitations: owners/admins only --}}
            @if ($this->canManage)
                <section>
                    <div class="flex flex-col gap-1">
                        <flux:heading size="lg">{{ __('Pending invitations') }}</flux:heading>
                        <flux:subheading>{{ __('Invitations that haven\'t been accepted yet.') }}</flux:subheading>
                    </div>

                    <div class="mt-4 overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
                        <table class="w-full text-sm" data-test="invitations-table">
                            <thead class="bg-zinc-50 text-left text-xs uppercase tracking-wide text-zinc-500 dark:bg-zinc-900 dark:text-zinc-400">
                                <tr>
                                    <th class="px-4 py-3">{{ __('Email') }}</th>
                                    <th class="px-4 py-3 w-28">{{ __('Role') }}</th>
                                    <th class="px-4 py-3 whitespace-nowrap">{{ __('Expires') }}</th>
                                    <th class="px-4 py-3 text-right whitespace-nowrap">{{ __('Actions') }}</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">
                                @forelse ($this->pendingInvitations as $invitation)
                                    <tr data-test="invitation-row" data-invitation-id="{{ $invitation->id }}">
                                        <td class="px-4 py-3 font-medium" data-test="invitation-email">{{ $invitation->email }}</td>
                                        <td class="px-4 py-3" data-test="invitation-role">
                                            <flux:badge size="sm" color="zinc">{{ ucfirst($invitation->role) }}</flux:badge>
                                        </td>
                                        <td class="px-4 py-3 text-xs text-zinc-500 dark:text-zinc-400 whitespace-nowrap">
                                            {{ $invitation->expires_at?->diffForHumans() ?? __('never') }}
                                        </td>
                                        <td class="px-4 py-3 text-right">
                                            <flux:button
                                                size="sm"
                                                variant="ghost"
                                                wire:click="cancelInvitation({{ $invitation->id }})"
                                                wire:confirm="{{ __('Cancel this invitation?') }}"
                                                data-test="invitation-cancel"
                                            >
                                                {{ __('Cancel') }}
                                            </flux:button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="px-4 py-8 text-center text-zinc-500 dark:text-zinc-400" data-test="invitations-empty">
                                            {{ __('No pending invitations.') }}
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </section>
            @endif
        </div>
    </x-settings.layout>
</section>