// Shell: sidebar + topbar, reused across artboards

const Sidebar = ({ active = "teardown" }) => {
  const groups = [
    { label: "工作流", items: [
      { id:"dash", ic:"dash", label:"总览 Overview" },
      { id:"collect", ic:"fire", label:"1 · 收集爆款" },
      { id:"teardown", ic:"layers", label:"2 · 拆解爆款" },
      { id:"remix", ic:"magic", label:"3 · 复刻爆款" },
      { id:"qc", ic:"check", label:"4 · 质检合成" },
      { id:"scrub", ic:"filter", label:"5 · 数据脱敏与扰乱" },
      { id:"distribute", ic:"send", label:"6 · 分发爆款" },
    ]},
    { label: "资产", items: [
      { id:"library", ic:"folder", label:"爆款存储库" },
      { id:"templates", ic:"folder", label:"模板库" },
      { id:"rule_packs", ic:"filter", label:"规则库" },
      { id:"assets", ic:"layers", label:"分镜素材库" },
      { id:"image_library", ic:"folder", label:"图片素材库" },
      { id:"bgm_library", ic:"music", label:"背景音乐素材库" },
      { id:"accounts", ic:"account", label:"账号矩阵" },
    ]},
    { label: "系统", items: [
      { id:"models", ic:"zap", label:"模型管理" },
    ]},
  ];
  return (
    <aside className="sidebar">
      <div className="sb-brand">
        <div className="sb-logo"/>
        <div className="col">
          <span className="sb-name">光年AI</span>
          <span className="sb-ver">v2.4.1 · prod</span>
        </div>
      </div>
      <div className="sb-nav">
        {groups.map(g => (
          <React.Fragment key={g.label}>
            <div className="sb-group-label">{g.label}</div>
            {g.items.map(i => (
              <div key={i.id}
                   data-nav-id={i.id}
                   data-nav-extern={i.extern || undefined}
                   className={`sb-item ${i.id===active?"active":""}`}
                   title={i.extern ? `独立子服务：${i.extern}（新窗口打开）` : undefined}>
                <span className="sb-ic"><Icon name={i.ic} size={13}/></span>
                <span>{i.label}</span>
                {i.extern && (
                  <span style={{ marginLeft: "auto", fontSize: 9,
                                 color: "var(--fg-3)", paddingLeft: 6 }}
                        title="独立部署的子服务，新窗口打开">↗</span>
                )}
              </div>
            ))}
          </React.Fragment>
        ))}
      </div>
      <SidebarFooter />
    </aside>
  );
};

const SidebarFooter = () => {
  const user = Auth.getUser();
  const name = (user && (user.nickname || user.username)) || "";
  const avatar = (user && user.avatar) || "";
  const initial = name ? name[0].toUpperCase() : "?";
  return (
    <div className="sb-footer">
      {avatar
        ? <img className="sb-avatar" src={avatar} alt="" style={{width:28,height:28,borderRadius:"50%",objectFit:"cover"}} />
        : <div className="sb-avatar">{initial}</div>
      }
      <div className="col" style={{flex:1, minWidth:0}}>
        <span className="sb-user-name">{name || "未登录"}</span>
        <span className="sb-user-plan">在线</span>
      </div>
      <span className="sb-ic" style={{color:"var(--fg-3)"}}><Icon name="settings" size={13}/></span>
    </div>
  );
};

const Topbar = ({ crumbs, right, status, updated }) => (
  <div className="topbar">
    <div className="crumb">
      {crumbs.map((c,i)=>(
        <React.Fragment key={i}>
          {i>0 && <span className="sep">/</span>}
          <span className={i===crumbs.length-1?"cur":""}>{c}</span>
        </React.Fragment>
      ))}
    </div>
    {status && <span className="pill live">{status}</span>}
    {updated && <span className="pill"><Icon name="clock" size={10}/> {updated}</span>}
    <div className="grow"/>
    {right}
  </div>
);

Object.assign(window, { Sidebar, Topbar });