// ELS HRM — Module 03: Cấu Trúc Tổ Chức — All Screens

const ORG_NODES = [
{ id: 'c1', name: 'ELS Technologies JSC', code: 'ELS-VN', type: 'COMPANY', parent: null, emp: 247, sub: 3, status: 'active' },
{ id: 'd1', name: 'Khối Công nghệ', code: 'TECH', type: 'DIVISION', parent: 'c1', emp: 101, sub: 3, status: 'active' },
{ id: 'd2', name: 'Khối Kinh doanh', code: 'BIZ', type: 'DIVISION', parent: 'c1', emp: 58, sub: 2, status: 'active' },
{ id: 'd3', name: 'Khối Hành chính - NS', code: 'CORP', type: 'DIVISION', parent: 'c1', emp: 88, sub: 3, status: 'active' },
{ id: 'p1', name: 'Phòng Engineering', code: 'ENG', type: 'DEPARTMENT', parent: 'd1', emp: 65, sub: 3, status: 'active' },
{ id: 'p2', name: 'Phòng QA & Testing', code: 'QA', type: 'DEPARTMENT', parent: 'd1', emp: 24, sub: 1, status: 'active' },
{ id: 'p3', name: 'Phòng Product', code: 'PROD', type: 'DEPARTMENT', parent: 'd1', emp: 12, sub: 0, status: 'inactive' },
{ id: 'p4', name: 'Phòng Kinh doanh', code: 'SALES', type: 'DEPARTMENT', parent: 'd2', emp: 34, sub: 0, status: 'active' },
{ id: 'p5', name: 'Phòng Marketing', code: 'MKT', type: 'DEPARTMENT', parent: 'd2', emp: 24, sub: 0, status: 'active' },
{ id: 'p6', name: 'Phòng Nhân sự', code: 'HR', type: 'DEPARTMENT', parent: 'd3', emp: 12, sub: 0, status: 'active' },
{ id: 'p7', name: 'Phòng Tài chính', code: 'FIN', type: 'DEPARTMENT', parent: 'd3', emp: 8, sub: 0, status: 'active' },
{ id: 'p8', name: 'Phòng Hành chính', code: 'ADM', type: 'DEPARTMENT', parent: 'd3', emp: 14, sub: 0, status: 'active' },
{ id: 't1', name: 'Team Backend', code: 'BE', type: 'TEAM', parent: 'p1', emp: 32, sub: 0, status: 'active' },
{ id: 't2', name: 'Team Frontend', code: 'FE', type: 'TEAM', parent: 'p1', emp: 28, sub: 0, status: 'active' },
{ id: 't3', name: 'Team Mobile', code: 'MOB', type: 'TEAM', parent: 'p1', emp: 5, sub: 0, status: 'active' },
{ id: 't4', name: 'Team Automation', code: 'AUTO', type: 'TEAM', parent: 'p2', emp: 14, sub: 0, status: 'active' }];


const ORG_TYPE_CFG = {
  COMPANY: { label: 'Công ty', color: 'var(--color-primary)', bg: 'var(--color-primary-soft)', icon: 'building' },
  DIVISION: { label: 'Khối', color: 'var(--color-info)', bg: 'var(--color-info-soft)', icon: 'briefcase' },
  DEPARTMENT: { label: 'Phòng ban', color: 'var(--color-success)', bg: 'var(--color-success-soft)', icon: 'users' },
  TEAM: { label: 'Team', color: 'oklch(0.564 0.198 320)', bg: 'oklch(0.958 0.03 320)', 'icon': 'user' }
};

const buildTree = (nodes, pid = null) =>
nodes.filter((n) => n.parent === pid).map((n) => ({ ...n, children: buildTree(nodes, n.id) }));

