// ELS HRM — Module 03: Subunit detail tab panels (Đơn vị con · Nhân viên · Thông tin · Lịch sử)

const ENG_SUBUNITS = [
  { name: 'Nhóm Nền tảng',       code: 'PLATFORM', emp: 32, head: 'Phạm Văn Khánh', status: 'active', depth: 1 },
  { name: 'Nhóm API & Dịch vụ',   code: 'API',      emp: 28, head: 'Lê Thị Hương',   status: 'active', depth: 1 },
  { name: 'Nhóm Hạ tầng & DevOps', code: 'INFRA',    emp: 5,  head: 'Đỗ Minh Tú',     status: 'active', depth: 1 },
];

const ENG_EMPLOYEES = [
  { name: 'Nguyễn Thành Nam', code: 'EMP-0102', title: 'Engineering Manager', team: 'Phòng Engineering', email: 'nam.nguyen@els.tech',   role: 'lead',   status: 'active' },
  { name: 'Phạm Văn Khánh',   code: 'EMP-0188', title: 'Backend Tech Lead',   team: 'Team Backend',       email: 'khanh.pham@els.tech',   role: 'lead',   status: 'active' },
  { name: 'Lê Thị Hương',     code: 'EMP-0204', title: 'Frontend Tech Lead',  team: 'Team Frontend',      email: 'huong.le@els.tech',     role: 'lead',   status: 'active' },
  { name: 'Đỗ Minh Tú',       code: 'EMP-0233', title: 'Mobile Lead',         team: 'Team Mobile',        email: 'tu.do@els.tech',        role: 'lead',   status: 'active' },
  { name: 'Nguyễn Văn An',    code: 'EMP-0341', title: 'Senior Backend Eng',  team: 'Team Backend',       email: 'an.nguyen@els.tech',    role: 'member', status: 'active' },
  { name: 'Trần Thị Bích',    code: 'EMP-0356', title: 'Backend Developer',   team: 'Team Backend',       email: 'bich.tran@els.tech',    role: 'member', status: 'active' },
  { name: 'Lê Minh Quân',     code: 'EMP-0377', title: 'Frontend Developer',  team: 'Team Frontend',      email: 'quan.le@els.tech',      role: 'member', status: 'active' },
  { name: 'Hoàng Thị Mai',    code: 'EMP-0390', title: 'QA Engineer',         team: 'Team Frontend',      email: 'mai.hoang@els.tech',    role: 'member', status: 'leave'  },
];

const ENG_HISTORY = [
  { icon: 'user-check', tone: 'info',    title: 'Gán trưởng phòng', detail: 'Nguyễn Thành Nam được bổ nhiệm làm Engineering Manager', actor: 'Trần Minh (Admin)', date: '02/05/2026 · 09:14' },
  { icon: 'plus',       tone: 'success', title: 'Thêm team con',   detail: 'Tạo "Team Mobile" (MOB) trực thuộc Phòng Engineering',        actor: 'Nguyễn Thành Nam',  date: '18/03/2026 · 15:02' },
  { icon: 'users',      tone: 'info',    title: 'Điều chuyển nhân sự', detail: '4 nhân viên được chuyển từ Team Backend sang Team Frontend', actor: 'Phòng Nhân sự',     date: '27/02/2026 · 11:30' },
  { icon: 'edit',       tone: 'warning', title: 'Cập nhật thông tin', detail: 'Thay đổi mô tả đơn vị và phạm vi trách nhiệm',               actor: 'Trần Minh (Admin)', date: '10/01/2026 · 08:45' },
  { icon: 'building',   tone: 'neutral', title: 'Tạo đơn vị',       detail: 'Khởi tạo "Phòng Engineering" (ENG) trực thuộc Khối Công nghệ', actor: 'Hệ thống · Import', date: '15/01/2024 · 10:00' },
];

const TONE = {
  info:    { c: 'var(--color-info)',        bg: 'var(--color-info-soft)'    },
  success: { c: 'var(--color-success)',     bg: 'var(--color-success-soft)' },
  warning: { c: 'var(--color-warning)',     bg: 'var(--color-warning-soft)' },
  neutral: { c: 'var(--color-muted-foreground)', bg: 'var(--color-muted)'   },
};

