<section class="admin-reports-card">
  <header class="toolbar">
    <app-button variant="secondary" size="sm" (click)="back()">{{ 'adminOrders.back' | translate }}</app-button>
    <h1>{{ 'adminModeration.reportsQueue' | translate }}</h1>
  </header>

  @if (facade.reportsLoading()) {
    <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.reportsError()) {
    <app-empty-state [title]="'common.errorTitle' | translate" [description]="'common.errorDescription' | translate">
      <span slot="actions">
        <app-button variant="primary" (click)="facade.loadReports()">{{ 'common.retry' | translate }}</app-button>
      </span>
    </app-empty-state>
  } @else if (facade.reports().length === 0) {
    <app-empty-state [title]="'adminModeration.reportsEmptyTitle' | translate" [description]="'adminModeration.reportsEmptyDescription' | translate" />
  } @else {
    <app-table>
      <thead>
        <tr>
          <th scope="col">{{ 'adminModeration.reportTarget' | translate }}</th>
          <th scope="col">{{ 'adminModeration.reportType' | translate }}</th>
          <th scope="col">{{ 'adminModeration.reportReason' | translate }}</th>
          <th scope="col">{{ 'backoffice.status' | translate }}</th>
          <th scope="col">{{ 'adminOrders.createdAt' | translate }}</th>
          <th scope="col">{{ 'adminProducts.actions' | translate }}</th>
        </tr>
      </thead>
      <tbody>
        @for (report of facade.reports(); track report.id) {
          <tr>
            <th scope="row">
              @if (canOpen(report.targetType, report.targetId)) {
                <button type="button" class="link-button" (click)="openTarget(report.targetType, report.targetId)">{{ report.targetLabel }}</button>
              } @else {
                {{ report.targetLabel || ('adminModeration.notAvailable' | translate) }}
              }
            </th>
            <td>{{ ('adminModeration.targetType.' + report.targetType) | translate }}</td>
            <td>{{ report.reason }}</td>
            <td><app-badge [variant]="report.status === 'open' ? 'warning' : report.status === 'resolved' ? 'success' : 'neutral'">{{ ('adminModeration.reportStatus.' + report.status) | translate }}</app-badge></td>
            <td>{{ report.createdAt | date:'short' }}</td>
            <td class="actions">
              @if (report.status === 'open') {
                <app-button variant="secondary" size="sm" (click)="facade.setReportStatus(report.id, 'resolved')">{{ 'adminModeration.resolve' | translate }}</app-button>
                <app-button variant="ghost" size="sm" (click)="facade.setReportStatus(report.id, 'dismissed')">{{ 'adminModeration.dismiss' | translate }}</app-button>
              }
            </td>
          </tr>
        }
      </tbody>
    </app-table>
  }
</section>
