@php
    $schedule = $schedule ?? null;
    $defaults = $defaults ?? [];

    $value = fn (string $field, mixed $fallback = null) => old($field, $schedule?->{$field} ?? $defaults[$field] ?? $fallback);

    $timeValue = function (string $field) use ($schedule) {
        $raw = old($field, $schedule?->{$field});

        return $raw ? substr((string) $raw, 0, 5) : '';
    };

    $dateValue = function (string $field) use ($schedule, $defaults) {
        $raw = old($field, $schedule?->{$field} ?? $defaults[$field] ?? null);

        if (! $raw) {
            return '';
        }

        return $raw instanceof \DateTimeInterface ? $raw->format('Y-m-d') : substr((string) $raw, 0, 10);
    };

    $action = $schedule
        ? route('clinic-schedules.update', $schedule)
        : route('clinic-schedules.store');

    $doctorDepartments = $doctorDepartments ?? [];
@endphp

<div
    x-data="{
        doctor: @js((string) $value('doctor_id')),
        department: @js((string) $value('department_id')),
        map: @js($doctorDepartments),
        start: @js($timeValue('start_time') ?: '08:00'),
        end: @js($timeValue('end_time') ?: '12:00'),
        slot: @js((string) $value('slot_duration_minutes', 15)),
        tokens: @js((string) $value('max_tokens', 40)),
        perSlot: @js((string) $value('max_bookings_per_slot', 1)),
        get minutes() {
            const [sh, sm] = (this.start || '0:0').split(':').map(Number);
            const [eh, em] = (this.end || '0:0').split(':').map(Number);
            return ((eh * 60 + em) - (sh * 60 + sm));
        },
        get slots() {
            const step = Number(this.slot);
            return step > 0 && this.minutes > 0 ? Math.floor(this.minutes / step) : 0;
        },
        get fits() {
            const step = Number(this.slot);
            return step > 0 && this.minutes > 0 && this.minutes % step === 0;
        },
        get overTokenCeiling() {
            return Number(this.tokens) > 0 && this.slots > Number(this.tokens);
        },
    }"
    x-init="if (doctor && ! department) { department = map[doctor] ?? ''; }
            $watch('doctor', (value, previous) => {
                const wasMapped = map[previous] ?? '';
                if (! department || department === wasMapped) {
                    department = map[value] ?? '';
                }
            })"
    class="space-y-6">

    <form method="POST" action="{{ $action }}" class="space-y-6">
        @csrf
        @if ($schedule)
            @method('PUT')
        @endif

        <x-card title="The session" icon="calendar-days">
            <div class="grid gap-5 sm:grid-cols-2">
                <x-form.select name="doctor_id" label="Consultant" required :options="$doctors"
                               :value="$value('doctor_id')" :placeholder="false" x-model="doctor" />

                <x-form.select name="department_id" label="Department" :options="$departments"
                               :value="$value('department_id')" placeholder="Choose a department"
                               x-model="department"
                               hint="Defaults to the consultant's own department." />
            </div>

            <div class="mt-5">
                <x-form.input name="title" label="Session name" required
                              :value="$value('title')"
                              placeholder="Monday cardiology clinic" />
            </div>

            <div class="mt-5 grid gap-5 sm:grid-cols-3">
                <x-form.select name="day_of_week" label="Day of the week" required :options="$days"
                               :value="$value('day_of_week')" :placeholder="false" />

                <x-form.input type="time" name="start_time" label="Starts" required
                              x-model="start" :value="$timeValue('start_time') ?: '08:00'" />

                <x-form.input type="time" name="end_time" label="Ends" required
                              x-model="end" :value="$timeValue('end_time') ?: '12:00'" />
            </div>

            <div class="mt-5 grid gap-5 sm:grid-cols-3">
                <x-form.input type="number" name="slot_duration_minutes" label="Slot length (minutes)"
                              required min="5" max="240" x-model="slot"
                              :value="$value('slot_duration_minutes', 15)"
                              hint="Appointment slots are cut out of the session window." />

                <x-form.input type="number" name="max_tokens" label="Token ceiling"
                              required min="1" max="500" x-model="tokens"
                              :value="$value('max_tokens', 40)"
                              hint="The most patients this session will take." />

                <x-form.input type="number" name="max_bookings_per_slot" label="Bookings per slot"
                              required min="1" max="50" x-model="perSlot"
                              :value="$value('max_bookings_per_slot', 1)"
                              hint="Raise it to run a shared slot for a review clinic." />
            </div>

            <div class="mt-5 rounded-lg border px-4 py-3 text-sm"
                 :class="fits && ! overTokenCeiling
                    ? 'border-slate-200 bg-slate-50 text-slate-600'
                    : 'border-amber-200 bg-amber-50 text-amber-800'">
                <div class="flex items-start gap-2">
                    <svg class="mt-0.5 h-4 w-4 shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M18 10A8 8 0 1 1 2 10a8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z" clip-rule="evenodd" />
                    </svg>
                    <p>
                        <span x-text="minutes"></span> minutes cut into
                        <span class="font-semibold" x-text="slots"></span> slots of
                        <span x-text="slot"></span> minutes.
                        <template x-if="! fits">
                            <span>That window does not divide evenly — adjust the times or the slot length.</span>
                        </template>
                        <template x-if="fits && overTokenCeiling">
                            <span>The session offers more slots than tokens; raise the ceiling or lengthen the slots.</span>
                        </template>
                    </p>
                </div>
            </div>
        </x-card>

        <x-card title="Where it runs" icon="location">
            <div class="grid gap-5 sm:grid-cols-2">
                <x-form.input name="room" label="Room" :value="$value('room')" placeholder="Clinic Room 4" />
                <x-form.input name="location" label="Location" :value="$value('location')" placeholder="Outpatient Block, 1st Floor" />
            </div>

            <div class="mt-5 grid gap-5 sm:grid-cols-2">
                <x-form.input type="date" name="effective_from" label="Effective from"
                              :value="$dateValue('effective_from')"
                              hint="Leave blank for an open start." />

                <x-form.input type="date" name="effective_to" label="Effective to"
                              :value="$dateValue('effective_to')"
                              hint="Leave blank for a session that never lapses." />
            </div>

            <div class="mt-5 space-y-3 border-t border-slate-200 pt-4">
                <x-form.checkbox name="allow_walk_ins" label="Allow walk-ins on this session"
                                 :checked="$value('allow_walk_ins')" />

                <x-form.checkbox name="is_active" label="Open for bookings"
                                 :checked="$schedule ? $schedule->is_active : true" />
            </div>

            <div class="mt-5">
                <x-form.textarea name="notes" label="Notes" rows="3" :value="$value('notes')"
                                 placeholder="Preparation instructions, room changes, cover arrangements…" />
            </div>
        </x-card>

        <div class="flex flex-wrap justify-end gap-2">
            <a href="{{ route('clinic-schedules.index') }}" class="hms-btn-secondary">Cancel</a>
            <button type="submit" class="hms-btn-primary">
                <x-icon name="check" size="sm" />
                {{ $schedule ? 'Save session' : 'Add session' }}
            </button>
        </div>
    </form>
</div>