<section class="products-dashboard">
  <div class="products-dashboard__metrics">
    <app-dashboard-metric labelKey="adminProducts.totalProducts" [value]="stats().total.toString()" />
    <app-dashboard-metric labelKey="adminProducts.publishedCount" [value]="stats().published.toString()" />
    <app-dashboard-metric labelKey="adminProducts.draftsCount" [value]="stats().drafts.toString()" />
    <app-dashboard-metric labelKey="adminProducts.outOfStockCount" [value]="stats().outOfStock.toString()" />
    <app-dashboard-metric labelKey="adminProducts.hiddenCount" [value]="stats().hidden.toString()" />
    <app-dashboard-metric labelKey="adminProducts.missingImagesCount" [value]="stats().missingImages.toString()" />
    <app-dashboard-metric labelKey="adminProducts.missingSeoCount" [value]="stats().missingSeo.toString()" />
    <app-dashboard-metric labelKey="adminProducts.lowQualityCount" [value]="stats().lowQuality.toString()" />
  </div>

  <div class="products-dashboard__row">
    <app-card padding="md" class="products-dashboard__recent">
      <h4>{{ 'adminProducts.recentlyEdited' | translate }}</h4>
      @if (stats().recentlyEdited.length === 0) {
        <p class="products-dashboard__hint">{{ 'adminProducts.emptyDescription' | translate }}</p>
      } @else {
        <ul>
          @for (product of stats().recentlyEdited; track product.id) {
            <li>
              <button type="button" (click)="openProduct.emit(product.id)">{{ product.name || product.sku }}</button>
            </li>
          }
        </ul>
      }
    </app-card>

    <app-card padding="md" class="products-dashboard__recommend">
      <h4>{{ 'adminProducts.recommendedNext' | translate }}</h4>
      <p>{{ stats().recommendation.labelKey | translate }}</p>
      @if (stats().recommendation.productId) {
        <app-button variant="primary" size="sm" (click)="goRecommended()">{{ 'adminProducts.openAction' | translate }}</app-button>
      }
    </app-card>
  </div>
</section>
