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

  @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>
          {{ 'SALES.OVERDUE_ALERT' | translate }}:
          <strong>{{ overdueItems().length }}</strong> {{ 'SALES.OVERDUE_INVOICES' | 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]="['/sales/invoices']"
        />
      </div>
    }

    <!-- KPI Cards -->
    <div class="stat-cards">
      <div class="stat-card stat-blue">
        <div class="stat-icon-wrap"><i class="pi pi-chart-line"></i></div>
        <div class="stat-info">
          <span class="stat-value">{{ totalSales() | number:'1.0-0' }}</span>
          <span class="stat-label">{{ 'SALES.TOTAL_SALES' | 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">{{ 'SALES.OUTSTANDING' | 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">{{ netSales() | number:'1.0-0' }}</span>
          <span class="stat-label">{{ 'SALES.NET_SALES' | translate }}</span>
        </div>
        <div class="stat-decoration"></div>
      </div>
      <div class="stat-card stat-purple">
        <div class="stat-icon-wrap"><i class="pi pi-percentage"></i></div>
        <div class="stat-info">
          <span class="stat-value">{{ collectionRate() }}%</span>
          <span class="stat-label">{{ 'SALES.COLLECTION_RATE' | translate }}</span>
        </div>
        <div class="stat-decoration"></div>
      </div>
      <div class="stat-card stat-rose">
        <div class="stat-icon-wrap"><i class="pi pi-receipt"></i></div>
        <div class="stat-info">
          <span class="stat-value">{{ avgInvoice() | number:'1.0-0' }}</span>
          <span class="stat-label">{{ 'SALES.AVG_INVOICE' | translate }}</span>
        </div>
        <div class="stat-decoration"></div>
      </div>
    </div>

    <!-- Quick Actions -->
    <div class="quick-actions">
      <p-button
        [label]="'SALES.NEW_QUOTATION' | translate"
        icon="pi pi-file-edit"
        severity="info"
        [routerLink]="['/sales/quotations']"
      />
      <p-button
        [label]="'SALES.NEW_INVOICE' | translate"
        icon="pi pi-file"
        severity="success"
        [routerLink]="['/sales/invoices']"
      />
      <p-button
        [label]="'SALES.COMMISSIONS' | translate"
        icon="pi pi-money-bill"
        severity="warn"
        [routerLink]="['/sales/commissions']"
      />
      <p-button
        [label]="'SALES_GUIDE.TITLE' | translate"
        icon="pi pi-map"
        severity="help"
        [outlined]="true"
        [routerLink]="['/sales/guide']"
      />
    </div>

    <!-- Charts Row 1 -->
    <div class="charts-row">
      <div class="chart-card">
        <h3>{{ 'SALES.SALES_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>{{ 'SALES.SALES_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>{{ 'SALES.TOP_CUSTOMERS' | translate }}</h3>
        @if (customerData()) {
          <p-chart type="bar" [data]="customerData()" [options]="barChartOptions" [style]="{'height': '300px'}" />
        } @else {
          <div class="no-chart-data">{{ 'COMMON.NO_DATA' | translate }}</div>
        }
      </div>
      <div class="chart-card">
        <h3>{{ 'SALES.OVERDUE_SUMMARY' | translate }}</h3>
        @if (overdueItems().length > 0) {
          <p-table [value]="overdueItems()" [paginator]="false" styleClass="p-datatable-sm">
            <ng-template #header>
              <tr>
                <th>{{ 'SALES.INVOICE_NUMBER' | translate }}</th>
                <th>{{ 'SALES.CUSTOMER' | translate }}</th>
                <th>{{ 'SALES.BALANCE_DUE' | translate }}</th>
                <th>{{ 'SALES.DAYS_OVERDUE' | translate }}</th>
              </tr>
            </ng-template>
            <ng-template #body let-inv>
              <tr>
                <td class="mono">{{ inv.invoice_number }}</td>
                <td>{{ inv.customer_name }}</td>
                <td class="amount">{{ inv.balance_due | number:'1.2-2' }}</td>
                <td>
                  <p-tag [value]="inv.days_overdue + ' days'" severity="danger" />
                </td>
              </tr>
            </ng-template>
          </p-table>
        } @else {
          <div class="no-chart-data">{{ 'SALES.NO_OVERDUE' | translate }}</div>
        }
      </div>
    </div>
  }
</div>
