<section class="admin-orders-card">
  @if (facade.dashboardStats(); as stats) {
    <app-orders-dashboard [stats]="stats" />
  }

  <div class="toolbar">
    <div class="filters">
      <app-input type="search" [ngModel]="facade.filters().search" (ngModelChange)="facade.updateFilters({ search: $event })" [placeholder]="'adminOrders.search' | translate" />
      <select [attr.aria-label]="'backoffice.status' | translate" [ngModel]="facade.filters().status" (ngModelChange)="facade.updateFilters({ status: $event })">
        @for (status of statuses; track status) {
          <option [value]="status">{{ ('adminOrders.status.' + status) | translate }}</option>
        }
      </select>
    </div>
    <div class="toolbar__view-controls">
      <div class="view-toggle" role="group" [attr.aria-label]="'adminProducts.density' | translate">
        <app-button variant="ghost" size="sm" [attr.aria-pressed]="facade.density() === 'comfortable'" (click)="facade.setDensity('comfortable')">{{ 'adminProducts.densityComfortable' | translate }}</app-button>
        <app-button variant="ghost" size="sm" [attr.aria-pressed]="facade.density() === 'compact'" (click)="facade.setDensity('compact')">{{ 'adminProducts.densityCompact' | translate }}</app-button>
      </div>
      <app-button variant="ghost" size="sm" (click)="columnsPanelOpen.set(!columnsPanelOpen())">{{ 'adminProducts.columns' | translate }}</app-button>
      <app-button variant="secondary" (click)="exportCsv()">{{ 'adminOrders.export' | translate }}</app-button>
    </div>
  </div>

  @if (columnsPanelOpen()) {
    <app-card padding="sm" class="columns-panel">
      @for (column of allColumns; track column) {
        <label class="check">
          <input type="checkbox" [checked]="isColumnVisible(column)" (change)="facade.setColumnVisible(column, $any($event.target).checked)" />
          <span>{{ ('adminOrders.column_' + column) | translate }}</span>
        </label>
      }
    </app-card>
  }

  @if (facade.selectedIds().length > 0) {
    <div class="bulk-actions">
      <span>{{ facade.selectedIds().length }} {{ 'adminProducts.selectedCount' | translate }}</span>
      <select [attr.aria-label]="'adminOrders.changeStatus' | translate" [ngModel]="bulkStatusValue()" (ngModelChange)="bulkStatusValue.set($event)">
        @for (status of bulkSelectableStatuses; track status) {
          <option [value]="status">{{ ('adminOrders.status.' + status) | translate }}</option>
        }
      </select>
      <app-button variant="secondary" size="sm" (click)="applyBulkStatus()">{{ 'adminOrders.applyStatus' | translate }}</app-button>
      <app-button variant="secondary" size="sm" (click)="facade.applyBulkArchive(true)">{{ 'adminOrders.archiveSelected' | translate }}</app-button>
      <app-button variant="secondary" size="sm" (click)="facade.exportSelectedAsCsv()">{{ 'adminProducts.bulkExportAction' | translate }}</app-button>
      <app-button variant="secondary" size="sm" (click)="printSelection()">{{ 'adminOrders.printSelected' | translate }}</app-button>
      <app-button variant="danger" size="sm" (click)="bulkDelete()">{{ 'adminProducts.bulkDelete' | translate }}</app-button>
    </div>
  }
  <app-confirm-dialog
    [open]="bulkDeleteConfirmOpen()"
    [titleText]="'adminOrders.bulkDeleteTitle' | translate"
    [message]="'adminOrders.confirmBulkDelete' | translate"
    [destructive]="true"
    (confirmed)="confirmBulkDelete()"
    (cancelled)="bulkDeleteConfirmOpen.set(false)" />

  @if (facade.loading()) {
    <div class="skeleton-rows" role="status" aria-live="polite" aria-busy="true">
      @for (i of [1,2,3,4]; track i) { <app-skeleton shape="rect" height="40px" /> }
      <span class="sr-only">{{ 'common.loading' | translate }}</span>
    </div>
  } @else if (facade.error()) {
    <app-empty-state [title]="'common.errorTitle' | translate" [description]="'common.errorDescription' | translate" />
  } @else if (facade.orders().length === 0) {
    <app-empty-state [title]="'adminOrders.emptyTitle' | translate" [description]="'adminOrders.emptyDescription' | translate" />
  } @else {
    <div class="table-scroll" [class.density-compact]="facade.density() === 'compact'">
      <app-table>
        <thead>
          <tr>
            <th scope="col"><input type="checkbox" [attr.aria-label]="'adminOrders.selectAllRows' | translate" (change)="facade.toggleAll($any($event.target).checked)" /></th>
            <th scope="col">{{ 'adminOrders.orderNumber' | translate }}</th>
            @if (isColumnVisible('customer')) { <th scope="col">{{ 'adminOrders.customer' | translate }}</th> }
            @if (isColumnVisible('status')) { <th scope="col">{{ 'backoffice.status' | translate }}</th> }
            @if (isColumnVisible('payment')) { <th scope="col">{{ 'adminOrders.payment' | translate }}</th> }
            @if (isColumnVisible('total')) { <th scope="col">{{ 'backoffice.price' | translate }}</th> }
            @if (isColumnVisible('created')) { <th scope="col">{{ 'adminOrders.createdAt' | translate }}</th> }
            <th scope="col">{{ 'adminProducts.actions' | translate }}</th>
          </tr>
        </thead>
        <tbody>
          @for (order of facade.orders(); track order.id) {
            <tr>
              <td><input type="checkbox" [checked]="isSelected(order.id)" [attr.aria-label]="('adminOrders.selectRow' | translate) + ': ' + order.orderNumber" (change)="facade.toggleSelection(order.id, $any($event.target).checked)" /></td>
              <th scope="row">{{ order.orderNumber }}</th>
              @if (isColumnVisible('customer')) { <td>{{ order.customer.name }}</td> }
              @if (isColumnVisible('status')) { <td><app-badge variant="neutral">{{ ('adminOrders.status.' + order.status) | translate }}</app-badge></td> }
              @if (isColumnVisible('payment')) { <td><app-badge [variant]="order.payment.status === 'paid' ? 'success' : order.payment.status === 'refund_requested' ? 'warning' : 'neutral'">{{ ('adminOrders.paymentStatus.' + order.payment.status) | translate }}</app-badge></td> }
              @if (isColumnVisible('total')) { <td>{{ order.total }} {{ order.currency }}</td> }
              @if (isColumnVisible('created')) { <td>{{ order.createdAt | date:'short' }}</td> }
              <td><app-button variant="secondary" size="sm" (click)="view(order.id)">{{ 'adminOrders.view' | translate }}</app-button></td>
            </tr>
          }
        </tbody>
      </app-table>
    </div>

    <div class="pager">
      <span>{{ facade.total() }} {{ 'adminOrders.itemsCount' | translate }}</span>
      <app-pagination [currentPage]="facade.filters().page" [totalPages]="totalPages()" (pageChange)="facade.updateFilters({ page: $event })" />
    </div>
  }
</section>
