// ELS HRM — App Shell (Sidebar + Topbar + Page Title)
// Shared across all module screens — Tailwind utility classes

const ELS_NAV = [
{ title: 'Tổng quan', items: [
  { id: 'dashboard', icon: 'layout-dashboard', label: 'Dashboard' }]
},
{ title: 'Cá nhân', items: [
  { id: 'my-info', icon: 'user', label: 'Hồ sơ của tôi' }]
},
{ title: 'Nhân sự', items: [
  { id: 'employees', icon: 'users', label: 'Nhân viên', count: 247 },
  { id: 'org', icon: 'building', label: 'Cấu trúc tổ chức' },
  { id: 'leave', icon: 'umbrella', label: 'Nghỉ phép', count: 12 },
  { id: 'attendance', icon: 'clock', label: 'Chấm công' },
  { id: 'timesheet', icon: 'calendar', label: 'Bảng công' }]
},
// Nhóm 'Tuyển dụng' (Tin tuyển dụng / Ứng viên / Lịch phỏng vấn) ĐÃ GỠ để khớp app thật:
// ba màn đó là nguyên mẫu chốt thiết kế, không gọi backend, nên đã bị gỡ khỏi menu và khỏi
// route trong hrm-code (xem ghi chú ở packages/core/src/lib/menu.ts và routes/index.tsx,
// dẫn hrm-docs/audits/2026-07-31-recruitment-design-audit/_DECISIONS.md — A5.1, B01).
// Các artboard HRM-09/10/11 vẫn giữ trong project để tham chiếu khi hiện thực; chỉ menu của
// app shell là không được hiện mục dẫn tới màn người dùng không vào được.
{ title: 'Hệ thống', items: [
  { id: 'users', icon: 'user-cog', label: 'Người dùng' },
  { id: 'rbac', icon: 'shield-check', label: 'Phân quyền' },
  { id: 'admin', icon: 'list', label: 'Danh mục' },
  { id: 'system-config', icon: 'settings', label: 'Cấu hình' }]
}];


const ElsLogoMark = ({ size = 32, white = false }) => (
  <div
    className={"grid shrink-0 place-items-center text-white " + (white
      ? "bg-white/[0.12] shadow-[inset_0_0_0_1.5px_rgba(255,255,255,0.22)]"
      : "bg-primary shadow-[0_2px_8px_rgba(242,101,34,0.38)]")}
    style={{ width: size, height: size, borderRadius: Math.round(size * 0.28) }}>
    <svg width={size * 0.58} height={size * 0.58} viewBox="0 0 22 22" fill="none">
      <rect x="2" y="3.5" width="12.5" height="2.4" rx="1.2" fill="currentColor" />
      <rect x="2" y="9.8" width="8" height="2.4" rx="1.2" fill="currentColor" opacity="0.82" />
      <rect x="2" y="16.1" width="12.5" height="2.4" rx="1.2" fill="currentColor" opacity="0.6" />
      <circle cx="18.5" cy="11" r="2" fill="currentColor" />
    </svg>
  </div>
);


const HRMSidebar = ({ active = 'dashboard', user = { name: 'Trần Minh', role: 'Admin' } }) => (
  <aside className="flex h-full w-60 shrink-0 flex-col border-r border-sidebar-border bg-sidebar">
    {/* Brand */}
    <div className="flex items-center gap-2.5 px-5 py-3.5">
      <ElsLogoMark size={34} />
      <div>
        <div className="text-md font-extrabold leading-[1.1] tracking-[-0.02em] text-sidebar-foreground">
          ELS&nbsp;<span className="text-primary">HRM</span>
        </div>
        <div className="mt-[3px] text-2xs uppercase tracking-[0.1em] text-sidebar-muted">Human Resources</div>
      </div>
    </div>

    {/* Navigation */}
    <nav className="flex-1 overflow-y-auto py-1">
      {ELS_NAV.map((sec) => (
        <div key={sec.title} className="px-3 pb-0.5 pt-2">
          <div className="px-2 pb-[5px] pt-1 text-2xs font-bold uppercase tracking-[0.1em] text-sidebar-muted">
            {sec.title}
          </div>
          {sec.items.map((item) => {
            const on = item.id === active;
            return (
              <div key={item.id}
                className={"relative my-px flex cursor-pointer select-none items-center gap-[9px] rounded-sm px-2.5 py-[7px] text-sm "
                  + (on ? "bg-sidebar-accent font-semibold text-primary" : "font-medium text-sidebar-foreground hover:bg-sidebar-accent")}>
                {on && <span className="absolute -left-3 bottom-[7px] top-[7px] w-[3px] rounded-r-sm bg-primary" />}
                <Icon name={item.icon} size={15} />
                <span className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">{item.label}</span>
                {item.count != null &&
                  <span className={"rounded-full px-[7px] py-px text-xs font-semibold leading-[18px] "
                    + (on ? "bg-primary-soft text-primary" : "bg-muted text-muted-foreground")}>{item.count}</span>}
              </div>);
          })}
        </div>
      ))}
    </nav>

    {/* User footer — bấm vùng avatar/tên để mở "Hồ sơ của tôi" (ESS, /me) */}
    <div className="flex items-center gap-1 border-t border-sidebar-border px-2 py-2.5">
      <div title="Hồ sơ của tôi" className="flex min-w-0 flex-1 cursor-pointer items-center gap-[9px] rounded-sm px-1.5 py-1 hover:bg-sidebar-accent">
        <Avatar name={user.name} size="sm" status />
        <div className="min-w-0 flex-1">
          <div className="overflow-hidden text-ellipsis whitespace-nowrap text-xs font-semibold text-sidebar-foreground">{user.name}</div>
          <div className="mt-px text-xs text-sidebar-muted">{user.role}</div>
        </div>
      </div>
      <div title="Đăng xuất" className="grid size-7 shrink-0 cursor-pointer place-items-center rounded-sm text-muted-foreground hover:bg-sidebar-accent hover:text-foreground">
        <Icon name="log-out" size={14} />
      </div>
    </div>
  </aside>
);