// ─── Tree Node Component ─────────────────────────────────────────────────────
const OrgTreeNode = ({ node, depth = 0, expanded, onToggle, selected, onSelect }) => {
  const isExp = expanded.has(node.id);
  const isSel = selected === node.id;
  const hasKids = node.children && node.children.length > 0;
  const tc = ORG_TYPE_CFG[node.type];

  return (
    <div>
      <div
        onClick={() => onSelect(isSel ? null : node.id)}
        className={"mb-0.5 flex cursor-pointer items-center gap-2 rounded-sm border py-[7px] pr-3 shadow-2xs "
          + (isSel ? "border-[oklch(0.687_0.184_41_/_0.22)] bg-primary-soft" : "border-border bg-card")}
        style={{ paddingLeft: 14 + depth * 22 }}>
        {/* Toggle */}
        <div
          onClick={(e) => {e.stopPropagation();if (hasKids) onToggle(node.id);}}
          className="grid size-[18px] shrink-0 place-items-center rounded-sm text-muted-foreground"
          style={{ opacity: hasKids ? 1 : 0 }}>
          <Icon name={isExp ? 'chevron-down' : 'chevron-right'} size={12} />
        </div>
        {/* Icon */}
        <div className="grid size-7 shrink-0 place-items-center rounded-sm" style={{ background: tc.bg }}>
          <Icon name={tc.icon} size={13} style={{ color: tc.color }} />
        </div>
        {/* Name + code */}
        <div className="flex min-w-0 flex-1 items-center gap-2">
          <span className="whitespace-nowrap text-sm font-semibold text-foreground">{node.name}</span>
          <span className="rounded-sm bg-muted px-1.5 py-px font-mono text-2xs text-muted-foreground">{node.code}</span>
          {node.status === 'inactive' && <Badge variant="warning" dot>Vô hiệu</Badge>}
        </div>
        {/* Type */}
        <span className="mr-1 whitespace-nowrap rounded-full px-2 py-0.5 text-xs font-medium" style={{ background: tc.bg, color: tc.color }}>{tc.label}</span>
        {/* Employees */}
        <div className="mr-1.5 flex min-w-16 items-center justify-end gap-1">
          <Icon name="users" size={11} style={{ color: 'var(--color-muted-foreground)' }} />
          <span className="text-xs tabular-nums text-muted-foreground">{node.emp}</span>
        </div>
        {/* Actions */}
        <div className="flex gap-0.5" onClick={(e) => e.stopPropagation()}>
          <div className="grid size-[26px] cursor-pointer place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground" title="Xem chi tiết đơn vị"
          onClick={() => window.postMessage({ type: '__dc_navigate', slotId: 'main/subunit' }, '*')}>
            <Icon name="eye" size={13} />
          </div>
          <div className="grid size-[26px] cursor-pointer place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground" title="Thêm đơn vị con"
          onClick={() => window.postMessage({ type: '__dc_navigate', slotId: 'create/unit' }, '*')}><Icon name="plus" size={13} /></div>
          <div className="grid size-[26px] cursor-pointer place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"><Icon name="more-vertical" size={13} /></div>
        </div>
      </div>
      {/* Children */}
      {isExp && hasKids &&
      <div className="border-l-2 border-border" style={{ marginLeft: 14 + depth * 22 + 8 }}>
          {node.children.map((child) =>
        <OrgTreeNode key={child.id} node={child} depth={depth + 1}
        expanded={expanded} onToggle={onToggle} selected={selected} onSelect={onSelect} />
        )}
        </div>
      }
    </div>);

};

