<app-page-header
  [title]="'SUPPLIER_STATEMENT.TITLE' | translate"
  [subtitle]="partnerName() || ''"
  icon="pi pi-file-check"
></app-page-header>

<!-- Filter Bar -->
<div class="filter-bar">
  <div class="filter-row">
    <div class="filter-field supplier-field">
      <label>{{ 'SUPPLIER_STATEMENT.SUPPLIER' | translate }}</label>
      <p-select
        [options]="suppliers()"
        [ngModel]="selectedSupplierId()"
        (ngModelChange)="selectedSupplierId.set($event)"
        [filter]="true"
        filterBy="label"
        (onFilter)="onSupplierFilter($event)"
        [placeholder]="'SUPPLIER_STATEMENT.SELECT_SUPPLIER' | translate"
        [showClear]="true"
        [loading]="suppliersLoading()"
        optionLabel="label"
        optionValue="value"
        styleClass="w-full"
      ></p-select>
    </div>

    <div class="filter-field date-field">
      <label>{{ 'SUPPLIER_STATEMENT.DATE_FROM' | translate }}</label>
      <p-datepicker
        [ngModel]="dateFrom()"
        (ngModelChange)="dateFrom.set($event)"
        dateFormat="yy-mm-dd"
        [showIcon]="true"
        styleClass="w-full"
      ></p-datepicker>
    </div>

    <div class="filter-field date-field">
      <label>{{ 'SUPPLIER_STATEMENT.DATE_TO' | translate }}</label>
      <p-datepicker
        [ngModel]="dateTo()"
        (ngModelChange)="dateTo.set($event)"
        dateFormat="yy-mm-dd"
        [showIcon]="true"
        styleClass="w-full"
      ></p-datepicker>
    </div>

    <div class="filter-presets">
      <button pButton class="p-button-text p-button-sm" (click)="setToday()">
        {{ 'SUPPLIER_STATEMENT.TODAY' | translate }}
      </button>
      <button pButton class="p-button-text p-button-sm" (click)="setThisMonth()">
        {{ 'SUPPLIER_STATEMENT.THIS_MONTH' | translate }}
      </button>
      <button pButton class="p-button-text p-button-sm" (click)="setThisYear()">
        {{ 'SUPPLIER_STATEMENT.THIS_YEAR' | translate }}
      </button>
    </div>

    <div class="filter-actions">
      <button
        pButton
        class="p-button-primary"
        icon="pi pi-search"
        [label]="'SUPPLIER_STATEMENT.GENERATE' | translate"
        (click)="generate()"
        [disabled]="!selectedSupplierId() || !dateFrom() || !dateTo()"
      ></button>
      <button
        pButton
        class="p-button-secondary"
        icon="pi pi-print"
        [label]="'SUPPLIER_STATEMENT.PRINT' | translate"
        (click)="printStatement()"
        [disabled]="!loaded()"
      ></button>
    </div>
  </div>
</div>

<!-- Loading -->
@if (loading()) {
  <div class="loading-container">
    <p-progressSpinner strokeWidth="3" animationDuration="1s"></p-progressSpinner>
  </div>
}

