@if (facade.selected(); as order) {
<main class="order-detail">
  <header class="toolbar no-print">
    <app-button variant="secondary" size="sm" (click)="back()">{{ 'adminOrders.back' | translate }}</app-button>
    <h1>{{ order.orderNumber }}</h1>
    <app-badge variant="neutral">{{ ('adminOrders.status.' + order.status) | translate }}</app-badge>
    <div class="spacer"></div>
    <app-button variant="secondary" (click)="printInvoice()">{{ 'adminOrders.printInvoice' | translate }}</app-button>
  </header>

  @if (!isTerminal()) {
    <ol class="status-stepper no-print" aria-label="Order status">
      @for (step of workflowSteps; track step; let i = $index) {
        <li
          class="status-stepper__step"
          [class.status-stepper__step--done]="i < currentStepIndex()"
          [class.status-stepper__step--current]="i === currentStepIndex()"
        >
          <span class="status-stepper__dot" aria-hidden="true"></span>
          <span class="status-stepper__label">{{ ('adminOrders.status.' + step) | translate }}</span>
        </li>
      }
    </ol>
  } @else {
    <p class="status-stepper__terminal no-print">{{ ('adminOrders.status.' + order.status) | translate }}</p>
  }

  <section class="grid two">
    <div class="card">
      <h3>{{ 'adminOrders.customer' | translate }}</h3>
      <button type="button" class="link-button no-print" (click)="viewCustomer(order.customer.email)">{{ order.customer.name }}</button>
      <p class="print-only">{{ order.customer.name }}</p>
      <p>{{ order.customer.email }}</p>
      <p>{{ order.customer.phone }}</p>
    </div>
    <div class="card">
      <h3>{{ 'adminOrders.payment' | translate }}</h3>
      <p>{{ order.payment.method }} — {{ ('adminOrders.paymentStatus.' + order.payment.status) | translate }}</p>
      <p>{{ order.payment.amount }} {{ order.payment.currency }}</p>
    </div>
    <div class="card">
      <h3>{{ 'adminOrders.delivery' | translate }}</h3>
      <p>{{ order.shipping.address }}</p>
      <p>{{ order.shipping.method }}</p>
      @if (order.shipping.trackingNumber) { <p>{{ 'adminOrders.trackingNumber' | translate }}: {{ order.shipping.trackingNumber }}</p> }
    </div>
    <div class="card no-print">
      <h3>{{ 'adminOrders.changeStatus' | translate }}</h3>
      <select [attr.aria-label]="'adminOrders.changeStatus' | translate" [ngModel]="order.status" (ngModelChange)="setStatus(order.id, $event)" [disabled]="isTerminal()">
        @for (status of selectableStatuses; track status) {
          <option [value]="status">{{ ('adminOrders.status.' + status) | translate }}</option>
        }
        @if (isTerminal()) {
          <option [value]="order.status">{{ ('adminOrders.status.' + order.status) | translate }}</option>
        }
      </select>
      <div class="actions">
        <app-button variant="secondary" size="sm" (click)="requestRefund(order.id)" [disabled]="isTerminal()">{{ 'adminOrders.requestRefund' | translate }}</app-button>
        <app-button variant="danger" size="sm" (click)="cancel(order.id)" [disabled]="isTerminal()">{{ 'adminOrders.cancelOrder' | translate }}</app-button>
      </div>
    </div>
  </section>

  <section class="card">
    <h3>{{ 'adminOrders.items' | translate }}</h3>
    @for (item of order.items; track item.productId) {
      <p>{{ item.name }} × {{ item.quantity }} — {{ item.price }} {{ order.currency }}</p>
    }
    <p class="total">{{ 'backoffice.price' | translate }}: {{ order.total }} {{ order.currency }}</p>
  </section>

  <section class="card">
    <h3>{{ 'adminOrders.timeline' | translate }}</h3>
    <app-order-timeline [entries]="timelineEntries()" />
  </section>

  <section class="grid two no-print">
    <div class="card">
      <h3>{{ 'adminOrders.notes' | translate }}</h3>
      @for (line of order.notes.split('\n'); track $index) { @if (line) { <p>{{ line }}</p> } }
      <textarea rows="2" [ngModel]="noteDraft()" (ngModelChange)="noteDraft.set($event)"></textarea>
      <app-button variant="secondary" size="sm" (click)="submitNote(order.id)">{{ 'adminOrders.addNote' | translate }}</app-button>
    </div>
    <div class="card">
      <h3>{{ 'adminOrders.internalNotes' | translate }}</h3>
      @for (line of order.internalNotes.split('\n'); track $index) { @if (line) { <p>{{ line }}</p> } }
      <textarea rows="2" [ngModel]="internalNoteDraft()" (ngModelChange)="internalNoteDraft.set($event)"></textarea>
      <app-button variant="secondary" size="sm" (click)="submitInternalNote(order.id)">{{ 'adminOrders.addNote' | translate }}</app-button>
    </div>
  </section>
  <app-confirm-dialog
    [open]="!!pendingCancelId()"
    [titleText]="'adminOrders.cancelOrder' | translate"
    [message]="'adminOrders.confirmCancel' | translate"
    [destructive]="true"
    (confirmed)="confirmCancel()"
    (cancelled)="pendingCancelId.set(null)" />
  <app-confirm-dialog
    [open]="!!pendingRefundId()"
    [titleText]="'adminOrders.requestRefund' | translate"
    [message]="'adminOrders.confirmRefund' | translate"
    [destructive]="true"
    (confirmed)="confirmRefund()"
    (cancelled)="pendingRefundId.set(null)" />
</main>
} @else if (facade.selectedError()) {
  <div class="order-detail-error" role="alert">
    <p>{{ 'common.errorTitle' | translate }}</p>
    <p>{{ 'common.errorDescription' | translate }}</p>
    <app-button variant="secondary" size="sm" (click)="back()">{{ 'adminOrders.back' | translate }}</app-button>
  </div>
} @else {
  <p>{{ 'common.loading' | translate }}</p>
}