// ─── Shared tree wrapper ─────────────────────────────────────────────────────
const OrgTreeView = ({ initExpanded = ['c1', 'd1', 'd2', 'd3'], initSelected = null, dark = false }) => {
  const tree = buildTree(ORG_NODES);
  const [expanded, setExpanded] = React.useState(new Set(initExpanded));
  const [selected, setSelected] = React.useState(initSelected);

  const toggle = (id) => setExpanded((prev) => {
    const next = new Set(prev);
    next.has(id) ? next.delete(id) : next.add(id);
    return next;
  });

  const selNode = selected ? ORG_NODES.find((n) => n.id === selected) : null;
  const selTc = selNode ? ORG_TYPE_CFG[selNode.type] : null;

  return (
    <HRMShell active="org" dark={dark}
    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={<OrgAddMenu />}>

      {/* Stats strip */}
      <div className="mb-3.5 grid grid-cols-5 gap-2.5">
        {[
        { label: 'Tổng đơn vị', val: '16', icon: 'building', c: 'var(--color-primary)', bg: 'var(--color-primary-soft)' },
        { label: 'Đang hoạt động', val: '15', icon: 'check-circle', c: 'var(--color-success)', bg: 'var(--color-success-soft)' },
        { label: 'Vô hiệu', val: '1', icon: 'x-circle', c: 'var(--color-destructive)', bg: 'var(--color-destructive-soft)' },
        { label: 'Đang làm việc', val: '247', icon: 'users', c: 'var(--color-info)', bg: 'var(--color-info-soft)' },
        // Nhóm chưa gán đơn vị con KHÔNG thuộc tổ chức nào nên không nằm trong bất kỳ số đếm nào
        // của cây. Ô này là lối duy nhất để tìm ra họ — bấm mở danh sách nhân viên đã lọc sẵn.
        { label: 'Chưa phân công', val: '6', icon: 'user-minus', c: 'var(--color-warning)', bg: 'var(--color-warning-soft)', clickable: true }].
        map((s, i) =>
        <div key={i} title={s.clickable ? 'Xem danh sách nhân viên chưa phân công' : undefined}
          className={"flex items-center gap-2.5 rounded-md border border-border bg-card px-3.5 py-2.5"
            + (s.clickable ? " cursor-pointer transition-colors hover:bg-muted" : "")}>
            <div className="grid size-8 place-items-center rounded-md" style={{ background: s.bg }}>
              <Icon name={s.icon} size={15} style={{ color: s.c }} />
            </div>
            <div>
              <div className="text-xl font-bold leading-none tabular-nums">{s.val}</div>
              <div className="mt-0.5 text-xs text-muted-foreground">{s.label}</div>
            </div>
          </div>
        )}
      </div>

      {/* Toolbar */}
      <div className="mb-3 flex items-center gap-2.5 rounded-xl border border-border bg-card px-3.5 py-[9px] shadow-xs">
        <div className="relative flex w-[260px] 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 transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" placeholder="Tìm đơn vị tổ chức..." />
        </div>
        <Select
          options={['Tất cả loại','Công ty','Khối','Phòng ban','Team']}
          defaultValue="Tất cả loại"
          className="h-8 text-xs w-[140px]" />
        <div className="flex-1" />
        <Btn variant="ghost" size="sm" icon="chevron-right">Thu gọn tất cả</Btn>
        <Btn variant="ghost" size="sm" icon="chevron-down">Mở rộng tất cả</Btn>
      </div>

      {/* Tree + detail panel */}
      <div className="flex gap-4">
        <div className="min-w-0 flex-1">
          <div className="rounded-xl border border-border bg-card p-3 shadow-xs">
            {tree.map((node) =>
            <OrgTreeNode key={node.id} node={node}
            expanded={expanded} onToggle={toggle}
            selected={selected} onSelect={setSelected} />
            )}
          </div>
        </div>

        {/* Right panel — detail */}
        {selNode &&
        <div className="w-[296px] shrink-0">
            <div className="mb-3 rounded-xl border border-border bg-card p-[18px] shadow-xs">
              <div className="mb-3.5 flex items-start justify-between">
                <div className="flex items-center gap-2.5">
                  <div className="grid size-[38px] place-items-center rounded-md" style={{ background: selTc.bg }}>
                    <Icon name={selTc.icon} size={17} style={{ color: selTc.color }} />
                  </div>
                  <div>
                    <div className="text-base font-bold leading-tight">{selNode.name}</div>
                    <div className="mt-[3px] font-mono text-xs text-muted-foreground">{selNode.code}</div>
                  </div>
                </div>
                <div className="cursor-pointer p-1 text-muted-foreground" onClick={() => setSelected(null)}>
                  <Icon name="x" size={14} />
                </div>
              </div>

              <div className="mb-3.5 grid grid-cols-2 gap-2">
                {[
              { label: 'Loại tổ chức', val: selTc.label },
              { label: 'Trạng thái', val: selNode.status === 'active' ? 'Hoạt động' : 'Vô hiệu' },
              { label: 'Nhân viên', val: selNode.emp },
              { label: 'Đơn vị con', val: selNode.sub }].
              map((f, i) =>
              <div key={i} className="rounded-sm bg-muted px-2.5 py-2">
                    <div className="mb-[3px] text-2xs text-muted-foreground">{f.label}</div>
                    <div className="text-sm font-semibold">{f.val}</div>
                  </div>
              )}
              </div>

              <div className="flex flex-col gap-1.5">
                <Btn variant="primary" size="sm" icon="eye" iconRight="arrow-right"
              onClick={() => window.postMessage({ type: '__dc_navigate', slotId: 'main/subunit' }, '*')}>
                  Xem chi tiết đơn vị
                </Btn>
                <Btn variant="outline" size="sm" icon="users">Xem nhân viên ({selNode.emp})</Btn>
                <Btn variant="outline" size="sm" icon="plus"
              onClick={() => window.postMessage({ type: '__dc_navigate', slotId: 'create/unit' }, '*')}>Thêm đơn vị con</Btn>
                <Btn variant="outline" size="sm" icon="edit">Chỉnh sửa tổ chức</Btn>
              </div>
            </div>

            {/* Recent employees */}
            <div className="rounded-xl border border-border bg-card p-3.5 shadow-xs">
              <div className="mb-2.5 text-xs font-semibold uppercase tracking-[0.06em] text-muted-foreground">
                Nhân viên gần đây
              </div>
              {[
            { name: 'Nguyễn Văn An', title: 'Software Engineer' },
            { name: 'Trần Thị Bích', title: 'Backend Developer' },
            { name: 'Lê Minh Quân', title: 'Tech Lead' }].
            map((e, i) =>
            <div key={i} className={"flex items-center gap-2 py-1.5 " + (i < 2 ? "border-b border-border" : "")}>
                  <Avatar name={e.name} size="sm" />
                  <div>
                    <div className="text-xs font-medium">{e.name}</div>
                    <div className="text-xs text-muted-foreground">{e.title}</div>
                  </div>
                </div>
            )}
              <div className="mt-2 cursor-pointer text-xs font-medium text-primary">
                Xem tất cả {selNode.emp} nhân viên →
              </div>
            </div>
          </div>
        }
      </div>
    </HRMShell>);

};

