/* ============================================================
   Eval Pulse — shared UI: icons, delta pills, chips
   ============================================================ */
const ICONS = {
  sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>',
  moon: '<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>',
  arrowUp: '<path d="M12 19V5M5 12l7-7 7 7"/>',
  arrowDown: '<path d="M12 5v14M19 12l-7 7-7-7"/>',
  minus: '<path d="M5 12h14"/>',
  chevron: '<path d="m6 9 6 6 6-6"/>',
  sparkles: '<path d="M9.94 14.06A2 2 0 0 0 8.5 12.6l-5.1-1.32a.5.5 0 0 1 0-.96L8.5 9a2 2 0 0 0 1.44-1.44l1.32-5.1a.5.5 0 0 1 .96 0l1.32 5.1A2 2 0 0 0 15 9l5.1 1.32a.5.5 0 0 1 0 .96L15 12.6a2 2 0 0 0-1.44 1.44l-1.32 5.1a.5.5 0 0 1-.96 0z"/><path d="M19 4v3M20.5 5.5h-3M5 18v2M6 19H4"/>',
  alert: '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4M12 17h.01"/>',
  pulse: '<path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"/>',
  trending: '<path d="M16 7h6v6"/><path d="m22 7-8.5 8.5-5-5L2 17"/>',
  layers: '<path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"/><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"/>',
  check: '<path d="M20 6 9 17l-5-5"/>',
  scale: '<path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"/><path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"/><path d="M7 21h10M12 3v18M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2"/>',
  grid: '<rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/>',
  flask: '<path d="M10 2v7.31M14 9.3V1.99M8.5 2h7M14 9.3a6.5 6.5 0 1 1-4 0M5.52 16h12.96"/>',
  clock: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>'
};
function Icon({ name, size = 18, stroke = 2, style, className }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
      className={className} style={style}
      dangerouslySetInnerHTML={{ __html: ICONS[name] || "" }} />
  );
}

/* delta pill — green up / red down / neutral flat.
   value == null ⇒ no comparable run exists for that window: render a
   plain "—" with no arrow. (A zero would claim "no change", which is a
   different statement than "nothing to compare against".) */
function DeltaPill({ value, label, suffix = "%", size = "md" }) {
  if (value == null) {
    return (
      <div className={`delta-pill tone-flat ${size === "sm" ? "delta-sm" : ""}`}>
        {label && <span className="delta-label">{label}</span>}
        <span className="delta-val">—</span>
      </div>
    );
  }
  const tone = deltaTone(value);
  const icon = tone === "up" ? "arrowUp" : tone === "down" ? "arrowDown" : "minus";
  return (
    <div className={`delta-pill tone-${tone} ${size === "sm" ? "delta-sm" : ""}`}>
      {label && <span className="delta-label">{label}</span>}
      <span className="delta-val">
        <Icon name={icon} size={size === "sm" ? 13 : 15} stroke={2.6} />
        {signedPts(value)}{suffix}
      </span>
    </div>
  );
}

/* small inline delta chip (for grader/domain rows) */
function MiniDelta({ value }) {
  const tone = deltaTone(value);
  const icon = tone === "up" ? "arrowUp" : tone === "down" ? "arrowDown" : "minus";
  return (
    <span className={`mini-delta tone-${tone}`}>
      <Icon name={icon} size={12} stroke={2.8} />
      {signedPts(value)}
    </span>
  );
}

Object.assign(window, { ICONS, Icon, DeltaPill, MiniDelta });