/* ============================================================
   gp-atoms.jsx — shared UI primitives (OverMont / zinc vocabulary)
   ============================================================ */
var { useState, useEffect, useRef, useMemo } = React;

// uppercase mono micro-label
function Label({ children, color = "var(--fg-3)", style }) {
  return <span style={{ fontFamily: "var(--mono)", fontSize: 9, letterSpacing: "0.16em", textTransform: "uppercase", color, ...style }}>{children}</span>;
}

function Mono({ children, color = "var(--fg)", size = 12, weight = 400, style }) {
  return <span style={{ fontFamily: "var(--mono)", fontSize: size, fontWeight: weight, color, fontVariantNumeric: "tabular-nums", ...style }}>{children}</span>;
}

// status pill — winner / survivor / rejected / verified / flagged / regime
const PILL = {
  winner:   { fg: "var(--emerald)", bg: "color-mix(in oklab, var(--emerald) 16%, transparent)" },
  survivor: { fg: "var(--info)",    bg: "color-mix(in oklab, var(--info) 16%, transparent)" },
  rejected: { fg: "var(--rose)",    bg: "color-mix(in oklab, var(--rose) 14%, transparent)" },
  verified: { fg: "var(--emerald)", bg: "color-mix(in oklab, var(--emerald) 15%, transparent)" },
  flagged:  { fg: "var(--rose)",    bg: "color-mix(in oklab, var(--rose) 15%, transparent)" },
  neutral:  { fg: "var(--fg-2)",    bg: "var(--bg-2)" },
  accent:   { fg: "var(--cyan)",    bg: "color-mix(in oklab, var(--cyan) 13%, transparent)" },
  warn:     { fg: "var(--amber)",   bg: "color-mix(in oklab, var(--amber) 14%, transparent)" },
};
function Pill({ kind = "neutral", children, dot = false, style }) {
  const m = PILL[kind] || PILL.neutral;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 5, padding: "2px 7px",
      background: m.bg, color: m.fg, fontFamily: "var(--mono)", fontSize: 9,
      letterSpacing: "0.12em", fontWeight: 600, textTransform: "uppercase",
      borderRadius: 2, whiteSpace: "nowrap", ...style,
    }}>
      {dot && <span style={{ width: 5, height: 5, borderRadius: "50%", background: "currentColor" }} />}
      {children}
    </span>
  );
}

// verification dot — emerald (verified) / rose (flagged)
function VerdictDot({ verdict, size = 7, pulse = false }) {
  const color = verdict === "VERIFIED" ? "var(--emerald)" : "var(--rose)";
  return <span style={{
    display: "inline-block", width: size, height: size, borderRadius: "50%",
    background: color, boxShadow: `0 0 7px ${color}`,
    animation: pulse ? "gp-pulse 1.6s ease-in-out infinite" : "none",
  }} />;
}

// pass/fail glyph
function CheckMark({ pass, size = 13 }) {
  return (
    <span style={{
      display: "inline-grid", placeItems: "center", width: size + 4, height: size + 4,
      borderRadius: "50%", flex: "0 0 auto",
      background: pass ? "color-mix(in oklab, var(--emerald) 18%, transparent)" : "color-mix(in oklab, var(--rose) 18%, transparent)",
      color: pass ? "var(--emerald)" : "var(--rose)",
      fontSize: size - 3, fontFamily: "var(--mono)", fontWeight: 700, lineHeight: 1,
    }}>{pass ? "✓" : "✕"}</span>
  );
}

// param chip k=v, with optional diff highlight
function ParamChip({ k, v, changed = false, highlight = false }) {
  return (
    <span style={{
      display: "inline-flex", alignItems: "baseline", gap: 4, padding: "2px 7px",
      background: highlight ? "color-mix(in oklab, var(--cyan) 12%, transparent)" : "var(--bg-2)",
      border: "1px solid " + (changed ? "color-mix(in oklab, var(--amber) 50%, transparent)" : "var(--line)"),
      borderRadius: 2, fontFamily: "var(--mono)", fontSize: 10,
    }}>
      <span style={{ color: "var(--fg-3)" }}>{k}</span>
      <span style={{ color: changed ? "var(--amber)" : "var(--fg)", fontVariantNumeric: "tabular-nums" }}>{v}</span>
    </span>
  );
}

