/* ============================================================
   AFTERWAVE — PERSONA GRID + DETAIL DRAWER  (window.PERS)
   12-persona grid; each opens to action_probabilities (mean±std),
   six neural_signals (radar + sourced bars), trait_vector (OCEAN).
   ============================================================ */
(function () {
  "use strict";
  const U = window.AU, RVZ = window.RVZ, UI = window.UIX, API = window.API;
  const h = React.createElement;
  const LEAN_TONE = { positive: "var(--pos)", neutral: "var(--neu)", negative: "var(--neg)" };
  const LEAN_GLYPH = { positive: "↑", neutral: "→", negative: "↓" };

  function Lean({ lean }) {
    return h("span", { className: "lean", "data-lean": lean, style: { display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12, color: lean === "positive" ? "var(--pos-ink)" : lean === "negative" ? "var(--neg-ink)" : "var(--ink-2)" } },
      h("span", { "aria-hidden": true }, LEAN_GLYPH[lean]), lean);
  }

  function intensity(p) {
    const eng = 1 - p.action_probabilities.stop.mean;
    return U.clamp(p.neural_signals.arousal.value * 0.5 + eng * 0.5, 0, 1);
  }

  function Tile({ p, onOpen, highlight }) {
    const inten = intensity(p);
    return h("button", { className: "ptile", onClick: () => onOpen(p.id), "aria-label": p.name + ", " + p.location + ", " + p.reaction_lean,
      style: highlight ? { borderColor: "var(--neg)", boxShadow: "0 0 0 1px var(--neg)" } : null },
      p.drives_backlash ? h("span", { className: "driver" }, h("span", { className: "badge", "data-tone": "neg", style: { fontSize: 9, padding: "3px 7px" } }, h("span", { className: "g" }), "driver")) : null,
      h("div", { style: { display: "flex", alignItems: "center", gap: 10 } },
        h("span", { className: "ava" }, p.name.slice(0, 1)),
        h("div", { style: { minWidth: 0 } }, h("div", { className: "nm" }, p.name), h("div", { className: "loc" }, p.location))),
      h(Lean, { lean: p.reaction_lean }),
      h("div", null, h("div", { className: "eyebrow", style: { fontSize: 8.5, marginBottom: 5, display: "flex", justifyContent: "space-between" } }, h("span", null, "reaction intensity"), h("span", { className: "num" }, Math.round(inten * 100))),
        h("div", { className: "ib" }, h("i", { style: { width: inten * 100 + "%", background: LEAN_TONE[p.reaction_lean] } }))));
  }

  function PersonaGrid({ personas, onOpen, drivers }) {
    return h("div", { className: "pgrid" }, personas.map((p) => h(Tile, { key: p.id, p, onOpen, highlight: (drivers || []).includes(p.id) })));
  }

  function ActionBars({ probs }) {
    return h("div", { style: { display: "grid", gap: 9 } }, API.ACTION_KEYS.map((kk) => {
      const a = probs[kk], lo = U.clamp(a.mean - a.std, 0, 1), hi = U.clamp(a.mean + a.std, 0, 1);
      return h("div", { key: kk, style: { display: "grid", gridTemplateColumns: "84px 1fr 70px", gap: 10, alignItems: "center" } },
        h("span", { style: { fontSize: 12.5 } }, API.ACTION_LABEL[kk]),
        h("div", { style: { position: "relative", height: 12, background: "var(--sunken)", borderRadius: 99 } },
          h("div", { title: "±1 std", style: { position: "absolute", left: lo * 100 + "%", width: (hi - lo) * 100 + "%", top: 0, bottom: 0, background: "var(--d1)", borderRadius: 99 } }),
          h("div", { style: { position: "absolute", left: U.clamp(a.mean, 0, 1) * 100 + "%", top: -2, bottom: -2, width: 2, background: "var(--ink)", borderRadius: 2 } })),
        h("span", { className: "num", style: { fontSize: 11, color: "var(--ink-2)", textAlign: "right" } }, Math.round(a.mean * 100) + "% ±" + Math.round(a.std * 100)));
    }));
  }

  function NeuralBars({ signals }) {
    return h("div", { style: { display: "grid", gap: 9 } }, API.NEURAL_KEYS.map((kk) => {
      const s = signals[kk], v = s.value;
      return h("div", { key: kk },
        h("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 4, alignItems: "center" } },
          h("span", { style: { fontSize: 12 } }, API.NEURAL_LABEL[kk], " ", h(UI.Prov, { source: s.source })),
          h("span", { className: "num", style: { fontSize: 11, color: "var(--ink-2)" } }, Math.round(v * 100))),
        h("div", { style: { position: "relative", height: 7, background: "var(--sunken)", borderRadius: 99 } },
          h("div", { style: { position: "absolute", left: 0, width: v * 100 + "%", top: 0, bottom: 0, background: "var(--d4)", borderRadius: 99 } }),
          s.ci ? h("div", { title: "CI", style: { position: "absolute", left: s.ci[0] * 100 + "%", width: (s.ci[1] - s.ci[0]) * 100 + "%", top: -2, bottom: -2, border: "1px solid var(--ink-3)", borderRadius: 99, opacity: .5 } }) : null));
    }));
  }

  function OceanBars({ traits }) {
    return h("div", { style: { display: "grid", gap: 8 } }, API.TRAIT_KEYS.map((k) =>
      h("div", { key: k, style: { display: "grid", gridTemplateColumns: "118px 1fr 28px", gap: 9, alignItems: "center" } },
        h("span", { style: { fontSize: 11.5, textTransform: "capitalize" } }, k),
        h("div", { style: { height: 7, background: "var(--sunken)", borderRadius: 99 } }, h("div", { style: { width: traits[k] * 100 + "%", height: "100%", background: "var(--d3)", borderRadius: 99 } })),
        h("span", { className: "num", style: { fontSize: 10.5, color: "var(--ink-2)", textAlign: "right" } }, Math.round(traits[k] * 100)))));
  }

  function Drawer({ p, onClose, rtl }) {
    return h(React.Fragment, null,
      h("div", { className: "scrim", onClick: onClose }),
      h("aside", { className: "drawer", role: "dialog", "aria-label": p.name + " detail", dir: rtl ? "rtl" : "ltr" },
        h("div", { className: "drawer-h" },
          h("span", { className: "ava", style: { width: 38, height: 38, borderRadius: 9, fontSize: 15 } }, p.name.slice(0, 1)),
          h("div", { style: { flex: 1 } }, h("div", { style: { fontWeight: 600, fontSize: 16 } }, p.name), h("div", { className: "dim", style: { fontSize: 12.5 } }, p.location)),
          h(Lean, { lean: p.reaction_lean }),
          h("button", { className: "btn ghost sm", onClick: onClose, "aria-label": "close" }, "✕")),
        p.drives_backlash ? h("div", { style: { padding: "12px 22px 0" } }, h("div", { className: "notice", "data-kind": "error", style: { fontSize: 12.5 } },
          h("span", { className: "g", style: { width: 9, height: 9, borderRadius: "50%", background: "var(--neg)" } }), "Flagged as a backlash driver — high arousal against low valence.")) : null,
        h("div", { style: { padding: 22, display: "grid", gap: 24 } },
          h("section", null, h("div", { className: "eyebrow", style: { marginBottom: 11 } }, "action probabilities · mean ± std"), h(ActionBars, { probs: p.action_probabilities })),
          h("section", null, h("div", { className: "eyebrow", style: { marginBottom: 8 } }, "six neural signals"),
            h("div", { style: { display: "grid", placeItems: "center", marginBottom: 14 } }, h(RVZ.NeuralRadar, { signals: p.neural_signals, size: 220 })),
            h(NeuralBars, { signals: p.neural_signals })),
          h("section", null, h("div", { className: "eyebrow", style: { marginBottom: 11 } }, "trait profile · OCEAN"), h(OceanBars, { traits: p.trait_vector })))));
  }

  window.PERS = { PersonaGrid, Drawer, Lean, intensity };
})();