@php
    $patient = $patient ?? null;
    $appointment = $appointment ?? null;
    $matches = $matches ?? collect();
    $patientQuery = $patientQuery ?? '';
    $channels = $channels ?? [];
    $load = $load ?? null;
    $submitLabel = $submitLabel ?? 'Book appointment';
    $action = $action ?? route('appointments.store');
    $method = $method ?? 'POST';
    $backRoute = $backRoute ?? route('appointments.index');
@endphp

@push('scripts')
<script>
    window.slotPicker = (config) => ({
        doctor: config.doctor || '',
        date: config.date || '',
        slot: config.slot || '',
        schedule: config.schedule || null,
        slots: config.slots || [],
        load: config.load || null,
        loading: false,
        canOverbook: config.canOverbook,

        get isFull() {
            return this.load !== null && this.load.max !== null && this.load.booked >= this.load.max;
        },

        get remaining() {
            return this.load && this.load.max !== null ? Math.max(0, this.load.max - this.load.booked) : null;
        },

        async refresh() {
            if (! this.date) {
                this.schedule = null;
                this.slots = [];
                this.load = null;
                return;
            }

            this.loading = true;

            try {
                const url = new URL(config.url, window.location.origin);
                if (this.doctor) url.searchParams.set('doctor_id', this.doctor);
                url.searchParams.set('date', this.date);

                const response = await fetch(url, { headers: { Accept: 'application/json' } });
                if (! response.ok) throw new Error('unavailable');

                const data = await response.json();
                this.schedule = data.schedule;
                this.slots = data.slots || [];
                this.load = data.load || null;

                if (this.slot && ! this.slots.some(s => s.time === this.slot)) this.slot = '';
            } catch (error) {
                this.schedule = null;
                this.slots = [];
                this.load = null;
            } finally {
                this.loading = false;
            }
        },
    });
</script>
@endpush

@if (! $patient)
    <x-card title="Find the patient" icon="search">
        <p class="mb-4 text-sm text-slate-600">
            Search the master patient index first. A booking is always made against an existing record —
            if the patient is new, register them before booking.
        </p>

        <form method="GET" action="{{ $action === route('appointments.store') ? route('appointments.create') : url()->current() }}"
              class="flex flex-wrap items-end gap-3">
            <div class="min-w-[18rem] flex-1">
                <x-form.input name="q" label="Search" placeholder="MRN, name, phone or national ID…"
                              :value="$patientQuery" autofocus />
            </div>
            <button type="submit" class="hms-btn-secondary">
                <x-icon name="search" size="sm" />
                Search
            </button>
        </form>

        @if ($patientQuery !== '')
            <div class="mt-4 border-t border-slate-200 pt-4">
                @if ($matches->isEmpty())
                    <div class="flex flex-wrap items-center justify-between gap-3 rounded-lg bg-amber-50 px-4 py-3 text-sm text-amber-800">
                        <span>Nothing on file matches “{{ $patientQuery }}”.</span>
                        @can('patients.create')
                            <a href="{{ route('patients.create', ['q' => $patientQuery]) }}" class="hms-btn-secondary hms-btn-sm">
                                <x-icon name="user-plus" size="xs" />
                                Register patient
                            </a>
                        @endcan
                    </div>
                @else
                    <ul class="divide-y divide-slate-100">
                        @foreach ($matches as $match)
                            <li class="flex flex-wrap items-center justify-between gap-3 py-3">
                                <div class="min-w-0">
                                    <div class="flex items-center gap-2 font-medium text-slate-800">
                                        {{ $match->full_name }}
                                        @if ($match->isRestricted())
                                            <x-icon name="lock" size="xs" class="text-amber-600" />
                                        @endif
                                    </div>
                                    <div class="text-xs text-slate-500">
                                        <span class="font-mono">{{ $match->medical_record_number }}</span>
                                        · {{ $match->age_display }} · {{ $match->gender_label }}
                                        @if ($match->phone) · {{ $match->phone }} @endif
                                    </div>
                                </div>
                                <a href="{{ request()->fullUrlWithQuery(['q' => null, 'patient_id' => $match->id]) }}"
                                   class="hms-btn-primary hms-btn-sm">
                                    Book this patient
                                </a>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>
        @endif
    </x-card>
