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

  @if (loading()) {
    <div class="loading-state"><i class="pi pi-spin pi-spinner" style="font-size:2rem"></i></div>
  } @else {
    <div class="tree-table-card">
      <table class="tree-table">
        <thead>
          <tr>
            <th>{{ 'REVENUE_CAT.NAME' | translate }}</th>
            <th>{{ 'REVENUE_CAT.CODE' | translate }}</th>
            <th>{{ 'REVENUE_CAT.ACCOUNT' | translate }}</th>
            <th>{{ 'COMMON.STATUS' | translate }}</th>
            <th>{{ 'COMMON.ACTIONS' | translate }}</th>
          </tr>
        </thead>
        <tbody>
          @for (row of visibleRows(); track row.id) {
            <tr [class.depth-0]="row.depth === 0" [class.depth-1]="row.depth === 1" [class.depth-2]="row.depth >= 2">
              <td>
                <span [style.padding-inline-start.rem]="row.depth * 1.5" class="tree-cell">
                  @if (row.hasChildren) {
                    <button class="tree-toggle" (click)="toggleExpand(row)">
                      <i class="pi" [class.pi-chevron-down]="row.expanded" [class.pi-chevron-left]="!row.expanded"></i>
                    </button>
                  } @else {
                    <span class="tree-leaf"></span>
                  }
                  <i class="pi pi-folder" [class.pi-folder-open]="row.hasChildren && row.expanded" [class.pi-file]="!row.hasChildren" style="margin-inline-end:0.35rem; color:var(--color-brand)"></i>
                  {{ row.name }}
                </span>
              </td>
              <td class="mono">{{ row.code }}</td>
              <td>{{ row.account?.name || '—' }}</td>
              <td><p-tag [value]="row.is_active ? ('COMMON.ACTIVE' | translate) : ('COMMON.INACTIVE' | translate)" [severity]="row.is_active ? 'success' : 'danger'" /></td>
              <td>
                <div class="action-buttons">
                  <p-button icon="pi pi-plus" [rounded]="true" [text]="true" severity="success" (onClick)="openNew(row.id)" [pTooltip]="'REVENUE_CAT.ADD_CHILD' | translate" />
                  <p-button icon="pi pi-pencil" [rounded]="true" [text]="true" severity="info" (onClick)="edit(row)" />
                  <p-button icon="pi pi-trash" [rounded]="true" [text]="true" severity="danger" (onClick)="delete(row)" />
                </div>
              </td>
            </tr>
          }
          @if (visibleRows().length === 0) {
            <tr><td colspan="5" class="text-center">{{ 'COMMON.NO_DATA' | translate }}</td></tr>
          }
        </tbody>
      </table>
    </div>
  }
</div>
<app-form-dialog [(visible)]="dialogVisible" [header]="editing() ? ('REVENUE_CAT.EDIT' | translate) : ('REVENUE_CAT.NEW' | translate)" [saving]="saving()" (save)="onSave()">
  <form [formGroup]="form" class="dialog-form">
    <div class="form-field">
      <label>{{ 'REVENUE_CAT.PARENT' | translate }}</label>
      <p-select formControlName="parent_id" [options]="parentOptions()" optionLabel="name" optionValue="id" [filter]="true" [showClear]="true" [placeholder]="'REVENUE_CAT.ROOT' | translate" />
    </div>
    <div class="form-field">
      <label>{{ 'REVENUE_CAT.NAME' | translate }} *</label>
      <input pInputText formControlName="name" />
      @if (form.get('name')?.touched && form.get('name')?.hasError('required')) { <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small> }
    </div>
    <div class="form-row">
      <div class="form-field"><label>{{ 'REVENUE_CAT.NAME_AR' | translate }}</label><input pInputText formControlName="name_ar" /></div>
      <div class="form-field"><label>{{ 'REVENUE_CAT.NAME_EN' | translate }}</label><input pInputText formControlName="name_en" /></div>
    </div>
    <div class="form-field">
      <label>{{ 'REVENUE_CAT.ACCOUNT' | translate }}</label>
      <p-select formControlName="account_id" [options]="detailAccounts()" optionLabel="name" optionValue="id" [filter]="true" filterBy="name,code" [showClear]="true" [placeholder]="'REVENUE_CAT.SELECT_ACCOUNT' | translate" />
    </div>
    <div class="form-field">
      <label>{{ 'REVENUE_CAT.DESCRIPTION' | translate }}</label>
      <input pInputText formControlName="description" />
    </div>
    <div class="form-field switch-field">
      <label>{{ 'COMMON.ACTIVE' | translate }}</label>
      <p-toggleSwitch formControlName="is_active" />
    </div>
  </form>
</app-form-dialog>
