@extends('layouts.app')

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

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

    $isToday = $date->isSameDay($today);

    $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' => 'pending',
            'label' => __('appointments::messages.appointments.card_pending'),
            'icon' => 'bi-clock-fill',
            'tone' => 'blue',
        ],
        [
            'key' => 'cancelled',
            'label' => __('appointments::messages.appointments.card_cancelled'),
            'icon' => 'bi-x-circle-fill',
            'tone' => 'pink',
        ],
    ];

    $pillFor = static fn (AppointmentStatus $status): string => match ($status) {
        AppointmentStatus::Scheduled => 'px-pill--grey',
        AppointmentStatus::Confirmed => 'px-pill--blue',
        AppointmentStatus::CheckedIn => 'px-pill--violet',
        AppointmentStatus::InProgress => 'px-pill--amber',
        AppointmentStatus::Completed => 'px-pill--green',
        AppointmentStatus::Cancelled, AppointmentStatus::NoShow => 'px-pill--red',
    };

    /*
     | Cancelling and marking a no-show both require a written reason, so they
     | are not offered as one-click menu items — those two go to the record
     | where the reason can actually be given. The rest are safe to fire from
     | the list, which is where reception works from.
     */
    $reasonRequired = [AppointmentStatus::Cancelled, AppointmentStatus::NoShow];
