{{--
    Polls every 5 seconds while payment is outstanding, and stops entirely
    once the booking settles. The countdown is the reason: everything on this
    screen is true for at most thirty minutes, and a customer must never sit
    on a dead page believing their slot is still theirs.
--}}
<div class="mx-auto max-w-2xl px-4 sm:px-6 py-10"
     @if (! $this->isSettled && ! $this->isExpired) wire:poll.5s="refreshStatus" @endif>

    <h1 class="text-3xl uppercase tracking-wide text-stone-100">
        @if ($this->isSettled) You're booked
        @elseif ($this->isExpired) Slot released
        @elseif ($this->awaitingReview) Checking your payment
        @else Pay to confirm
        @endif
    </h1>

    <div class="mt-6 rounded-lg border border-ink-700 bg-ink-900 p-5">
        <div class="flex flex-wrap justify-between gap-4">
            <div>
                <div class="text-stone-100 font-semibold">{{ $this->startsAtLabel }} &ndash; {{ $this->endsAtLabel }}</div>
                <div class="text-sm text-stone-400 mt-1">
                    {{ $booking->room->name }} · {{ $booking->type->getLabel() }}
                </div>
                {{-- Always visible, not just on the transfer route: this is
                     what the customer quotes when they ring the studio. --}}
                <div class="mt-2 font-mono text-xs text-stone-500">{{ $booking->reference }}</div>
            </div>
            <div class="text-right">
                <div class="text-3xl font-mono text-amber-400 tabular-nums">£{{ $booking->price_total }}</div>
            </div>
        </div>
    </div>

    @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

    @if ($this->isSettled)
        <div class="mt-6 rounded-lg border border-emerald-500/40 bg-emerald-500/10 p-5">
            <p class="text-emerald-200 font-semibold">Your session is confirmed.</p>
            <p class="mt-2 text-sm text-emerald-100/80">
                We have emailed the details. See you at the studio.
            </p>
            <a href="{{ route('account') }}" class="mt-4 inline-block text-sm text-amber-400 hover:underline">
                Back to my account
            </a>
        </div>

    @elseif ($this->isExpired)
        <div class="mt-6 rounded-lg border border-red-500/40 bg-red-500/10 p-5">
            <p class="text-red-200 font-semibold">This slot went back on sale.</p>
            <p class="mt-2 text-sm text-red-100/80">
                Payment was not completed in time. Nothing has been charged.
            </p>
            <a href="{{ route('book') }}" class="mt-4 inline-block text-sm text-amber-400 hover:underline">
                Book another time
            </a>
        </div>

    @elseif ($this->awaitingReview)
        <div class="mt-6 rounded-lg border border-sky-500/40 bg-sky-500/10 p-5">
            <p class="text-sky-100 font-semibold">We have your payment proof.</p>
            <p class="mt-2 text-sm text-sky-100/80">
                The studio checks transfers against the bank statement and will
                confirm shortly. Your slot is held in the meantime — the
                countdown has stopped.
            </p>
        </div>

    @else
        {{-- Countdown --}}
        <div class="mt-6 rounded-lg border border-amber-500/40 bg-amber-500/10 p-5 text-center"
             wire:key="countdown-{{ $this->secondsRemaining }}">
            <div class="text-xs font-mono uppercase tracking-widest text-amber-300">Slot reserved for</div>
            <div class="mt-1 text-4xl font-mono font-bold tabular-nums text-amber-300"
                 x-data="{
                     left: @js($this->secondsRemaining),
                     init() {
                         // Ticks locally so the number moves every second,
                         // but the server is the authority — each poll
                         // overwrites this with the real remaining time.
                         setInterval(() => { if (this.left > 0) this.left-- }, 1000)
                     },
                     get display() {
                         const m = Math.floor(this.left / 60), s = this.left % 60
                         return `${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`
                     }
                 }"
                 x-text="display">{{ gmdate('i:s', $this->secondsRemaining) }}</div>
            <p class="mt-2 text-xs text-amber-200/70">
                If the timer runs out, this slot goes back on sale.
            </p>
        </div>

        {{-- Card: the route that confirms itself --}}
        <div class="mt-6 rounded-lg border-2 border-amber-500 bg-ink-900 p-5">
            <div class="text-xs font-mono uppercase tracking-widest text-amber-400">
                Fastest — confirms instantly
            </div>
            <button type="button" wire:click="payByCard" wire:loading.attr="disabled"
                class="mt-3 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="payByCard">Pay by card or Apple Pay</span>
                <span wire:loading wire:target="payByCard">Opening secure page&hellip;</span>
            </button>
            <p class="mt-3 text-xs text-stone-500">
                Secure Revolut page. Your booking confirms the moment it clears.
            </p>
        </div>

        {{-- Transfer: the route that needs a human --}}
        <div class="mt-4 rounded-lg border border-ink-700 bg-ink-900 p-5">
            <button type="button" wire:click="$toggle('showTransfer')"
                    class="w-full text-left text-sm text-stone-300 hover:text-stone-100">
                Or pay by bank transfer — confirmed within 24 hours
                <span class="float-right text-stone-500">{{ $showTransfer ? '−' : '+' }}</span>
            </button>

            @if ($showTransfer)
                <div class="mt-4 space-y-3 text-sm">
                    <div class="flex justify-between gap-4">
                        <span class="text-stone-500">Account name</span>
                        <span class="font-mono text-stone-100 text-right">
                            {{ $this->bankDetails['name'] }}
                            <span class="block text-xs text-stone-500">{{ config('studio.bank.name_note') }}</span>
                        </span>
                    </div>
                    <div class="flex justify-between gap-4">
                        <span class="text-stone-500">Account number</span>
                        <span class="font-mono text-stone-100">{{ $this->bankDetails['number'] }}</span>
                    </div>
                    <div class="flex justify-between gap-4">
                        <span class="text-stone-500">Sort code</span>
                        <span class="font-mono text-stone-100">{{ $this->bankDetails['sort'] }}</span>
                    </div>

                    {{-- The reference is the thing that gets fat-fingered, so
                         it sits alone rather than buried in the block above. --}}
                    <div class="rounded-md border border-amber-500/40 bg-amber-500/5 p-3">
                        <div class="text-xs font-mono uppercase tracking-widest text-amber-400">
                            Reference — must match exactly
                        </div>
                        <div class="mt-1 font-mono text-lg font-bold text-amber-300 break-all"
                             x-data="{ copied: false }">
                            <span x-ref="ref">{{ $booking->reference }}</span>
                            <button type="button" class="ml-2 text-xs text-stone-400 hover:text-stone-200"
                                    x-on:click="navigator.clipboard.writeText($refs.ref.textContent.trim()); copied = true; setTimeout(() => copied = false, 2000)">
                                <span x-show="! copied">Copy</span>
                                <span x-show="copied" x-cloak class="text-amber-400">Copied</span>
                            </button>
                        </div>
                        <p class="mt-1 text-xs text-stone-500">
                            A different reference will delay confirmation.
                        </p>
                    </div>

                    <div class="pt-2">
                        <label class="block text-xs font-mono uppercase tracking-widest text-stone-500">
                            Screenshot of your payment — optional
                        </label>
                        <input type="file" wire:model="proof" accept="image/*"
                               class="mt-2 block w-full text-sm text-stone-400
                                      file:mr-3 file:rounded-md file:border-0 file:bg-ink-700
                                      file:px-3 file:py-2 file:text-sm file:text-stone-200">
                        @error('proof')
                            <p class="mt-1 text-xs text-red-300">{{ $message }}</p>
                        @enderror

                        <button type="button" wire:click="submitTransfer" wire:loading.attr="disabled"
                            class="mt-3 w-full rounded-lg border border-ink-600 px-4 py-3 text-sm font-semibold
                                   uppercase tracking-wide text-stone-200 hover:border-amber-500 disabled:opacity-60">
                            <span wire:loading.remove wire:target="submitTransfer,proof">I have sent the payment</span>
                            <span wire:loading wire:target="submitTransfer,proof">Uploading&hellip;</span>
                        </button>
                    </div>
                </div>
            @endif
        </div>
    @endif
</div>