<p-toast />
<p-confirmDialog />

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

  <ng-template #bodyTpl let-taxRate>
    <tr>
      <td class="mono">{{ taxRate.code }}</td>
      <td>{{ taxRate.name_ar || taxRate.name }}</td>
      <td class="rate-cell">{{ taxRate.rate }}%</td>
      <td>
        <p-tag
          [value]="'TAX_RATES.TYPE_' + (taxRate.tax_type?.value || taxRate.tax_type || '').toUpperCase() | translate"
          [severity]="(taxRate.tax_type?.value || taxRate.tax_type) === 'vat' ? 'info' : 'warn'"
        />
      </td>
      <td>
        @if (taxRate.is_inclusive) {
          <i class="pi pi-check" style="color: #2e7d32"></i>
        }
      </td>
      <td>
        @if (taxRate.is_default) {
          <p-tag value="Default" severity="success" />
        }
      </td>
      <td>
        <p-tag
          [value]="taxRate.is_active ? ('COMMON.ACTIVE' | translate) : ('COMMON.INACTIVE' | translate)"
          [severity]="taxRate.is_active ? 'success' : 'danger'"
        />
      </td>
      <td>
        <div class="action-buttons">
          <p-button
            icon="pi pi-pencil"
            [rounded]="true"
            [text]="true"
            severity="info"
            (onClick)="editTaxRate(taxRate)"
          />
          <p-button
            icon="pi pi-trash"
            [rounded]="true"
            [text]="true"
            severity="danger"
            (onClick)="deleteTaxRate(taxRate)"
          />
        </div>
      </td>
    </tr>
  </ng-template>
  <app-data-table [data]="(taxRates$ | async) || []" [loading]="!!(loading$ | async)" [error]="(error$ | async) ?? null" [columns]="columns" (retry)="retry()" [bodyTpl]="bodyTpl">
  </app-data-table>
</div>

<!-- Create/Edit Dialog -->
<app-form-dialog
  [(visible)]="dialogVisible"
  [header]="editingTaxRate() ? ('TAX_RATES.EDIT_TAX_RATE' | translate) : ('TAX_RATES.NEW_TAX_RATE' | translate)"
  [saving]="!!(saving$ | async)"
  (save)="onSave()"
>
  <form [formGroup]="taxRateForm" class="dialog-form">
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'TAX_RATES.CODE' | translate }} *</label>
        <input pInputText formControlName="code" placeholder="VAT14" />
        @if (taxRateForm.get('code')?.touched && taxRateForm.get('code')?.hasError('required')) {
          <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
        }
      </div>
      <div class="form-field">
        <label>{{ 'TAX_RATES.TAX_TYPE' | translate }} *</label>
        <p-select formControlName="tax_type" [options]="taxTypeOptions" optionLabel="label" optionValue="value" />
      </div>
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'TAX_RATES.NAME_AR' | translate }} *</label>
        <input pInputText formControlName="name_ar" />
        @if (taxRateForm.get('name_ar')?.touched && taxRateForm.get('name_ar')?.hasError('required')) {
          <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
        }
      </div>
      <div class="form-field">
        <label>{{ 'TAX_RATES.NAME_EN' | translate }}</label>
        <input pInputText formControlName="name_en" />
      </div>
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'TAX_RATES.RATE' | translate }} (%) *</label>
        <p-inputNumber formControlName="rate" [min]="0" [max]="100" suffix="%" [minFractionDigits]="0" [maxFractionDigits]="2" />
        @if (taxRateForm.get('rate')?.touched && taxRateForm.get('rate')?.hasError('required')) {
          <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
        }
      </div>
      <div class="form-field">
        <label>{{ 'TAX_RATES.ACCOUNT' | translate }}</label>
        <p-select
          formControlName="account_id"
          [options]="detailAccounts()"
          optionLabel="name_ar"
          optionValue="id"
          [filter]="true"
          filterBy="name_ar,name_en,code"
          [showClear]="true"
          [placeholder]="'TAX_RATES.SELECT_ACCOUNT' | translate"
        >
          <ng-template #selectedItem let-selected>
            <span>{{ selected.code }} - {{ selected.name_ar }}</span>
          </ng-template>
          <ng-template #item let-account>
            <span>{{ account.code }} - {{ account.name_ar }}</span>
          </ng-template>
        </p-select>
      </div>
    </div>
    <div class="switch-row">
      <div class="switch-item">
        <p-toggleSwitch formControlName="is_inclusive" />
        <label>{{ 'TAX_RATES.INCLUSIVE' | translate }}</label>
      </div>
      <div class="switch-item">
        <p-toggleSwitch formControlName="is_default" />
        <label>{{ 'TAX_RATES.DEFAULT' | translate }}</label>
      </div>
      <div class="switch-item">
        <p-toggleSwitch formControlName="is_active" />
        <label>{{ 'COMMON.ACTIVE' | translate }}</label>
      </div>
    </div>
  </form>
</app-form-dialog>