@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.appointments.title') }}</h1>
            <p class="px-subtitle">{{ __('appointments::messages.appointments.subtitle') }}</p>
        </div>

        <div class="d-flex flex-wrap gap-2">
            <a href="{{ route('appointments.calendar') }}"
               class="btn px-btn-ghost d-inline-flex align-items-center gap-2">
                <i class="bi bi-calendar3" aria-hidden="true"></i>
                {{ __('appointments::messages.appointments.calendar_view') }}
            </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 ────────────────────────────────────────────────────────── --}}
    {{-- Outside the results region on purpose: that region is replaced
         wholesale when a filter changes, which would destroy the field
         somebody is typing into. --}}
    <div class="px-panel p-3 p-md-4 mb-4">
        @php
            $activeField = \App\Modules\Patients\Enums\PatientSearchField::tryFrom($filters['search_field'] ?? '')
                ?? $defaultSearchField;

            $searchRules = [];

            foreach ($searchFields as $searchField) {
                $searchRules[$searchField->value] = ['placeholder' => $searchField->placeholder()];
            }
        @endphp

        {{--
            One row of filters, sized by content rather than by a twelve-column
            grid: five controls and two buttons do not divide into twelve, and
            forcing them to left "Apply filters" wrapping onto two lines.

            The search comes first because it is what reception reaches for —
            somebody is on the phone giving a number. The rest narrow what the
            search returns: when, whose, which department, what state.
        --}}
        <form method="GET" action="{{ route('appointments.index') }}" data-clinic-filter
              class="px-filters"
              data-clinic-search-scope
              data-rules="{{ json_encode($searchRules, JSON_THROW_ON_ERROR) }}">
            <div class="px-filters__scope">
                <div class="px-segmented" role="radiogroup" aria-label="{{ __('patients::messages.search.field') }}"
                     data-clinic-search-fields>
                    <span class="px-segmented__label" aria-hidden="true">
                        {{ __('patients::messages.search.field') }}
                    </span>

                    @foreach ($searchFields as $searchField)
                        <label class="px-segmented__option">
                            <input type="radio" name="search_field" value="{{ $searchField->value }}"
                                   @checked($searchField === $activeField)>
                            {{ $searchField->label() }}
                        </label>
                    @endforeach
                </div>
            </div>

            <div class="px-filters__field px-filters__field--wide">
                {{-- Hidden, not deleted: the pills above already say "search by", and
                     the placeholder repeats it. It stays in the markup so a screen
                     reader still gets the field a name rather than reading the
                     hint as one. --}}
                <label for="search" class="visually-hidden">{{ __('appointments::messages.appointments.search_patient') }}</label>
                <div class="px-search">
                    <i class="bi bi-search" aria-hidden="true"></i>
                    <input type="search" id="search" name="search" class="form-control px-input"
                           data-clinic-search-input
                           value="{{ $filters['search'] }}"
                           placeholder="{{ $activeField->placeholder() }}">
                </div>
            </div>

            <div class="px-filters__field">
                <label for="date" class="px-field-label">{{ __('appointments::messages.schedules.date') }}</label>
                <input type="date" id="date" name="date" class="form-control px-input"
                       value="{{ $date->toDateString() }}">
            </div>

            @if ($canSeeAllDoctors)
                <div class="px-filters__field">
                    <label for="doctor" class="px-field-label">{{ __('appointments::messages.appointments.doctor') }}</label>
                    <select id="doctor" name="doctor" class="form-select px-select">
                        <option value="">{{ __('appointments::messages.appointments.all_doctors') }}</option>
                        @foreach ($doctors as $d)
                            <option value="{{ $d->ulid }}" @selected($selectedDoctor === $d->id)>{{ $d->label() }}</option>
                        @endforeach
                    </select>
                </div>
            @endif

            @if ($departments !== [])
                <div class="px-filters__field">
                    <label for="department" class="px-field-label">{{ __('appointments::messages.appointments.department') }}</label>
                    <select id="department" name="department" class="form-select px-select">
                        <option value="">{{ __('common.all') }}</option>
                        @foreach ($departments as $department)
                            <option value="{{ $department }}" @selected($filters['department'] === $department)>{{ $department }}</option>
                        @endforeach
                    </select>
                </div>
            @endif

            <div class="px-filters__field">
                <label for="status" class="px-field-label">{{ __('common.status') }}</label>
                <select id="status" name="status" class="form-select px-select">
                    <option value="">{{ __('common.all') }}</option>
                    @foreach ($statuses as $value => $label)
                        <option value="{{ $value }}" @selected($filters['status'] === $value)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>

            <div class="px-filters__actions">
                <a href="{{ route('appointments.index') }}"
                   class="btn px-btn-ghost d-inline-flex align-items-center justify-content-center gap-2">
                    <i class="bi bi-arrow-counterclockwise" aria-hidden="true"></i>
                    {{ __('common.reset') }}
                </a>
                {{-- No flex-grow: the button takes the width of its label, so
                     "Apply filters" stays on one line whatever the row does
                     around it. --}}
                <button type="submit" class="btn px-btn-primary d-inline-flex align-items-center justify-content-center gap-2">
                    <i class="bi bi-funnel" aria-hidden="true"></i>
                    {{ __('appointments::messages.appointments.apply_filters') }}
                </button>
            </div>
        </form>
    </div>

    {{-- Everything below is scoped to the selected day, so all of it sits
         inside the swapped region. Leaving the cards outside would leave them
         showing yesterday's totals after a date change — worse than not
         showing them at all on a clinical screen. --}}
    <x-results>
        <div class="px-layout">
            <div class="min-w-0">
                {{-- ── Summary cards ──────────────────────────────────────── --}}
                <div class="px-metrics mb-4">
                    @foreach ($cards as $card)
                        @php
                            $value = $summary['tally'][$card['key']];
                            $delta = $value - $summary['previous'][$card['key']];
                        @endphp

                        <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">{{ number_format($value) }}</p>

                                <p class="px-metric__trend {{ $delta > 0 ? 'px-metric__trend--up' : '' }} {{ $delta < 0 ? 'px-metric__trend--down' : '' }}">
                                    @if ($delta !== 0)
                                        <i class="bi bi-arrow-{{ $delta > 0 ? 'up' : 'down' }}-short" aria-hidden="true"></i>
                                    @endif
                                    {{ __('appointments::messages.appointments.vs_previous', [
                                        'delta' => $delta > 0 ? '+'.$delta : (string) $delta,
                                    ]) }}
                                </p>
                            </div>
                        </div>
                    @endforeach
                </div>

                {{-- ── Day list ───────────────────────────────────────────── --}}
                <div class="px-panel overflow-hidden">
                    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 px-3 px-md-4 py-3 border-bottom"
                         style="border-color: var(--px-border) !important;">
                        <div>
                            <p class="mb-0 fw-semibold">{{ $date->isoFormat('dddd, D MMMM YYYY') }}</p>
                            <p class="mb-0 small text-body-secondary">
                                {{ trans_choice('appointments::messages.appointments.count', $appointments->count(), ['count' => $appointments->count()]) }}
                            </p>
                        </div>

                        @unless ($isToday)
                            <a href="{{ route('appointments.index') }}" class="btn btn-sm px-btn-ghost">
                                {{ __('appointments::messages.appointments.today') }}
                            </a>
                        @endunless
                    </div>

                    @if ($appointments->isEmpty())
                        {{-- ── Empty state ────────────────────────────────── --}}
                        <div class="px-empty">
                            <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.appointments.empty_text') }}</p>

                            <div class="d-flex flex-wrap justify-content-center gap-2">
                                @can('create', Appointment::class)
                                    <a href="{{ route('appointments.create', ['date' => $date->toDateString()]) }}"
                                       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_first') }}
                                    </a>
                                @endcan

                                <a href="{{ route('appointments.calendar') }}"
                                   class="btn px-btn-ghost d-inline-flex align-items-center gap-2">
                                    <i class="bi bi-calendar3" aria-hidden="true"></i>
                                    {{ __('appointments::messages.appointments.open_calendar') }}
                                </a>
                            </div>
                        </div>
                    @else
                        <div class="table-responsive">
                            <table class="table px-table px-table--sticky align-middle">
                                <thead>
                                    <tr>
                                        <th scope="col">{{ __('appointments::messages.appointments.time') }}</th>
                                        <th scope="col">{{ __('appointments::messages.appointments.patient') }}</th>
                                        <th scope="col">{{ __('appointments::messages.appointments.doctor') }}</th>
                                        <th scope="col">{{ __('appointments::messages.appointments.department') }}</th>
                                        <th scope="col">{{ __('appointments::messages.appointments.visit_type') }}</th>
                                        <th scope="col">{{ __('common.status') }}</th>
                                        <th scope="col" class="text-end">{{ __('common.actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($appointments as $appointment)
                                        @php
                                            $patient = $patients[$appointment->patient_id] ?? null;
                                            $doctorSummary = $doctorSummaries[$appointment->doctor_id] ?? null;

                                            $name = $patient?->name ?? __('appointments::messages.appointments.unknown_patient');

                                            /*
                                             | Reason-requiring moves belong on the appointment's own
                                             | screen, where there is room to type one; the rest are
                                             | offered here only to somebody who may actually make
                                             | them, so no row shows a button the server would refuse.
                                             */
                                            $transitions = collect($appointment->status->allowedTransitions())
                                                ->reject(fn (AppointmentStatus $s): bool => in_array($s, $reasonRequired, true))
                                                ->filter(fn (AppointmentStatus $s): bool => auth()->user()?->can($s->requiredAbility(), $appointment) ?? false);

                                            $checkIn = $triage[$appointment->id] ?? null;
                                        @endphp

                                        <tr>
                                            <td>
                                                <span class="font-monospace fw-semibold">{{ $appointment->localStart()->format('H:i') }}</span>

                                                @if ($appointment->queue_number)
                                                    <span class="px-pill px-pill--grey ms-1"
                                                          title="{{ __('appointments::messages.appointments.queue_number') }}">
                                                        #{{ $appointment->queue_number }}
                                                    </span>
                                                @endif
                                            </td>

                                            <td>
                                                <div class="d-flex align-items-center gap-2">
                                                    <div class="min-w-0">
                                                        <a href="{{ route('appointments.show', $appointment) }}"
                                                           class="fw-semibold text-body text-decoration-none d-block text-truncate">
                                                            {{ $name }}
                                                        </a>
                                                        @if ($patient?->mrn)
                                                            <span class="small text-body-secondary font-monospace">{{ $patient->mrn }}</span>
                                                        @endif
                                                    </div>

                                                    {{-- The allergy marker travels with the patient summary.
                                                         Reception seeing it while working the day list is a
                                                         cheap safety cue and does not require them to have
                                                         sight of the clinical record. --}}
                                                    @if (($patient?->activeAllergyCount ?? 0) > 0)
                                                        <span class="px-pill px-pill--red"
                                                              title="{{ __('common.allergy_warning') }}">
                                                            <i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i>
                                                            {{ $patient->activeAllergyCount }}
                                                        </span>
                                                    @endif

                                                    {{-- Check-in observations. The red flag is the reason
                                                         this column exists: reception needs to see, without
                                                         opening anything, who should not be left waiting. --}}
                                                    @if ($checkIn?->hasRedFlag)
                                                        <span class="px-pill px-pill--red px-flag"
                                                              title="{{ implode(' · ', $checkIn->findings) }}">
                                                            <i class="bi bi-exclamation-octagon-fill" aria-hidden="true"></i>
                                                            {{ __('consultations::messages.red_flags.short') }}
                                                        </span>
                                                    @elseif ($checkIn?->recorded)
                                                        <span class="px-pill px-pill--green"
                                                              title="{{ __('consultations::messages.triage.recorded_flag') }}">
                                                            <i class="bi bi-clipboard2-check" aria-hidden="true"></i>
                                                        </span>
                                                    @endif
                                                </div>
                                            </td>

                                            <td class="small">{{ $doctorSummary?->name ?? '—' }}</td>

                                            <td class="small text-body-secondary">{{ $doctorSummary?->specialty ?? '—' }}</td>

                                            <td>
                                                <span class="px-pill px-pill--grey">{{ $appointment->source->label() }}</span>
                                            </td>

                                            <td>
                                                <span class="px-pill {{ $pillFor($appointment->status) }}">
                                                    <span class="px-dot" aria-hidden="true"></span>
                                                    {{ $appointment->status->label() }}
                                                </span>
                                            </td>

                                            <td class="text-end">
                                                <div class="dropdown d-inline-block">
                                                    <button type="button" class="px-action" data-bs-toggle="dropdown"
                                                            aria-expanded="false"
                                                            aria-label="{{ __('appointments::messages.appointments.actions_for', ['name' => $name]) }}">
                                                        <i class="bi bi-three-dots-vertical" aria-hidden="true"></i>
                                                    </button>

                                                    <ul class="dropdown-menu dropdown-menu-end shadow-sm">
                                                        <li>
                                                            <a class="dropdown-item d-flex align-items-center gap-2"
                                                               href="{{ route('appointments.show', $appointment) }}">
                                                                <i class="bi bi-eye" aria-hidden="true"></i>
                                                                {{ __('common.view') }}
                                                            </a>
                                                        </li>

                                                        {{-- Contributed by Consultations; absent when that
                                                             module is not installed. --}}
                                                        @if (Route::has('triage.create') && auth()->user()?->can('encounters.triage'))
                                                            <li>
                                                                <a class="dropdown-item d-flex align-items-center gap-2"
                                                                   href="{{ route('triage.create', $appointment->ulid) }}">
                                                                    <i class="bi bi-clipboard2-pulse" aria-hidden="true"></i>
                                                                    {{ __('consultations::messages.triage.open') }}
                                                                </a>
                                                            </li>
                                                        @endif

                                                        {{-- The doctor's fee is raised at check-in, so from that
                                                             moment there is a bill at the desk to settle. --}}
                                                        @if ($appointment->status === AppointmentStatus::CheckedIn
                                                            && $patient?->ulid
                                                            && Route::has('invoices.index')
                                                            && auth()->user()?->can('invoices.view'))
                                                            <li>
                                                                <a class="dropdown-item d-flex align-items-center gap-2"
                                                                   href="{{ route('invoices.index', ['patient' => $patient->ulid]) }}">
                                                                    <i class="bi bi-receipt" aria-hidden="true"></i>
                                                                    {{ __('appointments::messages.billing.collect') }}
                                                                </a>
                                                            </li>
                                                        @endif

                                                        @can('update', $appointment)
                                                            @if ($transitions->isNotEmpty())
                                                                <li><hr class="dropdown-divider"></li>

                                                                @foreach ($transitions as $next)
                                                                    <li>
                                                                        <form method="POST"
                                                                              action="{{ route('appointments.status', $appointment) }}">
                                                                            @csrf
                                                                            @method('PATCH')
                                                                            <input type="hidden" name="status" value="{{ $next->value }}">
                                                                            <button type="submit" class="dropdown-item d-flex align-items-center gap-2">
                                                                                <i class="bi bi-arrow-right-short" aria-hidden="true"></i>
                                                                                {{ $next->label() }}
                                                                            </button>
                                                                        </form>
                                                                    </li>
                                                                @endforeach
                                                            @endif
                                                        @endcan
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>

            {{-- ── Day context ────────────────────────────────────────────── --}}
            <aside class="px-aside" aria-label="{{ __('appointments::messages.appointments.day_context') }}">
                <div class="px-aside__card">
                    <p class="px-aside__title">
                        {{ $isToday
                            ? __('appointments::messages.appointments.todays_summary')
                            : __('appointments::messages.appointments.day_summary') }}
                    </p>

                    @foreach ($cards as $card)
                        <div class="px-stat">
                            <span class="px-stat__label">{{ $card['label'] }}</span>
                            <span class="px-stat__value">{{ number_format($summary['tally'][$card['key']]) }}</span>
                        </div>
                    @endforeach
                </div>

                @php
                    /*
                     | Derived from the rows already on the page — no extra
                     | queries. "Upcoming" only means anything while looking at
                     | today; on any other day every row is either past or
                     | future depending on which way you look.
                     */
                    $upcoming = $isToday
                        ? $appointments
                            ->filter(fn (Appointment $a): bool => $a->starts_at->isFuture()
                                && ! in_array($a->status, [AppointmentStatus::Cancelled, AppointmentStatus::NoShow, AppointmentStatus::Completed], true))
                            ->take(5)
                        : collect();

                    $byDoctor = $appointments
                        ->reject(fn (Appointment $a): bool => in_array($a->status, [AppointmentStatus::Cancelled, AppointmentStatus::NoShow], true))
                        ->groupBy('doctor_id')
                        ->map->count();
                @endphp

                @if ($upcoming->isNotEmpty())
                    <div class="px-aside__card">
                        <p class="px-aside__title">{{ __('appointments::messages.appointments.upcoming') }}</p>

                        @foreach ($upcoming as $next)
                            <div class="px-stat">
                                <span class="px-stat__label text-truncate">
                                    {{ $patients[$next->patient_id]?->name ?? __('appointments::messages.appointments.unknown_patient') }}
                                </span>
                                <span class="px-stat__value font-monospace">{{ $next->localStart()->format('H:i') }}</span>
                            </div>
                        @endforeach
                    </div>
                @endif

                @if ($canSeeAllDoctors && $doctors !== [])
                    <div class="px-aside__card">
                        <p class="px-aside__title">{{ __('appointments::messages.appointments.availability') }}</p>

                        @foreach ($doctors as $d)
                            <div class="px-stat">
                                <span class="px-stat__label text-truncate">{{ $d->name }}</span>
                                {{-- trans_choice, not __: the string carries
                                     plural forms, and __ hands back the raw
                                     "{0} Free|{1} 1 booked|…" for the clinic to
                                     read off the screen. --}}
                                <span class="px-stat__value">
                                    {{ trans_choice(
                                        'appointments::messages.appointments.booked_count',
                                        $byDoctor[$d->id] ?? 0,
                                        ['count' => $byDoctor[$d->id] ?? 0],
                                    ) }}
                                </span>
                            </div>
                        @endforeach
                    </div>
                @endif

                <div class="px-aside__card">
                    <p class="px-aside__title">{{ __('common.quick_actions') }}</p>

                    <div class="px-quick">
                        @can('create', Appointment::class)
                            <a class="px-quick__item" href="{{ route('appointments.create') }}">
                                <i class="bi bi-calendar-plus" aria-hidden="true"></i>
                                {{ __('appointments::messages.appointments.book') }}
                            </a>
                        @endcan

                        @if (Route::has('patients.index'))
                            <a class="px-quick__item" href="{{ route('patients.index') }}">
                                <i class="bi bi-people" aria-hidden="true"></i>
                                {{ __('common.patients') }}
                            </a>
                        @endif

                        <a class="px-quick__item" href="{{ route('appointments.calendar') }}">
                            <i class="bi bi-calendar3" aria-hidden="true"></i>
                            {{ __('appointments::messages.appointments.calendar') }}
                        </a>

                        {{-- The waiting queue is the day list filtered to the
                             people who have arrived — not a separate screen. --}}
                        <a class="px-quick__item"
                           href="{{ route('appointments.index', ['status' => AppointmentStatus::CheckedIn->value]) }}">
                            <i class="bi bi-hourglass-split" aria-hidden="true"></i>
                            {{ __('appointments::messages.appointments.waiting_queue') }}
                        </a>
                    </div>
                </div>
            </aside>
        </div>
    </x-results>
@endsection