// ELS HRM — Module 03: Phân biệt Tổ chức ↔ Đơn vị khi tạo mới
// - OrgAddMenu          : dropdown "Thêm mới" → chọn Tổ chức / Đơn vị
// - OrgEntityChooserScreen : màn chọn loại thực thể (modal trên cây)
// - OrgCreateOrgScreen  : form TẠO TỔ CHỨC  (CÓ loại tổ chức)
// - OrgCreateUnitScreen : form TẠO ĐƠN VỊ   (KHÔNG có loại; có org cha + người phụ trách)
// - OrgEditUnitScreen   : form SỬA ĐƠN VỊ   (org cha bị khoá — immutable; đổi được trạng thái)

const goSlot = (slotId) => window.postMessage({ type: '__dc_navigate', slotId }, '*');

// Shared input class — matches shared.jsx <input> utility recipe
const INPUT_CLS = "h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring";

// ─── Reusable form bits ──────────────────────────────────────────────────────
const FldLabel = ({ children, required, hint }) => (
  <label className="mb-[5px] flex items-center gap-[5px] text-xs font-semibold text-foreground">
    {children}{required && <span className="text-destructive">*</span>}
    {hint && <span className="text-2xs font-normal text-muted-foreground">{hint}</span>}
  </label>
);

const FormSectionHead = ({ icon, color, bg, title, note }) => (
  <div className="mb-4 flex items-center gap-2.5">
    <div className="grid size-[30px] shrink-0 place-items-center rounded-md" style={{ background: bg }}>
      <Icon name={icon} size={15} style={{ color }} />
    </div>
    <div>
      <div className="text-base font-bold leading-[1.1]">{title}</div>
      {note && <div className="mt-0.5 text-xs text-muted-foreground">{note}</div>}
    </div>
  </div>
);

const ValidPanel = ({ rows }) => (
  <div className="rounded-xl border border-border bg-card p-4 shadow-xs">
    <div className="mb-2.5 text-xs font-bold uppercase tracking-[0.07em] text-muted-foreground">Kiểm tra xác thực</div>
    {rows.map((v, i) => (
      <div key={i} className={"flex gap-2 py-1.5 text-xs leading-[1.45] " + (i < rows.length - 1 ? "border-b border-border" : "")}>
        <Icon name={v.ok === false ? 'alert-circle' : 'check-circle'} size={13} className="mt-0.5 shrink-0" style={{ color: v.ok === false ? 'var(--color-warning)' : 'var(--color-success)' }} />
        <span>{v.text}</span>
      </div>
    ))}
  </div>
);

