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

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

  <ng-template #bodyTpl let-item>
      <tr>
        <td>{{ item.name_ar || item.name }}</td>
        <td>{{ item.source_cost_center?.name_ar || item.source_cost_center?.name || '-' }}</td>
        <td><p-tag [value]="item.method" severity="info" /></td>
        <td><p-tag [value]="item.is_active ? ('COMMON.ACTIVE' | translate) : ('COMMON.INACTIVE' | translate)" [severity]="item.is_active ? 'success' : 'danger'" /></td>
        <td>
          <div class="action-buttons">
            <p-button icon="pi pi-pencil" [rounded]="true" [text]="true" severity="info" (onClick)="edit(item)" />
            <p-button icon="pi pi-chart-bar" [rounded]="true" [text]="true" severity="warn" (onClick)="openSimulate(item)" pTooltip="Simulate" />
            <p-button icon="pi pi-play" [rounded]="true" [text]="true" severity="success" (onClick)="onExecute(item)" pTooltip="Execute" />
            <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()"
    (retry)="retry()"
    [columns]="columns"
    [bodyTpl]="bodyTpl"
  >
  </app-data-table>
</div>

<!-- Create/Edit Dialog -->
<app-form-dialog
  [(visible)]="dialogVisible"
  [header]="editing() ? ('ALLOCATION_RULES.EDIT' | translate) : ('ALLOCATION_RULES.NEW' | translate)"
  [saving]="saving()"
  (save)="onSave()"
  width="800px"
>
  <form [formGroup]="form" class="dialog-form">
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'ALLOCATION_RULES.NAME_AR' | translate }} *</label>
        <input pInputText formControlName="name_ar" />
      </div>
      <div class="form-field">
        <label>{{ 'ALLOCATION_RULES.NAME_EN' | translate }}</label>
        <input pInputText formControlName="name" />
      </div>
    </div>
    <div class="form-field">
      <label>{{ 'ALLOCATION_RULES.DESCRIPTION' | translate }}</label>
      <input pInputText formControlName="description" />
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'ALLOCATION_RULES.SOURCE_CC' | translate }} *</label>
        <p-select formControlName="source_cost_center_id" [options]="(costCenters$ | async) || []"
          optionLabel="name" optionValue="id" [filter]="true" [placeholder]="'COMMON.SELECT' | translate" appendTo="body" />
      </div>
      <div class="form-field">
        <label>{{ 'ALLOCATION_RULES.SOURCE_ACCOUNT' | translate }} *</label>
        <p-select formControlName="source_account_id" [options]="(accounts$ | async) || []"
          optionLabel="name" optionValue="id" [filter]="true" filterBy="name,code"
          [placeholder]="'COMMON.SELECT' | translate" appendTo="body" />
      </div>
    </div>
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'ALLOCATION_RULES.METHOD' | translate }} *</label>
        <p-select formControlName="method" [options]="methodOptions" optionLabel="label" optionValue="value" />
      </div>
      <div class="form-field switch-field-wrap">
        <label>{{ 'COMMON.ACTIVE' | translate }}</label>
        <p-toggleSwitch formControlName="is_active" />
      </div>
    </div>

    <h4 class="section-title">{{ 'ALLOCATION_RULES.LINES' | translate }}</h4>
    <div class="lines-table">
      <table>
        <thead>
          <tr>
            <th>{{ 'ALLOCATION_RULES.TARGET_CC' | translate }} *</th>
            <th>{{ 'ALLOCATION_RULES.PERCENTAGE' | translate }} *</th>
            <th></th>
          </tr>
        </thead>
        <tbody formArrayName="lines">
          @for (line of lines.controls; track line; let i = $index) {
            <tr [formGroupName]="$index">
              <td>
                <p-select formControlName="target_cost_center_id" [options]="(costCenters$ | async) || []"
                  optionLabel="name" optionValue="id" [filter]="true" [placeholder]="'COMMON.SELECT' | translate" appendTo="body" />
              </td>
              <td><p-inputNumber formControlName="percentage" suffix="%" [min]="0" [max]="100" /></td>
              <td>
                @if (lines.length > 1) {
                  <p-button icon="pi pi-times" [rounded]="true" [text]="true" severity="danger" size="small" (onClick)="removeLine(i)" />
                }
              </td>
            </tr>
          }
        </tbody>
      </table>
    </div>
    <p-button [label]="'ALLOCATION_RULES.ADD_LINE' | translate" icon="pi pi-plus" severity="secondary" [outlined]="true" size="small" (onClick)="addLine()" />
  </form>
</app-form-dialog>

<!-- Simulate Dialog -->
<p-dialog [header]="'ALLOCATION_RULES.SIMULATE' | translate" [(visible)]="simDialogVisible" [modal]="true" [style]="{ width: '500px' }">
  <form [formGroup]="simForm" class="dialog-form">
    <div class="form-row">
      <div class="form-field">
        <label>{{ 'ALLOCATION_RULES.PERIOD_START' | translate }} *</label>
        <p-datePicker formControlName="period_start" dateFormat="yy-mm-dd" appendTo="body" />
      </div>
      <div class="form-field">
        <label>{{ 'ALLOCATION_RULES.PERIOD_END' | translate }} *</label>
        <p-datePicker formControlName="period_end" dateFormat="yy-mm-dd" appendTo="body" />
      </div>
    </div>
    <p-button [label]="'ALLOCATION_RULES.SIMULATE' | translate" icon="pi pi-chart-bar" (onClick)="onSimulate()" [loading]="saving()" />
  </form>
  @if (simResult()) {
    <div class="sim-result">
      <h4>{{ 'ALLOCATION_RULES.SIM_RESULT' | translate }}</h4>
      <pre>{{ simResult() | json }}</pre>
    </div>
  }
</p-dialog>
