// ELS HRM — Module 05 PIM — Re-hire & Status-change screens (§7.3, §2.3)

// ─── 06: Đổi trạng thái việc làm — confirm dialog ─────────────────────────────
const PIMStatusChangeScreen = () => {
  const e = PIM_EMPLOYEES[0];
  return (
    <div className="relative size-full">
      <PIMDetailScreen />
      <PIMOverlay width={480}>
        <div className="flex items-center gap-3 border-b border-border px-[22px] py-[18px]">
          <div className="grid size-10 shrink-0 place-items-center rounded-md bg-destructive-soft">
            <Icon name="pause-circle" size={20} style={{ color:'var(--color-destructive)' }} />
          </div>
          <div>
            <div className="text-md font-bold">Đình chỉ kỷ luật</div>
            <div className="mt-0.5 text-xs text-muted-foreground">
              <span>Đang làm việc</span>
              <Icon name="arrow-right" size={10} className="mx-[5px] inline align-middle" />
              <span className="text-destructive">Đình chỉ</span>
            </div>
          </div>
        </div>
        <div className="p-[22px]">
          <div className="mb-[18px] flex items-center gap-3 rounded-md bg-muted p-3">
            <Avatar name={e.name} />
            <div>
              <div className="text-sm font-semibold">{e.name}</div>
              <div className="text-xs text-muted-foreground">{e.num} · {e.title}</div>
            </div>
          </div>
          <div className="mb-4">
            <label className="mb-[5px] block text-xs font-medium">Lý do đình chỉ</label>
            <textarea className="w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" style={{ height:72, resize:'none', paddingTop:8 }}
              placeholder="Mô tả lý do đình chỉ / điều tra..." />
          </div>
          <div className="flex items-start gap-2 rounded-md bg-info-soft px-3 py-2.5 text-xs leading-[1.5]" style={{ color:'oklch(0.385 0.062 222)' }}>
            <Icon name="info" size={13} className="mt-px shrink-0" style={{ color:'var(--color-info)' }} />
            <span>Thay đổi được kiểm tra hợp lệ và ghi vào lịch sử thay đổi. Có thể phục hồi về trạng thái Đang làm việc sau.</span>
          </div>
        </div>
        <div className="flex justify-end gap-2 border-t border-border px-[22px] py-3.5">
          <Btn variant="outline" size="sm">Hủy</Btn>
          <Btn variant="destructive" size="sm" icon="pause-circle">Xác nhận đình chỉ</Btn>
        </div>
      </PIMOverlay>
    </div>
  );
};

