// ELS HRM — Module 05 PIM — Role-scoped views (RBAC §2–4 / PIM §9)
// Department Manager: data:employees:dept (head-based subtree), CHỈ ĐỌC (SRS §9),
// KHÔNG thấy PII (CCCD/MST), email/điện thoại cá nhân, lương, trường tuỳ chỉnh.

const MGR_USER = { name: 'Lê Hữu Phước', role: 'Department Manager' };

// Trường DEPT_MANAGER được phép xem (PIM §9.2)
const MGR_VISIBLE_NOTE = 'CCCD/MST, email & điện thoại cá nhân, GPLX, lương và trường tuỳ chỉnh bị ẩn vì bạn không có quyền xem dữ liệu nhạy cảm (view_pii) / lương (view_salary).';

// Banner phạm vi/quyền dùng chung
const MgrScopeBanner = ({ children, tone='info' }) => {
  const cfg = {
    info:   { bg:'var(--color-info-soft)',    fg:'oklch(0.385 0.062 222)', ic:'var(--color-info)',    icon:'shield' },
    muted:  { bg:'var(--color-muted)',        fg:'var(--color-muted-foreground)',ic:'var(--color-muted-foreground)', icon:'lock' },
  }[tone];
  return (
    <div className="flex items-start gap-[9px] rounded-md px-3.5 py-[11px] text-xs leading-[1.55]" style={{ background:cfg.bg, color:cfg.fg }}>
      <Icon name={cfg.icon} size={14} className="mt-px shrink-0" style={{ color:cfg.ic }} />
      <span>{children}</span>
    </div>
  );
};

// ─── R1: Department Manager — danh sách nhân viên (phạm vi đơn vị) ─────────────
const PIMManagerListScreen = () => {
  const team = PIM_EMPLOYEES.filter(e => e.dept === 'Engineering');
  return (
    <HRMShell active="employees" user={MGR_USER}
      title="Nhân viên phòng ban"
      meta="Engineering · cây đơn vị của bạn"
      crumbs={['Nhân viên']}
      actions={<Btn variant="outline" size="sm" icon="download">Xuất Excel (team)</Btn>}>

      <div className="mb-3.5">
        <MgrScopeBanner>
          Bạn đang xem <strong>nhân viên thuộc cây đơn vị bạn làm head</strong> (Engineering + đơn vị con). Hồ sơ ngoài phạm vi này bị ẩn hoàn toàn. {MGR_VISIBLE_NOTE}
        </MgrScopeBanner>
      </div>

      {/* Stats — phạm vi team */}
      <div className="mb-4 grid grid-cols-3 gap-3">
        {[
          { label:'Trong phạm vi', val:'18', delta:'Engineering', dir:'up',   icon:'users',        ib:'var(--color-info-soft)',    ic:'var(--color-info)' },
          { label:'Đang làm việc', val:'16', delta:'2 ca đêm',     dir:'up',   icon:'check-circle', ib:'var(--color-success-soft)', ic:'var(--color-success)' },
          { label:'Đang nghỉ phép',val:'2',  delta:'tuần này',     dir:'down', icon:'umbrella',     ib:'var(--color-warning-soft)', ic:'oklch(0.55 0.158 65)' },
        ].map((s,i)=><StatCard key={i} label={s.label} value={s.val} delta={s.delta} deltaDir={s.dir} icon={s.icon} iconBg={s.ib} iconColor={s.ic} />)}
      </div>

      {/* Filter — không có bộ lọc phòng ban (đã cố định theo phạm vi) */}
      <div className={CARD + " mb-3.5 flex items-center gap-2.5 px-3.5 py-2.5"}>
        <div className="relative flex items-center w-[280px]">
          <Icon name="search" size={13} className="pointer-events-none absolute left-2.5 size-3.5 text-muted-foreground" />
          <input className="h-8 w-full rounded-md border border-input bg-transparent pl-8 pr-3 text-xs text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" placeholder="Tìm trong phạm vi của bạn..." />
        </div>
        <Select options={['Tất cả đơn vị con','Backend','Frontend','DevOps']} defaultValue="Tất cả đơn vị con" className="h-8 text-xs w-[160px]" />
        <Select options={['Tất cả trạng thái','Đang làm việc','Đang nghỉ phép']} defaultValue="Tất cả trạng thái" className="h-8 text-xs w-[150px]" />
        <div className="flex-1" />
        <span className="text-xs text-muted-foreground">1–{team.length} / 18</span>
      </div>

      {/* Table — chỉ cột không nhạy cảm */}
      <div className="overflow-hidden rounded-lg border border-border bg-card">
        <table className={TABLE_CLS}>
          <thead>
            <tr>
              <th>Nhân viên</th>
              <th>Đơn vị</th>
              <th>Chức danh</th>
              <th>Email công ty</th>
              <th>Trạng thái</th>
              <th>Ngày vào</th>
              <th style={{ width:56 }}>Xem</th>
            </tr>
          </thead>
          <tbody>
            {team.map(e=>{
              const st = EMP_STATUS_CFG[e.status];
              return (
                <tr key={e.id} className={e.status==='terminated'?'opacity-60':undefined}>
                  <td>
                    <div className="flex items-center gap-2.5">
                      <Avatar name={e.name} />
                      <div>
                        <div className="font-medium text-foreground">{e.name}</div>
                        <div className="text-xs text-muted-foreground">{e.num}</div>
                      </div>
                    </div>
                  </td>
                  <td className="text-sm">{e.dept}</td>
                  <td className="text-sm text-muted-foreground">{e.title}</td>
                  <td className="text-sm text-muted-foreground">{e.email}</td>
                  <td><Badge variant={st.v} dot>{st.label}</Badge></td>
                  <td className="text-xs text-muted-foreground">{e.hire}</td>
                  <td><Btn variant="ghost" size="sm" iconOnly icon="eye" /></td>
                </tr>
              );
            })}
          </tbody>
        </table>
        <div className="flex items-center justify-between border-t border-border px-4 py-2.5">
          <span className="text-xs text-muted-foreground">18 nhân viên trong phạm vi · chỉ đọc</span>
          <span className="inline-flex items-center gap-[5px] text-2xs text-muted-foreground">
            <Icon name="lock" size={11} /> Không có quyền tạo / xoá / chấm dứt
          </span>
        </div>
      </div>
    </HRMShell>
  );
};

// ─── R2: Department Manager — chi tiết = MỘT màn /:id với viewer='manager' ─────
// Gộp với Chi tiết admin (PIMDetailScreen): cùng route /:id, chỉ khác ở quyền
// (read-only + ẩn PII/lương/liên lạc cá nhân theo §9.2/§9.3) → tránh chép 2 màn,
// không lệch chính sách hiển thị. PIMDetailScreen định nghĩa ở employee-pim-screens.jsx.
const PIMManagerDetailScreen = () => <PIMDetailScreen viewer="manager" />;

Object.assign(window, {
  PIMManagerListScreen, PIMManagerDetailScreen,
});