@php
    $reason = $reason ?? 'schedule';
    $nextSchedule = $nextSchedule ?? null;
    $boothName = $booth?->booth_name ?: 'Photo Booth';
    $eventLabel = trim((string) ($nextSchedule?->event_name ?? ''));
@endphp

<x-layouts.booth title="Booth Unavailable" :user="$user">
    <section class="relative flex h-full w-full items-center justify-center px-6 py-10">
        <div class="absolute inset-0 bg-[radial-gradient(circle_at_10%_10%,rgba(239,68,68,0.25),transparent_40%),radial-gradient(circle_at_90%_90%,rgba(245,158,11,0.18),transparent_35%),linear-gradient(160deg,#020617,#0f172a)]"></div>

        <div class="relative w-full max-w-xl rounded-3xl border border-rose-300/35 bg-slate-950/75 p-8 text-center shadow-2xl backdrop-blur-xl sm:p-10">
            @if($reason === 'blocked')
                <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl border border-rose-300/40 bg-rose-500/20 text-rose-100">
                    <svg class="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M12 3 4 7v6c0 5 3.5 8 8 8s8-3 8-8V7l-8-4z"></path>
                        <path d="M9 9 15 15"></path>
                        <path d="m15 9-6 6"></path>
                    </svg>
                </div>

                <p class="mt-6 text-xs uppercase tracking-[0.3em] text-rose-100/70">Access Restricted</p>
                <h1 class="mt-3 text-3xl font-semibold text-white sm:text-4xl">This booth is currently unavailable</h1>
                <p class="mt-4 text-sm leading-relaxed text-slate-200/80 sm:text-base">
                    This account is temporarily blocked, so photo booth sessions are disabled right now.
                    Please contact support or the booth owner for assistance.
                </p>
            @else
                <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl border border-amber-300/40 bg-amber-500/20 text-amber-100">
                    <svg class="h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M21 12a9 9 0 1 1-9-9"></path>
                        <path d="M12 7v6l3 3"></path>
                    </svg>
                </div>

                <p class="mt-6 text-xs uppercase tracking-[0.3em] text-amber-100/70">Available Soon</p>
                <h1 class="mt-3 text-3xl font-semibold text-white sm:text-4xl">This booth is currently unavailable</h1>

                @if($nextSchedule)
                    <p class="mt-4 text-sm leading-relaxed text-slate-200/80 sm:text-base">
                        <span
                            class="text-slate-200/90"
                            data-local-schedule-window
                            data-start-utc="{{ $nextSchedule->start_time?->toIso8601String() }}"
                            data-end-utc="{{ $nextSchedule->end_time?->toIso8601String() }}"
                            data-event-name="{{ $eventLabel !== '' ? $eventLabel : $boothName }}"
                        >
                            Next session: {{ $eventLabel !== '' ? $eventLabel : $boothName }} on
                            {{ $nextSchedule->start_time?->copy()->timezone('UTC')->format('M d, Y') }} from
                            {{ $nextSchedule->start_time?->copy()->timezone('UTC')->format('H:i') }} to
                            {{ $nextSchedule->end_time?->copy()->timezone('UTC')->format('H:i') }} (UTC)
                        </span>
                    </p>
                @else
                    <p class="mt-4 text-sm leading-relaxed text-slate-200/80 sm:text-base">
                        No upcoming sessions scheduled. Please check back later.
                    </p>
                @endif
            @endif

            <div class="mt-7 rounded-2xl border border-white/15 bg-white/5 px-4 py-3 text-xs uppercase tracking-[0.2em] text-slate-200/70">
                {{ $user->company_name ?: $user->name }}
            </div>
        </div>
    </section>

    @push('scripts')
        <script>
            window.addEventListener('DOMContentLoaded', () => {
                const formatterDate = new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' });
                const formatterTime = new Intl.DateTimeFormat(undefined, { timeStyle: 'short' });
                const localZone = Intl.DateTimeFormat().resolvedOptions().timeZone || 'local time';

                document.querySelectorAll('[data-local-schedule-window]').forEach((element) => {
                    const startUtc = element.getAttribute('data-start-utc');
                    const endUtc = element.getAttribute('data-end-utc');
                    const eventName = element.getAttribute('data-event-name') || 'Session';

                    if (!startUtc || !endUtc) {
                        element.textContent = 'No upcoming sessions scheduled. Please check back later.';
                        return;
                    }

                    const startDate = new Date(startUtc);
                    const endDate = new Date(endUtc);

                    if (Number.isNaN(startDate.getTime()) || Number.isNaN(endDate.getTime())) {
                        element.textContent = 'Schedule details are temporarily unavailable.';
                        return;
                    }

                    element.textContent = `Next session: ${eventName} on ${formatterDate.format(startDate)} from ${formatterTime.format(startDate)} to ${formatterTime.format(endDate)} (${localZone})`;
                });
            });
        </script>
    @endpush
</x-layouts.booth>