@extends('layouts.app')

@section('title', $appointment->reference)

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

    /*
     | The status enum names a Bootstrap contextual colour, because that is what
     | it was written against and the calendar still reads it. Mapped here rather
     | than renamed underneath everything that already uses it.
     */
    $pill = static fn (string $bootstrapTone): string => match ($bootstrapTone) {
        'success' => 'px-pill--green',
        'warning' => 'px-pill--amber',
        'danger' => 'px-pill--red',
        'info' => 'px-pill--blue',
        'primary' => 'px-pill--violet',
        default => 'px-pill--grey',
    };

    /*
     | A status change is either the ordinary next step or the one that ends the
     | appointment badly. Cancelling and marking a no-show carry a reason and are
     | not undone, so they get the danger treatment; everything else is the
     | quiet default.
     */
    $ending = [AppointmentStatus::Cancelled, AppointmentStatus::NoShow];
@endphp

@section('content')
    {{-- ============================ IDENTITY ============================ --}}
    <header class="px-hero px-hero--split mb-3">
        <div class="px-hero__identity">
            <div class="min-w-0">
                <h1 class="px-hero__name">
                    {{ $patient?->name ?? __('appointments::messages.appointments.unknown_patient') }}
                </h1>

                <div class="px-hero__facts">
                    <span class="font-monospace fw-semibold text-body">{{ $appointment->reference }}</span>

                    @if ($patient)
                        <a href="{{ route('patients.show', $patient->ulid) }}" class="font-monospace">{{ $patient->mrn }}</a>
                    @endif

                    <span>{{ $appointment->localStart()->isoFormat('dddd, D MMMM YYYY') }}</span>
                    <span>{{ $appointment->source->label() }}</span>
                </div>

                <div class="d-flex flex-wrap gap-2 mt-2">
                    <span class="px-pill {{ $pill($appointment->status->tone()) }}">
                        <span class="px-dot" aria-hidden="true"></span>{{ $appointment->status->label() }}
                    </span>

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

                    {{-- An allergy count belongs beside the patient's name, not
                         three rows down a definition list. --}}
                    @if ($patient !== null && $patient->activeAllergyCount > 0)
                        <span class="px-pill px-pill--red">
                            <i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i>
                            {{ trans_choice('appointments::messages.appointments.allergy_count', $patient->activeAllergyCount, ['count' => $patient->activeAllergyCount]) }}
                        </span>
                    @endif
                </div>
            </div>
        </div>

        {{-- This screen's own way back. Breadcrumbs are deliberately absent
             across the product, so a detail page reached from a listing carries
             a single explicit return instead. --}}
        <div class="px-hero__actions">
            <a href="{{ route('appointments.index') }}" class="btn btn-sm px-btn-ghost">
                <i class="bi bi-arrow-left rtl-flip" aria-hidden="true"></i>
                {{ __('appointments::messages.appointments.title') }}
            </a>
        </div>

        <div class="px-hero__tallies">
            <span class="px-tally px-tally--violet">
                <span class="px-tally__icon"><i class="bi bi-clock" aria-hidden="true"></i></span>

                <span class="min-w-0">
                    <span class="px-tally__value">{{ $appointment->localStart()->format('H:i') }}</span>
                    <span class="px-tally__label">{{ __('appointments::messages.appointments.time') }}</span>
                </span>
            </span>

            <span class="px-tally px-tally--blue">
                <span class="px-tally__icon"><i class="bi bi-hourglass-split" aria-hidden="true"></i></span>

                <span class="min-w-0">
                    <span class="px-tally__value">{{ $appointment->duration_minutes }}</span>
                    <span class="px-tally__label">{{ __('appointments::messages.appointments.minutes') }}</span>
                </span>
            </span>
        </div>
    </header>

    <div class="row g-3">
        <div class="col-12 col-lg-7">
            <x-px.panel :title="__('appointments::messages.appointments.singular')" icon="bi-calendar-event"
                        heading="title">
                <dl class="px-totals mb-0">
                    <div class="px-totals__row">
                        <dt>{{ __('appointments::messages.appointments.patient') }}</dt>
                        <dd>
                            @if ($patient !== null)
                                <a href="{{ route('patients.show', $patient->ulid) }}">{{ $patient->name }}</a>
                                <span class="px-hint font-monospace">{{ $patient->mrn }}</span>
                            @else
                                —
                            @endif
                        </dd>
                    </div>

                    <div class="px-totals__row">
                        <dt>{{ __('appointments::messages.appointments.doctor') }}</dt>
                        <dd>{{ $doctor?->label() ?? '—' }}</dd>
                    </div>

                    <div class="px-totals__row">
                        <dt>{{ __('appointments::messages.appointments.time') }}</dt>
                        <dd>
                            {{ $appointment->localStart()->format('H:i') }}–{{ $appointment->localEnd()->format('H:i') }}
                            <span class="px-hint">({{ $appointment->timezone }})</span>
                        </dd>
                    </div>

                    <div class="px-totals__row">
                        <dt>{{ __('appointments::messages.appointments.reason') }}</dt>
                        <dd class="text-wrap">{{ $appointment->reason ?: '—' }}</dd>
                    </div>

                    <div class="px-totals__row">
                        <dt>{{ __('appointments::messages.appointments.booked_by') }}</dt>
                        <dd>{{ $appointment->bookedBy?->name ?? '—' }}</dd>
                    </div>

                    @if ($appointment->cancelled_at)
                        <div class="px-totals__row px-totals__row--owing">
                            <dt>{{ __('appointments::messages.appointments.cancellation_reason') }}</dt>
                            <dd class="text-wrap">{{ $appointment->cancellation_reason ?: '—' }}</dd>
                        </div>
                    @endif
                </dl>

                @if ($appointment->notes)
                    <div class="px-note mt-3">
                        <p class="small mb-0">{{ $appointment->notes }}</p>
                    </div>
                @endif
            </x-px.panel>
        </div>

        <div class="col-12 col-lg-5">
            <x-px.panel :title="__('appointments::messages.appointments.change_status')" icon="bi-arrow-repeat">
                {{--
                    Only the transitions the status machine actually permits are
                    offered. An in-progress consultation shows Complete and
                    nothing else — it cannot become a no-show, because the
                    patient is demonstrably present.
                --}}
                @forelse ($transitions as $target)
                    <form method="POST" action="{{ route('appointments.status', $appointment) }}" class="mb-2">
                        @csrf
                        @method('PATCH')
                        <input type="hidden" name="status" value="{{ $target->value }}">

                        @if (in_array($target, $ending, true))
                            <div class="d-flex gap-2">
                                <input type="text" name="reason" class="form-control form-control-sm px-input" required
                                       placeholder="{{ __('appointments::messages.appointments.cancellation_reason') }}">
                                <button type="submit" class="btn btn-sm px-btn-danger-ghost flex-shrink-0">
                                    {{ $target->label() }}
                                </button>
                            </div>
                        @else
                            <button type="submit" class="btn btn-sm px-btn-primary w-100">
                                {{ $target->label() }}
                            </button>
                        @endif
                    </form>
                @empty
                    {{-- A finished appointment has nowhere left to go. Saying so
                         is more useful than an empty panel. --}}
                    <div class="px-empty py-3">
                        <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">
                                <circle cx="12" cy="12" r="9" /><path d="M8 12l3 3 5-6" />
                            </svg>
                        </div>

                        <p class="px-empty__title">{{ $appointment->status->label() }}</p>
                        <p class="px-empty__text mb-0">{{ __('appointments::messages.appointments.no_transitions') }}</p>
                    </div>
                @endforelse
            </x-px.panel>
        </div>
    </div>
@endsection