// ELS HRM — Module 03: Chi tiết ĐƠN VỊ CON (Nhóm Nền tảng · PLATFORM)
//
// Vì sao có màn riêng: chỉ đơn vị con mới có trưởng đơn vị (head_employee_id). Tổ chức —
// kể cả loại Phòng ban — không gán trưởng, nên thẻ "Trưởng đơn vị" không được đặt ở màn
// chi tiết tổ chức (xem org-subunit-tabs.jsx · OrgTabInfo).
//
// Liên hệ hiển thị là liên hệ CÔNG VIỆC (work_email + work_phone). Email cá nhân và số di
// động không đưa vào đây: ai xem được sơ đồ tổ chức cũng đọc được thẻ này, kể cả khi không
// có quyền xem hồ sơ nhân viên.
//
// Đây cũng là màn duy nhất nêu "tối đa 5": giới hạn 5 cấp chỉ áp cho cây đơn vị con, còn cây
// tổ chức không giới hạn độ sâu.

const PLATFORM_SUB = {
  name: 'Nhóm Nền tảng',
  code: 'PLATFORM',
  parent: 'Phòng Engineering (ENG)',
  head: 'Phạm Văn Khánh',
  headEmail: 'khanh.pham@els.tech',
  headPhone: '+84 24 3999 0188',
  emp: 32,
  children: 2,
  depth: 'Cấp 1',
};

const SubunitInfoRow = ({ label, children }) => (
  <div className="flex gap-3 border-b border-border py-[11px]">
    <span className="w-[150px] shrink-0 text-sm text-muted-foreground">{label}</span>
    <span className="flex-1 text-sm font-medium">{children}</span>
  </div>
);

const OrgSubunitDetailScreen = () =>
  <HRMShell active="org"
    title={PLATFORM_SUB.name}
    crumbs={['Cấu trúc tổ chức', 'Khối Công nghệ', 'Phòng Engineering', PLATFORM_SUB.name]}
    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ị con</Btn>
    </>}>

    {/* Header card — KHÔNG có badge loại tổ chức: đơn vị con không mang loại */}
    <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-info-soft">
        <Icon name="users" size={24} style={{ color: 'var(--color-info)' }} />
      </div>
      <div className="flex-1">
        <div className="mb-1 flex items-center gap-2.5">
          <span className="text-lg font-bold">{PLATFORM_SUB.name}</span>
          <span className="rounded-sm bg-muted px-2 py-0.5 font-mono text-xs text-muted-foreground">{PLATFORM_SUB.code}</span>
          <Badge variant="success" dot>Hoạt động</Badge>
        </div>
        <div className="text-sm text-muted-foreground">
          Thuộc {PLATFORM_SUB.parent} · Trưởng đơn vị: {PLATFORM_SUB.head} · Tạo ngày 20/02/2024
        </div>
      </div>
      <div className="grid grid-cols-3 gap-3">
        {[
          { label: 'Nhân viên', val: String(PLATFORM_SUB.emp) },
          { label: 'Đơn vị con', val: String(PLATFORM_SUB.children) },
          { label: 'Độ sâu', val: PLATFORM_SUB.depth }].
          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>

    <div className="overflow-hidden rounded-xl border border-border bg-card shadow-xs">
      <div className="flex gap-1 border-b border-border px-5">
        {['Thông tin', 'Nhân viên (32)', 'Đơn vị con (2)', 'Lịch sử'].map((label, i) =>
          <div key={label}
            className={"-mb-px cursor-pointer border-b-2 px-3.5 py-2.5 text-base font-medium "
              + (i === 0 ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground")}>
            {label}
          </div>
        )}
      </div>

      <div className="grid grid-cols-[1fr_300px] gap-5 p-5">
        <div>
          <div className="mb-1 text-xs font-bold uppercase tracking-[0.07em] text-muted-foreground">Thông tin chung</div>
          <SubunitInfoRow label="Tên đơn vị">{PLATFORM_SUB.name}</SubunitInfoRow>
          <SubunitInfoRow label="Mã đơn vị"><span className="font-mono">{PLATFORM_SUB.code}</span></SubunitInfoRow>
          <SubunitInfoRow label="Thuộc tổ chức">{PLATFORM_SUB.parent}</SubunitInfoRow>
          <SubunitInfoRow label="Đơn vị cha">— (trực thuộc tổ chức)</SubunitInfoRow>
          {/* Giới hạn 5 cấp là của riêng cây đơn vị con — màn chi tiết tổ chức không có dòng này */}
          <SubunitInfoRow label="Độ sâu phân cấp">{PLATFORM_SUB.depth} / tối đa 5</SubunitInfoRow>
          <SubunitInfoRow label="Trạng thái"><Badge variant="success" dot>Đang hoạt động</Badge></SubunitInfoRow>
          <SubunitInfoRow label="Ngày tạo">20/02/2024</SubunitInfoRow>
          <SubunitInfoRow label="Cập nhật gần nhất">14/04/2026 bởi Nguyễn Thành Nam</SubunitInfoRow>
          <div className="mt-4">
            <div className="mb-1.5 text-sm text-muted-foreground">Mô tả</div>
            <p className="m-0 text-sm leading-[1.6] [text-wrap:pretty]">
              Nhóm Nền tảng phụ trách hạ tầng dùng chung, thư viện nội bộ và các dịch vụ lõi mà những nhóm khác trong Phòng Engineering xây dựng bên trên.
            </p>
          </div>
        </div>

        <div className="flex flex-col gap-3">
          {/* Thẻ trưởng đơn vị — tên + liên hệ công việc. Dòng nào không có dữ liệu thì ẩn hẳn. */}
          <div className="rounded-xl border border-border bg-card p-4 shadow-xs">
            <div className="mb-3 text-xs font-bold uppercase tracking-[0.07em] text-muted-foreground">Trưởng đơn vị</div>
            <div className="flex items-center gap-2.5">
              <Avatar name={PLATFORM_SUB.head} />
              <div>
                <div className="text-sm font-semibold">{PLATFORM_SUB.head}</div>
                <div className="text-xs text-muted-foreground">Trưởng đơn vị</div>
              </div>
            </div>
            <div className="mt-3.5 flex flex-col gap-[7px] border-t border-border pt-3">
              <div className="flex items-center gap-2 text-xs text-muted-foreground">
                <Icon name="mail" size={13} /> {PLATFORM_SUB.headEmail}
              </div>
              <div className="flex items-center gap-2 text-xs text-muted-foreground">
                <Icon name="phone" size={13} /> {PLATFORM_SUB.headPhone}
              </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">Thống kê nhanh</div>
            {[
              { label: 'Đang làm việc',  val: '32' },
              { label: 'Đơn vị con',     val: '2'  },
              { label: 'Đang nghỉ phép', val: '1'  },
            ].map((s, i) => (
              <div key={i} className={"flex justify-between py-1.5 text-sm " + (i < 2 ? "border-b border-border" : "")}>
                <span className="text-muted-foreground">{s.label}</span>
                <span className="font-semibold tabular-nums">{s.val}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </HRMShell>;

Object.assign(window, { OrgSubunitDetailScreen });