// Shell — sidebar, topbar, env switcher
const { useState: useStateS } = React;

const Sidebar = ({ route, setRoute }) => {
  const nav = [
    { section: "WORKSPACE" },
    { key: "overview", label: "Overview", icon: <IHome className="nav-icon"/>, kbd: "O" },
    { key: "handoff", label: "Integration", icon: <IZap className="nav-icon"/>, kbd: "I" },
    { section: "BUILD" },
    { key: "keys", label: "API keys", icon: <IKey className="nav-icon"/>, kbd: "K" },
    { key: "oidc", label: "OIDC clients", icon: <IShield className="nav-icon"/>, kbd: "C" },
    { key: "webhooks", label: "Webhooks", icon: <IWebhook className="nav-icon"/> },
    { key: "chains", label: "Chains", icon: <IGlobe className="nav-icon"/> },
    { section: "RUNTIME" },
    { key: "wallets", label: "Wallets", icon: <IWallet className="nav-icon"/>, kbd: "W" },
    { key: "signing", label: "Signing queue", icon: <IFingerprint className="nav-icon"/> },
    { key: "policies", label: "Policies", icon: <IPolicy className="nav-icon"/> },
    { key: "audit", label: "Audit log", icon: <ILogs className="nav-icon"/>, kbd: "A" },
    { section: "ORG" },
    { key: "members", label: "Members", icon: <IPeople className="nav-icon"/> },
    { key: "settings", label: "Settings", icon: <ICog className="nav-icon"/> },
  ];
  return (
    <aside className="sidebar">
      <div className="brand">
        <SwivyMark size={26}/>
        <div className="brand-name">swivy</div>
      </div>
      <div className="org-switch" role="button">
        <div className="org-avatar">N</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="org-name" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{ORG.name}</div>
          <div className="org-sub mono">{ORG.handle} · {ORG.plan}</div>
        </div>
        <IChevronDown size={14} style={{ color: "var(--ink-4)" }}/>
      </div>

      {nav.map((n, i) => n.section ? (
        <div key={i} className="nav-label">{n.section}</div>
      ) : (
        <div
          key={n.key}
          className={`nav-item ${route === n.key ? "active" : ""}`}
          onClick={() => setRoute(n.key)}
        >
          {n.icon}
          <span>{n.label}</span>
          {n.kbd && <span className="nav-kbd">⌘{n.kbd}</span>}
        </div>
      ))}

      <div className="sidebar-footer">
        <div className="avatar">LO</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 12.5, fontWeight: 500 }}>Lena Osei</div>
          <div style={{ fontSize: 11, color: "var(--ink-4)" }}>Owner</div>
        </div>
        <button className="icon-btn"><IDots size={14}/></button>
      </div>
    </aside>
  );
};

const Topbar = ({ route, env, setEnv, project, setProject, openCmd }) => {
  const routeName = {
    overview: "Overview",
    handoff: "Integration",
    keys: "API keys",
    oidc: "OIDC clients",
    wallets: "Wallets",
    signing: "Signing queue",
    policies: "Policies",
    audit: "Audit log",
    webhooks: "Webhooks",
    chains: "Chains",
    members: "Members",
    settings: "Settings",
  }[route] || "Overview";

  const [envOpen, setEnvOpen] = useStateS(false);
  const [projOpen, setProjOpen] = useStateS(false);

  return (
    <header className="topbar">
      <div className="crumbs">
        <b>{ORG.name}</b>
        <span className="sep">/</span>
        <span style={{ position: "relative" }}>
          <button className="row" style={{ gap: 4, color: "var(--ink)" }} onClick={() => setProjOpen(v => !v)}>
            <b>{project.name}</b>
            <IChevronDown size={12} style={{ color: "var(--ink-4)" }}/>
          </button>
          {projOpen && (
            <div style={{
              position: "absolute", top: "120%", left: 0, minWidth: 260,
              background: "var(--panel)", border: "1px solid var(--line)", borderRadius: 10,
              boxShadow: "var(--shadow-md)", padding: 4, zIndex: 30,
            }}>
              {PROJECTS.map(p => (
                <button key={p.id} style={{
                  display: "flex", alignItems: "center", gap: 10, padding: "8px 10px",
                  width: "100%", textAlign: "left", borderRadius: 6,
                  background: p.id === project.id ? "var(--bg-sunken)" : "transparent",
                }} onClick={() => { setProject(p); setProjOpen(false); }}>
                  <div style={{ width: 18, height: 18, borderRadius: 4, background: "var(--accent-soft)", color: "var(--accent-ink)", display: "grid", placeItems: "center", fontSize: 10, fontWeight: 600 }}>{p.name[0]}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13 }}>{p.name}</div>
                    <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-4)" }}>{p.id}</div>
                  </div>
                  {p.id === project.id && <ICheck size={13} style={{ color: "var(--accent)" }}/>}
                </button>
              ))}
              <div style={{ borderTop: "1px solid var(--line)", marginTop: 4, paddingTop: 4 }}>
                <button style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 10px", width: "100%", fontSize: 13, color: "var(--ink-3)" }}>
                  <IPlus size={12}/> New project
                </button>
              </div>
            </div>
          )}
        </span>
        <span className="sep">/</span>
        <span style={{ position: "relative" }}>
          <button className="env-pill" onClick={() => setEnvOpen(v => !v)}>
            <span className="env-dot"/>
            {env.toUpperCase()}
            <IChevronDown size={10}/>
          </button>
          {envOpen && (
            <div style={{
              position: "absolute", top: "120%", left: 0, minWidth: 220,
              background: "var(--panel)", border: "1px solid var(--line)", borderRadius: 10,
              boxShadow: "var(--shadow-md)", padding: 4, zIndex: 30,
            }}>
              {["dev", "staging", "prod"].map(e => (
                <button key={e} style={{
                  display: "flex", alignItems: "center", gap: 10, padding: "8px 10px",
                  width: "100%", textAlign: "left", borderRadius: 6,
                  background: e === env ? "var(--bg-sunken)" : "transparent",
                }} onClick={() => { setEnv(e); setEnvOpen(false); }}>
                  <span style={{ width: 8, height: 8, borderRadius: "50%", background: `var(--env-${e})` }}/>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 500, textTransform: "capitalize" }}>{e === "prod" ? "Production" : e === "dev" ? "Development" : "Staging"}</div>
                    <div className="mono" style={{ fontSize: 10.5, color: "var(--ink-4)" }}>
                      {e === "prod" ? "live keys · real assets" : e === "staging" ? "test keys · fork state" : "test keys · sandbox"}
                    </div>
                  </div>
                  {e === env && <ICheck size={13} style={{ color: "var(--accent)" }}/>}
                </button>
              ))}
            </div>
          )}
        </span>
      </div>

      <div className="topbar-right">
        <button className="search-trigger" onClick={openCmd}>
          <ISearch size={13}/>
          <span>Search or jump to…</span>
          <span className="kbd">⌘K</span>
        </button>
        <button className="icon-btn" title="Docs"><IBook size={15}/></button>
        <button className="icon-btn" title="Activity"><IBell size={15}/></button>
        <button className="icon-btn" title="Help"><IHelp size={15}/></button>
      </div>
    </header>
  );
};

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