<p-toast />

<div class="exchange-rates-page">
  <app-page-header title="EXCHANGE_RATES.TITLE" subtitle="EXCHANGE_RATES.SUBTITLE" (refresh)="retry()">
    <p-button
      [label]="'EXCHANGE_RATES.NEW_RATE' | translate"
      icon="pi pi-plus"
      (onClick)="openNew()"
    />
  </app-page-header>

  <ng-template #bodyTpl let-rate>
    <tr>
      <td>
        @if (rate.from_currency) {
          <span class="currency-badge">{{ rate.from_currency.code }} <small>{{ rate.from_currency.symbol }}</small></span>
        } @else {
          {{ getCurrencyCode(rate.from_currency_id, (currencies$ | async) || []) }}
        }
      </td>
      <td>
        @if (rate.to_currency) {
          <span class="currency-badge">{{ rate.to_currency.code }} <small>{{ rate.to_currency.symbol }}</small></span>
        } @else {
          {{ getCurrencyCode(rate.to_currency_id, (currencies$ | async) || []) }}
        }
      </td>
      <td class="rate-cell">{{ rate.rate | number:'1.2-6' }}</td>
      <td>{{ rate.effective_date }}</td>
    </tr>
  </ng-template>
  <app-data-table [data]="(exchangeRates$ | async) || []" [loading]="!!(loading$ | async)" [error]="(error$ | async) ?? null" [columns]="columns" (retry)="retry()" [bodyTpl]="bodyTpl">
  </app-data-table>
</div>

<!-- Create Dialog -->
<app-form-dialog [(visible)]="dialogVisible" [header]="'EXCHANGE_RATES.NEW_RATE' | translate" [saving]="!!(saving$ | async)" (save)="onSave()" [width]="'500px'">
  <form [formGroup]="rateForm" class="dialog-form">
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'EXCHANGE_RATES.FROM_CURRENCY' | translate }} *</label>
        <p-select
          formControlName="from_currency_id"
          [options]="(currencies$ | async) || []"
          optionLabel="code"
          optionValue="id"
          [placeholder]="'EXCHANGE_RATES.SELECT_CURRENCY' | translate"
        >
          <ng-template #selectedItem let-selected>
            <span>{{ selected.code }} - {{ selected.name_ar || selected.name }}</span>
          </ng-template>
          <ng-template #item let-currency>
            <span>{{ currency.code }} - {{ currency.name_ar || currency.name }}</span>
          </ng-template>
        </p-select>
        @if (rateForm.get('from_currency_id')?.touched && rateForm.get('from_currency_id')?.hasError('required')) {
          <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
        }
      </div>
      <div class="form-field">
        <label>{{ 'EXCHANGE_RATES.TO_CURRENCY' | translate }} *</label>
        <p-select
          formControlName="to_currency_id"
          [options]="(currencies$ | async) || []"
          optionLabel="code"
          optionValue="id"
          [placeholder]="'EXCHANGE_RATES.SELECT_CURRENCY' | translate"
        >
          <ng-template #selectedItem let-selected>
            <span>{{ selected.code }} - {{ selected.name_ar || selected.name }}</span>
          </ng-template>
          <ng-template #item let-currency>
            <span>{{ currency.code }} - {{ currency.name_ar || currency.name }}</span>
          </ng-template>
        </p-select>
        @if (rateForm.get('to_currency_id')?.touched && rateForm.get('to_currency_id')?.hasError('required')) {
          <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
        }
      </div>
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'EXCHANGE_RATES.RATE' | translate }} *</label>
        <p-inputNumber formControlName="rate" [min]="0" mode="decimal" [minFractionDigits]="2" [maxFractionDigits]="6" />
        @if (rateForm.get('rate')?.touched && rateForm.get('rate')?.hasError('required')) {
          <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
        }
      </div>
      <div class="form-field">
        <label>{{ 'EXCHANGE_RATES.EFFECTIVE_DATE' | translate }} *</label>
        <p-datepicker formControlName="effective_date" dateFormat="yy-mm-dd" [showIcon]="true" />
        @if (rateForm.get('effective_date')?.touched && rateForm.get('effective_date')?.hasError('required')) {
          <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
        }
      </div>
    </div>
  </form>
</app-form-dialog>
