// ELS HRM — Module 05 PIM — ESS edit flows + HR edit-request queue (§8.2 / §8.3)
// EMPLOYEE (data:employees:own): sửa trực tiếp các trường được phép; trường hạn chế
// phải gửi EditRequest chờ HR duyệt. HR_MANAGER duyệt qua hàng đợi.

const ESS_USER = { name: 'Nguyễn Thị Lan', role: 'HR Manager' };

// ─── E1: ESS — sửa trực tiếp (lưu ngay, không cần duyệt) §8.2 ──────────────────
const PIMESSEditDirectOverlay = ({ onClose = () => {} }) => (
  <PIMOverlay width={540}>
    <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-success-soft">
          <Icon name="edit" size={17} style={{ color:'var(--color-success)' }} />
        </div>
        <div>
          <div className="text-md font-bold">Cập nhật thông tin liên lạc</div>
          <div className="mt-px text-xs text-muted-foreground">Các trường này lưu ngay — không cần HR duyệt</div>
        </div>
      </div>
      <Btn variant="ghost" size="sm" iconOnly icon="x" onClick={onClose} />
    </div>

    <div className="px-[22px] py-5">
      <div className="mb-[18px] flex items-start gap-2 rounded-md bg-success-soft px-3 py-2.5 text-xs leading-[1.5] text-success">
        <Icon name="check-circle" size={14} className="mt-px shrink-0" />
        <span>Đây là các trường <strong>“Sửa trực tiếp”</strong> theo chính sách ESS. Khi bấm Lưu, thay đổi áp dụng <strong>ngay lập tức</strong> và được ghi vào lịch sử với người thực hiện là chính bạn.</span>
      </div>

      <div className="grid grid-cols-2 gap-3.5">
        {[
          ['Email cá nhân', 'lan.nguyen.personal@gmail.com', 'email'],
          ['SĐT di động',   '0912 345 678', 'text'],
          ['SĐT nhà',       '024 3456 7890', 'text'],
        ].map(([l,v,t],i)=>(
          <div key={i} className={i===0?"col-span-2":undefined}>
            <label className="mb-[5px] flex items-center gap-[5px] text-xs font-medium">
              {l}
              <span className="inline-flex items-center gap-[3px] rounded-full bg-success-soft px-1.5 py-px text-2xs font-semibold text-success"><Icon name="edit" size={9} /> Trực tiếp</span>
            </label>
            <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={t} defaultValue={v} />
          </div>
        ))}
        <div>
          <label className="mb-[5px] flex items-center gap-[5px] text-xs font-medium">
            Tình trạng hôn nhân
            <span className="inline-flex items-center gap-[3px] rounded-full bg-success-soft px-1.5 py-px text-2xs font-semibold text-success"><Icon name="edit" size={9} /> Trực tiếp</span>
          </label>
          <Select options={[['single','Độc thân'],['married','Đã kết hôn'],['divorced','Ly hôn'],['widowed','Goá']].map(([value,label])=>({value,label}))} defaultValue="married" className="w-full" />
        </div>
      </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 ngay</Btn>
    </div>
  </PIMOverlay>
);

// ─── E2: ESS — gửi yêu cầu chỉnh sửa (trường hạn chế) §8.3 ─────────────────────
const PIMESSEditRequestOverlay = ({ onClose = () => {} }) => (
  <PIMOverlay width={560}>
    <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-warning-soft">
          <Icon name="send" size={16} style={{ color:'oklch(0.55 0.13 65)' }} />
        </div>
        <div>
          <div className="text-md font-bold">Gửi yêu cầu chỉnh sửa</div>
          <div className="mt-px text-xs text-muted-foreground">Trường “Họ và tên” cần HR phê duyệt</div>
        </div>
      </div>
      <Btn variant="ghost" size="sm" iconOnly icon="x" onClick={onClose} />
    </div>

    <div className="px-[22px] py-5">
      <div className="mb-[18px] flex items-start gap-2 rounded-md bg-warning-soft px-3 py-2.5 text-xs leading-[1.5]" style={{ color:'oklch(0.45 0.1 65)' }}>
        <Icon name="info" size={14} className="mt-px shrink-0" />
        <span>Đây là trường <strong>“Cần HR duyệt”</strong>. Yêu cầu sẽ ở trạng thái <strong>chờ duyệt</strong> cho tới khi HR phê duyệt. Mỗi trường chỉ có <strong>1 yêu cầu chờ</strong> tại một thời điểm.</span>
      </div>

      <div className="mb-4 grid grid-cols-2 gap-3.5">
        <div>
          <label className="mb-[5px] block text-xs font-medium text-muted-foreground">Giá trị hiện tại</label>
          <input className="h-9 w-full rounded-md border border-input bg-muted px-3 text-base text-muted-foreground shadow-xs transition-colors focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" defaultValue="Nguyễn Thị Lan" disabled />
        </div>
        <div>
          <label className="mb-[5px] flex items-center gap-[5px] text-xs font-medium">Giá trị mới <span className="text-destructive">*</span></label>
          <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 Anh" />
        </div>
      </div>

      <div className="mb-1">
        <label className="mb-[5px] block text-xs font-medium">Lý do thay đổi <span className="font-normal text-muted-foreground">(giúp HR xét duyệt nhanh hơn)</span></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="VD: Cập nhật theo CCCD mới sau khi đổi tên hợp pháp..." defaultValue="Đổi tên hợp pháp theo CCCD cấp lại ngày 02/06/2026." />
      </div>
      <div className="mt-2 flex items-center gap-2 text-2xs text-muted-foreground">
        <Icon name="paperclip" size={12} /> Đính kèm giấy tờ chứng minh (tuỳ chọn) · PDF, JPG tối đa 10MB
      </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="send">Gửi yêu cầu duyệt</Btn>
    </div>
  </PIMOverlay>
);

