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

<app-page-header
  title="HR.KPIS.TITLE"
  subtitle="HR.KPIS.SUBTITLE"
  (refresh)="loadKpiPage(); loadTemplatePage()"
>
</app-page-header>

<p-tabs [value]="0">
  <p-tablist>
    <p-tab [value]="0">{{ 'HR.KPIS.TAB_KPIS' | translate }}</p-tab>
    <p-tab [value]="1">{{ 'HR.REVIEW_TEMPLATES.TAB_TEMPLATES' | translate }}</p-tab>
  </p-tablist>
  <p-tabpanels>
  <!-- Tab 1: KPIs -->
  <p-tabpanel [value]="0">
    <div class="flex justify-content-end mb-3">
      <p-button
        [label]="'HR.KPIS.NEW' | translate"
        icon="pi pi-plus"
        (onClick)="openNewKpi()"
        severity="success"
      />
    </div>

    <p-table
      [value]="kpiTableData()"
      [loading]="kpiTableLoading()"
      [paginator]="true"
      [rows]="kpiRows"
      [totalRecords]="kpiTotalRecords()"
      [lazy]="true"
      (onLazyLoad)="onKpiPageChange($event)"
      [first]="kpiFirst"
      [rowsPerPageOptions]="[10, 25, 50]"
      styleClass="p-datatable-sm p-datatable-striped"
      [tableStyle]="{ 'min-width': '60rem' }"
    >
      <ng-template pTemplate="header">
        <tr>
          <th>{{ 'HR.KPIS.CODE' | translate }}</th>
          <th>{{ 'HR.KPIS.NAME_AR' | translate }}</th>
          <th>{{ 'HR.KPIS.CATEGORY' | translate }}</th>
          <th>{{ 'HR.KPIS.WEIGHT' | translate }}</th>
          <th>{{ 'HR.KPIS.TARGET_VALUE' | translate }}</th>
          <th>{{ 'HR.KPIS.UNIT' | translate }}</th>
          <th>{{ 'COMMON.STATUS' | translate }}</th>
          <th>{{ 'COMMON.ACTIONS' | translate }}</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-item>
        <tr>
          <td>{{ item.code }}</td>
          <td>{{ item.name_ar }}</td>
          <td>{{ item.category }}</td>
          <td>{{ item.weight }}</td>
          <td>{{ item.target_value }}</td>
          <td>{{ item.unit }}</td>
          <td>
            <p-tag [value]="item.status" [severity]="$any(getStatusSeverity(item.status))"></p-tag>
          </td>
          <td>
            <div class="flex gap-2">
              <p-button
                icon="pi pi-pencil"
                [rounded]="true"
                [text]="true"
                severity="info"
                (onClick)="editKpi(item)"
              />
              <p-button
                icon="pi pi-trash"
                [rounded]="true"
                [text]="true"
                severity="danger"
                (onClick)="deleteKpi(item)"
              />
            </div>
          </td>
        </tr>
      </ng-template>
      <ng-template pTemplate="emptymessage">
        <tr>
          <td colspan="8" class="text-center p-4">{{ 'COMMON.NO_DATA' | translate }}</td>
        </tr>
      </ng-template>
    </p-table>
  </p-tabpanel>

  <!-- Tab 2: Review Templates -->
  <p-tabpanel [value]="1">
    <div class="flex justify-content-end mb-3">
      <p-button
        [label]="'HR.REVIEW_TEMPLATES.NEW' | translate"
        icon="pi pi-plus"
        (onClick)="openNewTemplate()"
        severity="success"
      />
    </div>

    <p-table
      [value]="templateTableData()"
      [loading]="templateTableLoading()"
      [paginator]="true"
      [rows]="templateRows"
      [totalRecords]="templateTotalRecords()"
      [lazy]="true"
      (onLazyLoad)="onTemplatePageChange($event)"
      [first]="templateFirst"
      [rowsPerPageOptions]="[10, 25, 50]"
      styleClass="p-datatable-sm p-datatable-striped"
      [tableStyle]="{ 'min-width': '50rem' }"
    >
      <ng-template pTemplate="header">
        <tr>
          <th>{{ 'HR.REVIEW_TEMPLATES.CODE' | translate }}</th>
          <th>{{ 'HR.REVIEW_TEMPLATES.NAME_AR' | translate }}</th>
          <th>{{ 'HR.REVIEW_TEMPLATES.DESCRIPTION' | translate }}</th>
          <th>{{ 'HR.REVIEW_TEMPLATES.KPIS_COUNT' | translate }}</th>
          <th>{{ 'COMMON.STATUS' | translate }}</th>
          <th>{{ 'COMMON.ACTIONS' | translate }}</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-item>
        <tr>
          <td>{{ item.code }}</td>
          <td>{{ item.name_ar }}</td>
          <td>{{ item.description }}</td>
          <td>{{ item.kpis?.length || 0 }}</td>
          <td>
            <p-tag [value]="item.status" [severity]="$any(getStatusSeverity(item.status))"></p-tag>
          </td>
          <td>
            <div class="flex gap-2">
              <p-button
                icon="pi pi-pencil"
                [rounded]="true"
                [text]="true"
                severity="info"
                (onClick)="editTemplate(item)"
              />
              <p-button
                icon="pi pi-trash"
                [rounded]="true"
                [text]="true"
                severity="danger"
                (onClick)="deleteTemplate(item)"
              />
            </div>
          </td>
        </tr>
      </ng-template>
      <ng-template pTemplate="emptymessage">
        <tr>
          <td colspan="6" class="text-center p-4">{{ 'COMMON.NO_DATA' | translate }}</td>
        </tr>
      </ng-template>
    </p-table>
  </p-tabpanel>
  </p-tabpanels>