// ─── 07: Tái tuyển dụng (Re-hire) ─────────────────────────────────────────────
const PIMRehireScreen = () => {
  const FORMER = [
    { num:'EMP-2024-0015', name:'Ngô Minh Khoa', title:'DevOps Engineer', dept:'Engineering', term:'30/04/2026', reason:'Tự nguyện nghỉ việc', eligible:true,  rreason:'' },
    { num:'EMP-2023-0007', name:'Hoàng Thị Mai', title:'QA Engineer',     dept:'Engineering', term:'15/11/2025', reason:'Không hoàn thành thử việc', eligible:false, rreason:'Vi phạm quy định bảo mật dữ liệu khách hàng' },
  ];
  const [sel, setSel] = React.useState(0);
  const f = FORMER[sel];
  return (
    <HRMShell active="employees"
      title="Tái tuyển dụng"
      crumbs={['Nhân viên','Tái tuyển dụng']}
      actions={<>
        <Btn variant="outline" size="sm">Hủy</Btn>
        <Btn variant="primary" size="sm" icon="rotate-ccw" disabled={!f.eligible}>Tạo hồ sơ tái tuyển</Btn>
      </>}>

      <div className="grid grid-cols-[340px_1fr] gap-[18px]">
        {/* Left: search former employees */}
        <div className={CARD + " self-start p-4"}>
          <div className="mb-2.5 text-sm font-bold">Tìm nhân viên cũ</div>
          <div className="relative mb-3 flex items-center">
            <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ên, mã NV cũ..." defaultValue="" />
          </div>
          {FORMER.map((emp,i)=>(
            <div key={i} onClick={()=>setSel(i)}
              className={"mb-1 flex cursor-pointer items-center gap-2.5 rounded-md border p-2.5 " + (sel===i?"border-primary bg-primary-soft":"border-border bg-transparent")}>
              <Avatar name={emp.name} />
              <div className="min-w-0 flex-1">
                <div className="text-sm font-semibold">{emp.name}</div>
                <div className="text-xs text-muted-foreground">{emp.num} · Nghỉ: {emp.term}</div>
              </div>
              {emp.eligible
                ? <Badge variant="success">Đủ ĐK</Badge>
                : <Badge variant="danger">Cờ đỏ</Badge>}
            </div>
          ))}
        </div>

        {/* Right: rehire detail */}
        <div className="flex flex-col gap-3.5">
          {/* Eligibility banner */}
          {f.eligible ? (
            <div className={CARD + " flex items-start gap-[11px] bg-success-soft px-4 py-3.5"} style={{ border:'1px solid oklch(0.7 0.15 150 / 0.3)' }}>
              <Icon name="check-circle" size={18} className="mt-px shrink-0" style={{ color:'var(--color-success)' }} />
              <div>
                <div className="text-sm font-bold" style={{ color:'oklch(0.4 0.1 150)' }}>Đủ điều kiện tái tuyển</div>
                <div className="mt-0.5 text-xs leading-[1.5]" style={{ color:'oklch(0.4 0.08 150)' }}>
                  Đủ điều kiện tái tuyển — có thể tạo hồ sơ mới ngay.
                </div>
              </div>
            </div>
          ) : (
            <div className={CARD + " flex items-start gap-[11px] bg-destructive-soft px-4 py-3.5"} style={{ border:'1px solid oklch(0.601 0.215 12 / 0.3)' }}>
              <Icon name="alert-triangle" size={18} className="mt-px shrink-0 text-destructive" />
              <div className="flex-1">
                <div className="text-sm font-bold text-destructive">Không đủ điều kiện tái tuyển</div>
                <div className="mt-0.5 text-xs leading-[1.5] text-destructive opacity-90">
                  Lý do: <strong>{f.rreason}</strong>. Hệ thống chặn thao tác tái tuyển (403 REHIRE_NOT_ELIGIBLE) — không có đường đi tiếp.
                </div>
              </div>
            </div>
          )}

          {/* Old vs New record */}
          <div className={CARD + " p-5"}>
            <div className="mb-4 text-base font-bold">Tạo hồ sơ mới từ hồ sơ cũ</div>
            <div className="grid grid-cols-[1fr_40px_1fr] items-center gap-3.5">
              {/* Old */}
              <div className="rounded-lg border border-border p-4 opacity-85">
                <Badge variant="neutral">Hồ sơ cũ · giữ nguyên</Badge>
                <div className="my-3 flex items-center gap-2.5">
                  <Avatar name={f.name} />
                  <div>
                    <div className="text-sm font-semibold">{f.name}</div>
                    <div className="text-xs text-muted-foreground">{f.title}</div>
                  </div>
                </div>
                {[
                  ['Mã NV', f.num],
                  ['Trạng thái', 'Đã nghỉ việc'],
                  ['Ngày nghỉ', f.term],
                ].map(([l,v],i)=>(
                  <div key={i} className={"flex justify-between py-[5px] text-xs " + (i<2?"border-b border-border":"")}>
                    <span className="text-muted-foreground">{l}</span>
                    <span className={"font-medium " + (i===0?"font-mono":"")}>{v}</span>
                  </div>
                ))}
              </div>
              <div className="grid place-items-center">
                <div className="grid size-8 place-items-center rounded-full bg-primary-soft">
                  <Icon name="arrow-right" size={16} style={{ color:'var(--color-primary)' }} />
                </div>
              </div>
              {/* New */}
              <div className="rounded-lg border-[1.5px] border-primary bg-primary-soft p-4">
                <Badge variant="primary">Hồ sơ mới · sẽ tạo</Badge>
                <div className="my-3 flex items-center gap-2.5">
                  <Avatar name={f.name} />
                  <div>
                    <div className="text-sm font-semibold">{f.name}</div>
                    <div className="text-xs text-muted-foreground">{f.title}</div>
                  </div>
                </div>
                {[
                  ['Mã NV', 'EMP-2026-0043'],
                  ['Trạng thái', 'Đang làm việc'],
                  ['Ngày vào', '14/06/2026'],
                ].map(([l,v],i)=>(
                  <div key={i} className="flex justify-between py-[5px] text-xs" style={{ borderBottom:i<2?'1px solid oklch(0.6 0.05 40 / 0.2)':'none' }}>
                    <span className="text-muted-foreground">{l}</span>
                    <span className={"font-semibold " + (i===0?"font-mono ":"")} style={{ color:i===1?'var(--color-success)':'var(--color-foreground)' }}>{v}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Copy summary */}
            <div className="mt-[18px]">
              <div className="mb-2.5 text-xs font-bold">Dữ liệu được sao chép sang hồ sơ mới</div>
              <div className="flex flex-wrap gap-2">
                {['Thông tin việc làm','Địa chỉ','Liên lạc','Liên hệ khẩn cấp','Người phụ thuộc','Trường tuỳ chỉnh'].map(c=>(
                  <span key={c} className="inline-flex items-center gap-[5px] rounded-full bg-success-soft px-[9px] py-1 text-xs text-success">
                    <Icon name="check" size={11} /> {c}
                  </span>
                ))}
                {['Ngày nghỉ việc','Mã nhân viên cũ'].map(c=>(
                  <span key={c} className="inline-flex items-center gap-[5px] rounded-full bg-muted px-[9px] py-1 text-xs text-muted-foreground">
                    <Icon name="x" size={11} /> {c} (đặt lại)
                  </span>
                ))}
              </div>
              <div className="mt-3.5 flex items-start gap-2 rounded-md bg-muted px-3 py-2.5 text-xs leading-[1.55] text-muted-foreground">
                <Icon name="info" size={13} className="mt-px shrink-0" />
                <span>Hồ sơ mới liên kết tới hồ sơ cũ ({f.num}) và ghi nhận ngày tái tuyển. Toàn bộ thực hiện an toàn trong một thao tác. Mã nhân viên cũ không bao giờ được dùng lại.</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </HRMShell>
  );
};

// ─── 08: Form Thêm / Sửa người phụ thuộc (§6.1) ───────────────────────────────
const PIMDependentForm = ({ mode='edit' }) => {
  const isEdit = mode==='edit';
  // prefill khi sửa
  const d = isEdit
    ? { name:'Nguyễn Hà Linh', rel:'child', gender:'female', dob:'2018-05-12', cccd4:'8821', financial:true, tax:true, emg:true, addr:'15 Trần Duy Hưng, Cầu Giấy, Hà Nội', phone:'', email:'' }
    : { name:'', rel:'', gender:'', cccd4:'', financial:false, tax:false, emg:false, addr:'', phone:'', email:'' };
  const Field = ({ label, children, req, pii, full }) => (
    <div className={full?"col-span-full":undefined}>
      <label className="mb-[5px] flex items-center gap-[5px] text-xs font-medium">
        {label}{req && <span className="text-destructive">*</span>}
        {pii && <Icon name="lock" size={10} className="text-muted-foreground" />}
      </label>
      {children}
    </div>
  );
  const Check = ({ label, desc, on }) => (
    <label className="flex cursor-pointer items-start gap-2.5 rounded-md border border-border px-3 py-2.5">
      <div className={"mt-px grid size-[18px] shrink-0 place-items-center rounded-sm border-[1.5px] " + (on?"border-primary bg-primary":"border-border-strong bg-transparent")}>
        {on && <Icon name="check" size={11} className="text-white" />}
      </div>
      <div>
        <div className="text-sm font-medium">{label}</div>
        <div className="mt-px text-2xs text-muted-foreground">{desc}</div>
      </div>
    </label>
  );
  return (
    <div className="relative size-full">
      <PIMDetailScreen initialTab="dependents" />
      <PIMOverlay width={580}>
        <div className="flex items-center justify-between border-b border-border px-[22px] py-4">
          <div className="flex items-center gap-[11px]">
            <div className="grid size-9 shrink-0 place-items-center rounded-md bg-primary-soft">
              <Icon name={isEdit?'edit':'plus'} size={17} style={{ color:'var(--color-primary)' }} />
            </div>
            <div>
              <div className="text-md font-bold">{isEdit?'Sửa người phụ thuộc':'Thêm người phụ thuộc'}</div>
              <div className="mt-px text-xs text-muted-foreground">Hồ sơ: Nguyễn Thị Lan · EMP-2024-0001</div>
            </div>
          </div>
          <Btn variant="ghost" size="sm" iconOnly icon="x" />
        </div>

        <div className="overflow-y-auto px-[22px] py-5" style={{ maxHeight:560 }}>
          <div className="grid grid-cols-2 gap-3.5">
            <Field label="Họ và tên" req full>
              <input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" defaultValue={d.name} placeholder="Họ tên đầy đủ (tối đa 200 ký tự)" />
            </Field>
            <Field label="Quan hệ" req>
              <Select placeholder="— Chọn quan hệ —" defaultValue={d.rel} options={[{value:'spouse',label:'Vợ/Chồng'},{value:'child',label:'Con'},{value:'parent',label:'Cha/Mẹ'},{value:'sibling',label:'Anh/Chị/Em'},{value:'domestic_partner',label:'Bạn đời chung sống'},{value:'other',label:'Khác'}]} />
            </Field>
            <Field label="Ngày sinh" req>
              <input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" type="date" defaultValue={d.dob} />
            </Field>
            <Field label="Giới tính">
              <Select placeholder="— Không chọn —" defaultValue={d.gender} options={[{value:'male',label:'Nam'},{value:'female',label:'Nữ'},{value:'other',label:'Khác'},{value:'prefer_not_to_say',label:'Không tiết lộ'}]} />
            </Field>
            <Field label="Số định danh (CCCD)" pii>
              <input className="h-9 w-full rounded-md border border-input bg-transparent px-3 font-mono text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" defaultValue={isEdit?'••••••'+d.cccd4:''} placeholder="Sẽ được mã hoá khi lưu" />
            </Field>
            <Field label="Địa chỉ" full>
              <input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" defaultValue={d.addr} placeholder="Địa chỉ (tối đa 300 ký tự)" />
            </Field>
            <Field label="Số điện thoại">
              <input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" defaultValue={d.phone} placeholder="+84 9xx xxx xxx" />
            </Field>
            <Field label="Email">
              <input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" type="email" defaultValue={d.email} placeholder="email@example.com" />
            </Field>
          </div>

          <div className="mb-2.5 mt-[18px] text-xs font-bold uppercase tracking-[0.05em] text-muted-foreground">Phân loại</div>
          <div className="grid grid-cols-2 gap-2.5">
            <Check label="Phụ thuộc tài chính" desc="Người phụ thuộc về tài chính" on={d.financial} />
            <Check label="Giảm trừ gia cảnh (thuế)" desc="Đăng ký giảm trừ khi tính thuế" on={d.tax} />
            <div className="col-span-2">
              <Check label="Có thể dùng làm liên hệ khẩn cấp" desc="Dùng làm người liên hệ khi khẩn cấp" on={d.emg} />
            </div>
          </div>

          {/* Validation note */}
          <div className="mt-4 flex items-start gap-2 rounded-md bg-muted px-3 py-2.5 text-xs leading-[1.55] text-muted-foreground">
            <Icon name="alert-circle" size={13} className="mt-px shrink-0" />
            <span>Với quan hệ <strong>Con</strong>, ngày sinh không được trước ngày sinh của nhân viên. Mỗi nhân viên có tối đa 20 người phụ thuộc. Mọi thay đổi đều được ghi vào lịch sử.</span>
          </div>
        </div>

        <div className="flex items-center justify-between border-t border-border px-[22px] py-3.5">
          {isEdit
            ? <Btn variant="ghost" size="sm" icon="trash" style={{ color:'var(--color-destructive)' }}>Xoá</Btn>
            : <span />}
          <div className="flex gap-2">
            <Btn variant="outline" size="sm">Hủy</Btn>
            <Btn variant="primary" size="sm">{isEdit?'Lưu thay đổi':'Thêm người phụ thuộc'}</Btn>
          </div>
        </div>
      </PIMOverlay>
    </div>
  );
};

const PIMDependentEditScreen = () => <PIMDependentForm mode="edit" />;
const PIMDependentAddScreen  = () => <PIMDependentForm mode="add" />;

// ─── 10: Chỉnh sửa thông tin cá nhân (HR/Admin) — §3.1 ────────────────────────
// Overlay form mở từ nút "Chỉnh sửa" trên màn hình chi tiết. HR/Admin sửa được
// mọi trường; CCCD/MST là PII (mã hoá-at-rest); Mã NV chính read-only.
const PIMEditPersonalOverlay = ({ e, canViewPii = true, onClose = () => {} }) => {
  const EPField = ({ label, children, req, pii, immutable, full }) => (
    <div className={full?"col-span-full":undefined}>
      <label className="mb-[5px] flex items-center gap-[5px] text-xs font-medium">
        {label}{req && <span className="text-destructive">*</span>}
        {pii && <span title="Dữ liệu nhạy cảm — mã hoá khi lưu"><Icon name="lock" size={10} className="text-muted-foreground" /></span>}
        {immutable && <span className="rounded-sm bg-muted px-1.5 text-2xs text-muted-foreground">không sửa</span>}
      </label>
      {children}
    </div>
  );
  return (
    <PIMOverlay width={620}>
      <div className="flex items-center justify-between border-b border-border px-[22px] py-4">
        <div className="flex items-center gap-[11px]">
          <div className="grid size-9 shrink-0 place-items-center rounded-md bg-primary-soft">
            <Icon name="edit" size={17} style={{ color:'var(--color-primary)' }} />
          </div>
          <div>
            <div className="text-md font-bold">Chỉnh sửa thông tin cá nhân</div>
            <div className="mt-px text-xs text-muted-foreground">{e.name} · {e.num}</div>
          </div>
        </div>
        <Btn variant="ghost" size="sm" iconOnly icon="x" onClick={onClose} />
      </div>

      <div className="overflow-y-auto px-[22px] py-5" style={{ maxHeight:520 }}>
        {/* Thông tin cơ bản */}
        <div className="mb-3 text-xs font-bold uppercase tracking-[0.05em] text-muted-foreground">Thông tin cơ bản</div>
        <div className="grid grid-cols-3 gap-3.5">
          <EPField label="Họ" req><input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" defaultValue="Nguyễn Thị" placeholder="Họ đệm" /></EPField>
          <EPField label="Tên đệm"><input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" defaultValue="" placeholder="Tên đệm" /></EPField>
          <EPField label="Tên" req><input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" defaultValue="Lan" placeholder="Tên" /></EPField>
          <EPField label="Ngày sinh" req><input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" type="date" defaultValue="1992-04-15" /></EPField>
          <EPField label="Giới tính" req>
            <Select defaultValue="female" options={[{value:'male',label:'Nam'},{value:'female',label:'Nữ'},{value:'other',label:'Khác'},{value:'prefer_not_to_say',label:'Không tiết lộ'}]} />
          </EPField>
          <EPField label="Quốc tịch" req><input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" defaultValue="VNM" placeholder="ISO alpha-3 (vd VNM)" /></EPField>
          <EPField label="Tình trạng hôn nhân" req>
            <Select defaultValue="married" options={[{value:'single',label:'Độc thân'},{value:'married',label:'Đã kết hôn'},{value:'divorced',label:'Ly hôn'},{value:'widowed',label:'Goá'},{value:'separated',label:'Ly thân'},{value:'domestic_partnership',label:'Sống chung'}]} />
          </EPField>
          <EPField label="Nhóm máu">
            <Select placeholder="— Chọn —" defaultValue="o_positive" options={[['a_positive','A+'],['a_negative','A−'],['b_positive','B+'],['b_negative','B−'],['ab_positive','AB+'],['ab_negative','AB−'],['o_positive','O+'],['o_negative','O−'],['unknown','Không rõ']].map(([value,label])=>({value,label}))} />
          </EPField>
        </div>

        {/* Giấy tờ & định danh */}
        <div className="mb-3 mt-5 text-xs font-bold uppercase tracking-[0.05em] text-muted-foreground">Giấy tờ & định danh</div>
        <div className="grid grid-cols-2 gap-3.5">
          <EPField label="Số định danh (CCCD)" pii>
            <input className={"h-9 w-full rounded-md border border-input px-3 font-mono text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring " + (canViewPii?"bg-transparent":"bg-muted text-muted-foreground")} defaultValue={canViewPii ? '0011 9203 '+e.cccd4 : '••••••'+e.cccd4} disabled={!canViewPii}
              placeholder="Mã hoá khi lưu" />
          </EPField>
          <EPField label="Mã số thuế (MST)" pii>
            <input className={"h-9 w-full rounded-md border border-input px-3 font-mono text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring " + (canViewPii?"bg-transparent":"bg-muted text-muted-foreground")} defaultValue={canViewPii ? '8 234 56'+e.mst4 : '••••••'+e.mst4} disabled={!canViewPii}
              placeholder="Mã hoá khi lưu" />
          </EPField>
          <EPField label="Tên khai thuế"><input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" defaultValue="Nguyễn Thị Lan" placeholder="Tên dùng khi khai thuế" /></EPField>
          <EPField label="GPLX số"><input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" defaultValue="B2-01234567" placeholder="Số giấy phép lái xe" /></EPField>
          <EPField label="GPLX hết hạn"><input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" type="date" defaultValue="2028-04-15" /></EPField>
          <EPField label="Mã NV (chính)" immutable>
            <input className="h-9 w-full rounded-md border border-input bg-muted px-3 font-mono text-base text-muted-foreground shadow-xs transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" defaultValue={e.num} disabled />
          </EPField>
        </div>

        {/* PII note */}
        <div className="mt-4 flex items-start gap-2 rounded-md bg-muted px-3 py-2.5 text-xs leading-[1.55] text-muted-foreground">
          <Icon name="lock" size={13} className="mt-px shrink-0" />
          <span>Số CCCD &amp; mã số thuế được <strong>mã hoá khi lưu trữ</strong>; chỉ vai trò có quyền xem dữ liệu nhạy cảm mới sửa được giá trị đầy đủ. Mọi thay đổi đều ghi vào <strong>lịch sử thay đổi</strong> (diff PII hiển thị <em>[đã ẩn]</em>).</span>
      </div>
      </div>

      <div className="flex justify-end gap-2 border-t border-border px-[22px] py-3.5">
        <Btn variant="outline" size="sm" onClick={onClose}>Hủy</Btn>
        <Btn variant="primary" size="sm" icon="check">Lưu thay đổi</Btn>
      </div>
    </PIMOverlay>
  );
};

// ─── 11: Chỉnh sửa dữ liệu việc làm (HR/Admin) — §4 ───────────────────────────
// HR/Admin sửa chức danh, tổ chức, đường lên, ca làm việc, mốc thời gian HĐ.
// Mã NV chính read-only; thay đổi supervisor được kiểm tra vòng tròn & ghi lịch sử.
const PIMEditEmploymentOverlay = ({ e, onClose = () => {} }) => {
  const EMPField = ({ label, children, req, immutable, full }) => (
    <div className={full?"col-span-full":undefined}>
      <label className="mb-[5px] flex items-center gap-[5px] text-xs font-medium">
        {label}{req && <span className="text-destructive">*</span>}
        {immutable && <span className="rounded-sm bg-muted px-1.5 text-2xs text-muted-foreground">không sửa</span>}
      </label>
      {children}
    </div>
  );
  const Sel = ({ value, opts }) => {
    const ph = opts[0] && opts[0][0]==='' ? opts[0][1] : undefined;
    const items = (ph!==undefined ? opts.slice(1) : opts).map(([value,label])=>({value,label}));
    return <Select placeholder={ph} defaultValue={value} options={items} />;
  };
  return (
    <PIMOverlay width={620}>
      <div className="flex items-center justify-between border-b border-border px-[22px] py-4">
        <div className="flex items-center gap-[11px]">
          <div className="grid size-9 shrink-0 place-items-center rounded-md bg-primary-soft">
            <Icon name="briefcase" size={17} style={{ color:'var(--color-primary)' }} />
          </div>
          <div>
            <div className="text-md font-bold">Chỉnh sửa dữ liệu việc làm</div>
            <div className="mt-px text-xs text-muted-foreground">{e.name} · {e.num}</div>
          </div>
        </div>
        <Btn variant="ghost" size="sm" iconOnly icon="x" onClick={onClose} />
      </div>

      <div className="overflow-y-auto px-[22px] py-5" style={{ maxHeight:520 }}>
        {/* Chức danh & hợp đồng */}
        <div className="mb-3 text-xs font-bold uppercase tracking-[0.05em] text-muted-foreground">Chức danh & hợp đồng</div>
        <div className="grid grid-cols-2 gap-3.5">
          <EMPField label="Chức danh" req>
            <Sel value="hr_manager" opts={[['hr_manager','HR Manager'],['software_engineer','Software Engineer'],['accountant','Accountant'],['marketing_lead','Marketing Lead']]} />
          </EMPField>
          <EMPField label="Bậc lương">
            <Sel value="b3" opts={[['','— Chọn bậc —'],['b1','Grade B1'],['b2','Grade B2'],['b3','Grade B3'],['c1','Grade C1']]} />
          </EMPField>
          <EMPField label="Loại hợp đồng" req>
            <Sel value="full_time" opts={[['full_time','Toàn thời gian'],['part_time','Bán thời gian'],['contract','Hợp đồng'],['intern','Thực tập sinh'],['temporary','Thời vụ']]} />
          </EMPField>
          <EMPField label="Ca làm việc">
            <Sel value="standard" opts={[['standard','Hành chính (8–17h)'],['rotating','Xoay ca'],['night','Ca đêm'],['flexible','Linh hoạt'],['on_call','Trực']]} />
          </EMPField>
        </div>

        {/* Tổ chức & đường lên */}
        <div className="mb-3 mt-5 text-xs font-bold uppercase tracking-[0.05em] text-muted-foreground">Tổ chức & đường lên</div>
        <div className="grid grid-cols-2 gap-3.5">
          <EMPField label="Đơn vị (subunit)" req>
            <Sel value="hr" opts={[['hr','Phòng Nhân sự'],['eng','Engineering'],['mkt','Marketing'],['sales','Kinh doanh'],['fin','Tài chính']]} />
          </EMPField>
          <EMPField label="Địa điểm làm việc">
            <Sel value="hanoi" opts={[['hanoi','Hà Nội'],['hcm','HCM'],['danang','Đà Nẵng']]} />
          </EMPField>
          <EMPField label="Quản lý trực tiếp">
            <div className="relative flex items-center">
              <Icon name="search" size={13} className="pointer-events-none absolute left-2.5 size-3.5 text-muted-foreground" />
              <input className="h-9 w-full rounded-md border border-input bg-transparent pl-8 pr-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" defaultValue="Hồ Văn Minh" placeholder="Tìm nhân viên đang làm việc..." />
            </div>
          </EMPField>
          <EMPField label="Quản lý thay thế">
            <input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" defaultValue="Bùi Thị Linh" placeholder="Tuỳ chọn..." />
          </EMPField>
        </div>

        {/* Mốc thời gian */}
        <div className="mb-3 mt-5 text-xs font-bold uppercase tracking-[0.05em] text-muted-foreground">Mốc thời gian</div>
        <div className="grid grid-cols-3 gap-3.5">
          <EMPField label="Ngày vào làm" req><input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" type="date" defaultValue="2024-03-01" /></EMPField>
          <EMPField label="Bắt đầu HĐ"><input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" type="date" defaultValue="2024-03-01" /></EMPField>
          <EMPField label="Kết thúc HĐ"><input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" type="date" defaultValue="" placeholder="—" /></EMPField>
          <EMPField label="Mã NV (chính)" immutable full>
            <input className="h-9 w-full rounded-md border border-input bg-muted px-3 font-mono text-base text-muted-foreground shadow-xs transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" defaultValue={e.num} disabled />
          </EMPField>
        </div>

        {/* Reporting-chain note */}
        <div className="mt-4 flex items-start gap-2 rounded-md bg-muted px-3 py-2.5 text-xs leading-[1.55] text-muted-foreground">
          <Icon name="alert-circle" size={13} className="mt-px shrink-0" />
          <span>Quản lý trực tiếp phải là nhân viên <strong>đang làm việc</strong>; hệ thống chặn <strong>báo cáo vòng tròn</strong> và giới hạn 10 cấp. Thay đổi đường lên ghi vào <strong>lịch sử quản lý</strong> (ReportingLineHistory).</span>
        </div>
      </div>

      <div className="flex justify-end gap-2 border-t border-border px-[22px] py-3.5">
        <Btn variant="outline" size="sm" onClick={onClose}>Hủy</Btn>
        <Btn variant="primary" size="sm" icon="check">Lưu thay đổi</Btn>
      </div>
    </PIMOverlay>
  );
};

// ─── 12: Chỉnh sửa liên lạc & khẩn cấp (HR/Admin) — §5 ─────────────────────────
// Địa chỉ (nhiều bản ghi), phương thức liên lạc và danh sách liên hệ khẩn cấp (tối thiểu 1, tối đa 5).
// Email công ty phải duy nhất trên các nhân viên đang làm việc.
const PIMEditContactOverlay = ({ e, onClose = () => {} }) => {
  const CField = ({ label, children, req, hint, full }) => (
    <div className={full?"col-span-full":undefined}>
      <label className="mb-[5px] flex items-center gap-[5px] text-xs font-medium">
        {label}{req && <span className="text-destructive">*</span>}
        {hint && <span className="text-2xs font-normal text-muted-foreground">{hint}</span>}
      </label>
      {children}
    </div>
  );
  const ADDRESSES = [
    { type:'home',    primary:true,  street:'15 Trần Duy Hưng', ward:'Trung Hoà', city:'Cầu Giấy, Hà Nội', zip:'100000', country:'VNM' },
    { type:'mailing', primary:false, street:'92 Láng Hạ',       ward:'',          city:'Đống Đa, Hà Nội',  zip:'100000', country:'VNM' },
  ];
  const ADDR_TYPE_OPTS = [{value:'home',label:'Thường trú'},{value:'mailing',label:'Nhận thư'},{value:'work',label:'Công ty'}];
  const COUNTRY_OPTS = [{value:'VNM',label:'VNM · Việt Nam'},{value:'USA',label:'USA · Hoa Kỳ'},{value:'SGP',label:'SGP · Singapore'}];
  const EMERGENCY = [
    { name:'Nguyễn Văn Bình', rel:'spouse', phone:'0987 654 321', alt:'', email:'', primary:true  },
    { name:'Trần Thị Minh',   rel:'parent', phone:'0976 543 210', alt:'', email:'', primary:false },
  ];
  const REL_OPTS = [['spouse','Vợ/Chồng'],['parent','Cha/Mẹ'],['child','Con'],['sibling','Anh/Chị/Em'],['friend','Bạn bè'],['other','Khác']];
  return (
    <PIMOverlay width={640}>
      <div className="flex items-center justify-between border-b border-border px-[22px] py-4">
        <div className="flex items-center gap-[11px]">
          <div className="grid size-9 shrink-0 place-items-center rounded-md bg-primary-soft">
            <Icon name="phone" size={17} style={{ color:'var(--color-primary)' }} />
          </div>
          <div>
            <div className="text-md font-bold">Chỉnh sửa liên lạc & khẩn cấp</div>
            <div className="mt-px text-xs text-muted-foreground">{e.name} · {e.num}</div>
          </div>
        </div>
        <Btn variant="ghost" size="sm" iconOnly icon="x" onClick={onClose} />
      </div>

      <div className="overflow-y-auto px-[22px] py-5" style={{ maxHeight:540 }}>
        {/* Địa chỉ — nhiều bản ghi */}
        <div className="mb-3 flex items-center justify-between">
          <div className="text-xs font-bold uppercase tracking-[0.05em] text-muted-foreground">Địa chỉ <span className="font-normal normal-case tracking-normal">· nhiều địa chỉ</span></div>
          <Btn variant="soft" size="xs" icon="plus">Thêm địa chỉ</Btn>
        </div>
        <div className="flex flex-col gap-2.5">
          {ADDRESSES.map((a,i)=>(
            <div key={i} className="rounded-md border border-border p-3.5">
              <div className="mb-2.5 flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <span className="text-xs font-semibold text-muted-foreground">Địa chỉ {i+1}</span>
                  {a.primary && <Badge variant="primary">Chính</Badge>}
                </div>
                <div className="flex items-center gap-2.5">
                  <label className="flex cursor-pointer items-center gap-1.5 text-xs text-muted-foreground">
                    <input type="radio" name="addr-primary" defaultChecked={a.primary} /> Đặt làm chính
                  </label>
                  <Btn variant="ghost" size="sm" iconOnly icon="trash" />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-3">
                <CField label="Số nhà & đường" req full><input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" defaultValue={a.street} placeholder="Số nhà, tên đường (tối đa 200 ký tự)" /></CField>
                <CField label="Phường/Xã"><input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" defaultValue={a.ward} placeholder="Tuỳ chọn" /></CField>
                <CField label="Quận/Huyện · Tỉnh/Thành" req><input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" defaultValue={a.city} placeholder="Thành phố" /></CField>
                <CField label="Mã bưu chính" req><input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" defaultValue={a.zip} placeholder="ZIP" /></CField>
                <CField label="Quốc gia" req><Select defaultValue={a.country} options={COUNTRY_OPTS} /></CField>
                <CField label="Loại địa chỉ"><Select defaultValue={a.type} options={ADDR_TYPE_OPTS} /></CField>
              </div>
            </div>
          ))}
        </div>

        {/* Phương thức liên lạc */}
        <div className="mb-3 mt-5 text-xs font-bold uppercase tracking-[0.05em] text-muted-foreground">Phương thức liên lạc</div>
        <div className="grid grid-cols-2 gap-3.5">
          <CField label="Email công ty" req hint="· duy nhất"><input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" type="email" defaultValue={e.email} /></CField>
          <CField label="Email cá nhân"><input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" type="email" defaultValue="lan.nguyen.personal@gmail.com" /></CField>
          <CField label="SĐT di động"><input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" defaultValue={e.phone} placeholder="+84 9xx xxx xxx" /></CField>
          <CField label="SĐT nhà"><input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" defaultValue="024 3456 7890" /></CField>
          <CField label="SĐT công ty"><input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" defaultValue="028 1234 5678" /></CField>
          <CField label="SĐT khác"><input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" defaultValue="" placeholder="Tuỳ chọn" /></CField>
        </div>

        {/* Liên hệ khẩn cấp */}
        <div className="mb-3 mt-5 flex items-center justify-between">
          <div className="text-xs font-bold uppercase tracking-[0.05em] text-muted-foreground">Liên hệ khẩn cấp <span className="font-normal normal-case tracking-normal">· tối thiểu 1, tối đa 5</span></div>
          <Btn variant="soft" size="xs" icon="plus">Thêm liên hệ</Btn>
        </div>
        <div className="flex flex-col gap-2.5">
          {EMERGENCY.map((c,i)=>(
            <div key={i} className="rounded-md border border-border p-3.5">
              <div className="mb-2.5 flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <span className="text-xs font-semibold text-muted-foreground">Liên hệ {i+1}</span>
                  {c.primary && <Badge variant="primary">Chính</Badge>}
                </div>
                <div className="flex items-center gap-2.5">
                  <label className="flex cursor-pointer items-center gap-1.5 text-xs text-muted-foreground">
                    <input type="radio" name="emg-primary" defaultChecked={c.primary} /> Đặt làm chính
                  </label>
                  <Btn variant="ghost" size="sm" iconOnly icon="trash" disabled={i===0 && EMERGENCY.length===1} />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-3">
                <CField label="Họ tên" req><input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" defaultValue={c.name} placeholder="Họ tên đầy đủ" /></CField>
                <CField label="Quan hệ" req>
                  <Select defaultValue={c.rel} options={REL_OPTS.map(([value,label])=>({value,label}))} />
                </CField>
                <CField label="SĐT chính" req><input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" defaultValue={c.phone} /></CField>
                <CField label="SĐT phụ"><input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" defaultValue={c.alt} placeholder="Tuỳ chọn" /></CField>
                <CField label="Email" full><input className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" type="email" defaultValue={c.email} placeholder="Tuỳ chọn" /></CField>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-4 flex items-start gap-2 rounded-md bg-muted px-3 py-2.5 text-xs leading-[1.55] text-muted-foreground">
          <Icon name="info" size={13} className="mt-px shrink-0" />
          <span>Email công ty phải <strong>duy nhất</strong> trên các nhân viên đang làm việc; khi đổi, các phiên đăng nhập hiện tại vẫn giữ quyền truy cập. Phải có <strong>ít nhất 1</strong> liên hệ khẩn cấp. Mọi thay đổi đều ghi vào lịch sử thay đổi.</span>
        </div>
      </div>

      <div className="flex justify-end gap-2 border-t border-border px-[22px] py-3.5">
        <Btn variant="outline" size="sm" onClick={onClose}>Hủy</Btn>
        <Btn variant="primary" size="sm" icon="check">Lưu thay đổi</Btn>
      </div>
    </PIMOverlay>
  );
};

// Standalone artboards: màn chi tiết với form chỉnh sửa đang mở
const PIMEditPersonalScreen   = () => <PIMDetailScreen initialTab="personal"   initialEdit />;
const PIMEditEmploymentScreen = () => <PIMDetailScreen initialTab="employment" initialEdit="employment" />;
const PIMEditContactScreen    = () => <PIMDetailScreen initialTab="contact"    initialEdit="contact" />;

Object.assign(window, { PIMStatusChangeScreen, PIMRehireScreen, PIMDependentForm, PIMDependentEditScreen, PIMDependentAddScreen, PIMEditPersonalOverlay, PIMEditEmploymentOverlay, PIMEditContactOverlay, PIMEditPersonalScreen, PIMEditEmploymentScreen, PIMEditContactScreen });