/* P.E.S.T Web App — Shell: sidebar (desktop) + topbar + bottom nav (mobile) */
function Shell({ route, setRoute, children }) {
  const store = useStore();
  const me = store.member;
  const isAdmin = store.user.isAdmin;
  const mainPfp = (me.pfps && me.pfps.find((p) => p.img)) || (me.pfps && me.pfps[0]) || {};

  const NAV = [
    { key: "dashboard", label: "Dashboard", icon: window.AIcon.dashboard },
    { key: "members", label: "Members", icon: window.AIcon.members },
    { key: "projects", label: "Projects", icon: window.AIcon.projects },
    { key: "votes", label: "Votes", icon: window.AIcon.vote },
  ];
  if (isAdmin) NAV.push({ key: "admin", label: "Admin", icon: window.AIcon.admin });

  const Avatar = () => mainPfp.img
    ? <img src={mainPfp.img} alt={me.nick} />
    : <div style={{ width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-mono)", fontSize: 13 }}>{me.nick.slice(0, 2)}</div>;

  return (
    <div className="shell">
      <div className="app-bg"></div>
      <div className="app-grid"></div>

      {/* desktop sidebar */}
      <aside className="sidebar">
        <div className="sb-brand">
          <img src="assets/pest-emblem.png" alt="P.E.S.T" />
          <span className="wm grad-text">P.E.S.T</span>
        </div>
        <nav className="sb-nav">
          {NAV.map((n) => (
            <button key={n.key} className={"sb-item" + (route === n.key ? " on" : "")} onClick={() => setRoute(n.key)}>
              <n.icon /> {n.label}
            </button>
          ))}
        </nav>
        <div className="sb-spacer"></div>
        <div className="sb-user" onClick={() => setRoute("profile")}>
          <div className="av"><Avatar /></div>
          <div className="nm">
            <b>{me.nick}</b>
            <span>@{store.user.username}</span>
          </div>
        </div>
        <button className="sb-logout" onClick={store.logout}><window.AIcon.logout /> Log out</button>
        <div className="sb-legal">
          <a href="https://pestdao.xyz/legal-notice.html" target="_blank" rel="noreferrer">Legal Notice</a>
          <span> · </span>
          <a href="https://pestdao.xyz/privacy.html" target="_blank" rel="noreferrer">Privacy</a>
        </div>
      </aside>

      {/* mobile topbar */}
      <header className="topbar">
        <div className="tb-brand">
          <img src="assets/pest-emblem.png" alt="P.E.S.T" />
          <span className="wm grad-text">P.E.S.T</span>
        </div>
        <div className="tb-av" onClick={() => setRoute("profile")}><Avatar /></div>
      </header>

      <main className="main">
        <div className="content">{children}</div>
      </main>

      {/* mobile bottom nav */}
      <nav className="bottomnav">
        {NAV.map((n) => (
          <button key={n.key} className={"bn-item" + (route === n.key ? " on" : "")} onClick={() => setRoute(n.key)}>
            <n.icon /> {n.label}
          </button>
        ))}
        <button className={"bn-item" + (route === "profile" ? " on" : "")} onClick={() => setRoute("profile")}>
          <span className="av"><Avatar /></span> Profile
        </button>
      </nav>
    </div>
  );
}

window.Shell = Shell;