<div class="purchases-dashboard">
  <app-page-header title="PURCHASES.DASHBOARD" subtitle="PURCHASES.TITLE" (refresh)="retry()" />

  @if (loading()) {
    <div class="loading-wrap">
      <p-progressSpinner strokeWidth="3" animationDuration="1s" />
    </div>
  } @else if (error()) {
    <div class="error-wrap">
      <i class="pi pi-exclamation-triangle"></i>
      <p>{{ 'COMMON.ERROR' | translate }}</p>
      <p-button [label]="'COMMON.RETRY' | translate" icon="pi pi-refresh" (onClick)="retry()" />
    </div>
  } @else {
    <!-- Overdue Alert -->
    @if (overdueItems().length > 0) {
      <div class="overdue-alert">
        <i class="pi pi-exclamation-circle"></i>
        <span>
          {{ 'PURCHASES.OVERDUE_ALERT' | translate }}:
          <strong>{{ overdueItems().length }}</strong> {{ 'PURCHASES.OVERDUE_BILLS' | translate }}
          @if (overdueTotal() > 0) {
            — <strong>{{ overdueTotal() | number:'1.2-2' }}</strong>
          }
        </span>
        <p-button [label]="'COMMON.VIEW' | translate" icon="pi pi-arrow-right" [text]="true" size="small" [routerLink]="['/purchases/bills']" />
      </div>
    }

    <!-- KPI Cards -->
    <div class="stat-cards">
      <div class="stat-card stat-blue">
        <div class="stat-icon-wrap"><i class="pi pi-shopping-cart"></i></div>
        <div class="stat-info">
          <span class="stat-value">{{ totalPurchases() | number:'1.0-0' }}</span>
          <span class="stat-label">{{ 'PURCHASES.TOTAL_PURCHASES' | translate }}</span>
        </div>
        <div class="stat-decoration"></div>
      </div>
      <div class="stat-card stat-amber">
        <div class="stat-icon-wrap"><i class="pi pi-clock"></i></div>
        <div class="stat-info">
          <span class="stat-value">{{ outstanding() | number:'1.0-0' }}</span>
          <span class="stat-label">{{ 'PURCHASES.OUTSTANDING_PAYABLES' | 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">{{ netPurchases() | number:'1.0-0' }}</span>
          <span class="stat-label">{{ 'PURCHASES.NET_PURCHASES' | translate }}</span>
        </div>
        <div class="stat-decoration"></div>
      </div>
      <div class="stat-card stat-purple">
        <div class="stat-icon-wrap"><i class="pi pi-file"></i></div>
        <div class="stat-info">
          <span class="stat-value">{{ poCount() }}</span>
          <span class="stat-label">{{ 'PURCHASES.PURCHASE_ORDERS' | translate }}</span>
        </div>
        <div class="stat-decoration"></div>
      </div>
      <div class="stat-card stat-rose">
        <div class="stat-icon-wrap"><i class="pi pi-inbox"></i></div>
        <div class="stat-info">
          <span class="stat-value">{{ prCount() }}</span>
          <span class="stat-label">{{ 'PURCHASES.PURCHASE_REQUESTS' | translate }}</span>
        </div>
        <div class="stat-decoration"></div>
      </div>
    </div>

    <!-- Quick Actions -->
    <div class="quick-actions">
      <p-button [label]="'PURCHASES.NEW_ORDER' | translate" icon="pi pi-file-edit" severity="info" [routerLink]="['/purchases/orders']" />
      <p-button [label]="'PURCHASES.NEW_BILL' | translate" icon="pi pi-file" severity="success" [routerLink]="['/purchases/bills']" />
      <p-button [label]="'PURCHASES.SUPPLIER_PRICES' | translate" icon="pi pi-tags" severity="warn" [routerLink]="['/purchases/supplier-prices']" />
      <p-button
        [label]="'PURCHASES_GUIDE.TITLE' | translate"
        icon="pi pi-map"
        severity="help"
        [outlined]="true"
        [routerLink]="['/purchases/guide']"
      />
    </div>

    <!-- Charts Row 1 -->
    <div class="charts-row">
      <div class="chart-card">
        <h3>{{ 'PURCHASES.PURCHASE_TREND' | translate }}</h3>
        @if (trendsData()) {
          <p-chart type="line" [data]="trendsData()" [options]="lineChartOptions" [style]="{'height': '300px'}" />
        } @else {
          <div class="no-chart-data">{{ 'COMMON.NO_DATA' | translate }}</div>
        }
      </div>
      <div class="chart-card">
        <h3>{{ 'PURCHASES.SPEND_BY_CATEGORY' | translate }}</h3>
        @if (categoryData()) {
          <p-chart type="doughnut" [data]="categoryData()" [options]="doughnutChartOptions" [style]="{'height': '300px'}" />
        } @else {
          <div class="no-chart-data">{{ 'COMMON.NO_DATA' | translate }}</div>
        }
      </div>
    </div>

    <!-- Charts Row 2 -->
    <div class="charts-row">
      <div class="chart-card">
        <h3>{{ 'PURCHASES.TOP_SUPPLIERS' | translate }}</h3>
        @if (supplierData()) {
          <p-chart type="bar" [data]="supplierData()" [options]="barChartOptions" [style]="{'height': '300px'}" />
        } @else {
          <div class="no-chart-data">{{ 'COMMON.NO_DATA' | translate }}</div>
        }
      </div>
      <div class="chart-card">
        <h3>{{ 'PURCHASES.OVERDUE_SUMMARY' | translate }}</h3>
        @if (overdueItems().length > 0) {
          <p-table [value]="overdueItems()" [paginator]="false" styleClass="p-datatable-sm">
            <ng-template #header>
              <tr>
                <th>{{ 'PURCHASES.BILL_NUMBER' | translate }}</th>
                <th>{{ 'PURCHASES.SUPPLIER' | translate }}</th>
                <th>{{ 'PURCHASES.BALANCE_DUE' | translate }}</th>
                <th>{{ 'PURCHASES.DAYS_OVERDUE' | translate }}</th>
              </tr>
            </ng-template>
            <ng-template #body let-bill>
              <tr>
                <td class="mono">{{ bill.bill_number }}</td>
                <td>{{ bill.supplier_name }}</td>
                <td class="amount">{{ bill.balance_due | number:'1.2-2' }}</td>
                <td><p-tag [value]="bill.days_overdue + ' days'" severity="danger" /></td>
              </tr>
            </ng-template>
          </p-table>
        } @else {
          <div class="no-chart-data">{{ 'PURCHASES.NO_OVERDUE' | translate }}</div>
        }
      </div>
    </div>
  }
</div>