@else
    <div class="grid gap-6 lg:grid-cols-3">
        <div class="lg:col-span-2">
            <x-card title="Clinic details" icon="calendar">
                <form method="POST" action="{{ $action }}" class="space-y-5"
                      x-data="slotPicker({
                          doctor: @js((string) old('doctor_id', $defaults['doctor_id'] ?? '')),
                          date: @js((string) old('appointment_date', $defaults['appointment_date'] ?? '')),
                          slot: @js((string) old('slot_time', $defaults['slot_time'] ?? '')),
                          schedule: @js($schedule ? [
                              'id' => $schedule->id,
                              'title' => $schedule->title ?: 'Clinic',
                              'start_time' => substr((string) $schedule->start_time, 0, 5),
                              'end_time' => substr((string) $schedule->end_time, 0, 5),
                              'room' => $schedule->room,
                          ] : null),
                          slots: @js($slotGrid),
                          load: @js($load),
                          url: '{{ route('appointments.slots') }}',
                          canOverbook: @js(auth()->user()->can('appointments.overbook')),
                      })"
                      x-init="$watch('doctor', () => refresh()); $watch('date', () => refresh())">
                    @csrf
                    @if ($method !== 'POST')
                        @method($method)
                    @endif

                    <input type="hidden" name="patient_id" value="{{ $patient->id }}">
                    <input type="hidden" name="slot_time" x-model="slot">

                    @if (isset($errors) && $errors->has('patient_id'))
                        <p class="hms-error">{{ $errors->first('patient_id') }}</p>
                    @endif

                    <div class="grid gap-4 sm:grid-cols-2">
                        <x-form.select name="doctor_id" label="Consultant" :options="$doctors"
                                       :value="$defaults['doctor_id'] ?? null"
                                       placeholder="No named consultant (department pool)"
                                       x-model="doctor" />

                        <x-form.select name="department_id" label="Department" :options="$departments"
                                       :value="$defaults['department_id'] ?? null"
                                       placeholder="Select department" />
                    </div>

                    <div class="grid gap-4 sm:grid-cols-3">
                        <x-form.input type="date" name="appointment_date" label="Date" required
                                      :value="$defaults['appointment_date'] ?? null"
                                      min="{{ today()->toDateString() }}"
                                      x-model="date" />

                        <x-form.select name="appointment_type" label="Type" :options="$types" required
                                       :value="$appointment->appointment_type ?? null" />

                        <x-form.select name="visit_type" label="Visit type" :options="$visitTypes" required
                                       :value="$appointment->visit_type ?? 'opd'" />
                    </div>

                    <div class="grid gap-4 sm:grid-cols-3">
                        <x-form.select name="priority" label="Priority" :options="$priorities" required
                                       :value="$appointment->priority ?? 'routine'" />

                        <x-form.select name="booking_channel" label="Booked via" :options="$channels" required
                                       :value="$appointment->booking_channel ?? 'walk_in'" />

                        <div class="sm:col-span-1">
                            <div class="mt-6 text-xs text-slate-500" x-show="load" x-cloak>
                                <span x-show="load && load.max !== null">
                                    List: <span class="font-medium text-slate-700" x-text="load ? load.booked : 0"></span>
                                    / <span x-text="load ? load.max : 0"></span>
                                    <span x-show="remaining !== null">(<span x-text="remaining"></span> left)</span>
                                </span>
                                <span x-show="load && load.max === null">No ceiling set for this clinic.</span>
                            </div>
                        </div>
                    </div>

                    <div>
                        <div class="flex items-center justify-between">
                            <label class="hms-label">Slot</label>
                            <span class="text-xs text-slate-400" x-show="loading" x-cloak>Checking the diary…</span>
                        </div>

                        <div x-show="! date" class="rounded-lg border border-dashed border-slate-300 px-4 py-6 text-center text-sm text-slate-500">
                            Pick a date to see the consultant's slots.
                        </div>

                        <div x-show="date && ! loading && slots.length === 0" x-cloak
                             class="rounded-lg border border-dashed border-slate-300 px-4 py-6 text-center text-sm text-slate-500">
                            <p>No clinic session runs on that date — the patient will be booked into the day's list without a clock slot.</p>
                            <p class="mt-1 text-xs text-slate-400">Set one up under Clinic schedules to offer timed slots.</p>
                        </div>

                        <template x-if="date && slots.length > 0">
                            <div class="flex flex-wrap gap-2">
                                <template x-for="item in slots" :key="item.time">
                                    <button type="button"
                                            class="rounded-md border px-3 py-1.5 font-mono text-xs transition"
                                            :class="{
                                                'border-brand-500 bg-brand-50 text-brand-700': slot === item.time,
                                                'border-slate-200 bg-white text-slate-700 hover:border-brand-300': slot !== item.time && (! item.full || canOverbook),
                                                'border-slate-200 bg-slate-100 text-slate-400 line-through cursor-not-allowed': item.full && ! canOverbook,
                                            }"
                                            :disabled="item.full && ! canOverbook"
                                            @click="slot = (slot === item.time ? '' : item.time)"
                                            x-text="item.time + ' · ' + item.booked + '/' + item.capacity">
                                    </button>
                                </template>
                            </div>
                        </template>

                        <p class="hms-hint" x-show="slot" x-cloak>
                            Selected <span class="font-mono" x-text="slot"></span>.
                        </p>

                        @if (isset($errors) && $errors->has('slot_time'))
                            <p class="hms-error">{{ $errors->first('slot_time') }}</p>
                        @endif
                    </div>

                    <x-form.textarea name="reason" label="Reason for visit" rows="2"
                                     :value="$appointment->reason ?? null"
                                     placeholder="Presenting complaint or purpose of the visit…" />

                    <x-form.textarea name="notes" label="Desk notes" rows="2"
                                     :value="$appointment->notes ?? null"
                                     placeholder="Anything the front desk needs to know…" />

                    @if (isset($errors) && $errors->any() && ! $errors->hasAny(['patient_id', 'slot_time']))
                        <div class="rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700">
                            {{ $errors->first() }}
                        </div>
                    @endif

                    <div class="flex flex-wrap items-center justify-end gap-3 border-t border-slate-200 pt-4">
                        <a href="{{ $backRoute }}" class="hms-btn-ghost">Cancel</a>
                        <button type="submit" class="hms-btn-primary">
                            <x-icon name="check" size="sm" />
                            {{ $submitLabel }}
                        </button>
                    </div>
                </form>
            </x-card>
        </div>

        <div class="space-y-6">
            <x-card title="Patient" icon="users">
                <div class="flex items-start gap-3">
                    <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-brand-50 text-sm font-semibold text-brand-700">
                        {{ Str::of($patient->first_name)->substr(0, 1)->upper() }}{{ Str::of($patient->last_name)->substr(0, 1)->upper() }}
                    </span>
                    <div class="min-w-0">
                        <a href="{{ route('patients.show', $patient) }}"
                           class="font-medium text-slate-900 hover:text-brand-700">{{ $patient->full_name }}</a>
                        <div class="font-mono text-xs text-slate-500">{{ $patient->medical_record_number }}</div>
                        <div class="mt-1 text-xs text-slate-500">
                            {{ $patient->age_display }} · {{ $patient->gender_label }}
                            @if ($patient->phone) · {{ $patient->phone }} @endif
                        </div>
                        @if ($patient->primaryInsurance)
                            <div class="mt-2 text-xs">
                                <span class="font-medium text-slate-700">{{ $patient->primaryInsurance->payer?->name }}</span>
                                <div class="text-slate-400">{{ $patient->primaryInsurance->member_number }}</div>
                            </div>
                        @endif
                    </div>
                </div>

                @if ($patient->isRestricted())
                    <div class="mt-3 rounded-lg bg-amber-50 px-3 py-2 text-xs text-amber-800">
                        This record is access-controlled. Handle the booking details confidentially.
                    </div>
                @endif

                @unless ($appointment)
                    <div class="mt-4 border-t border-slate-200 pt-3">
                        <a href="{{ route('appointments.create') }}" class="hms-link text-xs">Choose a different patient</a>
                    </div>
                @endunless
            </x-card>

            @if ($appointment)
                <x-card title="Moving" icon="arrows">
                    <div class="space-y-2 text-sm">
                        <div class="flex items-center justify-between">
                            <span class="text-slate-500">From</span>
                            <span class="font-mono text-xs">{{ $appointment->appointment_no }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-slate-500">Was</span>
                            <span>
                                {{ $appointment->appointment_date?->format('D, d M Y') }}
                                {{ $appointment->slot_time ? substr((string) $appointment->slot_time, 0, 5) : '' }}
                            </span>
                        </div>
                        @if ($appointment->token_number)
                            <div class="flex items-center justify-between">
                                <span class="text-slate-500">Old token</span>
                                <span class="font-mono">{{ $appointment->token_number }}</span>
                            </div>
                        @endif
                    </div>
                    <p class="mt-3 text-xs text-slate-500">
                        The original booking is closed as rescheduled and keeps its history. The patient is given a
                        fresh token on the new list, so tell them the new number.
                    </p>
                </x-card>
            @else
                <x-card title="How booking works" icon="info">
                    <ul class="space-y-2 text-xs text-slate-600">
                        <li class="flex gap-2">
                            <x-icon name="dot" size="sm" class="mt-0.5 shrink-0 text-brand-500" />
                            A token is reserved in the consultant's sequence for that clinic day — the number the patient is called by.
                        </li>
                        <li class="flex gap-2">
                            <x-icon name="dot" size="sm" class="mt-0.5 shrink-0 text-brand-500" />
                            If the list is full, the booking goes to the waitlist or is deliberately overbooked, depending on your rights.
                        </li>
                        <li class="flex gap-2">
                            <x-icon name="dot" size="sm" class="mt-0.5 shrink-0 text-brand-500" />
                            Check-in on the day opens the visit and drops the patient onto the queue board.
                        </li>
                    </ul>
                </x-card>
            @endif
        </div>
    </div>
@endif