@extends('layouts.app')

@section('title', __('appointments::messages.appointments.calendar'))

@php
    use App\Modules\Appointments\Enums\AppointmentStatus;
    use App\Modules\Appointments\Models\Appointment;

    /*
     | The legend, and the source of truth for what a colour on this screen
     | means. Cancelled and did-not-attend are deliberately absent: the events
     | feed asks for occupying appointments only, because a cancelled booking
     | releases its slot. Listing them here would promise a colour that never
     | appears on the grid.
     */
    $legend = [
        AppointmentStatus::Scheduled,
        AppointmentStatus::Confirmed,
        AppointmentStatus::CheckedIn,
        AppointmentStatus::InProgress,
        AppointmentStatus::Completed,
    ];

    /*
     | Four figures for today, counted in the browser from the same feed the
     | grid draws. Nothing here can show cancellations for the reason above, so
     | the fourth card is the day's remaining work rather than a cancelled
     | count that would sit on zero for ever.
     */
    $cards = [
        ['key' => 'total', 'label' => __('appointments::messages.appointments.card_total'), 'icon' => 'bi-calendar-week-fill', 'tone' => 'violet'],
        ['key' => 'completed', 'label' => __('appointments::messages.appointments.card_completed'), 'icon' => 'bi-check-circle-fill', 'tone' => 'green'],
        ['key' => 'in_progress', 'label' => __('appointments::messages.calendar.card_in_clinic'), 'icon' => 'bi-person-walking', 'tone' => 'amber'],
        ['key' => 'upcoming', 'label' => __('appointments::messages.calendar.card_upcoming'), 'icon' => 'bi-clock-fill', 'tone' => 'blue'],
    ];

    $views = [
        'dayGridMonth' => __('appointments::messages.calendar.view_month'),
        'timeGridWeek' => __('appointments::messages.calendar.view_week'),
        'timeGridDay' => __('appointments::messages.calendar.view_day'),
        'listWeek' => __('appointments::messages.calendar.view_agenda'),
    ];
@endphp

