/* ============================================================
   AFTERWAVE PLATFORM — UI  (window.UIX)
   Sidebar shell, icons, badges, neural panel.
   ============================================================ */
(function () {
  "use strict";
  const { useState } = React;
  const U = window.AU;
  const h = React.createElement;

  const GL = {
    dash: "M2 2.6 H6.6 V7.2 H2 Z M9.4 2.6 H14 V7.2 H9.4 Z M2 9.4 H6.6 V14 H2 Z M9.4 9.4 H14 V14 H9.4 Z",
    play: "M4 2.6 L13 8 L4 13.4 Z",
    live: "M8 6.4 A1.6 1.6 0 1 0 8 9.6 A1.6 1.6 0 0 0 8 6.4 M4.4 4.4 A5 5 0 0 0 4.4 11.6 M11.6 4.4 A5 5 0 0 1 11.6 11.6 M2.4 2.6 A8 8 0 0 0 2.4 13.4 M13.6 2.6 A8 8 0 0 1 13.6 13.4",
    history: "M8 2.4 A5.6 5.6 0 1 1 2.6 6.2 M2.6 6.2 H5.8 M2.6 6.2 V3 M8 5 V8 L10.3 9.3",
    settings: "M8 6 A2 2 0 1 0 8 10 A2 2 0 0 0 8 6 M8 1.6 V3.4 M8 12.6 V14.4 M1.6 8 H3.4 M12.6 8 H14.4 M3.6 3.6 L4.9 4.9 M11.1 11.1 L12.4 12.4 M12.4 3.6 L11.1 4.9 M4.9 11.1 L3.6 12.4",
    plus: "M8 3 V13 M3 8 H13",
    signout: "M6 2.6 H3 V13.4 H6 M9.4 5 L12.4 8 L9.4 11 M12.4 8 H5.4",
    image: "M2.4 3.4 H13.6 V12.6 H2.4 Z M2.4 10 L6 7 L9 10 L11 8.6 L13.6 11 M10.8 6 A1 1 0 1 0 10.8 5.9",
    doc: "M4 2.4 H10 L12.6 5 V13.6 H4 Z M10 2.4 V5 H12.6 M6 8 H10.6 M6 10.6 H10.6",
    video: "M2.4 4 H10 V12 H2.4 Z M10 7 L13.6 4.6 V11.4 L10 9 Z",
    audio: "M3.4 6 H5.2 L8 3.4 V12.6 L5.2 10 H3.4 Z M10 5.4 A3 3 0 0 1 10 10.6",
    search: "M7 2.4 A4.6 4.6 0 1 0 7 11.6 A4.6 4.6 0 0 0 7 2.4 M10.4 10.4 L13.6 13.6",
    info: "M8 2.2 A5.8 5.8 0 1 0 8 13.8 A5.8 5.8 0 0 0 8 2.2 M8 7 V11 M8 4.6 V5.2",
    check: "M3 8.4 L6.4 11.6 L13 4.6",
    up: "M3 11 L7 6 L9.5 8.5 L13 4 M13 4 H10 M13 4 V7",
    down: "M3 5 L7 10 L9.5 7.5 L13 12 M13 12 H10 M13 12 V9",
    flat: "M3 8 H13",
    alert: "M8 2.4 L14 13 H2 Z M8 6.4 V9.4 M8 11 V11.4",
    bolt: "M8.5 2 L4 9 H7.5 L6.5 14 L12 6.5 H8 Z",
    bars: "M3 13 V8 M6.5 13 V4 M10 13 V9 M13.5 13 V6",
    download: "M8 2.6 V10 M5 7 L8 10 L11 7 M3 13 H13",
    export: "M8 10 V2.6 M5.4 5 L8 2.4 L10.6 5 M3 9 V13 H13 V9",
    filter: "M2.6 3.4 H13.4 L9.2 8.4 V12.4 L6.8 13.6 V8.4 Z",
    grid: "M2 2.6 H6.6 V7.2 H2 Z M9.4 2.6 H14 V7.2 H9.4 Z M2 9.4 H6.6 V14 H2 Z M9.4 9.4 H14 V14 H9.4 Z",
    users: "M5.5 6.5 A2 2 0 1 0 5.5 6.4 M10.5 6.5 A2 2 0 1 0 10.5 6.4 M2 13 C2 10.4 4 9.4 5.5 9.4 M5.5 9.4 C7 9.4 9 10.4 9 13 M9 13 C9 10.4 11 9.4 11 9.4",
  };
  function Icon({ name, size = 16, sw = 1.45, cls }) {
    return h("svg", { className: cls, width: size, height: size, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: sw, strokeLinejoin: "round", strokeLinecap: "round" },
      h("path", { d: GL[name] || GL.doc }));
  }
  const TYPE_ICON = { Video: "video", Image: "image", Carousel: "image", Reel: "video", Audio: "audio", Text: "doc" };

  /* canonical Afterwave "impact" mark — full 1-bit, 16×16 pixel glyph */
  const IMPACT = [[7,7,2,2],[7,4,2,1],[7,11,2,1],[4,7,1,2],[11,7,1,2],[4,4,1,1],[11,4,1,1],[4,11,1,1],[11,11,1,1],[7,1,2,1],[7,14,2,1],[1,7,1,2],[14,7,1,2],[2,2,1,1],[13,2,1,1],[2,13,1,1],[13,13,1,1]];
  function Mark({ size = 22, color }) {
    return h("svg", { className: "mk", width: size, height: size, viewBox: "0 0 16 16", fill: color || "currentColor", shapeRendering: "crispEdges", style: { imageRendering: "pixelated", display: "block" } },
      IMPACT.map((r, i) => h("rect", { key: i, x: r[0], y: r[1], width: r[2], height: r[3] })));
  }

  function SentBadge({ net, level }) {
    const tone = net > .25 ? "pos" : net < -.05 ? "neg" : "neu";
    const label = level || (tone === "pos" ? "net positive" : tone === "neg" ? "net negative" : "mixed");
    return h("span", { className: "badge", "data-tone": tone }, h("span", { className: "g" }), label);
  }
  function Sev({ s }) { return h("span", { className: "sev", "data-s": s, title: s + " severity" }); }
  function Prov({ source }) {
    return h("span", { className: "prov", tabIndex: 0, role: "note", "aria-label": "source " + source,
      onMouseMove: (e) => U.T(e, `<span class='k'>source</span><br>${source}`), onMouseLeave: U.hideTip },
      h(Icon, { name: "info", size: 12, sw: 1.3 }));
  }

  /* ---- sidebar shell ---- */
  function Shell({ route, onNav, live, usage, limit, ws, role, onWorkspace, children }) {
    const lim = limit || 10;
    const NAV = [["dash", "Dashboard", "dash"], ["new", "New Simulation", "play"], ["history", "History", "history"], ["settings", "Settings", "settings"]];
    return h("div", { className: "app" },
      h("aside", { className: "side" },
        h("div", { className: "side-top" },
          h("div", { className: "side-brand", style: { marginBottom: 12 } }, h(Mark, { size: 22 }), h("b", null, "afterwave")),
          h("button", { className: "ws-switch", onClick: onWorkspace, "aria-label": "switch workspace",
            style: { display: "flex", alignItems: "center", gap: 9, width: "100%", padding: "8px 10px", border: "1px solid var(--line-2)", borderRadius: "var(--r-sm)", background: "var(--surface)", textAlign: "left" } },
            h("span", { style: { width: 22, height: 22, borderRadius: 6, background: "var(--ink)", color: "var(--bg)", display: "grid", placeItems: "center", fontFamily: "var(--mono)", fontSize: 10, fontWeight: 500, flex: "none" } }, (ws || "Workspace").slice(0, 1)),
            h("span", { style: { flex: 1, minWidth: 0 } }, h("span", { style: { display: "block", fontSize: 12.5, fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }, ws || "Workspace"), h("span", { style: { display: "block", fontSize: 10, color: "var(--ink-3)", fontFamily: "var(--mono)" } }, role || "owner")),
            h("span", { style: { color: "var(--ink-3)", fontSize: 10 } }, "⇅"))),
        h("div", { className: "side-sect" }, "Workspace"),
        h("nav", { className: "side-nav" }, NAV.map(([id, label, ic]) =>
          h("button", { key: id, className: "nav-item", "data-active": route === id, onClick: () => onNav(id) },
            h(Icon, { name: ic, size: 17, cls: "ic" }), label,
            id === "live" && live ? h("span", { className: "live-dot" }) : null))),
        h("div", { className: "side-foot" },
          h("div", { className: "usage" },
            h("div", { className: "ul" }, h("span", null, "Simulations"), h("span", { className: "num" }, (usage || 0) + " / " + lim)),
            h("div", { className: "bar" }, h("i", { style: { width: Math.min(100, (usage || 0) / lim * 100) + "%" } }))),
          h("button", { className: "so", onClick: () => onNav("logout") }, h(Icon, { name: "signout", size: 15 }), "Sign out"))),
      h("main", { className: "main" }, children));
  }

  /* ---- neural activation panel (brain schematic + signal bars + scrubber) ---- */
  const BRAIN = "M50 8 C72 8 90 22 92 44 C94 64 84 84 62 90 C44 95 24 92 12 78 C3 67 4 50 8 38 C13 18 30 8 50 8 Z";
  const REGION_POS = { visual: [74, 64], emotional: [44, 70], memory: [58, 44], reward: [40, 52], social: [30, 38], language: [22, 60] };
  function NeuralPanel({ regions }) {
    const [t, setT] = useState(1);
    const cur = regions.map((r) => ({ ...r, v: r.value * (0.4 + 0.6 * t) }));
    return h("div", { style: { display: "grid", gridTemplateColumns: "minmax(220px, 1fr) 1.2fr", gap: 22, alignItems: "center" } },
      h("div", null,
        h("svg", { viewBox: "0 0 100 100", style: { width: "100%", maxWidth: 280, display: "block", margin: "0 auto" }, role: "img", "aria-label": "neural activation map" },
          h("path", { d: BRAIN, fill: "var(--surface-2)", stroke: "var(--line-3)", strokeWidth: 1 }),
          // sulci hints
          h("path", { d: "M30 28 C42 36 40 50 32 58 M56 24 C50 40 60 52 54 66 M72 36 C66 48 76 58 70 70", fill: "none", stroke: "var(--line-2)", strokeWidth: 1 }),
          cur.map((r) => { const [x, y] = REGION_POS[r.id]; const rad = 6 + r.v * 12;
            return h("g", { key: r.id, onMouseMove: (e) => U.T(e, `<b>${r.label}</b><br><span class='k'>activation</span> ${(r.v * 100).toFixed(0)}%`), onMouseLeave: U.hideTip },
              h("circle", { cx: x, cy: y, r: rad, fill: U.gray(r.v), fillOpacity: .9, stroke: "var(--ink)", strokeWidth: .6 })); })),
        h("div", { style: { marginTop: 12 } },
          h("div", { className: "eyebrow", style: { display: "flex", justifyContent: "space-between", marginBottom: 6 } }, h("span", null, "response time"), h("span", { className: "num" }, Math.round(t * 100) + "%")),
          h("input", { type: "range", min: 0, max: 1, step: .01, value: t, onChange: (e) => setT(+e.target.value), style: { width: "100%" }, "aria-label": "response time" }))),
      h("div", { style: { display: "grid", gap: 11 } }, cur.slice().sort((a, b) => b.v - a.v).map((r) =>
        h("div", { key: r.id },
          h("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 5 } },
            h("span", { style: { fontSize: 12.5 } }, r.label), h("span", { className: "num", style: { fontSize: 11, color: "var(--ink-2)" } }, Math.round(r.v * 100))),
          h("div", { style: { height: 8, background: "var(--sunken)", borderRadius: 99 } }, h("div", { style: { width: (r.v * 100) + "%", height: "100%", background: U.gray(.45 + r.v * .45), borderRadius: 99, transition: "width .25s var(--ease)" } }))))));
  }

  window.UIX = { Icon, TYPE_ICON, Mark, SentBadge, Sev, Prov, Shell, NeuralPanel };
})();