// App shell — sidebar + topbar (light theme, matches user screenshots)

function Shell({ screen, setScreen, children }){
  return (
    <div style={{ display:"flex", minHeight:"100vh", background:"var(--bg-0)" }}>
      <Sidebar screen={screen} setScreen={setScreen}/>
      <main style={{ flex:1, minWidth:0, display:"flex", flexDirection:"column" }}>
        <Topbar/>
        <div style={{ flex:1, minWidth:0 }}>{children}</div>
      </main>
    </div>
  );
}

function Sidebar({ screen, setScreen }){
  const workspace = [
    { id:"overview",       icon:"home",     label:"Overview" },
    { id:"projects",       icon:"folder",   label:"Projects" },
    { id:"clusters",       icon:"layers",   label:"Clusters" },
    { id:"optimisation",   icon:"sparkles", label:"Optimisation" },
    { id:"reports",        icon:"receipt",  label:"Reports" },
    { id:"team",           icon:"layers",   label:"Team" },
    { id:"members",        icon:"user",     label:"Members" },
  ];
  const enterprise = [
    { id:"executive",      icon:"chart",    label:"Executive",    soon:true },
    { id:"cost-centres",   icon:"box",      label:"Cost centres", soon:true },
    { id:"reconciliation", icon:"check",    label:"Reconciliation",soon:true },
    { id:"audit",          icon:"check",    label:"Audit",        soon:true },
    { id:"benchmarks",     icon:"activity", label:"Benchmarks",   soon:true },
  ];
  const admin = [
    { id:"settings", icon:"cog", label:"Settings", soon:true },
  ];

  return (
    <aside style={{
      width:236, flexShrink:0,
      background:"var(--bg-1)",
      borderRight:"1px solid var(--line-1)",
      display:"flex", flexDirection:"column",
      position:"sticky", top:0, height:"100vh", overflowY:"auto",
    }}>
      {/* Brand */}
      <div style={{ padding:"16px 18px 14px", display:"flex", alignItems:"center", gap:10 }}>
        <img src="/halton-meter-mark-on-paper.svg" width="28" height="28" alt="Halton Meter" style={{ borderRadius:7, display:"block", flexShrink:0 }}/>
        <span style={{ fontSize:14, fontWeight:600, color:"var(--fg-0)", letterSpacing:-0.1 }}>Halton Meter</span>
      </div>

      {/* Workspace switcher */}
      <div style={{ padding:"0 14px 12px" }}>
        <button style={{ width:"100%", appearance:"none", background:"#fff", border:"1px solid var(--line-1)", borderRadius:10, padding:"7px 9px", display:"flex", alignItems:"center", gap:10, boxShadow:"var(--sh-1)" }}>
          <div style={{ width:26, height:26, borderRadius:6, background:"linear-gradient(135deg,#ebe9e4,#d8d5cd)", color:"var(--fg-0)", display:"flex", alignItems:"center", justifyContent:"center", fontSize:11, fontWeight:600 }}>MS</div>
          <div style={{ display:"flex", flexDirection:"column", flex:1, minWidth:0, textAlign:"left" }}>
            <span style={{ fontSize:12.5, fontWeight:500, color:"var(--fg-0)" }}>Meridian Studio</span>
            <span style={{ fontSize:10.5, color:"var(--fg-2)", marginTop:1 }}>Meridian Studio</span>
          </div>
          <Icon name="chevDown" size={13} stroke="var(--fg-2)"/>
        </button>
      </div>

      <NavGroup title="Workspace" items={workspace} screen={screen} setScreen={setScreen}/>
      <NavGroup title="Enterprise" items={enterprise} screen={screen} setScreen={setScreen}/>
      <NavGroup title="Admin" items={admin} screen={screen} setScreen={setScreen}/>

      <div style={{ flex:1 }}/>

      {/* Daemon status */}
      <div style={{ padding:"10px 14px 14px" }}>
        <div style={{ display:"flex", alignItems:"center", gap:9, padding:"8px 10px", borderRadius:8, background:"#fff", border:"1px solid var(--line-1)" }}>
          <span style={{ position:"relative", width:8, height:8 }}>
            <span style={{ position:"absolute", inset:0, borderRadius:"50%", background:"var(--pos)" }}/>
            <span style={{ position:"absolute", inset:-4, borderRadius:"50%", background:"var(--pos)", animation:"pulse 2.4s ease-out infinite" }}/>
          </span>
          <div style={{ display:"flex", flexDirection:"column", flex:1, minWidth:0 }}>
            <span style={{ fontSize:11.5, color:"var(--fg-0)", fontWeight:500 }}>Daemon active</span>
            <span style={{ fontSize:10, color:"var(--fg-2)" }} className="mono">:8080 · 2s ago</span>
          </div>
        </div>
      </div>
    </aside>
  );
}

