<app-page-header
  title="HR.DASHBOARD_TITLE"
  subtitle="HR.DASHBOARD_SUBTITLE"
  (refresh)="loadDashboardData()"
></app-page-header>

<div class="grid">
  @if (loading()) {
    <div class="col-12 flex justify-content-center p-5">
      <p-progressSpinner></p-progressSpinner>
    </div>
  } @else {
    <!-- KPI Cards -->
    <div class="col-12 md:col-6 lg:col-3">
      <p-card styleClass="shadow-2">
        <div class="flex align-items-center gap-3">
          <div
            class="flex align-items-center justify-content-center border-round"
            style="width: 3rem; height: 3rem; background: var(--primary-100)"
          >
            <i class="pi pi-users text-primary text-2xl"></i>
          </div>
          <div>
            <div class="text-500 text-sm">{{ 'HR.TOTAL_EMPLOYEES' | translate }}</div>
            <div class="text-2xl font-bold text-900">
              {{ workforceData()?.total_employees || 0 }}
            </div>
          </div>
        </div>
      </p-card>
    </div>
    <div class="col-12 md:col-6 lg:col-3">
      <p-card styleClass="shadow-2">
        <div class="flex align-items-center gap-3">
          <div
            class="flex align-items-center justify-content-center border-round"
            style="width: 3rem; height: 3rem; background: var(--green-100)"
          >
            <i class="pi pi-check-circle text-green-500 text-2xl"></i>
          </div>
          <div>
            <div class="text-500 text-sm">{{ 'HR.ACTIVE_EMPLOYEES' | translate }}</div>
            <div class="text-2xl font-bold text-900">
              {{ workforceData()?.active_employees || 0 }}
            </div>
          </div>
        </div>
      </p-card>
    </div>
    <div class="col-12 md:col-6 lg:col-3">
      <p-card styleClass="shadow-2">
        <div class="flex align-items-center gap-3">
          <div
            class="flex align-items-center justify-content-center border-round"
            style="width: 3rem; height: 3rem; background: var(--orange-100)"
          >
            <i class="pi pi-calendar text-orange-500 text-2xl"></i>
          </div>
          <div>
            <div class="text-500 text-sm">{{ 'HR.ON_LEAVE' | translate }}</div>
            <div class="text-2xl font-bold text-900">
              {{ leaveData()?.on_leave_today || 0 }}
            </div>
          </div>
        </div>
      </p-card>
    </div>
    <div class="col-12 md:col-6 lg:col-3">
      <p-card styleClass="shadow-2">
        <div class="flex align-items-center gap-3">
          <div
            class="flex align-items-center justify-content-center border-round"
            style="width: 3rem; height: 3rem; background: var(--blue-100)"
          >
            <i class="pi pi-wallet text-blue-500 text-2xl"></i>
          </div>
          <div>
            <div class="text-500 text-sm">{{ 'HR.TOTAL_PAYROLL' | translate }}</div>
            <div class="text-2xl font-bold text-900">
              {{ (payrollData()?.total_payroll || 0) | number : '1.0-0' }}
            </div>
          </div>
        </div>
      </p-card>
    </div>
  }
</div>
