/* Tarot Battle UI Kit — the card itself (front, back, flippable) */

function TarotCardFront({ unit }) {
  return (
    <div className="tcard front">
      <div className="titlebar"><b>Tarot Battle</b></div>
      <div className="numeral"><MadInline m={unit.m} a={unit.a} d={unit.d} /></div>
      <div className="art" style={{ backgroundImage: `url('${unit.img}')` }} />
    </div>
  );
}

function TarotCardBack({ unit }) {
  const reg = window.TBABILITIES || {};
  const accent = ((window.TB_SUITS || {})[unit.arcana] || (window.TB_SUITS || {}).major || { color: "var(--rws-gold)" }).color;
  const abils = (unit.abilities || []).slice(0, 2);
  return (
    <div className="tcard back">
      <div className="v2b">
        <div className="v2b-name"><b>{unit.name}</b><span>{unit.type.replace(" Unit", "")}</span></div>
        {unit.mechanic && <div className="v2b-mech" style={{ color: accent, borderColor: accent }}>{unit.mechanic}</div>}
        <div className="v2b-stats">
          <span className="s"><i>M</i>{unit.m}</span><span className="s"><i>A</i>{unit.a}</span><span className="s"><i>D</i>{unit.d}</span>
          {unit.special && <span className="v2b-sp"><i>{unit.special.label}</i><em style={{ color: accent }}>{unit.special.value}</em></span>}
        </div>
        <div className="v2b-ab">
          {abils.map((ab, i) => (
            <div className={"v2b-row t-" + (ab.type || "passive") + (reg[ab.k] ? " live" : "")} key={i}>
              <b>{ab.k}{ab.cost ? " · " + ab.cost : ""}</b>
              <p>{ab.t.length > 104 ? ab.t.slice(0, 101) + "…" : ab.t}</p>
            </div>
          ))}
          {(unit.abilities || []).length > 2 && <div className="v2b-more">+{unit.abilities.length - 2} more…</div>}
        </div>
        {unit.resonance && <div className="v2b-res" style={{ color: accent, borderColor: accent }}>⟳ +{unit.resonance.with}</div>}
      </div>
    </div>
  );
}

/* Flippable card. `flipped` can be controlled or left internal.
   A ResizeObserver writes the card's pixel width to --cw so internals scale. */
function TarotCard({ unit, flipped, onToggle, flippable = true }) {
  const [internal, setInternal] = React.useState(false);
  const ref = React.useRef(null);
  const isFlipped = flipped === undefined ? internal : flipped;
  const toggle = () => {
    if (!flippable) return;
    onToggle ? onToggle() : setInternal((v) => !v);
  };
  React.useLayoutEffect(() => {
    const el = ref.current;
    if (!el) return;
    const set = () => el.style.setProperty("--cw", el.clientWidth + "px");
    set();
    const ro = new ResizeObserver(set);
    ro.observe(el);
    return () => ro.disconnect();
  }, []);
  return (
    <div ref={ref} className={"flip" + (isFlipped ? " flipped" : "")} onClick={toggle}>
      <div className="flip-inner">
        <div className="flip-face f"><TarotCardFront unit={unit} /></div>
        <div className="flip-face b"><TarotCardBack unit={unit} /></div>
      </div>
    </div>
  );
}

Object.assign(window, { TarotCard, TarotCardFront, TarotCardBack });