function NavGroup({ title, items, screen, setScreen }){
  return (
    <div style={{ padding:"4px 14px 8px" }}>
      <div style={{ fontSize:10, fontWeight:600, letterSpacing:0.08, textTransform:"uppercase", color:"var(--fg-3)", padding:"10px 8px 6px" }}>{title}</div>
      <div style={{ display:"flex", flexDirection:"column", gap:1 }}>
        {items.map(it => {
          const active = screen === it.id;
          return (
            <button
              key={it.id}
              onClick={() => !it.soon && setScreen(it.id)}
              title={it.soon ? `${it.label} (coming soon)` : it.label}
              style={{
                appearance:"none", border:"none",
                display:"flex", alignItems:"center", gap:10,
                padding:"7px 9px",
                background: active ? "#fff" : "transparent",
                color: active ? "var(--fg-0)" : it.soon ? "var(--fg-3)" : "var(--fg-1)",
                borderRadius:7,
                fontSize:13,
                fontWeight: active ? 500 : 400,
                textAlign:"left",
                cursor: it.soon ? "default" : "pointer",
                position:"relative",
                boxShadow: active ? "0 0 0 1px var(--line-1), var(--sh-1)" : "none",
              }}
              onMouseEnter={e=>{ if(!active && !it.soon) e.currentTarget.style.background="rgba(20,16,8,0.04)" }}
              onMouseLeave={e=>{ if(!active && !it.soon) e.currentTarget.style.background="transparent" }}
            >
              {active && <span style={{ position:"absolute", left:-8, top:7, bottom:7, width:2.5, background:"var(--accent)", borderRadius:2 }}/>}
              <Icon name={it.icon} size={15} stroke={active ? "var(--accent)" : it.soon ? "var(--fg-3)" : "var(--fg-2)"}/>
              <span style={{ flex:1 }}>{it.label}</span>
              {it.soon && <span style={{ fontSize:9, color:"var(--fg-3)", letterSpacing:0.05, fontWeight:500 }}></span>}
            </button>
          );
        })}
      </div>
    </div>
  );
}

function Topbar(){
  const [dark, setDark] = useState(false);
  return (
    <header style={{
      height:60, borderBottom:"1px solid var(--line-1)",
      display:"flex", alignItems:"center", padding:"0 28px", gap:14,
      background:"rgba(250,250,248,0.86)", backdropFilter:"saturate(140%) blur(8px)",
      position:"sticky", top:0, zIndex:20,
    }}>
      <div style={{ display:"flex", alignItems:"center", gap:10, fontSize:14 }}>
        <span style={{ color:"var(--fg-0)", fontWeight:500 }}>Meridian Studio</span>
        <span className="badge badge--accent" style={{ fontSize:10.5, padding:"2px 8px" }}>Business+</span>
      </div>
      <div style={{ flex:1 }}/>
      <div style={{ display:"flex", alignItems:"center", gap:10, fontSize:12, color:"var(--fg-2)" }}>
        <span>Press</span>
        <kbd style={{ fontFamily:"var(--font-mono)", fontSize:11, padding:"2px 6px", border:"1px solid var(--line-2)", borderRadius:5, background:"#fff", color:"var(--fg-1)", boxShadow:"0 1px 0 rgba(20,16,8,0.06)" }}>?</kbd>
        <span>for help</span>
      </div>
      <IconBtn name="help"/>
      <IconBtn name="moon" onClick={()=>setDark(!dark)}/>
      <IconBtn name="user"/>
      <div style={{ width:30, height:30, borderRadius:"50%", background:"linear-gradient(135deg,#9b5cf6,#5b50ee)", color:"#fff", display:"flex", alignItems:"center", justifyContent:"center", fontSize:12, fontWeight:600 }}>H</div>
    </header>
  );
}

function IconBtn({ name, onClick }){
  return (
    <button onClick={onClick} style={{ width:32, height:32, borderRadius:8, border:"1px solid transparent", background:"transparent", color:"var(--fg-2)", display:"inline-flex", alignItems:"center", justifyContent:"center" }}
      onMouseEnter={e=>{ e.currentTarget.style.background="rgba(20,16,8,0.05)"; e.currentTarget.style.color="var(--fg-0)" }}
      onMouseLeave={e=>{ e.currentTarget.style.background="transparent"; e.currentTarget.style.color="var(--fg-2)" }}>
      <Icon name={name} size={16}/>
    </button>
  );
}

// Period switcher (used on page headers)
function PeriodSwitcher(){
  return (
    <div style={{ display:"flex", alignItems:"center", border:"1px solid var(--line-2)", borderRadius:8, background:"#fff", boxShadow:"var(--sh-1)" }}>
      <button style={{ height:34, width:30, border:"none", background:"transparent", display:"inline-flex", alignItems:"center", justifyContent:"center", color:"var(--fg-2)", borderRadius:"8px 0 0 8px" }}><Icon name="chevLeft" size={14}/></button>
      <button style={{ height:34, padding:"0 12px", border:"none", borderLeft:"1px solid var(--line-1)", borderRight:"1px solid var(--line-1)", background:"transparent", display:"inline-flex", alignItems:"center", gap:7, fontSize:13, color:"var(--fg-0)", fontWeight:500 }}>
        <Icon name="calendar" size={14} stroke="var(--fg-2)"/> May 2026 (partial)
      </button>
      <button style={{ height:34, width:30, border:"none", background:"transparent", display:"inline-flex", alignItems:"center", justifyContent:"center", color:"var(--fg-2)", borderRadius:"0 8px 8px 0" }}><Icon name="chevron" size={14}/></button>
    </div>
  );
}

function RefreshBtn(){
  return (
    <button style={btnSecondary()}>
      <Icon name="refresh" size={13} stroke="var(--fg-2)"/> Refresh
    </button>
  );
}

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