<!-- Results -->
@if (loaded() && !loading()) {
  <!-- Summary Cards -->
  <div class="summary-cards">
    <div class="summary-card card-opening">
      <div class="card-icon"><i class="pi pi-wallet"></i></div>
      <div class="card-content">
        <span class="card-label">{{ 'SUPPLIER_STATEMENT.OPENING_BALANCE' | translate }}</span>
        <span class="card-value">{{ openingBalance() | number:'1.2-2' }}</span>
      </div>
    </div>
    <div class="summary-card card-debit">
      <div class="card-icon"><i class="pi pi-arrow-up"></i></div>
      <div class="card-content">
        <span class="card-label">{{ 'SUPPLIER_STATEMENT.TOTAL_DEBIT' | translate }}</span>
        <span class="card-value">{{ totalDebit() | number:'1.2-2' }}</span>
      </div>
    </div>
    <div class="summary-card card-credit">
      <div class="card-icon"><i class="pi pi-arrow-down"></i></div>
      <div class="card-content">
        <span class="card-label">{{ 'SUPPLIER_STATEMENT.TOTAL_CREDIT' | translate }}</span>
        <span class="card-value">{{ totalCredit() | number:'1.2-2' }}</span>
      </div>
    </div>
    <div class="summary-card card-closing">
      <div class="card-icon"><i class="pi pi-check-circle"></i></div>
      <div class="card-content">
        <span class="card-label">{{ 'SUPPLIER_STATEMENT.CLOSING_BALANCE' | translate }}</span>
        <span class="card-value">{{ closingBalance() | number:'1.2-2' }}</span>
      </div>
    </div>
  </div>

  <!-- Transactions Table -->
  <div class="statement-table-wrapper">
    <p-table
      [value]="transactions()"
      [paginator]="false"
      [scrollable]="true"
      scrollHeight="flex"
      styleClass="p-datatable-sm p-datatable-striped"
    >
      <ng-template pTemplate="header">
        <tr>
          <th style="width: 50px">#</th>
          <th>{{ 'SUPPLIER_STATEMENT.DATE' | translate }}</th>
          <th>{{ 'SUPPLIER_STATEMENT.SOURCE' | translate }}</th>
          <th>{{ 'SUPPLIER_STATEMENT.DOCUMENT' | translate }}</th>
          <th>{{ 'SUPPLIER_STATEMENT.DESCRIPTION' | translate }}</th>
          <th class="text-end">{{ 'SUPPLIER_STATEMENT.DEBIT' | translate }}</th>
          <th class="text-end">{{ 'SUPPLIER_STATEMENT.CREDIT' | translate }}</th>
          <th class="text-end">{{ 'SUPPLIER_STATEMENT.BALANCE' | translate }}</th>
        </tr>
      </ng-template>

      <ng-template pTemplate="body" let-txn let-i="rowIndex">
        @if (i === 0) {
          <tr class="opening-balance-row">
            <td></td>
            <td colspan="4" class="opening-label">
              <strong>{{ 'SUPPLIER_STATEMENT.OPENING_BALANCE' | translate }}</strong>
            </td>
            <td class="text-end mono-cell"></td>
            <td class="text-end mono-cell"></td>
            <td class="text-end mono-cell balance-cell">
              <strong>{{ openingBalance() | number:'1.2-2' }}</strong>
            </td>
          </tr>
        }
        <tr>
          <td>{{ i + 1 }}</td>
          <td>{{ txn.date }}</td>
          <td>
            <p-tag
              [value]="getSourceInfo(txn.reference).label"
              [severity]="getSourceInfo(txn.reference).severity"
            ></p-tag>
          </td>
          <td>
            @if (getSourceInfo(txn.reference).route) {
              <a class="doc-link" (click)="navigateToSource(txn)">
                {{ getDisplayRef(txn) }}
              </a>
            } @else {
              {{ getDisplayRef(txn) }}
            }
          </td>
          <td>{{ txn.description }}</td>
          <td class="text-end mono-cell" [class.debit-cell]="txn.debit > 0">
            {{ txn.debit > 0 ? (txn.debit | number:'1.2-2') : '' }}
          </td>
          <td class="text-end mono-cell" [class.credit-cell]="txn.credit > 0">
            {{ txn.credit > 0 ? (txn.credit | number:'1.2-2') : '' }}
          </td>
          <td
            class="text-end mono-cell balance-cell"
            [class.positive-balance]="txn.balance > 0"
            [class.negative-balance]="txn.balance < 0"
          >
            <strong>{{ txn.balance | number:'1.2-2' }}</strong>
          </td>
        </tr>
      </ng-template>

      <ng-template pTemplate="footer">
        <tr class="totals-row">
          <td colspan="5" class="totals-label">
            <strong>{{ 'SUPPLIER_STATEMENT.TOTALS' | translate }}</strong>
          </td>
          <td class="text-end mono-cell debit-cell">
            <strong>{{ totalDebit() | number:'1.2-2' }}</strong>
          </td>
          <td class="text-end mono-cell credit-cell">
            <strong>{{ totalCredit() | number:'1.2-2' }}</strong>
          </td>
          <td class="text-end mono-cell balance-cell">
            <strong>{{ closingBalance() | number:'1.2-2' }}</strong>
          </td>
        </tr>
      </ng-template>

      <ng-template pTemplate="emptymessage">
        <tr>
          <td colspan="8" class="text-center p-4">
            {{ 'SUPPLIER_STATEMENT.NO_TRANSACTIONS' | translate }}
          </td>
        </tr>
      </ng-template>
    </p-table>
  </div>
}

<!-- Empty state before generation -->
@if (!loaded() && !loading()) {
  <div class="empty-state">
    <i class="pi pi-file-check"></i>
    <p>{{ 'SUPPLIER_STATEMENT.EMPTY_STATE' | translate }}</p>
  </div>
}
