/* Tarot Battle UI Kit — primitives */

/* Icon — renders a Lucide icon inline from the UMD `lucide` icon map.
   Each icon is ["svg", attrs, [[tag, attrs], ...]].
   (Lucide is a flagged substitution for the chrome icons the source lacked.) */
function tbCamel(attrs) {
  const out = {};
  for (const k in attrs) {
    const ck = k.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
    out[ck] = attrs[k];
  }
  return out;
}
function Icon({ name, size = 18, stroke = 1.75, style }) {
  const lib = (window.lucide && (window.lucide.icons || window.lucide)) || {};
  const node = lib[name];
  if (!node || !node[2]) return <span className="ic" style={{ width: size, height: size, ...style }} />;
  const children = node[2].map(([tag, attrs], i) =>
    React.createElement(tag, Object.assign({ key: i }, tbCamel(attrs)))
  );
  return (
    <span className="ic" style={Object.assign({ width: size, height: size }, style)}>
      <svg viewBox="0 0 24 24" width={size} height={size} fill="none"
           stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">
        {children}
      </svg>
    </span>
  );
}

function Btn({ kind = "ghost", icon, children, ...rest }) {
  return (
    <button className={"btn btn-" + kind} {...rest}>
      {icon && <Icon name={icon} size={16} />}
      {children}
    </button>
  );
}

/* The three MAD channels, big */
function MadChannels({ m, a, d }) {
  return (
    <div className="mad-channels">
      <div className="mad-ch m"><div className="k">Move</div><div className="n">{m}</div></div>
      <div className="mad-ch a"><div className="k">Atk</div><div className="n">{a}</div></div>
      <div className="mad-ch d"><div className="k">Def</div><div className="n">{d}</div></div>
    </div>
  );
}

/* Compact MAD readout for the card front */
function MadInline({ m, a, d }) {
  return (
    <div className="mad-inline">
      <span className="l">M·A·D</span>
      <span className="v">{m} · {a} · {d}</span>
    </div>
  );
}

function SuitMark({ arcana, withLabel }) {
  const s = window.TB_SUITS[arcana] || window.TB_SUITS.major;
  return (
    <span className="suit-chip">
      <span className="g" style={{ color: s.color }}>{s.glyph}</span>
      {withLabel !== false && s.label}
    </span>
  );
}

function AbilityList({ abilities }) {
  const reg = window.TBABILITIES || {};
  return (
    <div className="ability-list">
      {(abilities || []).map((ab, i) => {
        const live = !!reg[ab.k];
        return (
          <div className={"ability " + (live ? "live" : "preview") + (ab.type ? " t-" + ab.type : "")} key={i}>
            <div className="k">
              <span>{ab.k}</span>
              {live
                ? <span className="live-badge" title="Active in battle"><Icon name="Zap" size={11} /> in play</span>
                : <span className="preview-badge" title="Designed — not yet on the board"><Icon name="Eye" size={11} /> preview</span>}
            </div>
            {(ab.type || ab.cost) && <div className="ability-meta">{(ab.type || "").toUpperCase()}{ab.cost ? " · " + ab.cost : ""}</div>}
            <div className="t">{ab.t}</div>
          </div>
        );
      })}
    </div>
  );
}

/* Role badge — pulls the label from the engine role table */
function RoleTag({ role }) {
  const r = (window.TBROLES || {})[role];
  if (!r) return null;
  return <span className="role-tag">{r.label}</span>;
}

function HealthPips({ value, max }) {
  return (
    <div className="pips">
      {Array.from({ length: max }).map((_, i) => (
        <span key={i} className={"pip" + (i < value ? "" : " empty")} />
      ))}
    </div>
  );
}

Object.assign(window, { Icon, Btn, MadChannels, MadInline, SuitMark, AbilityList, RoleTag, HealthPips });