/* shell.jsx — brand, navigation, topbar, shared UI helpers */

const cx = (...a) => a.filter(Boolean).join(" ");
const I = (name, props) => { const C = window.Icons[name]; return C ? <C {...props} /> : null; };

/* ---- Brand mark: three ascending rounded bars = "model improvement" ---- */
function Logo({ size = 28 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 28 28" className="brand-mark" aria-label="Model OS">
      <rect width="28" height="28" rx="8" fill="var(--primary)" />
      <g fill="var(--primary-ink)">
        <rect x="7" y="16.5" width="4" height="5" rx="1.4" />
        <rect x="12" y="12.5" width="4" height="9" rx="1.4" />
        <rect x="17" y="7" width="4" height="14.5" rx="1.4" />
      </g>
    </svg>
  );
}

const NAV = [
  { sect: "Build" },
  { id: "bots", label: "My Bots", icon: "bot" },
  { id: "knowledge", label: "Knowledge base", icon: "book" },
  { id: "playground", label: "Playground", icon: "chat" },
  { id: "deploy", label: "Deploy", icon: "rocket" },
  { sect: "Improve" },
  { id: "conversations", label: "Training Data Studio", icon: "message" },
  { id: "finetune", label: "Fine-Tuning", icon: "layers" },
];

const PAGE_TITLES = {
  bots: "My Bots",
  knowledge: "Knowledge base",
  playground: "Playground",
  deploy: "Deploy",
  conversations: "Training Data Studio",
  finetune: "Fine-Tuning Studio",
  pricing: "Plans & Pricing",
};

function Sidebar({ view, setView, open, setOpen, activeModel }) {
  return (
    <aside className="sidebar" data-open={open ? "1" : "0"}>
      <div className="brand">
        <img className="brand-logo logo-light" src="assets/logo-black.png" alt="Model OS" />
        <img className="brand-logo logo-dark" src="assets/logo-white.png" alt="Model OS" />
      </div>

      <nav className="nav">
        {NAV.map((n, i) =>
          n.sect ? (
            <div className="nav-sect" key={"s" + i}>{n.sect}</div>
          ) : (
            <div key={n.id} className="nav-item" data-on={view === n.id ? "1" : "0"}
                 onClick={() => { setView(n.id); setOpen(false); }}>
              {I(n.icon)}
              <span>{n.label}</span>
              {n.count && <span className="count">{n.count}</span>}
            </div>
          )
        )}
      </nav>

    </aside>
  );
}

function Topbar({ view, setView, setOpen }) {
  return (
    <header className="topbar">
      <button className="icon-btn menu-btn" onClick={() => setOpen(o => !o)}>{I("menu")}</button>
      <div className="crumb">
        <b>{PAGE_TITLES[view]}</b>
      </div>
      <div className="grow" />
      <button
        className="btn btn-primary pricing-topbar-btn"
        data-on={view === "pricing" ? "1" : "0"}
        title="View plans and pricing"
        onClick={() => setView("pricing")}
      >
        {I("bolt", { style: { width: 15, height: 15 } })}
        <span>Upgrade plan</span>
      </button>
      <AccountMenu />
    </header>
  );
}

/* ---------------- shared helpers used across pages ---------------- */

function LabelTag({ id, onRemove }) {
  const l = window.DEMO.LABELS.find(x => x.id === id);
  if (!l) return null;
  return (
    <span className="badge badge-neutral" style={{ paddingLeft: 7 }}>
      <span className="dot" style={{ background: l.color }} />
      {l.name}
      {onRemove && <span style={{ cursor: "pointer", marginLeft: 2, opacity: .6 }} onClick={(e) => { e.stopPropagation(); onRemove(id); }}>×</span>}
    </span>
  );
}

/* score → semantic tone */
function toneFor(score, invert) {
  const s = invert ? 100 - score : score;
  if (s >= 85) return "good";
  if (s >= 70) return "warn";
  return "bad";
}
const TONE_VAR = { good: "var(--good)", warn: "var(--warn)", bad: "var(--bad)", info: "var(--info)" };

function ScoreMeter({ value, invert, label, suffix = "" }) {
  const tone = toneFor(value, invert);
  return (
    <div className="stack" style={{ gap: 5, minWidth: 0 }}>
      {label && <div className="between"><span className="caption">{label}</span><span className="tnum" style={{ fontSize: 12, fontWeight: 700, color: TONE_VAR[tone] }}>{value}{suffix}</span></div>}
      <div className="meter"><i style={{ width: value + "%", background: TONE_VAR[tone] }} /></div>
    </div>
  );
}

function Ring({ value, size = 56, stroke = 6, tone = "good", label }) {
  const r = (size - stroke) / 2, c = 2 * Math.PI * r;
  return (
    <div style={{ position: "relative", width: size, height: size, flex: "none" }}>
      <svg width={size} height={size} style={{ transform: "rotate(-90deg)" }}>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="var(--surface-3)" strokeWidth={stroke} />
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={TONE_VAR[tone]} strokeWidth={stroke}
                strokeDasharray={c} strokeDashoffset={c - (value/100)*c} strokeLinecap="round"
                style={{ transition: "stroke-dashoffset .8s cubic-bezier(.3,.7,.4,1)" }} />
      </svg>
      <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
        <span className="tnum" style={{ fontSize: size > 70 ? 19 : 14, fontWeight: 700, lineHeight: 1 }}>{value}</span>
        {label && <span className="caption" style={{ fontSize: 9 }}>{label}</span>}
      </div>
    </div>
  );
}

function PageHead({ eyebrow, title, sub, children }) {
  return (
    <div className="between wrap fu" style={{ gap: 16, marginBottom: 24, alignItems: "flex-end" }}>
      <div className="stack" style={{ gap: 6 }}>
        {eyebrow && <div className="eyebrow">{eyebrow}</div>}
        <h1 className="h1">{title}</h1>
        {sub && <p className="lead" style={{ maxWidth: 620 }}>{sub}</p>}
      </div>
      {children && <div className="row" style={{ gap: 10 }}>{children}</div>}
    </div>
  );
}

function Empty({ icon, title, sub }) {
  return (
    <div className="stack" style={{ alignItems: "center", justifyContent: "center", padding: "56px 24px", textAlign: "center", gap: 8 }}>
      <div style={{ color: "var(--ink-3)", marginBottom: 4 }}>{I(icon, { style: { width: 30, height: 30 } })}</div>
      <div className="h3">{title}</div>
      <div className="caption" style={{ maxWidth: 320 }}>{sub}</div>
    </div>
  );
}

Object.assign(window, { cx, I, Logo, Sidebar, Topbar, LabelTag, ScoreMeter, Ring, PageHead, Empty, toneFor, TONE_VAR, NAV, PAGE_TITLES });