/* OpenMAO console primitives — Badge, Button, AutonomyPill, Tag, StatusBadge.
   Exposed on window for the console app. */
const { useState, useEffect, useRef } = React;

// Map any contract status → semantic family
const STATE_FAMILY = {
  queued: "neutral", draft: "neutral", idle: "neutral", log_only: "neutral", proposed: "pending",
  running: "info", in_progress: "info",
  pending: "pending", require_approval: "pending", suspended_approval: "pending",
  provisional: "pending", review: "pending",
  approved: "success", allow: "success", done: "success", completed: "success",
  ratified: "success", confirmed: "success", enabled: "success", ok: "success", applied: "success",
  blocked: "danger", block: "danger", rejected: "danger", failed: "danger",
  disabled: "danger", stale: "danger",
};

function StatusBadge({ status }) {
  const fam = STATE_FAMILY[status] || "neutral";
  return (
    <span className={"badge badge-" + fam}>
      <span className="bdot"></span>{status}
    </span>
  );
}

function RiskTag({ level }) {
  const map = { low: "neutral", medium: "pending", high: "danger" };
  const fam = map[level] || "neutral";
  const style = fam === "neutral" ? {} : {
    color: `var(--state-${fam}-fg)`,
    borderColor: `var(--state-${fam}-line)`,
    background: `var(--state-${fam}-bg)`,
  };
  return <span className="tag" style={style}>risk: {level}</span>;
}

function AutonomyPill({ level }) {
  return <span className="autonomy" data-level={level}>{level}</span>;
}

// Pre-generate lucide SVG markup ONCE per (name,size); cache the string.
// React then owns it via dangerouslySetInnerHTML — lucide never mutates the
// live tree, which avoids a Chromium style-invalidation bug on the ancestor.
const ICON_CACHE = {};
function iconSvg(name, size) {
  const key = name + ":" + size;
  if (ICON_CACHE[key] != null) return ICON_CACHE[key];
  let html = "";
  if (window.lucide) {
    const tmp = document.createElement("span");
    tmp.innerHTML = '<i data-lucide="' + name + '"></i>';
    document.body.appendChild(tmp);
    window.lucide.createIcons();
    const svg = tmp.querySelector("svg");
    if (svg) {
      svg.setAttribute("width", size);
      svg.setAttribute("height", size);
      html = svg.outerHTML;
    }
    document.body.removeChild(tmp);
  }
  ICON_CACHE[key] = html;
  return html;
}

function Icon({ name, size, cls }) {
  return (
    <span
      className={cls}
      style={{ display: "inline-flex", alignItems: "center" }}
      dangerouslySetInnerHTML={{ __html: iconSvg(name, size || 16) }}
    />
  );
}

function Btn({ children, variant, size, onClick, disabled }) {
  const cls = ["btn"];
  if (variant) cls.push("btn-" + variant);
  if (size) cls.push("btn-" + size);
  return (
    <button className={cls.join(" ")} onClick={onClick} disabled={disabled}>
      {children}
    </button>
  );
}

Object.assign(window, { StatusBadge, RiskTag, AutonomyPill, Btn, Icon, STATE_FAMILY });