// shadcn table styling reproduced via arbitrary child variants (1 className, structure untouched)
const TABLE_CLS = "w-full border-collapse text-sm "
  + "[&_thead_th]:border-b [&_thead_th]:border-border [&_thead_th]:bg-muted [&_thead_th]:px-3.5 [&_thead_th]:py-2.5 [&_thead_th]:text-left [&_thead_th]:text-xs [&_thead_th]:font-semibold [&_thead_th]:uppercase [&_thead_th]:tracking-[0.04em] [&_thead_th]:text-muted-foreground [&_thead_th]:whitespace-nowrap "
  + "[&_tbody_td]:border-b [&_tbody_td]:border-border [&_tbody_td]:px-3.5 [&_tbody_td]:py-3 [&_tbody_td]:align-middle [&_tbody_td]:text-foreground "
  + "[&_tbody_tr:last-child_td]:border-0 [&_tbody_tr:hover]:bg-muted";

// ─── Tab 1: Đơn vị con ────────────────────────────────────────────────────────
const OrgTabSubunits = () => (
  <div className="p-5">
    <div className="mb-1.5 flex items-center justify-between">
      <span className="text-base font-semibold">3 đơn vị con trong Phòng Engineering</span>
      <Btn variant="soft" size="sm" icon="plus"
        onClick={() => window.postMessage({ type: '__dc_navigate', slotId: 'create/unit' }, '*')}>Thêm đơn vị</Btn>
    </div>
    <div className="mb-3.5 flex items-center gap-1.5 text-xs text-muted-foreground">
      <Icon name="alert-circle" size={12} /> Đơn vị con là nhóm nội bộ — không có loại tổ chức.
    </div>
    {ENG_SUBUNITS.map((sub, i) => (
      <div key={i} className="mb-2 flex items-center gap-3.5 rounded-md border border-border p-3.5">
        <div className="grid size-9 place-items-center rounded-md bg-info-soft">
          <Icon name="users" size={15} style={{ color: 'var(--color-info)' }} />
        </div>
        <div className="flex-1">
          <div className="flex items-center gap-2">
            <span className="text-base font-semibold">{sub.name}</span>
            <span className="rounded-sm bg-muted px-1.5 py-px font-mono text-2xs text-muted-foreground">{sub.code}</span>
            <Badge variant="success" dot>Hoạt động</Badge>
          </div>
          <div className="mt-[3px] text-xs text-muted-foreground">
            Người phụ trách: {sub.head} · {sub.emp} nhân viên · Cấp {sub.depth}
          </div>
        </div>
        <div className="flex gap-1.5">
          <Btn variant="outline" size="xs" icon="users">Nhân viên</Btn>
          <Btn variant="ghost" size="sm" iconOnly icon="eye"
            onClick={() => window.postMessage({ type: '__dc_navigate', slotId: 'main/subunit-detail' }, '*')} />
          <Btn variant="ghost" size="sm" iconOnly icon="edit"
            onClick={() => window.postMessage({ type: '__dc_navigate', slotId: 'create/edit-unit' }, '*')} />
          <Btn variant="ghost" size="sm" iconOnly icon="trash" />
        </div>
      </div>
    ))}
  </div>
);