// ─── Screen 1: Org Tree — No selection ───────────────────────────────────────
const OrgMainScreen = () => <OrgTreeView />;

// ─── Screen 2: Org Tree — Node selected ──────────────────────────────────────
const OrgSelectedScreen = () => <OrgTreeView initExpanded={['c1', 'd1', 'p1']} initSelected="p1" />;

// ─── Screen 3: Create Org Unit Form ──────────────────────────────────────────
const OrgCreateScreen = () =>
<HRMShell active="org"
title="Thêm đơn vị tổ chức"
crumbs={['Cấu trúc tổ chức', 'Thêm mới']}
actions={<>
      <Btn variant="outline" size="sm">Hủy</Btn>
      <Btn variant="primary" size="sm">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">
        {/* Section: Basic info */}
        <div className="mb-[18px] flex items-center gap-2">
          <div className="grid size-7 place-items-center rounded-md bg-primary-soft"><Icon name="building" size={14} style={{ color: 'var(--color-primary)' }} /></div>
          <span className="text-base font-bold">Thông tin đơn vị</span>
        </div>

        <div className="mb-4 grid grid-cols-2 gap-3.5">
          <div>
            <label className="mb-[5px] block text-xs font-medium">Tên đơn vị *</label>
            <input className="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" placeholder="Ví dụ: Phòng Engineering" defaultValue="Team DevOps" />
          </div>
          <div>
            <label className="mb-[5px] block text-xs font-medium">Mã đơn vị *</label>
            <div className="relative">
              <input className="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" placeholder="VD: ENG, SALES, TEAM-FE" defaultValue="DEVOPS" 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-xs text-muted-foreground">Chỉ dùng chữ cái, số và dấu gạch ngang. Mã phải duy nhất.</div>
          </div>
        </div>

        <div className="mb-4 grid grid-cols-2 gap-3.5">
          <div>
            <label className="mb-[5px] block text-xs font-medium">Loại đơn vị *</label>
            <Select
              options={[{value:'COMPANY',label:'Công ty (Company)'},{value:'DIVISION',label:'Khối (Division)'},{value:'DEPARTMENT',label:'Phòng ban (Department)'},{value:'TEAM',label:'Team'}]}
              defaultValue="TEAM"
              className="w-full" />
          </div>
          <div>
            <label className="mb-[5px] block text-xs font-medium">Đơn vị cha *</label>
            <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 transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" placeholder="Tìm đơn vị cha..." defaultValue="Phòng Engineering (ENG)" />
            </div>
          </div>
        </div>

        <div className="mb-4">
          <label className="mb-[5px] block text-xs font-medium">Mô tả</label>
          <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: 80 }}
        placeholder="Mô tả ngắn về chức năng và nhiệm vụ của đơn vị này..."
        defaultValue="Team phụ trách hạ tầng, CI/CD, deployment và vận hành hệ thống." />
        </div>

        <div className="border-t border-border pt-[18px]">
          <div className="mb-3.5 flex items-center gap-2">
            <div className="grid size-7 place-items-center rounded-md bg-primary-soft"><Icon name="user" size={14} style={{ color: 'var(--color-primary)' }} /></div>
            <span className="text-base font-bold">Người phụ trách <span className="text-xs font-normal text-muted-foreground">(tùy chọn)</span></span>
          </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="h-9 w-full rounded-md border border-input bg-transparent pl-8 pr-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" placeholder="Tìm nhân viên làm trưởng đơn vị..." />
          </div>
        </div>
      </div>

      {/* Right: preview & validation */}
      <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 Engineering', type: 'DEPARTMENT', depth: 2 },
          { label: '→ Team DevOps (mới)', type: 'TEAM', depth: 3, 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>

        <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>
          {[
        { icon: 'check-circle', color: 'var(--color-success)', text: 'Mã DEVOPS chưa được sử dụng' },
        { icon: 'check-circle', color: 'var(--color-success)', text: 'Độ sâu hợp lệ (cấp 3 / tối đa 5)' },
        { icon: 'check-circle', color: 'var(--color-success)', text: 'Đơn vị cha đang hoạt động' },
        { icon: 'check-circle', color: 'var(--color-success)', text: 'Loại TEAM phù hợp với cha DEPARTMENT' }].
        map((v, i) =>
        <div key={i} className={"flex gap-2 py-1.5 text-xs " + (i < 3 ? "border-b border-border" : "")}>
              <Icon name={v.icon} size={13} className="mt-0.5 shrink-0" style={{ color: v.color }} />
              {v.text}
            </div>
        )}
        </div>

        <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.55_0.12_41)]">
            <strong>Sau khi tạo:</strong> Đơn vị sẽ xuất hiện trong cây tổ chức và có thể được gán nhân viên ngay lập tức.
          </div>
        </div>
      </div>
    </div>
  </HRMShell>;