</p-tabs>

<!-- KPI Dialog -->
<p-dialog
  [header]="
    editingKpi()
      ? ('HR.KPIS.EDIT' | translate)
      : ('HR.KPIS.NEW' | translate)
  "
  [(visible)]="kpiDialogVisible"
  [modal]="true"
  [style]="{ width: '550px' }"
  [closable]="true"
>
  <form [formGroup]="kpiForm" (ngSubmit)="onSaveKpi()">
    <div class="flex flex-column gap-3 pt-3">
      <div class="flex flex-column gap-1">
        <label>{{ 'HR.KPIS.NAME_AR' | translate }} *</label>
        <input pInputText formControlName="name_ar" />
        @if (kpiForm.get('name_ar')?.touched && kpiForm.get('name_ar')?.hasError('required')) {
          <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
        }
      </div>
      <div class="flex flex-column gap-1">
        <label>{{ 'HR.KPIS.NAME_EN' | translate }}</label>
        <input pInputText formControlName="name_en" />
      </div>
      <div class="flex flex-column gap-1">
        <label>{{ 'HR.KPIS.CATEGORY' | translate }}</label>
        <input pInputText formControlName="category" />
      </div>
      <div class="flex flex-column gap-1">
        <label>{{ 'HR.KPIS.WEIGHT' | translate }}</label>
        <p-inputNumber formControlName="weight" [minFractionDigits]="0" [maxFractionDigits]="2"></p-inputNumber>
      </div>
      <div class="flex flex-column gap-1">
        <label>{{ 'HR.KPIS.TARGET_VALUE' | translate }}</label>
        <p-inputNumber formControlName="target_value" [minFractionDigits]="0" [maxFractionDigits]="2"></p-inputNumber>
      </div>
      <div class="flex flex-column gap-1">
        <label>{{ 'HR.KPIS.UNIT' | translate }}</label>
        <input pInputText formControlName="unit" />
      </div>
      <div class="flex flex-column gap-1">
        <label>{{ 'HR.KPIS.DESCRIPTION' | translate }}</label>
        <textarea pTextarea formControlName="description" rows="3"></textarea>
      </div>
      <div class="flex flex-column gap-1">
        <label>{{ 'COMMON.STATUS' | translate }}</label>
        <p-select
          formControlName="status"
          [options]="statusOptions"
          optionLabel="label"
          optionValue="value"
        ></p-select>
      </div>
    </div>
  </form>
  <ng-template pTemplate="footer">
    <p-button
      [label]="'COMMON.CANCEL' | translate"
      icon="pi pi-times"
      [text]="true"
      (onClick)="kpiDialogVisible.set(false)"
    />
    <p-button
      [label]="'COMMON.SAVE' | translate"
      icon="pi pi-check"
      (onClick)="onSaveKpi()"
      [loading]="kpiSaving()"
    />
  </ng-template>
</p-dialog>

<!-- Review Template Dialog -->
<p-dialog
  [header]="
    editingTemplate()
      ? ('HR.REVIEW_TEMPLATES.EDIT' | translate)
      : ('HR.REVIEW_TEMPLATES.NEW' | translate)
  "
  [(visible)]="templateDialogVisible"
  [modal]="true"
  [style]="{ width: '550px' }"
  [closable]="true"
>
  <form [formGroup]="templateForm" (ngSubmit)="onSaveTemplate()">
    <div class="flex flex-column gap-3 pt-3">
      <div class="flex flex-column gap-1">
        <label>{{ 'HR.REVIEW_TEMPLATES.NAME_AR' | translate }} *</label>
        <input pInputText formControlName="name_ar" />
        @if (templateForm.get('name_ar')?.touched && templateForm.get('name_ar')?.hasError('required')) {
          <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
        }
      </div>
      <div class="flex flex-column gap-1">
        <label>{{ 'HR.REVIEW_TEMPLATES.NAME_EN' | translate }}</label>
        <input pInputText formControlName="name_en" />
      </div>
      <div class="flex flex-column gap-1">
        <label>{{ 'HR.REVIEW_TEMPLATES.DESCRIPTION' | translate }}</label>
        <textarea pTextarea formControlName="description" rows="3"></textarea>
      </div>
      <div class="flex flex-column gap-1">
        <label>{{ 'HR.REVIEW_TEMPLATES.KPIS' | translate }}</label>
        <p-multiSelect
          formControlName="kpi_ids"
          [options]="allKpis"
          optionLabel="name_ar"
          optionValue="id"
          [placeholder]="'COMMON.SELECT' | translate"
          [filter]="true"
          display="chip"
        ></p-multiSelect>
      </div>
      <div class="flex flex-column gap-1">
        <label>{{ 'COMMON.STATUS' | translate }}</label>
        <p-select
          formControlName="status"
          [options]="statusOptions"
          optionLabel="label"
          optionValue="value"
        ></p-select>
      </div>
    </div>
  </form>
  <ng-template pTemplate="footer">
    <p-button
      [label]="'COMMON.CANCEL' | translate"
      icon="pi pi-times"
      [text]="true"
      (onClick)="templateDialogVisible.set(false)"
    />
    <p-button
      [label]="'COMMON.SAVE' | translate"
      icon="pi pi-check"
      (onClick)="onSaveTemplate()"
      [loading]="templateSaving()"
    />
  </ng-template>
</p-dialog>