// ─── E2b: ESS — Quản lý địa chỉ (đa địa chỉ, sửa trực tiếp lưu ngay) §8.2 ───────
// Địa chỉ là trường "Sửa trực tiếp" theo ma trận ESS (SDS §4.1): nhân viên tự
// thêm/sửa/xoá/đặt-chính, lưu ngay, KHÔNG qua hàng đợi duyệt.
const PIMESSAddressManagerOverlay = ({ onClose = () => {} }) => {
  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 INP = "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";
  return (
    <PIMOverlay width={600}>
      <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-success-soft">
            <Icon name="edit" size={17} style={{ color:'var(--color-success)' }} />
          </div>
          <div>
            <div className="text-md font-bold">Quản lý địa chỉ</div>
            <div className="mt-px text-xs text-muted-foreground">Thay đổi lưu ngay — không cần HR duyệt</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 }}>
        <div className="mb-[18px] flex items-start gap-2 rounded-md bg-success-soft px-3 py-2.5 text-xs leading-[1.5] text-success">
          <Icon name="check-circle" size={14} className="mt-px shrink-0" />
          <span>Địa chỉ là trường <strong>“Sửa trực tiếp”</strong> theo chính sách ESS — thêm/sửa/xoá áp dụng <strong>ngay</strong> và ghi vào lịch sử với người thực hiện là chính bạn.</span>
        </div>

        <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">{({home:'Thường trú',mailing:'Nhận thư',work:'Công ty'})[a.type]}</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="ess-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">
                <div className="col-span-2"><label className="mb-[5px] block text-xs font-medium">Số nhà & đường <span className="text-destructive">*</span></label><input className={INP} defaultValue={a.street} placeholder="Số nhà, tên đường" /></div>
                <div><label className="mb-[5px] block text-xs font-medium">Phường/Xã</label><input className={INP} defaultValue={a.ward} placeholder="Tuỳ chọn" /></div>
                <div><label className="mb-[5px] block text-xs font-medium">Quận/Huyện · Tỉnh/Thành <span className="text-destructive">*</span></label><input className={INP} defaultValue={a.city} placeholder="Thành phố" /></div>
                <div><label className="mb-[5px] block text-xs font-medium">Mã bưu chính <span className="text-destructive">*</span></label><input className={INP} defaultValue={a.zip} placeholder="ZIP" /></div>
                <div><label className="mb-[5px] block text-xs font-medium">Quốc gia <span className="text-destructive">*</span></label><Select defaultValue={a.country} options={[{value:'VNM',label:'VNM · Việt Nam'},{value:'USA',label:'USA · Hoa Kỳ'},{value:'SGP',label:'SGP · Singapore'}]} /></div>
                <div><label className="mb-[5px] block text-xs font-medium">Loại địa chỉ</label><Select defaultValue={a.type} options={[{value:'home',label:'Thường trú'},{value:'mailing',label:'Nhận thư'},{value:'work',label:'Công ty'}]} /></div>
              </div>
            </div>
          ))}
        </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 ngay</Btn>
      </div>
    </PIMOverlay>
  );
};

