<section class="admin-reports-page">
  @if (facade.loading()) {
    <div class="report-grid" role="status" aria-live="polite" aria-busy="true">
      @for (i of [1,2,3]; track i) {
        <app-skeleton shape="rect" height="140px" />
      }
      <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 {
    <div class="report-grid">
      <div class="report-card">
        <h2>{{ 'adminReports.sales' | translate }}</h2>
        @if (facade.summary(); as summary) {
          <p class="report-summary">{{ summary.revenueTotal }} {{ summary.currency }} &middot; {{ summary.ordersCount }} {{ 'adminAnalytics.orders' | translate }}</p>
        }
        <app-button variant="secondary" size="sm" (click)="exportSalesCsv()">{{ 'adminOrders.export' | translate }}</app-button>
      </div>

      <div class="report-card">
        <h2>{{ 'adminReports.topProducts' | translate }}</h2>
        <p class="report-summary">{{ facade.topProducts().length }} {{ 'adminAnalytics.topProducts' | translate }}</p>
        <app-button variant="secondary" size="sm" (click)="exportTopProductsCsv()">{{ 'adminOrders.export' | translate }}</app-button>
      </div>

      <div class="report-card">
        <h2>{{ 'adminReports.marketplaceHealth' | translate }}</h2>
        <p class="report-summary">{{ facade.healthCompletionPercent() }}% {{ 'adminMarketplaceHealth.complete' | translate }}</p>
        <app-button variant="secondary" size="sm" (click)="exportHealthCsv()">{{ 'adminOrders.export' | translate }}</app-button>
      </div>
    </div>
  }
</section>
