// The Boardroom — application shell. Mobile-first: a top bar + bottom tab bar on phone,
// adapting up to the quiet dark left rail on desktop.

const shellCSS = `
.br-shell { display:flex; flex-direction:column; height:100vh; overflow:hidden; background:var(--paper); color:var(--ink-900); }
.br-main { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch; }

/* Phone chrome */
.br-topbar { display:flex; align-items:center; justify-content:space-between;
             padding:12px 18px calc(12px); background:var(--paper-inverse); color:var(--paper);
             position:sticky; top:0; z-index:20; }
.br-mark { display:flex; align-items:baseline; gap:7px; font-family:var(--font-serif); font-size:19px; letter-spacing:-0.01em; }
.br-mark-the { font-family:var(--font-mono); font-size:9px; letter-spacing:0.22em; text-transform:uppercase; color:var(--claret-soft); }
.br-tabs { display:flex; position:sticky; bottom:0; z-index:20; background:var(--paper-inverse);
           border-top:1px solid rgba(246,239,234,0.12); padding-bottom:env(safe-area-inset-bottom); }
.br-tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:9px 4px 10px;
          border:0; background:transparent; cursor:pointer; font-family:var(--font-sans); font-size:10.5px; letter-spacing:0.02em; }

.br-rail { display:none; }

@media (min-width:821px){
  .br-shell { flex-direction:row; }
  .br-topbar, .br-tabs { display:none; }
  .br-rail { display:flex; flex-direction:column; width:232px; flex:none;
             background:var(--paper-inverse); color:var(--paper); padding:24px 18px;
             height:100vh; box-sizing:border-box; }
}
`;

function NavItem({ icon, label, active, onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        display: "flex", alignItems: "center", gap: 11, width: "100%", textAlign: "left",
        border: 0, cursor: "pointer", borderRadius: "var(--radius-1)", padding: "9px 8px",
        fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: active ? 600 : 400,
        color: active ? "var(--paper)" : hover ? "#e7e2d8" : "#b9b2a6",
        background: active ? "rgba(246,239,234,0.08)" : hover ? "rgba(246,239,234,0.04)" : "transparent",
        transition: "background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard)",
      }}>
      <Icon name={icon} size={17} stroke={active ? "var(--claret-soft)" : "currentColor"} />
      {label}
    </button>
  );
}

function AppShell({ nav, tabs, active, onNavigate, footer, topRight, onHome, children }) {
  const homeProps = onHome ? { onClick: onHome, style: { cursor: "pointer" }, role: "button", title: "Ask the board" } : {};
  return (
    <div className="br-shell">
      <style>{shellCSS}</style>
      {/* Desktop rail */}
      <aside className="br-rail">
        <div className="br-mark" style={{ padding: "4px 8px 22px", ...(onHome ? { cursor: "pointer" } : {}) }} {...(onHome ? { onClick: onHome, title: "Ask the board" } : {})}><span className="br-mark-the">The</span>Boardroom</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 2, marginTop: 8 }}>
          {nav.map((n) => n.group
            ? <div key={n.group} style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", color: "#7d7468", padding: "16px 8px 6px" }}>{n.group}</div>
            : <NavItem key={n.id} icon={n.icon} label={n.label} active={active === n.id} onClick={() => onNavigate(n.id)} />)}
        </div>
        <div style={{ flex: 1 }} />
        {footer}
      </aside>

      {/* Phone top bar — topRight carries account/sign-out on phone (no desktop rail here) */}
      <header className="br-topbar">
        <div className="br-mark" {...homeProps}><span className="br-mark-the">The</span>Boardroom</div>
        {topRight || React.createElement(window.TheBoardroomDesignSystem_4eda1b.Avatar, { name: "You", size: "sm" })}
      </header>

      <main className="br-main">{children}</main>

      {/* Phone bottom tabs */}
      <nav className="br-tabs">
        {tabs.map((t) => {
          const on = active === t.id;
          return (
            <button key={t.id} className="br-tab" onClick={() => onNavigate(t.id)}
              style={{ color: on ? "var(--paper)" : "#8f877b" }}>
              <Icon name={t.icon} size={20} stroke={on ? "var(--claret-soft)" : "currentColor"} />
              {t.label}
            </button>
          );
        })}
      </nav>
    </div>
  );
}

Object.assign(window, { AppShell, NavItem, shellCSS });