<p-toast />
<p-confirmDialog />
<div class="expenses-page">
  <app-page-header title="EXPENSES.TITLE" subtitle="EXPENSES.SUBTITLE" (refresh)="retry()">
    @if (autoApprove) {
      <p-tag [value]="'COMMON.QUICK_MODE' | translate" severity="success" icon="pi pi-bolt" />
    } @else {
      <p-tag [value]="'COMMON.COMPLETE_MODE' | translate" severity="info" icon="pi pi-list-check" />
    }
    <p-button [label]="'EXPENSES.NEW' | translate" icon="pi pi-plus" (onClick)="openNew()" />
  </app-page-header>
  <ng-template #bodyTpl let-item>
    <tr>
      <td>{{ item.document_number }}</td>
      <td>{{ item.date }}</td>
      <td>{{ item.expense_category?.name || '—' }}</td>
      <td class="text-end">{{ item.total_amount | number:'1.2-2' }}</td>
      <td>{{ item.payment_method_label }}</td>
      <td><p-tag [value]="item.status_label" [severity]="getStatusSeverity(item.status)" /></td>
      <td>
        <div class="action-buttons">
          @if (item.status === 'draft') {
            <p-button icon="pi pi-check" [rounded]="true" [text]="true" severity="success" (onClick)="approve(item)" [pTooltip]="'EXPENSES.APPROVE' | translate" />
          }
          @if (item.status === 'approved') {
            <p-button icon="pi pi-times" [rounded]="true" [text]="true" severity="warn" (onClick)="cancel(item)" [pTooltip]="'EXPENSES.CANCEL' | translate" />
          }
          @if (item.status === 'draft') {
            <p-button icon="pi pi-pencil" [rounded]="true" [text]="true" severity="info" (onClick)="edit(item)" />
            <p-button icon="pi pi-trash" [rounded]="true" [text]="true" severity="danger" (onClick)="delete(item)" />
          }
        </div>
      </td>
    </tr>
  </ng-template>
  <app-data-table [data]="items()" [loading]="loading()" [error]="null" (retry)="retry()" [columns]="columns" [bodyTpl]="bodyTpl" />
</div>
<app-form-dialog [(visible)]="dialogVisible" [header]="editing() ? ('EXPENSES.EDIT' | translate) : ('EXPENSES.NEW' | translate)" [saving]="saving()" (save)="onSave()">
  <form [formGroup]="form" class="dialog-form">
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'EXPENSES.DATE' | translate }} *</label>
        <p-datepicker formControlName="date" dateFormat="yy-mm-dd" [showIcon]="true" />
      </div>
      <div class="form-field">
        <label>{{ 'EXPENSES.AMOUNT' | translate }} *</label>
        <p-inputNumber formControlName="amount" mode="decimal" [minFractionDigits]="2" [maxFractionDigits]="2" />
      </div>
    </div>
    <div class="form-field">
      <label>{{ 'EXPENSES.CATEGORY' | translate }} *</label>
      <p-select formControlName="expense_category_id" [options]="categories()" optionLabel="name" optionValue="id" [filter]="true" [placeholder]="'EXPENSES.SELECT_CATEGORY' | translate" />
    </div>
    <div class="form-field">
      <label>{{ 'EXPENSES.DESCRIPTION' | translate }} *</label>
      <input pInputText formControlName="description" />
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'EXPENSES.PAYMENT_METHOD' | translate }} *</label>
        <p-select formControlName="payment_method" [options]="paymentMethods" optionLabel="label" optionValue="value" (onChange)="onPaymentMethodChange($event.value)" />
      </div>
      <div class="form-field">
        <label>{{ 'EXPENSES.PAYING_ACCOUNT' | translate }} *</label>
        <p-select formControlName="paying_account_id" [options]="paymentAccountOptions()" optionLabel="label" optionValue="value" [filter]="true" filterBy="label" [showClear]="true" (onChange)="onAccountChange($event.value)" />
      </div>
    </div>
    <div class="form-field">
      <label>{{ 'EXPENSES.TAX_RATE' | translate }}</label>
      <p-select formControlName="tax_rate_id" [options]="(taxRates$ | async) || []" optionLabel="name" optionValue="id" [filter]="true" [showClear]="true" [placeholder]="'EXPENSES.SELECT_TAX' | translate" />
    </div>
    <div class="form-field">
      <label>{{ 'EXPENSES.NOTES' | translate }}</label>
      <textarea pTextarea formControlName="notes" rows="2"></textarea>
    </div>
  </form>
</app-form-dialog>
