// ———— App Shell (Sidebar + Topbar) ————
const { useState, useEffect, useMemo, useRef } = React;

const NAV = [
  { id: "collect",  label: "采集",   icon: Icon.Collect,  badge: null },
  { id: "library",  label: "知识库", icon: Icon.Library,  badge: null },
  { id: "search",   label: "搜索",   icon: Icon.SearchPage },
  { id: "settings", label: "设置",   icon: Icon.Settings },
];

function Sidebar({ page, onNav, onLogout }) {
  const email = window.API ? window.API.currentEmail() : "";
  const initial = email ? email[0].toUpperCase() : "?";
  const [version, setVersion] = useState("...");

  useEffect(() => {
    fetch("/api/version")
      .then(r => r.json())
      .then(d => setVersion((d.version || "").slice(0, 16) || "v?.?"))
      .catch(() => setVersion("v?.?"));
  }, []);

  return (
    <aside className="sidebar">
      <div className="sidebar-brand">
        <div className="sidebar-brand-mark">爆</div>
        <div className="sidebar-brand-text">
          <span className="sidebar-brand-title">短视频爆款知识库</span>
          <span className="sidebar-brand-sub">{version} · deployed</span>
        </div>
      </div>
      <nav className="sidebar-nav">
        <div className="sidebar-section-label">工作流</div>
        {NAV.map(item => {
          const Ico = item.icon;
          return (
            <button key={item.id}
              className={`sidebar-item ${page === item.id ? "active" : ""}`}
              onClick={() => onNav(item.id)}>
              <Ico size={15} />
              <span>{item.label}</span>
              {item.badge && <span className="chip">{item.badge}</span>}
            </button>
          );
        })}
      </nav>
      <div className="sidebar-footer">
        <div className="avatar">{initial}</div>
        <div className="who" style={{ minWidth: 0, flex: 1 }}>
          <strong style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block" }}>
            {email || "用户"}
          </strong>
          <span style={{ fontSize: 10, color: "var(--ink-3)" }}>已登录</span>
        </div>
        <button className="btn ghost sm" style={{ marginLeft: 4, flexShrink: 0, fontSize: 11 }} onClick={onLogout} title="退出登录">
          退出
        </button>
      </div>
    </aside>
  );
}

function Topbar({ page }) {
  const titles = {
    collect: "采集任务",
    library: "知识库",
    search: "语义搜索",
    settings: "设置",
  };
  return (
    <header className="topbar">
      <div className="crumbs">
        <span>爆款知识库</span>
        <span className="sep">/</span>
        <span className="cur">{titles[page] || ""}</span>
      </div>
      <div className="spacer" />
      <div className="env-pill">api v0.1</div>
    </header>
  );
}

function Shell({ page, onNav, onLogout, children }) {
  return (
    <div className="app-shell">
      <Sidebar page={page} onNav={onNav} onLogout={onLogout} />
      <main className="main">
        <Topbar page={page} />
        <div className="page">{children}</div>
      </main>
    </div>
  );
}

window.Shell = Shell;