@php
    $mode = $mode ?? 'create';
    $isEdit = $mode === 'edit';
    $action = $isEdit ? route('admin.staff.update', $staff) : route('admin.staff.store');
    $selectedServiceIds = collect(old('service_ids', $selectedServiceIds ?? []))->map(fn ($id) => (int) $id)->all();
    $availabilityValue = old('availability_status', $staff->status === 'inactive' ? 'inactive' : ($staff->availability_status ?: 'available'));
@endphp

<form method="POST" action="{{ $action }}" enctype="multipart/form-data" class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_360px]">
    @csrf
    @if ($isEdit)
        @method('PUT')
    @endif

    <div class="space-y-5">
        <x-ui.card title="Staff Information">
            <div class="grid gap-4 sm:grid-cols-2">
                <x-form.input name="name" label="Full Name" :value="$staff->name" placeholder="Emma Wilson" />
                <x-form.input name="role" label="Role / Title" :value="$staff->role" placeholder="Senior Stylist" />
                <x-form.input name="email" label="Email" type="email" :value="$staff->email" placeholder="emma@example.com" />
                <x-form.input name="phone" label="Phone" :value="$staff->phone" placeholder="(555) 123-4567" />
                <x-form.select name="availability_status" label="Availability Status" :value="$availabilityValue" :options="\App\Models\StaffProfile::AVAILABILITY_STATUSES" />
                <x-form.select name="calendar_color" label="Calendar Color" :value="$staff->color ?: '#2563EB'" :options="[
                    '#2563EB' => 'Blue',
                    '#10B981' => 'Green',
                    '#8B5CF6' => 'Purple',
                    '#F59E0B' => 'Amber',
                ]" />
                <x-form.textarea name="bio" label="Bio / Notes" :value="$staff->bio" class="sm:col-span-2" placeholder="Short internal note or public bio for this staff member..." rows="5" />
            </div>
        </x-ui.card>

        <x-ui.card title="Assigned Services">
            @error('service_ids')
                <p class="mb-3 text-xs font-semibold text-red-600">{{ $message }}</p>
            @enderror
            @if ($services->isNotEmpty())
                <div class="grid gap-3 sm:grid-cols-2">
                    @foreach ($services as $service)
                        <label class="flex cursor-pointer items-center justify-between gap-3 rounded-lg border border-booklio-border bg-white px-4 py-3 transition hover:border-blue-200 hover:bg-blue-50/40">
                            <span class="min-w-0 truncate text-sm font-bold text-booklio-dark">{{ $service->name }}</span>
                            <input name="service_ids[]" value="{{ $service->id }}" type="checkbox" @checked(in_array($service->id, $selectedServiceIds, true)) class="h-4 w-4 shrink-0 rounded border-booklio-border text-booklio-primary focus:ring-booklio-primary">
                        </label>
                    @endforeach
                </div>
            @else
                <div class="rounded-lg border border-dashed border-booklio-border bg-slate-50 p-5 text-sm font-medium text-booklio-muted">
                    Create services before assigning staff to them.
                </div>
            @endif
        </x-ui.card>
    </div>

    <div class="space-y-5">
        <x-ui.card title="Profile Image">
            <div class="flex aspect-square items-center justify-center overflow-hidden rounded-lg border border-dashed border-blue-200 bg-blue-50 text-booklio-primary">
                @if ($staff->avatar_url)
                    <img src="{{ $staff->avatar_url }}" alt="{{ $staff->name }}" class="h-full w-full object-cover">
                @else
                    <div class="text-center">
                        <div class="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-white text-xl font-extrabold text-booklio-primary shadow-soft">
                            {{ $staff->initials }}
                        </div>
                        <p class="mt-4 text-sm font-bold">Upload profile image</p>
                        <p class="mt-1 text-xs font-medium text-booklio-muted">Square JPG or PNG recommended</p>
                    </div>
                @endif
            </div>
            <input name="avatar" type="file" accept="image/*" class="mt-4 block w-full text-sm font-medium text-slate-600 file:mr-4 file:rounded-lg file:border-0 file:bg-blue-50 file:px-4 file:py-2 file:text-sm file:font-bold file:text-booklio-primary">
            @error('avatar')
                <p class="mt-1.5 text-xs font-semibold text-red-600">{{ $message }}</p>
            @enderror
        </x-ui.card>

        <x-ui.card title="Quick Stats Preview">
            <div class="grid gap-3">
                <div class="flex items-center justify-between rounded-lg bg-slate-50 px-4 py-3">
                    <span class="text-sm font-bold text-booklio-muted">Today appointments</span>
                    <span class="text-sm font-extrabold">{{ $staff->today_appointments_count ?? 0 }}</span>
                </div>
                <div class="flex items-center justify-between rounded-lg bg-slate-50 px-4 py-3">
                    <span class="text-sm font-bold text-booklio-muted">This month</span>
                    <span class="text-sm font-extrabold">{{ $staff->month_appointments_count ?? 0 }}</span>
                </div>
                <div class="flex items-center justify-between rounded-lg bg-slate-50 px-4 py-3">
                    <span class="text-sm font-bold text-booklio-muted">Rating</span>
                    <span class="text-sm font-extrabold">{{ $staff->rating_display }}</span>
                </div>
            </div>
        </x-ui.card>

        <div class="grid gap-3">
            <x-ui.button type="submit">{{ $isEdit ? 'Update Staff' : 'Save Staff' }}</x-ui.button>
            <x-ui.button variant="secondary" href="{{ route('admin.staff.index') }}">Cancel</x-ui.button>
        </div>
    </div>
</form>