/* ZY console — app shell: sidebar + topbar. Composes design-system primitives. */
const DS = window.ZYDesignSystem_d746df;

function KitSidebar({ tabId, onTab }) {
  const { Icon, Avatar } = DS;
  const WB = window.KIT.workbenches;
  const activeWb = WB.find(w => w.tabs.some(t => t.id === tabId)) || WB[0];
  // 角标接实时数据：订单中心 = 待处理异常数（与页内「异常处理」标签一致），不再写死。
  const badge = { "sales.orders": window.KIT.exceptions.filter(e => e.status === "待处理").length };
  return (
    <aside className="sidebar">
      <div className="sidebar__top">
        <div className="logo">
          <img className="logo__icon" src="assets/lieeflat-icon.png" alt="LIEEFLAT" />
          <span className="logo__txt">
            <span className="logo__word"><img src="assets/lieeflat-word.png" alt="LIEEFLAT" /></span>
            <span className="logo__sub">运营中台</span>
          </span>
        </div>
      </div>
      <nav className="nav">
        <div className="nav__cap">角色工作台</div>
        {WB.map(w => {
          const isActive = w.id === activeWb.id;
          const multi = w.tabs.length > 1;
          return (
            <div className="navgroup" key={w.id}>
              <button className={"nav__item" + (isActive ? " is-on" : "")} onClick={() => onTab(w.def)} title={w.label}>
                <Icon name={w.icon} size={18} />
                <span>{w.label}</span>
                {multi && <Icon name="ChevronDown" size={15} className={"nav__chev" + (isActive ? " is-open" : "")} />}
              </button>
              {isActive && multi && (
                <div className="navsub">
                  {w.tabs.map(t => (
                    <button key={t.id} className={"navsub__item" + (t.id === tabId ? " is-on" : "")} onClick={() => onTab(t.id)}>
                      <span className="navsub__dot" />
                      <span>{t.label}</span>
                      {badge[t.id] ? <span className="navsub__badge num">{badge[t.id]}</span> : null}
                    </button>
                  ))}
                </div>
              )}
            </div>
          );
        })}
      </nav>
      <div className="sidebar__foot">
        <button className="boss">
          <Avatar name="老" size={34} tone="boss" />
          <span className="boss__meta">
            <span className="boss__name">老板 · 决策视角</span>
            <span className="boss__sub">{activeWb.label}</span>
          </span>
          <Icon name="ChevronUp" size={15} style={{ color: "var(--fg-3)" }} />
        </button>
      </div>
    </aside>
  );
}

function KitTopbar({ title, sub, approvals, onHermes, date, updated }) {
  const { Icon } = DS;
  const K = window.KIT;
  return (
    <header className="topbar">
      <div className="topbar__l">
        <h1 className="topbar__title">{title}</h1>
        {sub && <span className="topbar__sub">{sub}</span>}
      </div>
      <div className="topbar__r">
        <div className="topbar__date">
          <Icon name="Calendar" size={15} />
          <span>{date || K.today.date}</span>
          <span className="topbar__upd">· 数据更新于 {updated || K.today.updated}</span>
        </div>
        <button className="iconbtn topbar__bell" title="待审批">
          <Icon name="Bell" size={18} />
          {approvals > 0 && <span className="dot num">{approvals}</span>}
        </button>
        <button className="hermesbtn" onClick={onHermes}>
          <span className="hermesbtn__orb"><Icon name="Sparkles" size={15} /></span>
          <span>Hermes</span>
        </button>
      </div>
    </header>
  );
}

Object.assign(window, { KitSidebar, KitTopbar });