// metric value, colored by sign for returns/dd
function MetricVal({ metricKey, value, size = 12, weight = 500 }) {
  const m = window.GP.verify.metricByKey(metricKey);
  let color = "var(--fg)";
  if (metricKey === "total_return") color = value > 0 ? "var(--emerald)" : "var(--rose)";
  if (metricKey === "max_drawdown") color = "var(--rose)";
  if (metricKey === "win_rate_frac") color = "var(--fg)";
  return <Mono color={color} size={size} weight={weight}>{m.fmt(value)}</Mono>;
}

// section header bar
function SectionBar({ num, title, right, style }) {
  return (
    <div style={{
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "9px 14px", borderBottom: "1px solid var(--line)", ...style,
    }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 9 }}>
        {num != null && <Mono color="var(--cyan)" size={9} weight={600} style={{ letterSpacing: "0.16em" }}>{num}</Mono>}
        <Label color="var(--fg-2)" style={{ fontSize: 10, letterSpacing: "0.18em" }}>{title}</Label>
      </div>
      {right && <div style={{ display: "flex", alignItems: "center", gap: 10 }}>{right}</div>}
    </div>
  );
}

// regime tag
const REGIME_COLOR = {
  TRENDING_BULL: "var(--emerald)", TRENDING_BEAR: "var(--rose)",
  CHOPPY: "var(--amber)", RANGE_BOUND: "var(--indigo)", BREAKOUT: "var(--cyan)",
};
function RegimeTag({ regime, small = false }) {
  if (!regime) return null;
  const c = REGIME_COLOR[regime] || "var(--fg-2)";
  return (
    <span style={{
      fontFamily: "var(--mono)", fontSize: small ? 8 : 9, letterSpacing: "0.1em",
      color: c, padding: small ? "1px 5px" : "2px 6px",
      border: "1px solid color-mix(in oklab, " + c + " 35%, transparent)",
      borderRadius: 2, whiteSpace: "nowrap",
    }}>{regime.replace("_", " ")}</span>
  );
}

// horizontal bar (for score scales)
function Bar({ frac, color = "var(--cyan)", height = 6, bg = "var(--bg-2)", glow = false, radius = 1 }) {
  return (
    <span style={{ display: "block", width: "100%", height, background: bg, borderRadius: radius, overflow: "hidden" }}>
      <span style={{
        display: "block", width: Math.max(0, Math.min(100, frac * 100)) + "%", height: "100%",
        background: color, borderRadius: radius,
        boxShadow: glow ? `0 0 8px ${color}` : "none",
        transition: "width 360ms cubic-bezier(.4,0,.2,1)",
      }} />
    </span>
  );
}

// generic icon button / tab
function Tab({ active, children, onClick, badge }) {
  return (
    <button onClick={onClick} style={{
      display: "inline-flex", alignItems: "center", gap: 8, padding: "7px 14px",
      background: active ? "var(--bg-2)" : "transparent",
      border: "1px solid " + (active ? "var(--line-strong, rgba(228,228,231,0.16))" : "transparent"),
      borderBottom: active ? "1px solid var(--cyan)" : "1px solid transparent",
      color: active ? "var(--fg)" : "var(--fg-3)", cursor: "pointer",
      fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase",
      transition: "color 120ms, background 120ms",
    }}>
      {children}
      {badge != null && (
        <span style={{
          fontFamily: "var(--mono)", fontSize: 9, padding: "1px 5px", borderRadius: 8,
          background: "var(--bg-3)", color: active ? "var(--cyan)" : "var(--fg-3)",
        }}>{badge}</span>
      )}
    </button>
  );
}

function Panel({ children, style }) {
  return <div style={{ background: "var(--bg-1)", border: "1px solid var(--line)", borderRadius: 4, ...style }}>{children}</div>;
}

Object.assign(window, {
  Label, Mono, Pill, VerdictDot, CheckMark, ParamChip, MetricVal,
  SectionBar, RegimeTag, Bar, Tab, Panel, REGIME_COLOR,
});