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

<app-page-header
  title="HR.CANDIDATES.TITLE"
  subtitle="HR.CANDIDATES.SUBTITLE"
  (refresh)="loadPage()"
>
  <p-button
    [label]="'HR.CANDIDATES.NEW' | translate"
    icon="pi pi-plus"
    (onClick)="openNew()"
    severity="success"
  />
</app-page-header>

<p-table
  [value]="tableData()"
  [loading]="tableLoading()"
  [paginator]="true"
  [rows]="rows"
  [totalRecords]="totalRecords()"
  [lazy]="true"
  (onLazyLoad)="onPageChange($event)"
  [first]="first"
  [rowsPerPageOptions]="[10, 25, 50]"
  styleClass="p-datatable-sm p-datatable-striped"
  [tableStyle]="{ 'min-width': '60rem' }"
>
  <ng-template pTemplate="header">
    <tr>
      <th>{{ 'HR.CANDIDATES.CODE' | translate }}</th>
      <th>{{ 'HR.CANDIDATES.FULL_NAME' | translate }}</th>
      <th>{{ 'HR.CANDIDATES.EMAIL' | translate }}</th>
      <th>{{ 'HR.CANDIDATES.PHONE' | translate }}</th>
      <th>{{ 'HR.CANDIDATES.EXPERIENCE_YEARS' | translate }}</th>
      <th>{{ 'HR.CANDIDATES.EXPECTED_SALARY' | 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.first_name_ar }} {{ item.last_name_ar }}</td>
      <td>{{ item.email || '-' }}</td>
      <td>{{ item.phone || '-' }}</td>
      <td>{{ item.experience_years ?? '-' }}</td>
      <td>{{ item.expected_salary != null ? (item.expected_salary | number) : '-' }}</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-list"
            [rounded]="true"
            [text]="true"
            severity="secondary"
            (onClick)="viewApplications(item)"
            [pTooltip]="'HR.CANDIDATES.APPLICATIONS' | translate"
          />
          <p-button
            icon="pi pi-pencil"
            [rounded]="true"
            [text]="true"
            severity="info"
            (onClick)="editItem(item)"
          />
          <p-button
            icon="pi pi-trash"
            [rounded]="true"
            [text]="true"
            severity="danger"
            (onClick)="deleteItem(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>

<!-- Candidate Dialog -->
<p-dialog
  [header]="
    editingItem()
      ? ('HR.CANDIDATES.EDIT' | translate)
      : ('HR.CANDIDATES.NEW' | translate)
  "
  [(visible)]="dialogVisible"
  [modal]="true"
  [style]="{ width: '650px' }"
  [closable]="true"
>
  <form [formGroup]="form" (ngSubmit)="onSave()">
    <div class="flex flex-column gap-3 pt-3">
      <div class="grid">
        <div class="col-6">
          <div class="flex flex-column gap-1">
            <label>{{ 'HR.CANDIDATES.FIRST_NAME_AR' | translate }} *</label>
            <input pInputText formControlName="first_name_ar" />
            @if (form.get('first_name_ar')?.touched && form.get('first_name_ar')?.hasError('required')) {
              <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
            }
          </div>
        </div>
        <div class="col-6">
          <div class="flex flex-column gap-1">
            <label>{{ 'HR.CANDIDATES.FIRST_NAME_EN' | translate }}</label>
            <input pInputText formControlName="first_name_en" />
          </div>
        </div>
      </div>

      <div class="grid">
        <div class="col-6">
          <div class="flex flex-column gap-1">
            <label>{{ 'HR.CANDIDATES.LAST_NAME_AR' | translate }} *</label>
            <input pInputText formControlName="last_name_ar" />
            @if (form.get('last_name_ar')?.touched && form.get('last_name_ar')?.hasError('required')) {
              <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
            }
          </div>
        </div>
        <div class="col-6">
          <div class="flex flex-column gap-1">
            <label>{{ 'HR.CANDIDATES.LAST_NAME_EN' | translate }}</label>
            <input pInputText formControlName="last_name_en" />
          </div>
        </div>
      </div>

      <div class="grid">
        <div class="col-6">
          <div class="flex flex-column gap-1">
            <label>{{ 'HR.CANDIDATES.EMAIL' | translate }}</label>
            <input pInputText formControlName="email" />
          </div>
        </div>
        <div class="col-6">
          <div class="flex flex-column gap-1">
            <label>{{ 'HR.CANDIDATES.PHONE' | translate }}</label>
            <input pInputText formControlName="phone" />
          </div>
        </div>
      </div>

      <div class="grid">
        <div class="col-4">
          <div class="flex flex-column gap-1">
            <label>{{ 'HR.CANDIDATES.EXPERIENCE_YEARS' | translate }}</label>
            <p-inputNumber formControlName="experience_years" [min]="0" [showButtons]="true"></p-inputNumber>
          </div>
        </div>
        <div class="col-4">
          <div class="flex flex-column gap-1">
            <label>{{ 'HR.CANDIDATES.CURRENT_SALARY' | translate }}</label>
            <p-inputNumber formControlName="current_salary" mode="decimal" [minFractionDigits]="2" [maxFractionDigits]="2"></p-inputNumber>
          </div>
        </div>
        <div class="col-4">
          <div class="flex flex-column gap-1">
            <label>{{ 'HR.CANDIDATES.EXPECTED_SALARY' | translate }}</label>
            <p-inputNumber formControlName="expected_salary" mode="decimal" [minFractionDigits]="2" [maxFractionDigits]="2"></p-inputNumber>
          </div>
        </div>
      </div>

      <div class="flex flex-column gap-1">
        <label>{{ 'HR.CANDIDATES.SOURCE' | translate }}</label>
        <input pInputText formControlName="source" />
      </div>

      <div class="flex flex-column gap-1">
        <label>{{ 'HR.CANDIDATES.NOTES' | translate }}</label>
        <textarea pTextarea formControlName="notes" 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)="dialogVisible.set(false)"
    />
    <p-button
      [label]="'COMMON.SAVE' | translate"
      icon="pi pi-check"
      (onClick)="onSave()"
      [loading]="saving()"
    />
  </ng-template>
