@if (loading()) {
  <div class="card card-pad"><div class="skeleton" style="height: 300px"></div></div>
} @else if (notFound() || booking() === null) {
  <div class="card empty">
    <h3>Booking not found</h3>
    <p>It may belong to another agency, or have been removed.</p>
    <p style="margin-top: 14px">
      <a routerLink="/bookings" class="btn btn-primary btn-sm">Back to bookings</a>
    </p>
  </div>
} @else {
  @let b = booking()!;

  @if (justBooked() && b.status === 'confirmed') {
    <div class="confirmed-banner" role="status">
      <span class="tick" aria-hidden="true">✓</span>
      <div>
        <strong>Booking confirmed.</strong>
        Reference <span class="pnr">{{ b.bookingReference }}</span> — a confirmation would be sent
        to {{ b.contactEmail }}.
      </div>
    </div>
  }

  <div class="page-head">
    <div>
      <h1>Booking {{ b.bookingReference }}</h1>
      <p class="subtitle">
        Created {{ b.createdAt | date: 'd MMM y, HH:mm' }} by {{ b.bookedBy }}
      </p>
    </div>
    <div class="head-actions">
      <span class="badge" [class]="'badge-' + b.status">{{ b.status }}</span>
      <a routerLink="/bookings" class="btn btn-ghost btn-sm">← All bookings</a>
    </div>
  </div>

  @if (error()) {
    <div class="alert alert-error" role="alert">{{ error() }}</div>
  }

  <div class="detail">
    <div class="stack">
      <!-- Itinerary -->
      <section class="card">
        <div class="card-head"><h2>Itinerary</h2></div>
        <div class="card-pad">
          <div class="trip">
            <span class="carrier-code">{{ b.flight.airline.iataCode }}</span>
            <div class="trip-body">
              <div class="trip-head">
                <span class="trip-airline">{{ b.flight.airline.name }}</span>
                <span class="trip-meta">
                  {{ b.flight.flightNumber }} · {{ b.flight.aircraft }} ·
                  <span class="cap">{{ cabinLabel(b.flight.cabinClass) }}</span>
                </span>
              </div>

              <div class="trip-route">
                <div class="trip-point">
                  <span class="trip-time tabular">{{ b.flight.departureTime | date: 'HH:mm' }}</span>
                  <span class="trip-iata">{{ b.flight.origin.iataCode }}</span>
                  <span class="trip-place">
                    {{ b.flight.origin.city }} · {{ b.flight.origin.name }}
                  </span>
                  <span class="trip-date">{{ b.flight.departureTime | date: 'EEE d MMM y' }}</span>
                </div>

                <div class="trip-leg">
                  <span class="trip-duration">{{ b.flight.durationMinutes | duration }}</span>
                  <span class="trip-line" aria-hidden="true"></span>
                </div>

                <div class="trip-point">
                  <span class="trip-time tabular">{{ b.flight.arrivalTime | date: 'HH:mm' }}</span>
                  <span class="trip-iata">{{ b.flight.destination.iataCode }}</span>
                  <span class="trip-place">
                    {{ b.flight.destination.city }} · {{ b.flight.destination.name }}
                  </span>
                  <span class="trip-date">{{ b.flight.arrivalTime | date: 'EEE d MMM y' }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Travellers -->
      <section class="card">
        <div class="card-head">
          <h2>Travellers</h2>
          <span class="muted">{{ b.passengerCount }} on this booking</span>
        </div>
        <div class="table-wrap">
          <table class="data">
            <thead>
              <tr>
                <th>Name</th>
                <th>Date of birth</th>
                <th>Passport</th>
                <th>Seat</th>
              </tr>
            </thead>
            <tbody>
              @for (p of b.passengers; track p.id) {
                <tr>
                  <td><strong>{{ p.firstName }} {{ p.lastName }}</strong></td>
                  <td class="tabular">
                    {{ p.dateOfBirth ? (p.dateOfBirth | date: 'd MMM y') : '—' }}
                  </td>
                  <td>{{ p.passportNumber || '—' }}</td>
                  <td>{{ p.seatNumber || 'Not assigned' }}</td>
                </tr>
              }
            </tbody>
          </table>
        </div>
      </section>
    </div>

    <!-- Summary and actions -->
    <aside class="stack">
      <section class="card">
        <div class="card-head"><h2>Summary</h2></div>
        <div class="card-pad">
          <dl class="sum-list">
            <div><dt>Reference</dt><dd class="pnr">{{ b.bookingReference }}</dd></div>
            <div><dt>Status</dt><dd class="cap">{{ b.status }}</dd></div>
            <div><dt>Travellers</dt><dd>{{ b.passengerCount }}</dd></div>
            <div>
              <dt>Fare each</dt>
              <dd class="tabular">
                {{ b.flight.basePrice | currency: b.currency : 'symbol' : '1.2-2' }}
              </dd>
            </div>
            <div><dt>Contact</dt><dd>{{ b.contactEmail }}</dd></div>
            @if (b.contactPhone) {
              <div><dt>Phone</dt><dd>{{ b.contactPhone }}</dd></div>
            }
          </dl>
        </div>
        <div class="card-pad total-row">
          <span>Total paid</span>
          <strong class="tabular">
            {{ b.totalAmount | currency: b.currency : 'symbol' : '1.2-2' }}
          </strong>
        </div>
      </section>

      @if (b.status === 'confirmed') {
        <section class="card card-pad">
          <h3>Cancel this booking</h3>
          <p class="muted cancel-copy">
            The reservation is voided and {{ b.passengerCount }} seat(s) return to inventory. This
            cannot be undone.
          </p>

          @if (confirming()) {
            <div class="confirm-row">
              <button
                type="button"
                class="btn btn-danger btn-sm"
                [disabled]="cancelling()"
                (click)="confirmCancel()"
              >
                {{ cancelling() ? 'Cancelling…' : 'Yes, cancel booking' }}
              </button>
              <button
                type="button"
                class="btn btn-ghost btn-sm"
                [disabled]="cancelling()"
                (click)="dismissCancel()"
              >
                Keep it
              </button>
            </div>
          } @else {
            <button type="button" class="btn btn-danger btn-sm" (click)="askCancel()">
              Cancel booking
            </button>
          }
        </section>
      } @else {
        <div class="alert alert-info">
          This booking was cancelled and its seats returned to inventory.
        </div>
      }
    </aside>
  </div>
}