<div class="product-grid-container" [class.retail]="retailMode()">
  <!-- Category tabs -->
  <div class="category-tabs">
    <button class="cat-chip" [class.active]="selectedCategory() === null" (click)="categoryChanged.emit(null)">
      {{ 'POS.ALL' | translate }}
      @if (totalProducts() > 0) {
        <span class="cat-count">({{ totalProducts() }})</span>
      }
    </button>
    @for (cat of categories(); track cat.id) {
      <button class="cat-chip" [class.active]="selectedCategory() === cat.id" (click)="categoryChanged.emit(cat.id)">
        {{ cat.name }}
      </button>
    }
  </div>

  <!-- Grid -->
  <div class="products-grid">
    @for (product of filteredProducts(); track product.id) {
      <div class="product-card" (click)="productSelected.emit(product)">
        <div class="product-img">
          @if (product.image) {
            <img [src]="product.image" [alt]="product.name" loading="lazy" />
          } @else {
            <i class="pi pi-box"></i>
          }
        </div>
        <div class="product-name">{{ product.name }}</div>
        <div class="product-price">{{ product.sale_price }}</div>
        <div class="product-stock" [class.low]="(product.stock?.total_available || 0) <= 5" [class.out]="(product.stock?.total_available || 0) <= 0">
          {{ product.stock?.total_available || 0 }}
        </div>
      </div>
    } @empty {
      <div class="empty-grid">
        <i class="pi pi-inbox text-4xl"></i>
        <p>{{ 'POS.NO_PRODUCTS' | translate }}</p>
      </div>
    }
  </div>

  <!-- Load More -->
  @if (hasMore()) {
    <div class="load-more-bar">
      <button class="load-more-btn" [disabled]="loadingMore()" (click)="loadMore.emit()">
        @if (loadingMore()) {
          <i class="pi pi-spin pi-spinner"></i>
        } @else {
          <i class="pi pi-chevron-down"></i>
        }
        {{ 'POS.LOAD_MORE' | translate }}
        <span class="products-count">({{ filteredProducts().length }} / {{ totalProducts() }})</span>
      </button>
    </div>
  }
</div>
