@php
    $field = 'mt-1.5 block w-full min-h-11 rounded-xl border-0 bg-secondary/40 px-3 py-2.5 text-sm text-foreground shadow-sm ring-1 ring-inset ring-border focus:ring-2 focus:ring-ring';
    $card = 'rounded-2xl border border-border/60 bg-card/80 p-6 shadow-sm ring-1 ring-black/[0.04] backdrop-blur-sm dark:bg-card/90 dark:ring-white/[0.06] sm:p-8';
    $sectionIcon = 'flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-secondary/80 text-foreground ring-1 ring-border/60';
@endphp

<div class="mx-auto max-w-3xl px-4 pb-12 pt-6 sm:px-6 sm:pb-16 sm:pt-8 space-y-8 motion-safe:transition-[opacity,transform,filter] motion-safe:duration-300 motion-safe:ease-ios" wire:loading.class="app-livewire-syncing">
    <div class="flex flex-col gap-4 border-b border-border/50 pb-8 sm:flex-row sm:items-end sm:justify-between">
        <div>
            <p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{{ __('Workspace') }}</p>
            <h1 class="mt-1 text-2xl font-bold tracking-tight text-foreground sm:text-3xl">{{ __('Settings') }}</h1>
            <p class="mt-1.5 text-sm text-muted-foreground">{{ $workspace->name }}</p>
        </div>
        <a
            href="{{ route('collabs.board') }}"
            class="inline-flex items-center gap-1.5 self-start rounded-xl border border-border/80 bg-card px-4 py-2.5 text-sm font-medium text-foreground shadow-sm transition-colors hover:bg-secondary/60 sm:self-auto"
        >
            <svg class="h-4 w-4 shrink-0 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>
            {{ __('Back to board') }}
        </a>
    </div>

    @if($canUpdateWorkspace)
        <section class="{{ $card }}">
            <div class="flex gap-4">
                <div class="{{ $sectionIcon }}" aria-hidden="true">
                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/><rect width="20" height="14" x="2" y="6" rx="2"/></svg>
                </div>
                <div class="min-w-0 flex-1">
                    <h2 class="text-base font-semibold text-foreground">{{ __('Workspace name') }}</h2>
                    <p class="mt-1 text-sm text-muted-foreground leading-relaxed">{{ __('Shown in the app header and invites.') }}</p>
                    <form wire:submit="saveWorkspaceName" class="mt-5 flex flex-col gap-3 sm:flex-row sm:items-end">
                        <div class="min-w-0 flex-1">
                            <label for="workspaceName" class="sr-only">{{ __('Name') }}</label>
                            <input id="workspaceName" type="text" wire:model="workspaceName" class="{{ $field }}" />
                            @error('workspaceName') <p class="text-sm text-destructive mt-2">{{ $message }}</p> @enderror
                        </div>
                        <button type="submit" class="shrink-0 rounded-xl bg-foreground px-5 py-2.5 text-sm font-semibold text-primary-foreground shadow-sm transition-opacity hover:opacity-90 min-h-11 w-full sm:w-auto">{{ __('Save') }}</button>
                    </form>
                </div>
            </div>
        </section>
    @endif

    @if($canInvite)
        <section class="{{ $card }}">
            <div class="flex gap-4">
                <div class="{{ $sectionIcon }}" aria-hidden="true">
                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" x2="19" y1="8" y2="14"/><line x1="22" x2="16" y1="11" y2="11"/></svg>
                </div>
                <div class="min-w-0 flex-1">
                    <h2 class="text-base font-semibold text-foreground">{{ __('Invite member') }}</h2>
                    <p class="mt-1 text-sm text-muted-foreground leading-relaxed">{{ __('They must already have an account using the same email they registered with.') }}</p>

                    @if($inviteMessage)
                        <div class="mt-4 rounded-xl border border-success/30 bg-success/10 px-4 py-3 text-sm font-medium text-success" role="status">
                            {{ $inviteMessage }}
                        </div>
                    @endif
                    @if($inviteError)
                        <div class="mt-4 rounded-xl border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive" role="alert">
                            {{ $inviteError }}
                        </div>
                    @endif

                    <form wire:submit="invite" class="mt-5 space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-foreground">{{ __('Email') }}</label>
                            <input type="email" wire:model="inviteEmail" autocomplete="email" class="{{ $field }}" />
                            @error('inviteEmail') <p class="text-sm text-destructive mt-2">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-foreground">{{ __('Role') }}</label>
                            <select wire:model.live="inviteRole" class="{{ $field }}">
                                <option value="assistant">{{ __('Assistant') }}</option>
                                <option value="agency">{{ __('Agency') }}</option>
                                <option value="restaurant">{{ __('Restaurant') }}</option>
                            </select>
                        </div>
                        @if($inviteRole === 'assistant')
                            <div>
                                <label class="block text-sm font-medium text-foreground">{{ __('Assists influencer') }}</label>
                                <select wire:model="inviteAssistsUserId" class="{{ $field }}">
                                    <option value="">{{ __('Default (workspace owner)') }}</option>
                                    @foreach($influencerMembers as $im)
                                        <option value="{{ $im->user_id }}">{{ $im->user->name }} ({{ $im->user->email }})</option>
                                    @endforeach
                                </select>
                            </div>
                        @endif
                        @if($inviteRole === 'agency')
                            <div>
                                <label class="block text-sm font-medium text-foreground">{{ __('Paired restaurant (optional)') }}</label>
                                <select wire:model="invitePairedRestaurantUserId" class="{{ $field }}">
                                    <option value="">{{ __('Any / all in workspace') }}</option>
                                    @foreach($restaurantMembers as $rm)
                                        <option value="{{ $rm->user_id }}">{{ $rm->user->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        @endif
                        <button type="submit" class="rounded-xl bg-foreground px-5 py-2.5 text-sm font-semibold text-primary-foreground shadow-sm transition-opacity hover:opacity-90 min-h-11 w-full sm:w-auto">{{ __('Send invite') }}</button>
                    </form>
                </div>
            </div>
        </section>
    @endif

    <section class="{{ $card }} overflow-hidden p-0 sm:p-0">
        <div class="border-b border-border/60 bg-secondary/20 px-6 py-5 sm:px-8">
            <div class="flex items-start gap-4">
                <div class="{{ $sectionIcon }} bg-card" aria-hidden="true">
                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                </div>
                <div>
                    <h2 class="text-base font-semibold text-foreground">{{ __('Members') }}</h2>
                    <p class="mt-1 text-sm text-muted-foreground">{{ __('People with access to this workspace.') }}</p>
                </div>
            </div>
        </div>

        @error('member') <p class="text-sm text-destructive px-6 pt-4 sm:px-8">{{ $message }}</p> @enderror

        <div class="divide-y divide-border/50 sm:hidden">
            @foreach($members as $m)
                @php
                    $prof = $profilesById->get($m->user_id);
                @endphp
                <div class="px-6 py-4">
                    <div class="flex items-start justify-between gap-3">
                        <div class="min-w-0">
                            <p class="font-medium text-foreground">{{ $prof?->display_name ?? $m->user->name }}</p>
                            <p class="text-xs text-muted-foreground mt-0.5 break-all">{{ $m->user->email }}</p>
                            <span class="mt-2 inline-flex rounded-full bg-secondary px-2.5 py-0.5 text-xs font-medium text-secondary-foreground capitalize">{{ $m->role->value }}</span>
                        </div>
                        @if($canManageMembers && (int) $m->user_id !== (int) auth()->id() && (int) $m->user_id !== (int) $workspace->owner_id)
                            <button type="button" wire:click="removeMember({{ $m->id }})" wire:confirm="{{ __('Remove this member?') }}" class="shrink-0 rounded-lg px-2 py-1 text-xs font-semibold text-destructive hover:bg-destructive/10">
                                {{ __('Remove') }}
                            </button>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>

        <div class="hidden overflow-x-auto sm:block">
            <table class="w-full min-w-[28rem] text-sm">
                <thead>
                    <tr class="border-b border-border/60 bg-secondary/10 text-left text-muted-foreground">
                        <th class="px-8 py-3.5 font-medium">{{ __('User') }}</th>
                        <th class="px-4 py-3.5 font-medium">{{ __('Role') }}</th>
                        <th class="w-24 px-8 py-3.5 font-medium"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-border/50">
                    @foreach($members as $m)
                        @php
                            $prof = $profilesById->get($m->user_id);
                        @endphp
                        <tr class="transition-colors hover:bg-secondary/20">
                            <td class="px-8 py-4">
                                <p class="font-medium text-foreground">{{ $prof?->display_name ?? $m->user->name }}</p>
                                <p class="text-xs text-muted-foreground mt-0.5">{{ $m->user->email }}</p>
                            </td>
                            <td class="px-4 py-4">
                                <span class="inline-flex rounded-full bg-secondary px-2.5 py-0.5 text-xs font-medium text-secondary-foreground capitalize">{{ $m->role->value }}</span>
                            </td>
                            <td class="px-8 py-4 text-right">
                                @if($canManageMembers && (int) $m->user_id !== (int) auth()->id() && (int) $m->user_id !== (int) $workspace->owner_id)
                                    <button type="button" wire:click="removeMember({{ $m->id }})" wire:confirm="{{ __('Remove this member?') }}" class="text-xs font-semibold text-destructive hover:underline">
                                        {{ __('Remove') }}
                                    </button>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </section>
</div>