<p-toast />
<div class="stock-balances-page">
  <app-page-header title="INVENTORY.BALANCES_TITLE" subtitle="INVENTORY.BALANCES_SUBTITLE" (refresh)="loadData()" />

  <!-- Filter Bar -->
  <div class="filter-bar">
    <div class="filter-row">
      <p-iconfield>
        <p-inputicon styleClass="pi pi-search" />
        <input type="text" pInputText [(ngModel)]="searchText" (input)="onSearchInput()"
          [placeholder]="'INVENTORY.SEARCH_PRODUCT' | translate"
          style="min-width:220px" />
      </p-iconfield>

      <p-select [options]="warehouses()" optionLabel="name" optionValue="id" [showClear]="true"
        [placeholder]="'INVENTORY.ALL_WAREHOUSES' | translate" [style]="{minWidth:'180px'}"
        [ngModel]="selectedWarehouseId()" (onChange)="onWarehouseFilter($event.value)" />

      <p-select [options]="parentCategories()" optionLabel="label" optionValue="value" [showClear]="true"
        [placeholder]="'INVENTORY.FILTER_CATEGORY' | translate" [style]="{minWidth:'180px'}"
        [ngModel]="selectedCategoryId()" (onChange)="onCategoryChange($event.value)" />

      @if (subcategories().length > 0) {
        <p-select [options]="subcategories()" optionLabel="label" optionValue="value" [showClear]="true"
          [placeholder]="'INVENTORY.FILTER_SUBCATEGORY' | translate" [style]="{minWidth:'180px'}"
          [ngModel]="selectedSubcategoryId()" (onChange)="onSubcategoryChange($event.value)" />
      }

      <p-button
        [label]="showAllProducts() ? ('INVENTORY.STOCK_ONLY' | translate) : ('INVENTORY.SHOW_ALL_PRODUCTS' | translate)"
        [icon]="showAllProducts() ? 'pi pi-filter' : 'pi pi-list'"
        [severity]="showAllProducts() ? 'warn' : 'info'"
        [outlined]="true"
        (onClick)="toggleShowAll()" />

      @if (hasActiveFilters()) {
        <p-button [label]="'INVENTORY.CLEAR_FILTERS' | translate" icon="pi pi-filter-slash"
          severity="secondary" [outlined]="true" (onClick)="clearFilters()" />
      }
    </div>
  </div>

  <!-- Stats Cards -->
  <div class="stats-grid">
    <div class="stat-card stat-blue">
      <div class="stat-icon-wrap"><i class="pi pi-box"></i></div>
      <div class="stat-info">
        <span class="stat-value">{{ totalProducts() }}</span>
        <span class="stat-label">{{ 'INVENTORY.TOTAL_PRODUCTS' | translate }}</span>
      </div>
      <div class="stat-decoration"></div>
    </div>
    <div class="stat-card stat-green">
      <div class="stat-icon-wrap"><i class="pi pi-dollar"></i></div>
      <div class="stat-info">
        <span class="stat-value">{{ totalValue() | number:'1.2-2' }}</span>
        <span class="stat-label">{{ 'INVENTORY.TOTAL_VALUE' | translate }}</span>
      </div>
      <div class="stat-decoration"></div>
    </div>
    <div class="stat-card stat-amber">
      <div class="stat-icon-wrap"><i class="pi pi-exclamation-triangle"></i></div>
      <div class="stat-info">
        <span class="stat-value">{{ lowStockCount() }}</span>
        <span class="stat-label">{{ 'INVENTORY.LOW_STOCK' | translate }}</span>
      </div>
      <div class="stat-decoration"></div>
    </div>
    <div class="stat-card stat-rose">
      <div class="stat-icon-wrap"><i class="pi pi-ban"></i></div>
      <div class="stat-info">
        <span class="stat-value">{{ zeroStockCount() }}</span>
        <span class="stat-label">{{ 'INVENTORY.ZERO_STOCK' | translate }}</span>
      </div>
      <div class="stat-decoration"></div>
    </div>
  </div>

  <!-- Data Table -->
  @if (loading()) {
    <div class="loading-state">
      <i class="pi pi-spin pi-spinner" style="font-size:2rem"></i>
      <p>{{ 'COMMON.LOADING' | translate }}</p>
    </div>
  } @else {
    <div class="table-card">
      <p-table [value]="items()" [paginator]="true" [rows]="25" [rowsPerPageOptions]="[25,50,100]"
        [scrollable]="true" scrollHeight="600px" styleClass="p-datatable-sm p-datatable-gridlines">
        <ng-template #header>
          <tr>
            <th>{{ 'PRODUCTS.CODE' | translate }}</th>
            <th>{{ 'PRODUCTS.NAME' | translate }}</th>
            <th>{{ 'INVENTORY.VARIANT' | translate }}</th>
            <th>{{ 'INVENTORY.WAREHOUSE' | translate }}</th>
            <th class="text-end">{{ 'INVENTORY.QUANTITY' | translate }}</th>
            <th class="text-end">{{ 'INVENTORY.AVAILABLE_QTY' | translate }}</th>
            <th class="text-end">{{ 'INVENTORY.AVG_COST' | translate }}</th>
            <th class="text-end">{{ 'INVENTORY.TOTAL_VALUE' | translate }}</th>
            <th style="width:60px"></th>
          </tr>
        </ng-template>
        <ng-template #body let-item>
          <tr [ngClass]="getRowClass(item)">
            <td class="mono">{{ item.product_code }}</td>
            <td>{{ item.product_name }}</td>
            <td>{{ item.product_variant_name || '—' }}</td>
            <td>{{ item.warehouse_name }}</td>
            <td class="text-end" [ngClass]="{'text-danger': +item.quantity === 0, 'text-warning': +item.reorder_point > 0 && +item.quantity < +item.reorder_point && +item.quantity > 0}">
              {{ +item.quantity | number:'1.2-2' }}
            </td>
            <td class="text-end">{{ item.available_quantity | number:'1.2-2' }}</td>
            <td class="text-end">{{ +item.average_cost | number:'1.2-2' }}</td>
            <td class="text-end">{{ +item.total_value | number:'1.2-2' }}</td>
            <td>
              <p-button icon="pi pi-chart-bar" [rounded]="true" [text]="true" severity="info"
                (onClick)="viewStockCard(item)" [pTooltip]="'INVENTORY.STOCK_CARD' | translate" />
            </td>
          </tr>
        </ng-template>
        <ng-template #emptymessage>
          <tr>
            <td colspan="9" class="text-center">{{ 'COMMON.NO_DATA' | translate }}</td>
          </tr>
        </ng-template>
      </p-table>
    </div>
  }
</div>