</p-dialog>

<!-- Applications List Dialog -->
<p-dialog
  [header]="'HR.CANDIDATES.APPLICATIONS' | translate"
  [(visible)]="applicationsDialogVisible"
  [modal]="true"
  [style]="{ width: '850px' }"
  [closable]="true"
>
  <div class="flex justify-content-between align-items-center mb-3 pt-3">
    <span class="font-semibold">
      {{ selectedCandidate()?.first_name_ar }} {{ selectedCandidate()?.last_name_ar }}
    </span>
    <p-button
      [label]="'HR.CANDIDATES.NEW_APPLICATION' | translate"
      icon="pi pi-plus"
      severity="success"
      size="small"
      (onClick)="openNewApplication()"
    />
  </div>

  <p-table
    [value]="applications()"
    [loading]="applicationsLoading()"
    styleClass="p-datatable-sm p-datatable-striped"
    [tableStyle]="{ 'min-width': '40rem' }"
  >
    <ng-template pTemplate="header">
      <tr>
        <th>{{ 'HR.CANDIDATES.JOB_OPENING' | translate }}</th>
        <th>{{ 'HR.CANDIDATES.APP_STATUS' | translate }}</th>
        <th>{{ 'HR.CANDIDATES.APP_STAGE' | translate }}</th>
        <th>{{ 'HR.CANDIDATES.APP_NOTES' | translate }}</th>
        <th>{{ 'COMMON.ACTIONS' | translate }}</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-app>
      <tr>
        <td>{{ app.job_opening?.title_ar || '-' }}</td>
        <td>
          <p-tag [value]="app.status" [severity]="$any(getApplicationStatusSeverity(app.status))"></p-tag>
        </td>
        <td>{{ app.stage || '-' }}</td>
        <td>{{ app.notes || '-' }}</td>
        <td>
          <div class="flex gap-2">
            <p-button
              icon="pi pi-pencil"
              [rounded]="true"
              [text]="true"
              severity="info"
              size="small"
              (onClick)="editApplication(app)"
            />
            <p-button
              icon="pi pi-trash"
              [rounded]="true"
              [text]="true"
              severity="danger"
              size="small"
              (onClick)="deleteApplication(app)"
            />
          </div>
        </td>
      </tr>
    </ng-template>
    <ng-template pTemplate="emptymessage">
      <tr>
        <td colspan="5" class="text-center p-4">{{ 'COMMON.NO_DATA' | translate }}</td>
      </tr>
    </ng-template>
  </p-table>
</p-dialog>

<!-- Application Form Dialog -->
<p-dialog
  [header]="
    editingApplication()
      ? ('HR.CANDIDATES.EDIT_APPLICATION' | translate)
      : ('HR.CANDIDATES.NEW_APPLICATION' | translate)
  "
  [(visible)]="applicationDialogVisible"
  [modal]="true"
  [style]="{ width: '500px' }"
  [closable]="true"
>
  <form [formGroup]="applicationForm" (ngSubmit)="onSaveApplication()">
    <div class="flex flex-column gap-3 pt-3">
      <div class="flex flex-column gap-1">
        <label>{{ 'HR.CANDIDATES.JOB_OPENING' | translate }} *</label>
        <p-select
          formControlName="job_opening_id"
          [options]="jobOpenings"
          optionLabel="title_ar"
          optionValue="id"
          [showClear]="true"
          [placeholder]="'COMMON.SELECT' | translate"
          [filter]="true"
        ></p-select>
        @if (applicationForm.get('job_opening_id')?.touched && applicationForm.get('job_opening_id')?.hasError('required')) {
          <small class="p-error">{{ 'COMMON.REQUIRED' | translate }}</small>
        }
      </div>

      <div class="flex flex-column gap-1">
        <label>{{ 'HR.CANDIDATES.APP_STATUS' | translate }}</label>
        <p-select
          formControlName="status"
          [options]="applicationStatusOptions"
          optionLabel="label"
          optionValue="value"
        ></p-select>
      </div>

      <div class="flex flex-column gap-1">
        <label>{{ 'HR.CANDIDATES.APP_STAGE' | translate }}</label>
        <p-select
          formControlName="stage"
          [options]="applicationStageOptions"
          optionLabel="label"
          optionValue="value"
        ></p-select>
      </div>

      <div class="flex flex-column gap-1">
        <label>{{ 'HR.CANDIDATES.APP_NOTES' | translate }}</label>
        <textarea pTextarea formControlName="notes" rows="3"></textarea>
      </div>
    </div>
  </form>
  <ng-template pTemplate="footer">
    <p-button
      [label]="'COMMON.CANCEL' | translate"
      icon="pi pi-times"
      [text]="true"
      (onClick)="applicationDialogVisible.set(false)"
    />
    <p-button
      [label]="'COMMON.SAVE' | translate"
      icon="pi pi-check"
      (onClick)="onSaveApplication()"
      [loading]="savingApplication()"
    />
  </ng-template>
</p-dialog>