// ─── Tab 2: Nhân viên ─────────────────────────────────────────────────────────
const OrgTabEmployees = () => (
  <div className="p-5">
    <div className="mb-3.5 flex items-center gap-2.5">
      <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 nhân viên trong phòng..." />
      </div>
      <Select
        options={['Tất cả team','Team Backend','Team Frontend','Team Mobile']}
        defaultValue="Tất cả team"
        className="h-8 text-xs w-[150px]" />
      <div className="flex-1" />
      <span className="text-xs text-muted-foreground">Hiển thị 8 / 65 nhân viên</span>
    </div>

    <div className="overflow-hidden rounded-lg border border-border bg-card">
      <table className={TABLE_CLS}>
        <thead>
          <tr>
            <th>Nhân viên</th>
            <th>Chức danh</th>
            <th>Team</th>
            <th>Trạng thái</th>
            <th style={{ width: 60, textAlign: 'right' }}></th>
          </tr>
        </thead>
        <tbody>
          {ENG_EMPLOYEES.map((e, i) => (
            <tr key={i}>
              <td>
                <div className="flex items-center gap-2.5">
                  <Avatar name={e.name} size="sm" />
                  <div>
                    <div className="flex items-center gap-1.5">
                      <span className="font-medium text-foreground">{e.name}</span>
                      {e.role === 'lead' && <Badge variant="info">Lead</Badge>}
                    </div>
                    <div className="text-xs text-muted-foreground">{e.code} · {e.email}</div>
                  </div>
                </div>
              </td>
              <td>{e.title}</td>
              <td><span className="text-muted-foreground">{e.team}</span></td>
              <td>
                {e.status === 'active'
                  ? <Badge variant="success" dot>Hoạt động</Badge>
                  : <Badge variant="warning" dot>Nghỉ phép</Badge>}
              </td>
              <td className="text-right">
                <Btn variant="ghost" size="sm" iconOnly icon="more-vertical" />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
    <div className="mt-3.5 flex items-center justify-between">
      <span className="text-xs text-muted-foreground">Trang 1 / 9</span>
      <div className="flex gap-1.5">
        <Btn variant="outline" size="sm" iconOnly icon="chevron-left" />
        <Btn variant="outline" size="sm" iconOnly icon="chevron-right" />
      </div>
    </div>
  </div>
);

// ─── Tab 3: Thông tin ─────────────────────────────────────────────────────────
const InfoRow = ({ 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>
);

// Màn này là chi tiết một TỔ CHỨC (Phòng Engineering — loại Phòng ban). Tổ chức KHÔNG có
// trưởng đơn vị: trường head_employee_id chỉ tồn tại ở đơn vị con. Thẻ "Trưởng đơn vị" nằm ở
// màn chi tiết đơn vị con (org-subunit-detail.jsx), không phải ở đây.
//
// Cũng KHÔNG có dòng "Độ sâu phân cấp … / 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 lồng bao nhiêu cấp cũng được. Dòng đó nằm ở màn chi tiết đơn vị con.
const OrgTabInfo = () => (
  <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>
      <InfoRow label="Tên đơn vị">Phòng Engineering</InfoRow>
      <InfoRow label="Mã đơn vị"><span className="font-mono">ENG</span></InfoRow>
      <InfoRow label="Loại tổ chức"><Badge variant="success">Phòng ban</Badge></InfoRow>
      <InfoRow label="Đơn vị cha">Khối Công nghệ (TECH)</InfoRow>
      <InfoRow label="Trạng thái"><Badge variant="success" dot>Đang hoạt động</Badge></InfoRow>
      <InfoRow label="Ngày tạo">15/01/2024</InfoRow>
      <InfoRow label="Cập nhật gần nhất">02/05/2026 bởi Trần Minh</InfoRow>
      <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]">
          Phòng Engineering chịu trách nhiệm thiết kế, phát triển và vận hành toàn bộ sản phẩm công nghệ của ELS. Quản lý 3 team chuyên môn: Backend, Frontend và Mobile, phối hợp chặt chẽ với Phòng Product và QA.
        </p>
      </div>
    </div>

    <div className="flex flex-col gap-3">
      <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>
        {[
          // "Đang làm việc", KHÔNG phải "Tổng nhân viên": con số này chỉ đếm nhân viên active đã
          // gán đơn vị con. Người chưa phân công không thuộc đơn vị nào nên không có trong đây.
          { label: 'Đang làm việc',  val: '65' },
          { label: 'Team con',       val: '3'  },
          { label: 'Đang nghỉ phép', val: '4'  },
          { label: 'Vị trí mở tuyển',val: '6'  },
        ].map((s, i) => (
          <div key={i} className={"flex justify-between py-1.5 text-sm " + (i < 3 ? "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>
);

// ─── Tab 4: Lịch sử ───────────────────────────────────────────────────────────
const OrgTabHistory = () => (
  <div className="p-5">
    <div className="mb-[18px] flex items-center justify-between">
      <span className="text-base font-semibold">Lịch sử thay đổi</span>
      <Select
        options={['Tất cả hoạt động','Nhân sự','Cấu trúc','Thông tin']}
        defaultValue="Tất cả hoạt động"
        className="h-8 text-xs w-40" />
    </div>
    <div className="relative pl-1">
      {ENG_HISTORY.map((h, i) => {
        const t = TONE[h.tone];
        const last = i === ENG_HISTORY.length - 1;
        return (
          <div key={i} className="relative flex gap-3.5" style={{ paddingBottom: last ? 0 : 20 }}>
            {!last && <div className="absolute bottom-0 left-[15px] top-8 w-0.5 bg-border" />}
            <div className="z-[1] grid size-8 shrink-0 place-items-center rounded-full" style={{ background: t.bg }}>
              <Icon name={h.icon} size={15} style={{ color: t.c }} />
            </div>
            <div className="flex-1 pt-px">
              <div className="flex flex-wrap items-center gap-2">
                <span className="text-sm font-semibold">{h.title}</span>
                <span className="text-xs text-muted-foreground">{h.date}</span>
              </div>
              <div className="mt-0.5 text-sm text-foreground [text-wrap:pretty]">{h.detail}</div>
              <div className="mt-[3px] text-xs text-muted-foreground">bởi {h.actor}</div>
            </div>
          </div>
        );
      })}
    </div>
  </div>
);

Object.assign(window, { OrgTabSubunits, OrgTabEmployees, OrgTabInfo, OrgTabHistory, ENG_SUBUNITS });