// Shared layout: Sidebar + Topbar
const { useState, useEffect, useMemo, useRef } = React;

function Sidebar({ route, go, newTest }) {
  const items = [
    { k: "dashboard", label: "Dashboard", icon: <I.dash size={16}/> },
    { k: "clients", label: "Clients", icon: <I.users size={16}/>, pill: "7" },
  ];
  return (
    <aside className="side">
      <div className="brand">
        <div className="brand-mark"></div>
        <div className="brand-name">vykon<span> · HTMA</span></div>
      </div>

      <button className="cta-new" onClick={newTest}>
        <I.plus size={14}/> <span>New Test</span>
        <span className="spacer"></span>
        <span className="chip mono">⌘N</span>
      </button>

      <div className="nav-group">
        <div className="nav-label">Practice</div>
        {items.map(it => (
          <button key={it.k} className={"nav-item" + (route.startsWith(it.k) ? " active" : "")} onClick={() => go(it.k)}>
            <span className="ico">{it.icon}</span>
            <span>{it.label}</span>
            {it.pill && <span className="pill">{it.pill}</span>}
          </button>
        ))}
      </div>

      <div className="side-bottom">
        <div className="usage-card">
          <div className="row" style={{gap: 8}}>
            <I.bolt size={14}/>
            <div style={{fontWeight: 600}}>Milestone 1 preview</div>
          </div>
          <div className="muted" style={{marginTop: 4}}>Practitioner flow · build 0.4.2</div>
          <div className="bar"><div style={{width: "62%"}}></div></div>
        </div>

        <button className="nav-item" style={{marginTop: 8}}><span className="ico"><I.help size={16}/></span><span>Help & docs</span></button>
        <button className="nav-item"><span className="ico"><I.cog size={16}/></span><span>Settings</span></button>

        <div className="user-row" style={{borderTop: "1px solid var(--border)", marginTop: 8, paddingTop: 12}}>
          <div className="avatar">L</div>
          <div style={{minWidth: 0}}>
            <div style={{fontWeight: 600, fontSize: 13}}>Linn</div>
            <div className="muted" style={{fontSize: 11.5}}>FNTP · Vykon Pro</div>
          </div>
          <I.more size={16}/>
        </div>
      </div>
    </aside>
  );
}

function Topbar({ crumbs, right }) {
  return (
    <div className="topbar">
      <button className="icon-btn"><I.sidebar size={16}/></button>
      <div className="topbar-divider"></div>
      <div className="crumb">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span className="sep"><I.chevR size={12}/></span>}
            <span style={i === crumbs.length-1 ? {color: "var(--text)"} : {}}>{c}</span>
          </React.Fragment>
        ))}
      </div>
      <div className="topbar-right">{right}</div>
    </div>
  );
}

// Avatar helper
function Avatar({ name, color, initial, size = 28 }) {
  return (
    <div className="avatar" style={{width: size, height: size, background: color, fontSize: size * 0.4, borderRadius: Math.max(6, size * 0.25)}}>
      {initial || name?.split(" ").map(s=>s[0]).join("").slice(0,2)}
    </div>
  );
}

// HTMA preview document (placeholder for uploaded lab report)
function HtmaPreviewDoc() {
  const bars = (n) => Array.from({length: n}).map((_, i) => (
    <div key={i} style={{height: `${20 + Math.random()*70}%`}} />
  ));
  return (
    <div className="preview-doc">
      <div style={{display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8, fontWeight: 700, fontSize: 10}}>
        <div style={{display: "flex", alignItems: "center", gap: 4}}>
          <div style={{width: 14, height: 14, borderRadius: 50, background: "linear-gradient(135deg,#3b82f6,#1e3a8a)"}}></div>
          TRACE ELEMENTS, INC.
        </div>
        <div style={{fontSize: 8, color: "#666"}}>LAB #45-D0481787</div>
      </div>
      <div style={{display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 3, fontSize: 7, color: "#444", marginBottom: 6, padding: 4, background: "#fff", borderRadius: 3}}>
        <div><b>PATIENT:</b> ████████</div>
        <div><b>AGE:</b> 34</div>
        <div><b>SEX:</b> F</div>
        <div><b>PROFILE:</b> 1</div>
        <div><b>SAMPLE:</b> SCALP</div>
        <div><b>TYPE:</b> SLOW 2</div>
      </div>
      <div className="htma-preview">
        <div className="htma-section n">
          <div className="lbl">NUTRITIONAL ELEMENTS</div>
          <div className="htma-bars">{bars(16)}</div>
          <div style={{display: "grid", gridTemplateColumns: "repeat(16, 1fr)", gap: 2, marginTop: 3, color: "#333", fontWeight: 600, fontSize: 7, textAlign: "center"}}>
            {["Ca","Mg","Na","K","Cu","Zn","P","Fe","Mn","Cr","Se","B","Co","Mo","S","Ge"].map(s => <div key={s}>{s}</div>)}
          </div>
        </div>
        <div className="htma-section t">
          <div className="lbl">TOXIC ELEMENTS</div>
          <div className="htma-bars" style={{gridTemplateColumns: "repeat(7, 1fr)"}}>{bars(7)}</div>
          <div style={{display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2, marginTop: 3, color: "#333", fontWeight: 600, fontSize: 7, textAlign: "center"}}>
            {["Sb","U","As","Hg","Cd","Pb","Al"].map(s => <div key={s}>{s}</div>)}
          </div>
        </div>
        <div className="htma-section a">
          <div className="lbl">ADDITIONAL ELEMENTS</div>
          <div className="htma-bars" style={{gridTemplateColumns: "repeat(11, 1fr)"}}>{bars(11)}</div>
        </div>
      </div>
      <div style={{marginTop: 8, fontSize: 7, color: "#555", textAlign: "right"}}>© Trace Elements, Inc. 2014–2025</div>
    </div>
  );
}

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