@section('content')
    {{-- ── Page head ──────────────────────────────────────────────────────── --}}
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
        <div>
            <h1 class="px-title">{{ __('appointments::messages.calendar.title') }}</h1>
            <p class="px-subtitle">{{ __('appointments::messages.calendar.subtitle') }}</p>
        </div>

        <div class="d-flex flex-wrap gap-2">
            <a href="{{ route('appointments.index') }}"
               class="btn px-btn-ghost d-inline-flex align-items-center gap-2">
                <i class="bi bi-list-ul" aria-hidden="true"></i>
                {{ __('appointments::messages.appointments.day_list') }}
            </a>

            @can('create', Appointment::class)
                <a href="{{ route('appointments.create') }}"
                   class="btn px-btn-primary d-inline-flex align-items-center gap-2">
                    <i class="bi bi-plus-lg" aria-hidden="true"></i>
                    {{ __('appointments::messages.appointments.new') }}
                </a>
            @endcan
        </div>
    </div>

    {{-- ── Filters ────────────────────────────────────────────────────────── --}}
    {{--
        The clinician filter is the only one the server knows about — it changes
        which appointments are fetched. Status and patient narrow what is drawn
        from the events already in hand, which is why this is not a GET form:
        submitting would reload the page and lose the month being looked at.
    --}}
    <div class="px-panel p-3 p-md-4 mb-4" data-clinic-calendar-filters>
        <div class="row g-3 align-items-end">
            <div class="col-12 col-md-6 col-xl-3">
                <label for="calendar-doctor" class="px-field-label">
                    {{ __('appointments::messages.appointments.doctor') }}
                </label>
                <select class="form-select px-select" id="calendar-doctor" data-clinic-calendar-doctor>
                    <option value="">{{ __('appointments::messages.appointments.all_doctors') }}</option>
                    @foreach ($doctors as $d)
                        <option value="{{ $d->ulid }}" @selected($selectedDoctor === $d->ulid)>{{ $d->label() }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-6 col-md-6 col-xl-2">
                <label for="calendar-status" class="px-field-label">{{ __('common.status') }}</label>
                <select class="form-select px-select" id="calendar-status" data-clinic-calendar-status>
                    <option value="">{{ __('common.all') }}</option>
                    @foreach ($legend as $status)
                        <option value="{{ $status->value }}">{{ $status->label() }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-6 col-md-6 col-xl-2">
                <label for="calendar-date" class="px-field-label">
                    {{ __('appointments::messages.calendar.jump_to') }}
                </label>
                <input type="date" id="calendar-date" class="form-control px-input" data-clinic-calendar-date>
            </div>

            <div class="col-12 col-md-6 col-xl-3">
                <label for="calendar-search" class="px-field-label">
                    {{ __('appointments::messages.appointments.search_patient') }}
                </label>
                <div class="px-search">
                    <i class="bi bi-search" aria-hidden="true"></i>
                    <input type="search" id="calendar-search" class="form-control px-input"
                           data-clinic-calendar-search
                           placeholder="{{ __('appointments::messages.calendar.search_placeholder') }}">
                </div>
            </div>

            <div class="col-12 col-xl-2">
                <button type="button" class="btn px-btn-ghost w-100 d-inline-flex align-items-center justify-content-center gap-2"
                        data-clinic-calendar-reset>
                    <i class="bi bi-arrow-counterclockwise" aria-hidden="true"></i>
                    {{ __('common.reset') }}
                </button>
            </div>
        </div>

        {{-- ── Legend ─────────────────────────────────────────────────────── --}}
        <div class="px-legend" role="list" aria-label="{{ __('appointments::messages.calendar.legend') }}">
            @foreach ($legend as $status)
                <span class="px-legend__item" role="listitem">
                    <span class="px-legend__swatch fc-status-{{ $status->value }}" aria-hidden="true"></span>
                    {{ $status->label() }}
                </span>
            @endforeach

            {{-- Says why the two colours a clinic expects to find are not here. --}}
            <span class="px-legend__note">{{ __('appointments::messages.calendar.legend_note') }}</span>
        </div>
    </div>

    {{-- ── Today at a glance ──────────────────────────────────────────────── --}}
    <div class="px-metrics" data-clinic-calendar-metrics>
        @foreach ($cards as $card)
            <div class="px-metric px-metric--{{ $card['tone'] }}">
                <span class="px-metric__icon"><i class="bi {{ $card['icon'] }}" aria-hidden="true"></i></span>

                <div class="min-w-0 flex-grow-1">
                    <p class="px-metric__label">{{ $card['label'] }}</p>
                    <p class="px-metric__value" data-clinic-calendar-count="{{ $card['key'] }}">
                        <span class="px-skeleton px-skeleton--value" aria-hidden="true"></span>
                        <span class="visually-hidden">{{ __('common.loading') }}</span>
                    </p>
                </div>
            </div>
        @endforeach
    </div>

    {{-- ── Calendar ───────────────────────────────────────────────────────── --}}
    <div class="px-panel px-calendar" data-clinic-calendar-shell>
        {{--
            The toolbar is markup rather than FullCalendar's own, so it can be
            built from the same buttons, segmented control and typography as the
            rest of the product. The library still owns the behaviour — these
            controls call its API and it writes the title back.
        --}}
        <div class="px-calendar__toolbar">
            <div class="px-calendar__nav">
                <button type="button" class="px-calendar__step" data-clinic-calendar-prev
                        aria-label="{{ __('appointments::messages.calendar.previous') }}">
                    <i class="bi bi-chevron-left rtl-flip" aria-hidden="true"></i>
                </button>
                <button type="button" class="btn px-btn-ghost btn-sm" data-clinic-calendar-today>
                    {{ __('appointments::messages.appointments.today') }}
                </button>
                <button type="button" class="px-calendar__step" data-clinic-calendar-next
                        aria-label="{{ __('appointments::messages.calendar.next') }}">
                    <i class="bi bi-chevron-right rtl-flip" aria-hidden="true"></i>
                </button>
            </div>

            <h2 class="px-calendar__title" data-clinic-calendar-title aria-live="polite"></h2>

            <div class="px-segmented px-calendar__views" role="radiogroup"
                 aria-label="{{ __('appointments::messages.calendar.view') }}">
                @foreach ($views as $value => $label)
                    <label class="px-segmented__option">
                        <input type="radio" name="calendar_view" value="{{ $value }}"
                               data-clinic-calendar-view @checked($loop->first)>
                        {{ $label }}
                    </label>
                @endforeach
            </div>
        </div>

        <div class="px-calendar__body">
            <div data-clinic-calendar
                 data-source="{{ route('appointments.events') }}"
                 data-locale="{{ app()->getLocale() }}"
                 data-direction="{{ (config('clinic.locales')[app()->getLocale()]['dir'] ?? 'ltr') }}"
                 data-more="{{ __('appointments::messages.calendar.more') }}"
                 data-unknown="{{ __('appointments::messages.appointments.unknown_patient') }}"></div>

            {{-- Shown by the script when a fetch returns nothing for the range. --}}
            <div class="px-empty" data-clinic-calendar-empty hidden>
                <div class="px-empty__art" aria-hidden="true">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
                         stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="5" width="18" height="16" rx="3" />
                        <path d="M3 10h18M8 3v4M16 3v4" />
                        <path d="M9.5 15.5l5 0" />
                    </svg>
                </div>

                <p class="px-empty__title">{{ __('appointments::messages.appointments.empty_title') }}</p>
                <p class="px-empty__text">{{ __('appointments::messages.calendar.empty_text') }}</p>

                @can('create', Appointment::class)
                    <a href="{{ route('appointments.create') }}"
                       class="btn px-btn-primary d-inline-flex align-items-center gap-2">
                        <i class="bi bi-plus-lg" aria-hidden="true"></i>
                        {{ __('appointments::messages.appointments.book') }}
                    </a>
                @endcan
            </div>
        </div>
    </div>

    {{-- ── Slide-over ─────────────────────────────────────────────────────── --}}
    {{--
        One drawer, filled by the script from the event that was clicked. The
        status controls are not repeated in here: which transitions an
        appointment may make is decided by the status machine on the server, and
        a second copy of those rules in JavaScript is how the calendar starts
        offering a button the record refuses.
    --}}
    <div class="px-drawer" data-clinic-calendar-drawer hidden
         data-strings="{{ json_encode([
             'appointment' => __('appointments::messages.calendar.appointment'),
             'status' => __('common.status'),
             'patient' => __('appointments::messages.appointments.patient'),
             'mrn' => __('patients::messages.fields.mrn'),
             'doctor' => __('appointments::messages.appointments.doctor'),
             'date' => __('common.date'),
             'time' => __('appointments::messages.appointments.time'),
             'openRecord' => __('appointments::messages.calendar.open_record'),
             'print' => __('appointments::messages.calendar.print'),
             'actionsNote' => __('appointments::messages.calendar.actions_note'),
             'dayEmpty' => __('appointments::messages.calendar.day_empty'),
             'bookOnDay' => __('appointments::messages.calendar.book_on_day'),
         ], JSON_THROW_ON_ERROR) }}">
        <div class="px-drawer__scrim" data-clinic-drawer-close></div>

        <aside class="px-drawer__panel" role="dialog" aria-modal="true"
               aria-labelledby="drawer-title" tabindex="-1">
            <header class="px-drawer__head">
                <div class="min-w-0">
                    <p class="px-drawer__eyebrow" data-clinic-drawer-eyebrow></p>
                    <h2 class="px-drawer__title" id="drawer-title" data-clinic-drawer-title></h2>
                </div>

                <button type="button" class="px-action" data-clinic-drawer-close
                        aria-label="{{ __('common.close') }}">
                    <i class="bi bi-x-lg" aria-hidden="true"></i>
                </button>
            </header>

            <div class="px-drawer__body" data-clinic-drawer-body></div>

            <footer class="px-drawer__foot" data-clinic-drawer-foot></footer>
        </aside>
    </div>

    {{-- Thumb-reachable on a phone, where the header button has scrolled away. --}}
    @can('create', Appointment::class)
        <a href="{{ route('appointments.create') }}" class="px-fab d-xl-none"
           aria-label="{{ __('appointments::messages.appointments.new') }}">
            <i class="bi bi-plus-lg" aria-hidden="true"></i>
        </a>
    @endcan
@endsection