// `helpActive`: dùng cho artboard có Quick-help Drawer đang mở (icon ở trạng thái bật).
const HRMTopbar = ({ searchPlaceholder = 'Tìm kiếm...', helpActive = false }) => (
  <div className="flex h-[52px] shrink-0 items-center gap-2.5 border-b border-border bg-card px-6">
    <div className="relative w-80">
      <Icon name="search" size={13} className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 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={searchPlaceholder} />
    </div>
    <div className="flex-1" />
    <div className="flex gap-0.5">
      {/* Trợ giúp theo ngữ cảnh (HRM-494 / HRM-498): mở Quick-help Drawer, khớp bài hướng dẫn
          theo đường dẫn trang hiện tại. Đứng TRƯỚC bộ chọn ngôn ngữ. Lối vào Trung tâm Trợ giúp
          là icon này — /guidelines CỐ Ý không có mục trong menu sidebar (quyết định Đ2). */}
      <div title="Hướng dẫn cho trang này"
        className={"grid size-[34px] cursor-pointer place-items-center rounded-md "
          + (helpActive ? "bg-primary-soft text-primary" : "text-muted-foreground hover:bg-muted hover:text-foreground")}>
        <Icon name="help-circle" size={16} />
      </div>
      {['globe', 'moon'].map((ic) => (
        <div key={ic} className="grid size-[34px] cursor-pointer place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground">
          <Icon name={ic} size={15} />
        </div>
      ))}
      <div className="relative grid size-[34px] cursor-pointer place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground">
        <Icon name="bell" size={15} />
        <span className="absolute right-2 top-2 size-[0.4375rem] rounded-full border-2 border-card bg-destructive" />
      </div>
    </div>
  </div>
);


const HRMPageTitle = ({ title, crumbs = [], actions, meta, subtitle }) => (
  <div className="flex shrink-0 items-start justify-between border-b border-border bg-card px-6 py-[13px]">
    <div>
      {crumbs.length > 0 &&
        <div className="mb-[5px] flex items-center gap-[5px] text-xs text-muted-foreground">
          {crumbs.map((c, i) => (
            <React.Fragment key={i}>
              {i > 0 && <Icon name="chevron-right" size={10} />}
              <span className={i === crumbs.length - 1 ? "font-medium text-foreground" : "cursor-pointer"}>{c}</span>
            </React.Fragment>
          ))}
        </div>}
      <div className="flex items-center gap-2.5">
        <h1 className="text-xl font-bold tracking-[-0.015em] text-foreground">{title}</h1>
        {meta && <span className="text-xs font-medium text-muted-foreground">{meta}</span>}
      </div>
      {subtitle && <div className="mt-1 text-sm font-medium text-muted-foreground">{subtitle}</div>}
    </div>
    {actions && <div className="mt-0.5 flex items-center gap-2">{actions}</div>}
  </div>
);


const HRMShell = ({ active, title, crumbs, actions, meta, subtitle, children, searchPlaceholder, user, dark = false, helpActive = false }) => (
  <div className={(dark ? 'dark ' : '') + "flex h-full w-full overflow-hidden bg-background font-sans text-foreground"}>
    <HRMSidebar active={active} user={user} />
    <div className="flex min-w-0 flex-1 flex-col">
      <HRMTopbar searchPlaceholder={searchPlaceholder} user={user} helpActive={helpActive} />
      <HRMPageTitle title={title} crumbs={crumbs} actions={actions} meta={meta} subtitle={subtitle} />
      <div className="flex-1 overflow-auto bg-background p-5">
        {children}
      </div>
    </div>
  </div>
);


Object.assign(window, { HRMShell, HRMSidebar, HRMTopbar, HRMPageTitle, ElsLogoMark });