<section class="admin-transactions-card">
  <div class="toolbar">
    <div class="filters">
      <app-input type="search" [ngModel]="facade.filters().search" (ngModelChange)="facade.updateFilters({ search: $event })" [placeholder]="'adminTransactions.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">{{ ('adminTransactions.status.' + status) | translate }}</option>
        }
      </select>
      <select [attr.aria-label]="'adminTransactions.type' | translate" [ngModel]="facade.filters().type" (ngModelChange)="facade.updateFilters({ type: $event })">
        @for (type of types; track type) {
          <option [value]="type">{{ ('adminTransactions.typeValue.' + type) | translate }}</option>
        }
      </select>
    </div>
    <app-button variant="secondary" (click)="exportCsv()">{{ 'adminOrders.export' | translate }}</app-button>
    <app-button variant="secondary" (click)="print()">{{ 'adminAnalytics.print' | translate }}</app-button>
  </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.transactions().length === 0) {
    <app-empty-state [title]="'adminTransactions.emptyTitle' | translate" [description]="'adminTransactions.emptyDescription' | translate" />
  } @else {
    <app-table>
      <thead>
        <tr>
          <th scope="col">{{ 'adminOrders.orderNumber' | translate }}</th>
          <th scope="col">{{ 'adminTransactions.type' | translate }}</th>
          <th scope="col">{{ 'adminTransactions.method' | translate }}</th>
          <th scope="col">{{ 'backoffice.status' | translate }}</th>
          <th scope="col">{{ 'backoffice.price' | translate }}</th>
          <th scope="col">{{ 'adminTransactions.fraud' | translate }}</th>
          <th scope="col">{{ 'adminProducts.actions' | translate }}</th>
        </tr>
      </thead>
      <tbody>
        @for (tx of facade.transactions(); track tx.id) {
          <tr>
            <th scope="row">{{ tx.orderNumber }}</th>
            <td>{{ ('adminTransactions.typeValue.' + tx.type) | translate }}</td>
            <td>{{ ('adminTransactions.methodValue.' + tx.method) | translate }}</td>
            <td><app-badge [variant]="tx.status === 'success' ? 'success' : tx.status === 'failed' ? 'danger' : 'neutral'">{{ ('adminTransactions.status.' + tx.status) | translate }}</app-badge></td>
            <td>{{ tx.amount }} {{ tx.currency }}</td>
            <td>
              @if (tx.fraudFlag) {
                <app-badge variant="danger">{{ 'adminTransactions.flagged' | translate }}</app-badge>
              }
            </td>
            <td class="actions">
              @if (tx.status === 'failed') {
                <app-button variant="secondary" size="sm" (click)="facade.retryFailed(tx.id)">{{ 'adminTransactions.retry' | translate }}</app-button>
              }
              <app-button variant="secondary" size="sm" (click)="facade.toggleFraudFlag(tx.id, !tx.fraudFlag)">{{ (tx.fraudFlag ? 'adminTransactions.clearFlag' : 'adminTransactions.flag') | translate }}</app-button>
              <app-button variant="secondary" size="sm" (click)="viewAudit(tx)">{{ 'adminTransactions.audit' | translate }}</app-button>
            </td>
          </tr>
        }
      </tbody>
    </app-table>

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

  <app-dialog [open]="!!auditTarget()" [titleText]="'adminTransactions.audit' | translate" size="sm" (closed)="closeAudit()">
    @if (auditTarget(); as tx) {
      @for (entry of tx.audit; track $index) {
        <p>{{ entry.timestamp | date:'short' }} — {{ entry.actor }} — {{ entry.action }}</p>
      }
    }
  </app-dialog>
</section>
