// Sidebar + Topbar shell
function Sidebar({ screen, setScreen, pendingCount }) {
  const main = [
    ["overview", "Overview", "layout-dashboard"],
    ["audit", "Audit log", "scroll-text"],
    ["approvals", "Approvals", "user-check"],
  ];
  const config = [
    ["policy", "Policy", "shield-check"],
    ["agents", "Agents", "bot"],
    ["settings", "Settings", "settings"],
  ];
  const Item = ([id, label, icon]) => (
    <button key={id} className={"nav-item" + (screen === id ? " active" : "")} onClick={() => setScreen(id)}>
      <i data-lucide={icon}></i>{label}
      {id === "approvals" && pendingCount > 0 && <span className="nav-badge">{pendingCount}</span>}
    </button>
  );
  return (
    <aside className="side">
      <div className="side-brand"><img src="../../assets/logo-mark.svg" alt="" />delego</div>
      <div className="side-sec">Monitor</div>
      {main.map(Item)}
      <div className="side-sec">Configure</div>
      {config.map(Item)}
      <div className="side-foot">
        <div className="ws">
          <div className="ws-logo">A</div>
          <div style={{minWidth:0}}>
            <div style={{fontSize:13,fontWeight:600,color:'var(--fg)',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>Acme, Inc.</div>
            <div style={{fontSize:11,color:'var(--fg-muted)'}}>Team plan</div>
          </div>
          <i data-lucide="chevrons-up-down" style={{width:15,height:15,color:'var(--fg-muted)',marginLeft:'auto'}}></i>
        </div>
      </div>
    </aside>
  );
}

function Topbar({ title, crumb }) {
  return (
    <div className="topbar">
      <div>
        <h1>{title}</h1>
      </div>
      <div className="crumb">{crumb}</div>
      <div style={{flex:1}}></div>
      <div className="search"><i data-lucide="search"></i>Search receipts, agents, fingerprints…</div>
      <button className="env"><span style={{width:7,height:7,borderRadius:'50%',background:'var(--signal-400)'}}></span>production <i data-lucide="chevron-down" style={{width:14,height:14}}></i></button>
      <div className="avatar">AL</div>
    </div>
  );
}
window.Sidebar = Sidebar;
window.Topbar = Topbar;