// ─── Screen 4: Subunit Management ────────────────────────────────────────────
const ORG_SUBUNIT_TABS = [
  { label: 'Đơn vị con (3)', render: () => <OrgTabSubunits /> },
  { label: 'Nhân viên (65)', render: () => <OrgTabEmployees /> },
  { label: 'Thông tin',      render: () => <OrgTabInfo /> },
  { label: 'Lịch sử',        render: () => <OrgTabHistory /> }];

const OrgSubunitScreen = () => {
  const [tab, setTab] = React.useState(0);
  return (
<HRMShell active="org"
title="Phòng Engineering"
crumbs={['Cấu trúc tổ chức', 'Khối Công nghệ', 'Phòng Engineering']}
meta={<Badge variant="success" dot>Hoạt động</Badge>}
actions={<>
      <Btn variant="outline" size="sm" icon="edit"
        onClick={() => window.postMessage({ type: '__dc_navigate', slotId: 'create/edit-unit' }, '*')}>Chỉnh sửa</Btn>
      <Btn variant="primary" size="sm" icon="plus"
        onClick={() => window.postMessage({ type: '__dc_navigate', slotId: 'create/unit' }, '*')}>Thêm đơn vị</Btn>
    </>}>

    {/* Header card */}
    <div className="mb-4 flex gap-5 rounded-xl border border-border bg-card p-5 shadow-xs">
      <div className="grid size-14 shrink-0 place-items-center rounded-xl bg-success-soft">
        <Icon name="users" size={24} style={{ color: 'var(--color-success)' }} />
      </div>
      <div className="flex-1">
        <div className="mb-1 flex items-center gap-2.5">
          <span className="text-lg font-bold">Phòng Engineering</span>
          <span className="rounded-sm bg-muted px-2 py-0.5 font-mono text-xs text-muted-foreground">ENG</span>
          <Badge variant="success" dot>Hoạt động</Badge>
          <Badge variant="neutral">Phòng ban</Badge>
        </div>
        {/* KHÔNG nêu trưởng ở đây: đây là một TỔ CHỨC, mà tổ chức không có head_employee_id.
            Trưởng đơn vị chỉ hiện ở màn chi tiết đơn vị con (org-subunit-detail.jsx). */}
        <div className="text-sm text-muted-foreground">Thuộc Khối Công nghệ · Tạo ngày 15/01/2024</div>
      </div>
      <div className="grid grid-cols-3 gap-3">
        {[
      { label: 'Nhân viên', val: '65', icon: 'users' },
      { label: 'Đơn vị con', val: '3', icon: 'users' },
      { label: 'Độ sâu', val: 'Cấp 2', icon: 'arrow-down' }].
      map((s, i) =>
      <div key={i} className="rounded-md bg-muted px-4 py-2 text-center">
            <div className="text-xl font-bold">{s.val}</div>
            <div className="text-xs text-muted-foreground">{s.label}</div>
          </div>
      )}
      </div>
    </div>

    {/* Tabs */}
    <div className="overflow-hidden rounded-xl border border-border bg-card shadow-xs">
      <div className="flex gap-1 border-b border-border px-5">
        {ORG_SUBUNIT_TABS.map((t, i) =>
      <div key={t.label} className={"-mb-px cursor-pointer border-b-2 px-3.5 py-2.5 text-base font-medium " + (i === tab ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground")} onClick={() => setTab(i)}>{t.label}</div>
      )}
      </div>
      {ORG_SUBUNIT_TABS[tab].render()}
    </div>
  </HRMShell>
  );
};


// ─── Screen 5: Empty State ────────────────────────────────────────────────────
const OrgEmptyScreen = () =>
<HRMShell active="org"
title="Cấu trúc tổ chức"
crumbs={['Cấu trúc tổ chức']}
actions={<Btn variant="primary" size="sm" icon="plus">Tạo cấu trúc đầu tiên</Btn>}>
    <div className="flex min-h-[460px] flex-col items-center justify-center rounded-xl border border-border bg-card p-12 shadow-xs">
      <svg width="80" height="80" viewBox="0 0 80 80" fill="none" className="mb-6">
        <circle cx="40" cy="40" r="40" fill="var(--color-muted)" />
        <rect x="30" y="18" width="20" height="14" rx="3" fill="var(--color-border-strong)" />
        <rect x="16" y="44" width="18" height="12" rx="3" fill="var(--color-border-strong)" />
        <rect x="46" y="44" width="18" height="12" rx="3" fill="var(--color-border-strong)" />
        <line x1="40" y1="32" x2="40" y2="44" stroke="var(--color-border-strong)" strokeWidth="2" />
        <line x1="25" y1="44" x2="55" y2="44" stroke="var(--color-border-strong)" strokeWidth="2" />
        <circle cx="58" cy="57" r="12" fill="var(--color-primary-soft)" stroke="var(--color-primary)" strokeWidth="2" />
        <path d="M54 57h8M58 53v8" stroke="var(--color-primary)" strokeWidth="2" strokeLinecap="round" />
      </svg>
      <div className="mb-2.5 text-xl font-bold">Chưa có cấu trúc tổ chức</div>
      <div className="mb-7 max-w-[460px] text-center text-base leading-[1.65] text-muted-foreground">
        Bắt đầu bằng cách tạo đơn vị gốc — thường là công ty hoặc tổ chức cấp cao nhất. Sau đó thêm các khối, phòng ban và team theo thứ bậc.
      </div>
      <div className="flex gap-3">
        <Btn variant="primary" icon="plus">Tạo đơn vị đầu tiên</Btn>
      </div>
    </div>
  </HRMShell>;


// ─── Screen 6: Dark Mode ──────────────────────────────────────────────────────
const OrgDarkScreen = () => <OrgTreeView dark initExpanded={['c1', 'd1', 'd2', 'd3']} />;

Object.assign(window, {
  OrgMainScreen, OrgSelectedScreen, OrgCreateScreen,
  OrgSubunitScreen, OrgEmptyScreen, OrgDarkScreen,
  OrgTreeNode, OrgTreeView
});