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

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

  <ng-template #bodyTpl let-unit>
    <tr>
      <td>{{ unit.name_ar }}</td>
      <td>{{ unit.name_en }}</td>
      <td>{{ unit.symbol }}</td>
      <td>{{ unit.unit_group?.name || '—' }}</td>
      <td>
        <p-tag
          [value]="unit.is_base ? ('COMMON.YES' | translate) : ('COMMON.NO' | translate)"
          [severity]="unit.is_base ? 'info' : 'secondary'"
        />
      </td>
      <td>
        <p-tag
          [value]="unit.is_active ? ('COMMON.ACTIVE' | translate) : ('COMMON.INACTIVE' | translate)"
          [severity]="unit.is_active ? 'success' : 'danger'"
        />
      </td>
      <td>
        <div class="action-buttons">
          <p-button
            icon="pi pi-pencil"
            [rounded]="true"
            [text]="true"
            severity="info"
            (onClick)="editUnit(unit)"
          />
          <p-button
            icon="pi pi-trash"
            [rounded]="true"
            [text]="true"
            severity="danger"
            (onClick)="deleteUnit(unit)"
          />
        </div>
      </td>
    </tr>
  </ng-template>
  <app-data-table [data]="(units$ | async) || []" [loading]="!!(loading$ | async)" [error]="(error$ | async) ?? null" (retry)="retry()" [columns]="columns" [bodyTpl]="bodyTpl">
  </app-data-table>
</div>

<!-- Create/Edit Dialog -->
<app-form-dialog
  [(visible)]="dialogVisible"
  [header]="editingUnit() ? ('UNITS.EDIT_UNIT' | translate) : ('UNITS.NEW_UNIT' | translate)"
  [saving]="!!(saving$ | async)"
  (save)="onSave()"
>
  <form [formGroup]="unitForm" class="dialog-form">
    <div class="form-field">
      <label>{{ 'UNITS.GROUP' | translate }} *</label>
      <p-select
        formControlName="unit_group_id"
        [options]="(unitGroups$ | async) || []"
        optionLabel="name"
        optionValue="id"
        [filter]="true"
        filterBy="name,name_ar,name_en"
        [showClear]="true"
        [placeholder]="'UNITS.SELECT_GROUP' | translate"
      />
      @if (unitForm.get('unit_group_id')?.touched && unitForm.get('unit_group_id')?.hasError('required')) {
        <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
      }
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'UNITS.NAME_AR' | translate }} *</label>
        <input pInputText formControlName="name_ar" />
        @if (unitForm.get('name_ar')?.touched && unitForm.get('name_ar')?.hasError('required')) {
          <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
        }
      </div>
      <div class="form-field">
        <label>{{ 'UNITS.NAME_EN' | translate }}</label>
        <input pInputText formControlName="name_en" />
      </div>
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'UNITS.SYMBOL' | translate }} *</label>
        <input pInputText formControlName="symbol" />
        @if (unitForm.get('symbol')?.touched && unitForm.get('symbol')?.hasError('required')) {
          <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
        }
      </div>
      <div class="form-field">
        <label>{{ 'UNITS.CONVERSION_FACTOR' | translate }}</label>
        <p-inputNumber formControlName="conversion_factor" [minFractionDigits]="1" [min]="0" />
      </div>
    </div>
    <div class="form-row">
      <div class="form-field switch-field">
        <label>{{ 'UNITS.IS_BASE' | translate }}</label>
        <p-toggleSwitch formControlName="is_base" />
      </div>
      <div class="form-field switch-field">
        <label>{{ 'COMMON.ACTIVE' | translate }}</label>
        <p-toggleSwitch formControlName="is_active" />
      </div>
    </div>
  </form>
</app-form-dialog>
