<div class="mx-auto max-w-5xl px-4 sm:px-6 py-10">

    <h1 class="text-3xl uppercase tracking-wide text-stone-100">Book a session</h1>
    <p class="mt-2 text-stone-400">Sessions need {{ $this->room?->lead_time_hours ?? 24 }} hours notice.</p>

    @if ($error)
        <div class="mt-6 rounded-md border border-red-500/40 bg-red-500/10 px-4 py-3 text-sm text-red-200">
            {{ $error }}
        </div>
    @endif

    {{-- Room --}}
    <section class="mt-8">
        <h2 class="text-xs font-mono uppercase tracking-widest text-stone-500">Room</h2>
        <div class="mt-3 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
            @foreach ($this->rooms as $room)
                <button type="button" wire:click="selectRoom({{ $room->id }})"
                    class="text-left rounded-lg border p-4 transition
                        {{ $roomId === $room->id && ! $experienceId
                            ? 'border-amber-500 bg-amber-500/10'
                            : 'border-ink-700 hover:border-ink-600 bg-ink-900' }}">
                    <div class="font-semibold text-stone-100">{{ $room->name }}</div>
                    <div class="mt-1 text-xs text-stone-400">{{ $room->description }}</div>
                    <div class="mt-3 text-sm font-mono text-amber-400">
                        @if ($room->isDayRate())
                            £{{ number_format((float) $room->day_rate, 0) }} / {{ $room->day_length_hours }}h day
                        @else
                            £{{ number_format((float) $room->hourly_rate, 0) }}/hr
                        @endif
                    </div>
                </button>
            @endforeach
        </div>
    </section>

    {{-- Experiences --}}
    @if ($this->experiences->isNotEmpty())
        <section class="mt-6">
            <h2 class="text-xs font-mono uppercase tracking-widest text-stone-500">Or an experience</h2>
            <div class="mt-3 grid gap-3 sm:grid-cols-2">
                @foreach ($this->experiences as $experience)
                    <button type="button" wire:click="selectExperience({{ $experience->id }})"
                        class="text-left rounded-lg border p-4 transition
                            {{ $experienceId === $experience->id
                                ? 'border-amber-500 bg-amber-500/10'
                                : 'border-ink-700 hover:border-ink-600 bg-ink-900' }}">
                        <div class="font-semibold text-stone-100">{{ $experience->name }}</div>
                        <div class="mt-1 text-xs text-stone-400">{{ $experience->summary }}</div>
                        <div class="mt-3 text-sm font-mono text-amber-400">
                            From £{{ number_format((float) $experience->base_price, 0) }}
                            · {{ $experience->duration_hours }}h in {{ $experience->room->name }}
                        </div>
                    </button>
                @endforeach
            </div>
        </section>
    @endif

    {{-- Session type: only where an engineer is actually on offer --}}
    @if ($this->room?->takes_engineer && ! $experienceId && ! $this->room->isDayRate())
        <section class="mt-8">
            <h2 class="text-xs font-mono uppercase tracking-widest text-stone-500">Session type</h2>
            <div class="mt-3 flex flex-wrap gap-3">
                @foreach ([
                    \App\Enums\SessionType::WithEngineer,
                    \App\Enums\SessionType::WithoutEngineer,
                ] as $type)
                    <button type="button" wire:click="selectSessionType('{{ $type->value }}')"
                        class="rounded-lg border px-4 py-3 text-sm transition
                            {{ $sessionType === $type->value
                                ? 'border-amber-500 bg-amber-500/10 text-stone-100'
                                : 'border-ink-700 bg-ink-900 text-stone-300 hover:border-ink-600' }}">
                        {{ $type->getLabel() }}
                        <span class="ml-2 font-mono text-amber-400">
                            £{{ number_format((float) $this->room->rateFor($type), 0) }}/hr
                        </span>
                    </button>
                @endforeach
            </div>
        </section>
    @endif

    {{-- Add-ons --}}
    @if ($this->roomAddons->isNotEmpty() && ! $experienceId)
        <section class="mt-8">
            <h2 class="text-xs font-mono uppercase tracking-widest text-stone-500">Extras</h2>
            <div class="mt-3 flex flex-wrap gap-3">
                @foreach ($this->roomAddons as $addon)
                    <button type="button" wire:click="toggleAddon({{ $addon->id }})"
                        class="rounded-lg border px-4 py-3 text-sm transition
                            {{ isset($addons[$addon->id])
                                ? 'border-amber-500 bg-amber-500/10 text-stone-100'
                                : 'border-ink-700 bg-ink-900 text-stone-300 hover:border-ink-600' }}">
                        {{ $addon->name }}
                        <span class="ml-2 font-mono text-amber-400">
                            +£{{ number_format((float) $addon->price, 0) }}{{ $addon->isPerHour() ? '/hr' : '' }}
                        </span>
                    </button>
                @endforeach
            </div>
        </section>
    @endif

    {{-- Package --}}
    @if ($this->availablePackage)
        <section class="mt-8">
            <label class="flex items-start gap-3 rounded-lg border border-ink-700 bg-ink-900 p-4 cursor-pointer">
                <input type="checkbox" wire:model.live="usePackage"
                       class="mt-1 rounded border-ink-600 bg-ink-800 text-amber-500 focus:ring-amber-500">
                <span class="text-sm">
                    <span class="font-semibold text-stone-100">
                        Use my {{ $this->availablePackage->package->name }} package
                    </span>
                    <span class="block text-stone-400 mt-1">
                        {{ rtrim(rtrim(number_format($this->availablePackage->studioHoursRemaining(), 1), '0'), '.') }} studio hours
                        and {{ rtrim(rtrim(number_format($this->availablePackage->engineerHoursRemaining(), 1), '0'), '.') }} engineer hours left,
                        expiring {{ $this->availablePackage->expires_at->setTimezone(config('studio.timezone'))->format('j M Y') }}.
                    </span>
                </span>
            </label>
        </section>
    @endif

    {{-- Date --}}
    <section class="mt-8">
        <h2 class="text-xs font-mono uppercase tracking-widest text-stone-500">Date</h2>
        <input type="date" wire:model.live="date" min="{{ $this->minDate }}"
               class="mt-3 rounded-lg border-ink-700 bg-ink-900 text-stone-100 focus:border-amber-500 focus:ring-amber-500">
    </section>

    {{-- Times --}}
    <section class="mt-8">
        <h2 class="text-xs font-mono uppercase tracking-widest text-stone-500">
            {{ $this->room?->isDayRate() && ! $experienceId ? 'Start of day' : 'Start time' }}
        </h2>

        @php $bookable = collect($this->grid)->filter(fn ($slot) => $slot->isAvailable()); @endphp

        @if ($bookable->isEmpty())
            <p class="mt-3 rounded-lg border border-ink-700 bg-ink-900 p-4 text-sm text-stone-400">
                Nothing free in {{ $this->room?->name }} on this date. Try another day.
            </p>
        @else
            <div class="mt-3 grid grid-cols-4 sm:grid-cols-6 lg:grid-cols-8 gap-2">
                @foreach ($this->grid as $slot)
                    <button type="button"
                        @disabled(! $slot->isAvailable())
                        @if ($slot->isAvailable()) wire:click="selectSlot('{{ $slot->startsAt->toIso8601String() }}')" @endif
                        title="{{ $slot->state->reason() }}"
                        class="rounded-md border px-2 py-2 text-xs font-mono tabular-nums transition
                            {{ $startsAt === $slot->startsAt->toIso8601String()
                                ? 'border-amber-500 bg-amber-500 text-ink-950 font-bold'
                                : ($slot->isAvailable()
                                    ? 'border-ink-600 bg-ink-900 text-stone-200 hover:border-amber-500'
                                    : 'border-ink-800 bg-ink-900/40 text-stone-600 line-through cursor-not-allowed') }}">
                        {{ $slot->label() }}
                    </button>
                @endforeach
            </div>
            <p class="mt-2 text-xs text-stone-500">
                Struck-through times are unavailable. Hover for the reason.
            </p>
        @endif
    </section>

    {{-- Duration --}}
    @if ($startsAt && ! $this->room?->isDayRate() && ! $experienceId)
        <section class="mt-8">
            <h2 class="text-xs font-mono uppercase tracking-widest text-stone-500">
                How long — minimum {{ $this->room?->min_hours }} hours
            </h2>
            <div class="mt-3 flex items-center gap-4">
                <button type="button" wire:click="changeDuration(-1)"
                        class="h-10 w-10 rounded-lg border border-ink-600 bg-ink-900 text-lg hover:border-amber-500">&minus;</button>
                <div class="font-mono text-xl text-stone-100 tabular-nums w-24 text-center">
                    {{ rtrim(rtrim(number_format($this->hours, 1), '0'), '.') }} hours
                </div>
                <button type="button" wire:click="changeDuration(1)"
                        class="h-10 w-10 rounded-lg border border-ink-600 bg-ink-900 text-lg hover:border-amber-500">+</button>
            </div>
        </section>
    @endif

    {{-- Guests --}}
    @if ($experienceId && $this->experience)
        <section class="mt-8">
            <h2 class="text-xs font-mono uppercase tracking-widest text-stone-500">Guests</h2>
            <input type="number" wire:model.live="guestCount"
                   min="1" max="{{ $this->experience->max_guests }}"
                   class="mt-3 w-28 rounded-lg border-ink-700 bg-ink-900 text-stone-100 focus:border-amber-500 focus:ring-amber-500">
            <p class="mt-2 text-xs text-stone-500">
                {{ $this->experience->included_guests }} included, then
                £{{ number_format((float) $this->experience->extra_guest_price, 0) }} each,
                up to {{ $this->experience->max_guests }}.
            </p>
        </section>
    @endif

    {{-- Preferred engineer --}}
    @if ($startsAt && $sessionType === \App\Enums\SessionType::WithEngineer->value && $this->room?->takes_engineer)
        <section class="mt-8">
            <h2 class="text-xs font-mono uppercase tracking-widest text-stone-500">Preferred engineer — optional</h2>
            <div class="mt-3 flex flex-wrap gap-2">
                <button type="button" wire:click="$set('preferredEngineerId', null)"
                    class="rounded-lg border px-3 py-2 text-sm
                        {{ $preferredEngineerId === null ? 'border-amber-500 bg-amber-500/10' : 'border-ink-700 bg-ink-900' }}">
                    No preference
                </button>
                @foreach ($this->engineers as $engineer)
                    <button type="button" wire:click="$set('preferredEngineerId', {{ $engineer->id }})"
                        class="rounded-lg border px-3 py-2 text-sm
                            {{ $preferredEngineerId === $engineer->id ? 'border-amber-500 bg-amber-500/10' : 'border-ink-700 bg-ink-900' }}">
                        {{ $engineer->name }}
                    </button>
                @endforeach
            </div>
            <p class="mt-2 text-xs text-stone-500">
                We will do our best. Your slot is confirmed either way.
            </p>
        </section>
    @endif

    {{-- Summary --}}
    @if ($startsAt && $this->selectedSlot)
        <section class="mt-10 rounded-lg border border-ink-700 bg-ink-900 p-5">
            <div class="flex flex-wrap items-baseline justify-between gap-3">
                <div>
                    <div class="text-stone-100 font-semibold">
                        {{ $this->selectedSlot->startsAt->setTimezone(config('studio.timezone'))->format('l j F') }},
                        {{ $this->selectedSlot->label() }} &ndash; {{ $this->endsAtLabel }}
                    </div>
                    <div class="text-sm text-stone-400 mt-1">
                        {{ $this->room?->name }}
                        @if ($this->experience) · {{ $this->experience->name }} @endif
                    </div>
                </div>
                <div class="text-right">
                    @if ($this->quote?->paidByPackage && $this->quote->isFree())
                        <div class="text-2xl font-mono text-amber-400">On your package</div>
                    @else
                        <div class="text-3xl font-mono text-amber-400 tabular-nums">£{{ $this->quote?->total }}</div>
                    @endif
                </div>
            </div>

            <button type="button" wire:click="confirm" wire:loading.attr="disabled"
                class="mt-5 w-full rounded-lg bg-amber-500 px-4 py-3 font-semibold uppercase tracking-wide text-ink-950
                       hover:bg-amber-400 disabled:opacity-60">
                <span wire:loading.remove wire:target="confirm">Continue to payment</span>
                <span wire:loading wire:target="confirm">Holding your slot&hellip;</span>
            </button>

            <p class="mt-3 text-xs text-stone-500">
                Cancel 48 hours or more ahead for a full refund. Under 48 hours, 50%.
            </p>
        </section>
    @endif
</div>