// ════════════════════════════════════════════════════════════════════════════
// OrgAddMenu — split "Thêm mới" với 2 lựa chọn: Tổ chức / Đơn vị
// ════════════════════════════════════════════════════════════════════════════
const OrgAddMenu = () => {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!open) return;
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('pointerdown', h, true);
    return () => document.removeEventListener('pointerdown', h, true);
  }, [open]);

  const opts = [
    { slot: 'create/org',  icon: 'building', color: 'var(--color-primary)', bg: 'var(--color-primary-soft)', title: 'Tổ chức mới', desc: 'Có phân loại: Công ty · Khối · Phòng ban · Team' },
    { slot: 'create/unit', icon: 'users',    color: 'var(--color-info)',    bg: 'var(--color-info-soft)',    title: 'Đơn vị mới',  desc: 'Nhóm bên trong một tổ chức · không có loại' },
  ];

  return (
    <div ref={ref} className="relative">
      <button className="inline-flex h-8 cursor-pointer select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent bg-primary px-3 text-xs font-medium leading-none text-primary-foreground shadow-xs transition-colors hover:bg-primary-hover focus-visible:border-primary focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring" onClick={() => setOpen((o) => !o)}>
        <Icon name="plus" size={14} />
        Thêm mới
        <Icon name="chevron-down" size={13} style={{ opacity: 0.8 }} />
      </button>
      {open && (
        <div className="absolute right-0 top-full z-40 mt-1.5 w-80 rounded-lg border border-border bg-popover p-1.5 shadow-lg">
          <div className="px-2 pb-1 pt-1.5 text-2xs font-bold uppercase tracking-[0.08em] text-muted-foreground">
            Bạn muốn tạo gì?
          </div>
          {opts.map((o) => (
            <div key={o.slot} onClick={() => { setOpen(false); goSlot(o.slot); }}
              className="flex cursor-pointer gap-[11px] rounded-md p-2 hover:bg-accent">
              <div className="grid size-[34px] shrink-0 place-items-center rounded-md" style={{ background: o.bg }}>
                <Icon name={o.icon} size={16} style={{ color: o.color }} />
              </div>
              <div className="min-w-0">
                <div className="text-sm font-semibold">{o.title}</div>
                <div className="mt-px text-xs leading-[1.35] text-muted-foreground">{o.desc}</div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

// ════════════════════════════════════════════════════════════════════════════
// OrgEntityChooserScreen — modal chọn loại thực thể, đè lên cây tổ chức
// ════════════════════════════════════════════════════════════════════════════
const ChooserCard = ({ icon, color, bg, kicker, title, desc, bullets, slot }) => (
  <div onClick={() => goSlot(slot)}
    className="relative flex-1 cursor-pointer rounded-xl border border-border bg-card p-[22px] transition-[box-shadow,border-color] duration-150"
    onMouseEnter={(e) => { e.currentTarget.style.boxShadow = 'var(--shadow-md)'; e.currentTarget.style.borderColor = color; }}
    onMouseLeave={(e) => { e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = 'var(--color-border)'; }}>
    <div className="mb-3.5 grid size-[46px] place-items-center rounded-lg" style={{ background: bg }}>
      <Icon name={icon} size={22} style={{ color }} />
    </div>
    <div className="mb-1 text-2xs font-bold uppercase tracking-[0.09em]" style={{ color }}>{kicker}</div>
    <div className="mb-1.5 text-lg font-bold">{title}</div>
    <div className="mb-3.5 text-sm leading-[1.55] text-muted-foreground [text-wrap:pretty]">{desc}</div>
    <div className="flex flex-col gap-[7px]">
      {bullets.map((b, i) => (
        <div key={i} className="flex items-start gap-2 text-xs">
          <Icon name={b.no ? 'x-circle' : 'check-circle'} size={13} className="mt-px shrink-0" style={{ color: b.no ? 'var(--color-muted-foreground)' : 'var(--color-success)' }} />
          <span className={b.no ? "text-muted-foreground" : "text-foreground"}>{b.t}</span>
        </div>
      ))}
    </div>
    <div className="mt-4 flex items-center gap-1.5 text-sm font-semibold" style={{ color }}>
      Tiếp tục <Icon name="arrow-right" size={14} />
    </div>
  </div>
);

const OrgEntityChooserScreen = () => (
  <HRMShell active="org"
    title="Cấu trúc tổ chức"
    crumbs={['Cấu trúc tổ chức']}
    meta="247 nhân viên · 16 đơn vị"
    actions={<>
      <Btn variant="outline" size="sm" icon="download">Xuất PDF</Btn>
      <OrgAddMenu />
    </>}>
    <div className="relative min-h-[720px]">
      {/* mờ nền: gợi ý cây phía sau */}
      <div className="pointer-events-none opacity-50 blur-[2px]">
        <div className="rounded-xl border border-border bg-card p-3 shadow-xs">
          {['ELS Technologies JSC', 'Khối Công nghệ', 'Phòng Engineering', 'Khối Kinh doanh', 'Khối Hành chính - NS'].map((n, i) => (
            <div key={i} className="mb-1 flex items-center gap-2.5 rounded-sm border border-border bg-card py-[11px] pr-3.5" style={{ paddingLeft: 14 + (i === 0 ? 0 : i < 3 ? i : 1) * 22 }}>
              <div className="size-[26px] rounded-sm bg-muted" />
              <div className="h-2.5 w-[180px] rounded bg-muted" />
            </div>
          ))}
        </div>
      </div>

      {/* overlay */}
      <div className="absolute inset-0 grid place-items-center rounded-lg bg-[oklch(0.2_0.01_264_/_0.32)]">
        <div className="w-[760px] rounded-2xl bg-card p-7 shadow-2xl">
          <div className="mb-1 flex items-start justify-between">
            <div className="text-xl font-bold">Tạo mới — chọn loại</div>
            <div className="cursor-pointer p-1 text-muted-foreground" onClick={() => goSlot('main/tree')}><Icon name="x" size={16} /></div>
          </div>
          <div className="mb-5 text-sm text-muted-foreground">
            Tổ chức và đơn vị là hai thực thể khác nhau. Chọn đúng loại bạn muốn thêm vào cấu trúc.
          </div>
          <div className="flex gap-4">
            <ChooserCard
              icon="building" color="var(--color-primary)" bg="var(--color-primary-soft)"
              kicker="Cấp cấu trúc" title="Tổ chức"
              desc="Nhánh chính trong cây tổ chức của doanh nghiệp — tuân theo quy tắc phân cấp loại."
              bullets={[
                { t: 'CÓ loại tổ chức: Công ty · Khối · Phòng ban · Team' },
                { t: 'Có tổ chức cha (Công ty ở cấp gốc)' },
                { t: 'Ràng buộc phân cấp theo loại' },
              ]}
              slot="create/org" />
            <ChooserCard
              icon="users" color="var(--color-info)" bg="var(--color-info-soft)"
              kicker="Bên trong tổ chức" title="Đơn vị (con)"
              desc="Nhóm làm việc lồng nhau bên trong một tổ chức. Dùng để chia nhỏ cơ cấu nội bộ."
              bullets={[
                { t: 'KHÔNG có loại tổ chức', no: true },
                { t: 'Thuộc đúng một tổ chức · có người phụ trách' },
                { t: 'Lồng tối đa 5 cấp' },
              ]}
              slot="create/unit" />
          </div>
        </div>
      </div>
    </div>
  </HRMShell>
);

// ════════════════════════════════════════════════════════════════════════════
// OrgCreateOrgScreen — TẠO TỔ CHỨC (CÓ loại tổ chức)
// ════════════════════════════════════════════════════════════════════════════
const ORG_TYPE_PICK = [
  { v: 'COMPANY',    label: 'Công ty',   en: 'Company',    icon: 'building',  desc: 'Cấp gốc' },
  { v: 'DIVISION',   label: 'Khối',      en: 'Division',   icon: 'briefcase', desc: 'Thuộc công ty' },
  { v: 'DEPARTMENT', label: 'Phòng ban', en: 'Department', icon: 'users',     desc: 'Thuộc khối', sel: true },
  { v: 'TEAM',       label: 'Team',      en: 'Team',       icon: 'user',      desc: 'Nhỏ nhất' },
];

const OrgCreateOrgScreen = () => (
  <HRMShell active="org"
    title="Tạo tổ chức mới"
    crumbs={['Cấu trúc tổ chức', 'Tạo mới', 'Tổ chức']}
    meta={<Badge variant="primary">Tổ chức</Badge>}
    actions={<>
      <Btn variant="outline" size="sm" onClick={() => goSlot('main/chooser')}>Hủy</Btn>
      <Btn variant="primary" size="sm" icon="check">Lưu tổ chức</Btn>
    </>}>

    <div className="grid grid-cols-[1fr_320px] gap-[18px]">
      <div className="rounded-xl border border-border bg-card p-6 shadow-xs">
        <FormSectionHead icon="building" color="var(--color-primary)" bg="var(--color-primary-soft)"
          title="Thông tin tổ chức" note="Thực thể cấp cấu trúc — bắt buộc phân loại" />

        {/* LOẠI TỔ CHỨC — điểm khác biệt cốt lõi của Tổ chức */}
        <div className="mb-[18px]">
          <FldLabel required hint="— chỉ tổ chức mới có thuộc tính này">Loại tổ chức</FldLabel>
          <div className="grid grid-cols-4 gap-2">
            {ORG_TYPE_PICK.map((t) => (
              <div key={t.v} className={"relative cursor-pointer rounded-md px-2.5 py-3 text-center border-[1.5px] " + (t.sel ? "border-primary bg-primary-soft" : "border-border bg-card")}>
                {t.sel && <div className="absolute right-1.5 top-1.5"><Icon name="check-circle" size={14} style={{ color: 'var(--color-primary)' }} /></div>}
                <div className={"mx-auto mb-2 grid size-[30px] place-items-center rounded-md " + (t.sel ? "bg-card" : "bg-muted")}>
                  <Icon name={t.icon} size={15} style={{ color: t.sel ? 'var(--color-primary)' : 'var(--color-muted-foreground)' }} />
                </div>
                <div className={"text-sm font-semibold " + (t.sel ? "text-primary" : "text-foreground")}>{t.label}</div>
                <div className="mt-0.5 text-2xs text-muted-foreground">{t.desc}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="mb-4 grid grid-cols-2 gap-3.5">
          <div>
            <FldLabel required>Tên tổ chức</FldLabel>
            <input className={INPUT_CLS} placeholder="VD: Phòng Dữ liệu" defaultValue="Phòng Dữ liệu" />
          </div>
          <div>
            <FldLabel required>Mã tổ chức</FldLabel>
            <div className="relative">
              <input className={INPUT_CLS} placeholder="VD: DATA" defaultValue="DATA" style={{ paddingRight: 36 }} />
              <Icon name="check-circle" size={14} className="absolute right-2.5 top-1/2 -translate-y-1/2" style={{ color: 'var(--color-success)' }} />
            </div>
            <div className="mt-1 text-2xs text-muted-foreground">Duy nhất toàn hệ thống · chữ, số, gạch ngang.</div>
          </div>
        </div>

        <div className="mb-4">
          <FldLabel required hint="— theo quy tắc phân cấp loại">Tổ chức cha</FldLabel>
          <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={INPUT_CLS + " pl-8"} placeholder="Tìm tổ chức cha..." defaultValue="Khối Công nghệ (TECH)" />
          </div>
          <div className="mt-1 text-2xs text-muted-foreground">Để trống nếu là tổ chức cấp gốc — chỉ cho phép loại Công ty.</div>
        </div>

        <div className="mb-4 grid grid-cols-1 gap-3.5">
          <div>
            <FldLabel>Mô tả</FldLabel>
            <textarea className="w-full resize-none rounded-md border border-input bg-transparent px-3 pt-2 text-base text-foreground shadow-xs transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" style={{ height: 72 }}
              placeholder="Chức năng, phạm vi của tổ chức này..."
              defaultValue="Phòng phụ trách nền tảng dữ liệu, phân tích và báo cáo toàn công ty." />
          </div>
        </div>

        <div className="w-[220px]">
          <FldLabel>Trạng thái</FldLabel>
          <Select className="w-full" defaultValue="active" options={[{value:'active',label:'Đang hoạt động'},{value:'inactive',label:'Vô hiệu'}]} />
        </div>
      </div>

      <div className="flex flex-col gap-3">
        <div className="rounded-xl border border-border bg-card p-[18px] shadow-xs">
          <div className="mb-3 text-sm font-bold">Vị trí trong cây tổ chức</div>
          <div className="flex flex-col gap-1.5 text-sm">
            {[
              { label: 'ELS Technologies JSC', type: 'COMPANY', depth: 0 },
              { label: 'Khối Công nghệ', type: 'DIVISION', depth: 1 },
              { label: '→ Phòng Dữ liệu (mới)', type: 'DEPARTMENT', depth: 2, isNew: true },
            ].map((n, i) => (
              <div key={i} className="flex items-center gap-2" style={{ paddingLeft: n.depth * 16 }}>
                <div className="size-1.5 shrink-0 rounded-full" style={{ background: n.isNew ? 'var(--color-primary)' : 'var(--color-muted-foreground)' }} />
                <span className={n.isNew ? "font-semibold text-primary" : "font-normal text-foreground"}>{n.label}</span>
                <span className="ml-auto rounded-sm bg-muted px-1.5 py-px text-2xs text-muted-foreground">
                  {ORG_TYPE_CFG[n.type].label}
                </span>
              </div>
            ))}
          </div>
        </div>

        <ValidPanel rows={[
          { text: 'Mã DATA chưa được sử dụng' },
          { text: 'Loại Phòng ban hợp lệ dưới Khối' },
          { text: 'Tổ chức cha đang hoạt động' },
          { text: 'Không phát hiện tham chiếu vòng' },
        ]} />

        <div className="rounded-xl border border-[oklch(0.687_0.184_41_/_0.2)] bg-primary-soft p-3.5">
          <div className="text-xs leading-[1.55] text-[oklch(0.5_0.12_41)]">
            <strong>Tổ chức</strong> tạo nhánh mới trong cây và có thể chứa tổ chức con hoặc đơn vị bên trong.
          </div>
        </div>
      </div>
    </div>
  </HRMShell>
);

// ════════════════════════════════════════════════════════════════════════════
// OrgCreateUnitScreen — TẠO ĐƠN VỊ (KHÔNG có loại; có org cha + người phụ trách)
// ════════════════════════════════════════════════════════════════════════════
const UnitForm = ({ edit = false }) => (
  <HRMShell active="org"
    title={edit ? 'Chỉnh sửa đơn vị' : 'Tạo đơn vị mới'}
    crumbs={['Cấu trúc tổ chức', edit ? 'Chỉnh sửa' : 'Tạo mới', 'Đơn vị']}
    meta={<Badge variant="info">Đơn vị</Badge>}
    actions={<>
      <Btn variant="outline" size="sm" onClick={() => goSlot(edit ? 'main/subunit' : 'main/chooser')}>Hủy</Btn>
      <Btn variant="primary" size="sm" icon="check">{edit ? 'Lưu thay đổi' : 'Lưu đơn vị'}</Btn>
    </>}>

    <div className="grid grid-cols-[1fr_320px] gap-[18px]">
      <div className="rounded-xl border border-border bg-card p-6 shadow-xs">
        <FormSectionHead icon="users" color="var(--color-info)" bg="var(--color-info-soft)"
          title="Thông tin đơn vị" note="Nhóm làm việc bên trong một tổ chức" />

        {/* Tổ chức chứa đơn vị — thay cho "Loại" của Tổ chức */}
        <div className="mb-[18px]">
          <FldLabel required>Thuộc tổ chức</FldLabel>
          {edit ? (
            <div className="flex items-center gap-2.5 rounded-md border border-border bg-muted px-3 py-2.5">
              <div className="grid size-[30px] place-items-center rounded-sm bg-success-soft">
                <Icon name="users" size={14} style={{ color: 'var(--color-success)' }} />
              </div>
              <div className="flex-1">
                <div className="text-sm font-semibold">Phòng Engineering <span className="font-mono text-2xs text-muted-foreground">ENG</span></div>
                <div className="text-2xs text-muted-foreground">Không thể đổi tổ chức sau khi tạo</div>
              </div>
              <Icon name="settings" size={14} style={{ color: 'var(--color-muted-foreground)' }} />
            </div>
          ) : (
            <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={INPUT_CLS + " pl-8"} placeholder="Chọn tổ chức chứa đơn vị..." defaultValue="Phòng Engineering (ENG)" />
            </div>
          )}
          <div className="mt-1 text-2xs text-muted-foreground">
            {edit ? 'Trường khoá — để chuyển tổ chức phải xoá và tạo lại đơn vị.' : 'Đơn vị luôn thuộc đúng một tổ chức.'}
          </div>
        </div>

        <div className="mb-4 grid grid-cols-2 gap-3.5">
          <div>
            <FldLabel required>Tên đơn vị</FldLabel>
            <input className={INPUT_CLS} placeholder="VD: Nhóm Hạ tầng" defaultValue={edit ? 'Nhóm Hạ tầng & DevOps' : 'Nhóm Hạ tầng'} />
          </div>
          <div>
            <FldLabel required>Mã đơn vị</FldLabel>
            <div className="relative">
              <input className={INPUT_CLS} placeholder="VD: INFRA" defaultValue="INFRA" style={{ paddingRight: 36 }} />
              <Icon name="check-circle" size={14} className="absolute right-2.5 top-1/2 -translate-y-1/2" style={{ color: 'var(--color-success)' }} />
            </div>
            <div className="mt-1 text-2xs text-muted-foreground">Duy nhất trong tổ chức (không cần duy nhất toàn hệ thống).</div>
          </div>
        </div>

        <div className="mb-4">
          <FldLabel hint="— để trống nếu là đơn vị cấp gốc trong tổ chức">Đơn vị cha</FldLabel>
          <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={INPUT_CLS + " pl-8"} placeholder="Tìm đơn vị cha trong cùng tổ chức..." defaultValue="Nhóm Nền tảng" />
          </div>
        </div>

        <div className="mb-4 border-t border-border pt-[18px]">
          <FormSectionHead icon="user-check" color="var(--color-info)" bg="var(--color-info-soft)"
            title="Người phụ trách" note="Trưởng đơn vị — riêng có ở đơn vị (tùy chọn)" />
          <div className="flex items-center gap-2.5 rounded-md border border-border px-2.5 py-2">
            <Avatar name="Vũ Đức Hải" size="sm" />
            <div className="flex-1">
              <div className="text-sm font-semibold">Vũ Đức Hải</div>
              <div className="text-2xs text-muted-foreground">EMP-0271 · DevOps Engineer</div>
            </div>
            <Btn variant="ghost" size="sm" iconOnly icon="x" />
          </div>
        </div>

        <div className={edit ? "mb-4" : ""}>
          <FldLabel>Mô tả</FldLabel>
          <textarea className="w-full resize-none rounded-md border border-input bg-transparent px-3 pt-2 text-base text-foreground shadow-xs transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" style={{ height: 72 }}
            placeholder="Nhiệm vụ của đơn vị này..."
            defaultValue="Phụ trách CI/CD, hạ tầng cloud và vận hành hệ thống." />
        </div>

        {/* Trạng thái — chỉ có ở form SỬA (tạo mới luôn ra đơn vị đang hoạt động).
            Đơn vị con chỉ 2 giá trị: KHÔNG có "Tạm dừng" như tổ chức. Đặt Vô hiệu là cách
            lưu trữ đơn vị mà vẫn giữ nguyên phân công nhân sự. */}
        {edit && (
          <div className="w-[220px]">
            <FldLabel>Trạng thái</FldLabel>
            <Select className="w-full" defaultValue="active" options={[{value:'active',label:'Đang hoạt động'},{value:'inactive',label:'Vô hiệu'}]} />
          </div>
        )}
      </div>

      <div className="flex flex-col gap-3">
        {/* Khác biệt rõ: KHÔNG có khối "Loại" — thay bằng độ sâu lồng nhau */}
        <div className="rounded-xl border border-border bg-card p-[18px] shadow-xs">
          <div className="mb-3 text-sm font-bold">Vị trí trong tổ chức</div>
          <div className="flex flex-col gap-1.5 text-sm">
            {[
              { label: 'Phòng Engineering', org: true, depth: 0 },
              { label: 'Nhóm Nền tảng', depth: 1 },
              { label: '→ Nhóm Hạ tầng (mới)', depth: 2, isNew: true },
            ].map((n, i) => (
              <div key={i} className="flex items-center gap-2" style={{ paddingLeft: n.depth * 16 }}>
                <Icon name={n.org ? 'building' : 'users'} size={13} className="shrink-0" style={{ color: n.org ? 'var(--color-success)' : (n.isNew ? 'var(--color-info)' : 'var(--color-muted-foreground)') }} />
                <span className={n.isNew ? "font-semibold text-info" : "font-normal text-foreground"}>{n.label}</span>
                {n.org && <span className="ml-auto rounded-sm bg-muted px-1.5 py-px text-2xs text-muted-foreground">Tổ chức</span>}
              </div>
            ))}
          </div>
          <div className="mt-3 flex items-center justify-between border-t border-border pt-3">
            <span className="text-xs text-muted-foreground">Độ sâu lồng nhau</span>
            <span className="text-sm font-semibold">Cấp 2 / tối đa 5</span>
          </div>
        </div>

        <ValidPanel rows={[
          { text: 'Mã INFRA chưa dùng trong Phòng Engineering' },
          { text: 'Độ sâu hợp lệ (cấp 2 / tối đa 5)' },
          { text: 'Đơn vị cha cùng tổ chức' },
          { text: 'Không phát hiện tham chiếu vòng' },
        ]} />

        <div className="rounded-xl border border-[oklch(0.6_0.13_240_/_0.2)] bg-info-soft p-3.5">
          <div className="flex gap-2 text-xs leading-[1.55] text-[oklch(0.45_0.11_240)]">
            <Icon name="alert-circle" size={14} className="mt-px shrink-0" />
            <span><strong>Đơn vị không có loại tổ chức.</strong> Việc phân loại Công ty / Khối / Phòng ban / Team chỉ áp dụng cho tổ chức.</span>
          </div>
        </div>
      </div>
    </div>
  </HRMShell>
);

const OrgCreateUnitScreen = () => <UnitForm />;
const OrgEditUnitScreen = () => <UnitForm edit />;

Object.assign(window, {
  OrgAddMenu, OrgEntityChooserScreen,
  OrgCreateOrgScreen, OrgCreateUnitScreen, OrgEditUnitScreen,
});