<section class="admin-customers-card">
  <div class="toolbar">
    <app-input type="search" [ngModel]="facade.search()" (ngModelChange)="facade.setSearch($event)" [placeholder]="'adminCustomers.search' | translate" />
  </div>

  @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.filteredCustomers().length === 0) {
    <app-empty-state [title]="'adminCustomers.emptyTitle' | translate" [description]="'adminCustomers.emptyDescription' | translate" />
  } @else {
    <app-table>
      <thead>
        <tr>
          <th scope="col">{{ 'adminCustomers.name' | translate }}</th>
          <th scope="col">{{ 'adminCustomers.email' | translate }}</th>
          <th scope="col">{{ 'adminCustomers.phone' | translate }}</th>
          <th scope="col">{{ 'adminCustomers.orderCount' | translate }}</th>
          <th scope="col">{{ 'adminCustomers.lifetimeValue' | translate }}</th>
          <th scope="col">{{ 'adminOrders.createdAt' | translate }}</th>
          <th scope="col">{{ 'adminProducts.actions' | translate }}</th>
        </tr>
      </thead>
      <tbody>
        @for (customer of facade.filteredCustomers(); track customer.email) {
          <tr>
            <th scope="row">{{ customer.name }}</th>
            <td>{{ customer.email }}</td>
            <td>{{ customer.phone }}</td>
            <td>
              {{ customer.orderCount }}
              @if (customer.orderCount > 1) {
                <app-badge variant="success">{{ 'adminCustomers.returning' | translate }}</app-badge>
              }
            </td>
            <td>{{ customer.totalSpent }} {{ customer.currency }}</td>
            <td>{{ customer.lastOrderAt | date:'short' }}</td>
            <td><app-button variant="secondary" size="sm" (click)="view(customer.email)">{{ 'adminOrders.view' | translate }}</app-button></td>
          </tr>
        }
      </tbody>
    </app-table>
  }
</section>
