<p-toast />

<div class="purchase-reports-page">
  <app-page-header title="PURCHASES.REPORTS" subtitle="PURCHASES.TITLE" (refresh)="retry()" />

  <!-- Filter Bar -->
  <div class="filter-bar">
    <p-datepicker
      [(ngModel)]="dateRange"
      selectionMode="range"
      [placeholder]="'COMMON.DATE_RANGE' | translate"
      dateFormat="yy-mm-dd"
      [showIcon]="true"
      styleClass="filter-input"
    />
    <p-button
      [label]="'PURCHASES.GENERATE_REPORT' | translate"
      icon="pi pi-search"
      (onClick)="generateReport()"
    />
  </div>

  <p-tabs [value]="activeTab()" (valueChange)="onTabChange($any($event))">
    <p-tablist>
      <p-tab value="summary">{{ 'PURCHASES.SUMMARY' | translate }}</p-tab>
      <p-tab value="product">{{ 'PURCHASES.BY_PRODUCT' | translate }}</p-tab>
      <p-tab value="supplier">{{ 'PURCHASES.BY_SUPPLIER' | translate }}</p-tab>
      <p-tab value="trends">{{ 'PURCHASES.TRENDS' | translate }}</p-tab>
      <p-tab value="overdue">{{ 'PURCHASES.OVERDUE' | translate }}</p-tab>
    </p-tablist>
    <p-tabpanels>
      <!-- ─── Summary ───────────────────────── -->
      <p-tabpanel value="summary">
        @if (loading()) {
          <div class="loading-wrap"><p-progressSpinner strokeWidth="3" animationDuration="1s" /></div>
        } @else {
          <div class="stat-cards">
            <div class="stat-mini"><span class="stat-num">{{ getSummaryValue('pr_count') }}</span><span class="stat-lbl">{{ 'PURCHASES.PURCHASE_REQUESTS' | translate }}</span><span class="stat-val">{{ getSummaryValue('pr_value') | number:'1.0-0' }}</span></div>
            <div class="stat-mini"><span class="stat-num">{{ getSummaryValue('po_count') }}</span><span class="stat-lbl">{{ 'PURCHASES.PURCHASE_ORDERS' | translate }}</span><span class="stat-val">{{ getSummaryValue('po_value') | number:'1.0-0' }}</span></div>
            <div class="stat-mini"><span class="stat-num">{{ getSummaryValue('bills_count') }}</span><span class="stat-lbl">{{ 'PURCHASES.BILLS' | translate }}</span><span class="stat-val">{{ getSummaryValue('bills_value') | number:'1.0-0' }}</span></div>
            <div class="stat-mini"><span class="stat-num">{{ getSummaryValue('returns_count') }}</span><span class="stat-lbl">{{ 'PURCHASES.RETURNS' | translate }}</span><span class="stat-val">{{ getSummaryValue('returns_value') | number:'1.0-0' }}</span></div>
            <div class="stat-mini highlight"><span class="stat-num">{{ getSummaryValue('net_purchases') | number:'1.0-0' }}</span><span class="stat-lbl">{{ 'PURCHASES.NET_PURCHASES' | translate }}</span></div>
            <div class="stat-mini"><span class="stat-num">{{ getSummaryValue('amount_paid') | number:'1.0-0' }}</span><span class="stat-lbl">{{ 'PURCHASES.AMOUNT_PAID' | translate }}</span></div>
            <div class="stat-mini"><span class="stat-num">{{ getSummaryValue('amount_outstanding') | number:'1.0-0' }}</span><span class="stat-lbl">{{ 'PURCHASES.OUTSTANDING_PAYABLES' | translate }}</span></div>
          </div>
          @if (summaryChart()) {
            <div class="chart-wrap">
              <p-chart type="bar" [data]="summaryChart()" [options]="barOptions" [style]="{'height':'300px'}" />
            </div>
          }
        }
      </p-tabpanel>

      <!-- ─── By Product ────────────────────── -->
      <p-tabpanel value="product">
        @if (loading()) {
          <div class="loading-wrap"><p-progressSpinner strokeWidth="3" animationDuration="1s" /></div>
        } @else {
          @if (productChart()) {
            <div class="chart-wrap">
              <h4>{{ 'PURCHASES.TOP_10_PRODUCTS' | translate }}</h4>
              <p-chart type="bar" [data]="productChart()" [options]="horizontalBarOptions" [style]="{'height':'300px'}" />
            </div>
          }
          <div class="table-toolbar">
            <p-button icon="pi pi-file-excel" [label]="'COMMON.EXPORT' | translate" severity="success" size="small" (onClick)="exportExcel(productData(), 'purchases-by-product')" />
          </div>
          <p-table [value]="productData()" [paginator]="true" [rows]="25" styleClass="p-datatable-sm p-datatable-striped" [sortMode]="'single'">
            <ng-template #header>
              <tr>
                <th pSortableColumn="name">{{ 'PURCHASES.PRODUCT' | translate }} <p-sortIcon field="name" /></th>
                <th>{{ 'PURCHASES.SKU' | translate }}</th>
                <th pSortableColumn="quantity_purchased">{{ 'PURCHASES.QTY_PURCHASED' | translate }} <p-sortIcon field="quantity_purchased" /></th>
                <th pSortableColumn="total_cost">{{ 'PURCHASES.TOTAL_COST' | translate }} <p-sortIcon field="total_cost" /></th>
                <th pSortableColumn="average_unit_cost">{{ 'PURCHASES.AVG_UNIT_COST' | translate }} <p-sortIcon field="average_unit_cost" /></th>
                <th>{{ 'PURCHASES.RETURNS' | translate }}</th>
              </tr>
            </ng-template>
            <ng-template #body let-row>
              <tr>
                <td>{{ row.name }}</td>
                <td class="mono">{{ row.sku }}</td>
                <td class="amount">{{ row.quantity_purchased }}</td>
                <td class="amount">{{ row.total_cost | number:'1.2-2' }}</td>
                <td class="amount">{{ row.average_unit_cost | number:'1.2-2' }}</td>
                <td class="amount">{{ row.returns_qty }}</td>
              </tr>
            </ng-template>
            <ng-template #emptymessage><tr><td colspan="6" class="text-center">{{ 'COMMON.NO_DATA' | translate }}</td></tr></ng-template>
          </p-table>
        }
      </p-tabpanel>

      <!-- ─── By Supplier ───────────────────── -->
      <p-tabpanel value="supplier">
        @if (loading()) {
          <div class="loading-wrap"><p-progressSpinner strokeWidth="3" animationDuration="1s" /></div>
        } @else {
          @if (supplierChart()) {
            <div class="chart-wrap">
              <h4>{{ 'PURCHASES.TOP_SUPPLIERS' | translate }}</h4>
              <p-chart type="bar" [data]="supplierChart()" [options]="horizontalBarOptions" [style]="{'height':'300px'}" />
            </div>
          }
          <div class="table-toolbar">
            <p-button icon="pi pi-file-excel" [label]="'COMMON.EXPORT' | translate" severity="success" size="small" (onClick)="exportExcel(supplierData(), 'purchases-by-supplier')" />
          </div>
          <p-table [value]="supplierData()" [paginator]="true" [rows]="25" styleClass="p-datatable-sm p-datatable-striped" [sortMode]="'single'">
            <ng-template #header>
              <tr>
                <th pSortableColumn="name">{{ 'PURCHASES.SUPPLIER' | translate }} <p-sortIcon field="name" /></th>
                <th>{{ 'PURCHASES.PURCHASE_ORDERS' | translate }}</th>
                <th pSortableColumn="total_spend">{{ 'PURCHASES.TOTAL_SPEND' | translate }} <p-sortIcon field="total_spend" /></th>
                <th>{{ 'PURCHASES.RETURNS' | translate }}</th>
                <th pSortableColumn="net_spend">{{ 'PURCHASES.NET_SPEND' | translate }} <p-sortIcon field="net_spend" /></th>
                <th>{{ 'PURCHASES.OUTSTANDING_PAYABLES' | translate }}</th>
              </tr>
            </ng-template>
            <ng-template #body let-row>
              <tr>
                <td>{{ row.name }}</td>
                <td class="amount">{{ row.po_count }}</td>
                <td class="amount">{{ row.total_spend | number:'1.2-2' }}</td>
                <td class="amount">{{ row.returns | number:'1.2-2' }}</td>
                <td class="amount">{{ row.net_spend | number:'1.2-2' }}</td>
                <td class="amount">{{ row.outstanding | number:'1.2-2' }}</td>
              </tr>
            </ng-template>
            <ng-template #emptymessage><tr><td colspan="6" class="text-center">{{ 'COMMON.NO_DATA' | translate }}</td></tr></ng-template>
          </p-table>
        }
      </p-tabpanel>

      <!-- ─── Trends ────────────────────────── -->
      <p-tabpanel value="trends">
        @if (loading()) {
          <div class="loading-wrap"><p-progressSpinner strokeWidth="3" animationDuration="1s" /></div>
        } @else {
          @if (trendsChart()) {
            <div class="chart-wrap chart-wide">
              <p-chart type="line" [data]="trendsChart()" [options]="lineOptions" [style]="{'height':'350px'}" />
            </div>
          } @else {
            <div class="no-data">{{ 'COMMON.NO_DATA' | translate }}</div>
          }
        }
      </p-tabpanel>

      <!-- ─── Overdue ───────────────────────── -->
      <p-tabpanel value="overdue">
        @if (loading()) {
          <div class="loading-wrap"><p-progressSpinner strokeWidth="3" animationDuration="1s" /></div>
        } @else {
          @if (agingBuckets()) {
            <div class="aging-cards">
              <div class="aging-card"><span class="aging-label">{{ 'PURCHASES.CURRENT' | translate }}</span><span class="aging-val">{{ getAgingValue('current') | number:'1.0-0' }}</span></div>
              <div class="aging-card warn"><span class="aging-label">1-30 {{ 'PURCHASES.DAYS' | translate }}</span><span class="aging-val">{{ getAgingValue('1_30') | number:'1.0-0' }}</span></div>
              <div class="aging-card danger"><span class="aging-label">31-60 {{ 'PURCHASES.DAYS' | translate }}</span><span class="aging-val">{{ getAgingValue('31_60') | number:'1.0-0' }}</span></div>
              <div class="aging-card danger"><span class="aging-label">61-90 {{ 'PURCHASES.DAYS' | translate }}</span><span class="aging-val">{{ getAgingValue('61_90') | number:'1.0-0' }}</span></div>
              <div class="aging-card critical"><span class="aging-label">90+ {{ 'PURCHASES.DAYS' | translate }}</span><span class="aging-val">{{ getAgingValue('90_plus') | number:'1.0-0' }}</span></div>
            </div>
          }
          <div class="table-toolbar">
            <p-button icon="pi pi-file-excel" [label]="'COMMON.EXPORT' | translate" severity="success" size="small" (onClick)="exportExcel(overdueData(), 'overdue-bills')" />
          </div>
          <p-table [value]="overdueData()" [paginator]="true" [rows]="25" styleClass="p-datatable-sm p-datatable-striped" [sortMode]="'single'">
            <ng-template #header>
              <tr>
                <th>{{ 'PURCHASES.BILL_NUMBER' | translate }}</th>
                <th pSortableColumn="supplier_name">{{ 'PURCHASES.SUPPLIER' | translate }} <p-sortIcon field="supplier_name" /></th>
                <th>{{ 'PURCHASES.DATE' | translate }}</th>
                <th>{{ 'PURCHASES.DUE_DATE' | translate }}</th>
                <th pSortableColumn="balance_due">{{ 'PURCHASES.BALANCE_DUE' | translate }} <p-sortIcon field="balance_due" /></th>
                <th pSortableColumn="days_overdue">{{ 'PURCHASES.DAYS_OVERDUE' | translate }} <p-sortIcon field="days_overdue" /></th>
              </tr>
            </ng-template>
            <ng-template #body let-row>
              <tr>
                <td class="mono">{{ row.bill_number }}</td>
                <td>{{ row.supplier_name }}</td>
                <td>{{ row.date }}</td>
                <td>{{ row.due_date }}</td>
                <td class="amount">{{ row.balance_due | number:'1.2-2' }}</td>
                <td><p-tag [value]="row.days_overdue + ''" severity="danger" /></td>
              </tr>
            </ng-template>
            <ng-template #emptymessage><tr><td colspan="6" class="text-center">{{ 'PURCHASES.NO_OVERDUE' | translate }}</td></tr></ng-template>
          </p-table>
        }
      </p-tabpanel>
    </p-tabpanels>
  </p-tabs>
</div>