// ─── E3: HR Manager — hàng đợi duyệt yêu cầu chỉnh sửa §8.3 / SC-05 ────────────
const PIMEditRequestQueueScreen = () => {
  const REQS = [
    { emp:'Nguyễn Thị Lan',  num:'EMP-2024-0001', field:'Họ và tên',    old:'Nguyễn Thị Lan', nv:'Nguyễn Thị Lan Anh', reason:'Đổi tên hợp pháp theo CCCD cấp lại', at:'12/06/2026 09:14', doc:true },
    { emp:'Trần Minh Tuấn',  num:'EMP-2024-0008', field:'Ngày sinh',    old:'12/08/1995',     nv:'12/08/1994',          reason:'Sai lệch dữ liệu nhập ban đầu',     at:'11/06/2026 16:02', doc:true },
    { emp:'Lê Thị Hương',    num:'EMP-2025-0015', field:'Quốc tịch',    old:'VNM',            nv:'USA',                 reason:'Nhập tịch năm 2026',                 at:'10/06/2026 11:30', doc:false },
  ];
  return (
    <HRMShell active="employees" user={{ name:'Hồ Văn Minh', role:'HR Manager' }}
      title="Yêu cầu chỉnh sửa hồ sơ"
      meta={REQS.length + ' yêu cầu chờ duyệt'}
      crumbs={['Nhân viên','Yêu cầu chỉnh sửa']}
      actions={<Btn variant="outline" size="sm" icon="filter">Lọc</Btn>}>

      <div className="mb-4 grid grid-cols-3 gap-3">
        {[
          { label:'Chờ duyệt',   val:'3',  icon:'clock',       ib:'var(--color-warning-soft)', ic:'oklch(0.55 0.158 65)' },
          { label:'Đã duyệt (tháng)', val:'27', icon:'check-circle',ib:'var(--color-success-soft)', ic:'var(--color-success)' },
          { label:'Đã từ chối (tháng)',val:'4',  icon:'x-circle',  ib:'var(--color-destructive-soft)', ic:'var(--color-destructive)' },
        ].map((s,i)=><StatCard key={i} label={s.label} value={s.val} icon={s.icon} iconBg={s.ib} iconColor={s.ic} />)}
      </div>

      <div className="mb-3.5 flex items-start gap-2 rounded-md bg-info-soft px-3.5 py-[11px] text-xs leading-[1.55]" style={{ color:'oklch(0.385 0.062 222)' }}>
        <Icon name="info" size={14} className="mt-px shrink-0" style={{ color:'var(--color-info)' }} />
        <span>Chỉ 5 trường <strong>định danh hạn chế</strong> (họ, tên, ngày sinh, giới tính, quốc tịch) mới đi qua hàng đợi này. Duyệt sẽ áp dụng giá trị mới và ghi vào lịch sử thay đổi; từ chối cần nêu lý do.</span>
      </div>

      <div className="flex flex-col gap-2.5">
        {REQS.map((r,i)=>(
          <div key={i} className={CARD + " p-4"}>
            <div className="flex items-start gap-3.5">
              <Avatar name={r.emp} size="lg" />
              <div className="min-w-0 flex-1">
                <div className="mb-1.5 flex flex-wrap items-center gap-2">
                  <span className="text-sm font-bold">{r.emp}</span>
                  <span className="font-mono text-xs text-muted-foreground">{r.num}</span>
                  <Badge variant="warning" dot>Chờ duyệt</Badge>
                </div>
                <div className="mb-1.5 flex flex-wrap items-center gap-2 text-sm">
                  <span className="font-semibold">{r.field}</span>
                  <span className="rounded-sm bg-destructive-soft px-[7px] py-0.5 text-xs text-destructive">{r.old}</span>
                  <Icon name="arrow-right" size={12} className="text-muted-foreground" />
                  <span className="rounded-sm bg-success-soft px-[7px] py-0.5 text-xs text-success">{r.nv}</span>
                </div>
                <div className="text-xs leading-[1.5] text-muted-foreground">
                  <Icon name="message-circle" size={11} className="mr-1 inline align-middle" />
                  {r.reason}
                </div>
                <div className="mt-1.5 flex items-center gap-2.5 text-2xs text-muted-foreground">
                  <span>Gửi {r.at}</span>
                  {r.doc && <span className="inline-flex items-center gap-[3px] text-info"><Icon name="paperclip" size={10} /> 1 giấy tờ đính kèm</span>}
                </div>
              </div>
              <div className="flex shrink-0 flex-col gap-1.5">
                <Btn variant="primary" size="sm" icon="check">Duyệt</Btn>
                <Btn variant="outline" size="sm" icon="x" style={{ color:'var(--color-destructive)', borderColor:'var(--color-destructive)' }}>Từ chối</Btn>
              </div>
            </div>
          </div>
        ))}
      </div>
    </HRMShell>
  );
};

// Standalone artboards: ESS với overlay đang mở (compose trên màn ESS)
const PIMESSDirectEditScreen = () => (
  <div className="relative size-full">
    <PIMESSScreen />
    <PIMESSEditDirectOverlay />
  </div>
);
const PIMESSRequestEditScreen = () => (
  <div className="relative size-full">
    <PIMESSScreen />
    <PIMESSEditRequestOverlay />
  </div>
);
const PIMESSAddressManageScreen = () => (
  <div className="relative size-full">
    <PIMESSScreen />
    <PIMESSAddressManagerOverlay />
  </div>
);

Object.assign(window, {
  PIMESSEditDirectOverlay, PIMESSEditRequestOverlay, PIMESSAddressManagerOverlay, PIMEditRequestQueueScreen,
  PIMESSDirectEditScreen, PIMESSRequestEditScreen, PIMESSAddressManageScreen,
});