// Sidebar + Topbar + Footer chrome
const _preserveQS = () => {
  const q = new URLSearchParams(location.search);
  const keep = new URLSearchParams();
  if (q.get("seed") != null) keep.set("seed", q.get("seed"));
  if (q.get("paused") != null) keep.set("paused", q.get("paused"));
  const s = keep.toString();
  return s ? "?" + s : "";
};

const Sidebar = ({ active = "fleet", alarmCount = 8 }) => {
  const qs = _preserveQS();
  const items = [
    { key: "fleet",     label: "Fleet Overview", Ico: Icon.Fleet,  count: null,                                  href: "index.html"  + qs },
    { key: "gensets",   label: "Gensets",        Ico: Icon.Genset, count: window.FLEET_KPI?.total || 15,         href: "genset.html" + qs },
    { key: "alarms",    label: "Alarms",         Ico: Icon.Alarm,  count: alarmCount, alarm: true,               href: "alarms.html" + qs },
    { key: "reports",   label: "Reports",        Ico: Icon.Report, count: null,                                  href: "reports.html"+ qs },
    { key: "analytics", label: "Analytics",      Ico: Icon.Chart,  count: null,                                  href: "#" },
  ];
  const admin = [
    { key: "sites",    label: "Sites",         Ico: Icon.Site,     count: window.FLEET_KPI?.siteCount || 4, href: "#" },
    { key: "users",    label: "Users & Roles", Ico: Icon.Users,    count: null,                              href: "#" },
    { key: "settings", label: "Settings",      Ico: Icon.Settings, count: null,                              href: "#" },
  ];
  return (
    <aside className="sidebar">
      <div className="brand">
        <img src="assets/otus-logo.png" alt="Otus Energy Solutions" className="brand-logo"/>
        <div className="brand-sub">Energy Monitor</div>
      </div>
      <nav className="sidenav">
        <div className="group-label">Monitor</div>
        {items.map(it => (
          <a key={it.key} className={`nav-item ${active===it.key?"active":""}`} href={it.href}>
            <span className="ico"><it.Ico size={14}/></span>
            <span>{it.label}</span>
            {it.count != null && <span className={`count ${it.alarm?"alarm":""}`} data-sidebar-count={it.key}>{it.count}</span>}
          </a>
        ))}
        <div className="group-label">Admin</div>
        {admin.map(it => (
          <a key={it.key} className="nav-item" href={it.href}>
            <span className="ico"><it.Ico size={14}/></span>
            <span>{it.label}</span>
            {it.count != null && <span className="count">{it.count}</span>}
          </a>
        ))}
      </nav>
      <div className="sidefoot">
        <div className="site-picker">
          <div>
            <div className="label">Customer</div>
            <div className="val">Cabinda Pilot</div>
          </div>
          <span className="caret"><Icon.Caret/></span>
        </div>
      </div>
    </aside>
  );
};

const Topbar = ({ crumbs = ["Fleet Overview"], alarmCount = 8 }) => {
  // Live clock is driven by assets/simulation.js via [data-live-clock] attribute
  // so the value is consistent across pages and obeys ?seed / ?paused.
  const initialTs = "2026-04-20 09:42:18 UTC";
  return (
    <div className="topbar">
      <div className="crumbs">
        {crumbs.map((c,i) => (
          <React.Fragment key={i}>
            {i>0 && <span className="sep"><Icon.ChevR size={10}/></span>}
            <span className={i===crumbs.length-1?"cur":""}>{c}</span>
          </React.Fragment>
        ))}
      </div>
      <div className="spacer"/>
      <div className="chip" data-live-clock><span className="live-dot"/> LIVE · <span data-live-clock-ts>{initialTs}</span></div>
      <div className="chip"><span className="k">refresh</span> 5s</div>
      <button className="iconbtn" title="Search"><Icon.Search/></button>
      <button className="iconbtn" title="Notifications" style={{position:"relative"}}>
        <Icon.Bell/>
        {alarmCount > 0 && <span style={{position:"absolute",top:3,right:3,width:6,height:6,borderRadius:"50%",background:"var(--alarm)"}}/>}
      </button>
      <button className="user">
        <span className="avatar">JM</span>
        <span style={{fontSize:12}}>J. Muanza</span>
        <Icon.Caret/>
      </button>
    </div>
  );
};

const Footer = () => (
  <div className="footer">
    <span>Powered by Otus Energy Solutions</span>
    <span className="sep">·</span>
    <span>© 2026</span>
    <div className="right">
      <span className="ok">● API online</span>
      <span className="sep">·</span>
      <span>Ingest lag <span data-metric="ingest-lag" data-band="0.3" data-precision="1" data-period="30">1.2</span>s</span>
      <span className="sep">·</span>
      <span>{(window.FLEET_KPI?.total || 15)} devices · {(window.FLEET_KPI?.siteCount || 4)} sites</span>
    </div>
  </div>
);

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