/* Tarot Battle UI Kit — CardZoom: full-card inspect overlay (Gwent-style).
   Reused by the board (live), codex, deck, and starter picker (static).
   - `unit` may be a catalog unit (TB_UNITS entry) or a live board unit
     (has cardId, hp, statuses).
   - `state` (optional) enables the live face: HP, effective stats, statuses. */

function KeywordTag({ term, children }) {
  const def = (window.TB_GLOSSARY && window.TB_GLOSSARY.KEYWORD[(term || "").toLowerCase()]) || null;
  if (!def) return <span className="cz-tag">{children}</span>;
  return <Tooltip label={def}><span className="cz-tag has-def">{children}</span></Tooltip>;
}

function abilityMeta(k) {
  const reg = (window.TBABILITIES || {})[k];
  if (!reg) return { kind: "Lore", term: null };
  if (reg.active) return { kind: "Active", term: "active", cost: reg.active.cost, range: reg.active.range, target: reg.active.target, oncePerGame: reg.active.oncePerGame };
  if (reg.aura) return { kind: "Aura", term: "aura" };
  if (reg.passive) return { kind: "Passive", term: "passive" };
  return { kind: "Triggered", term: null };
}

function CardZoom({ unit, state, onClose }) {
  if (!unit) return null;
  const cat = (window.TB_UNITS || []).find((u) => u.id === (unit.cardId || unit.id)) || unit;
  const live = !!(state && unit.cardId);                 // a real board unit inside a match
  const E = window.TBEngine;
  const eff = live ? E.effective(state, unit) : null;
  const base = { m: cat.m, a: cat.a, d: cat.d };
  const statuses = (unit.statuses || []);
  const ST = (window.TB_GLOSSARY || {}).STATUS || {};

  const stat = (label, baseV, effV, cls) => {
    const delta = effV - baseV;
    return (
      <div className={"cz-stat " + cls}>
        <span className="k">{label}</span>
        <span className="v">{effV}{delta ? <span className={"d " + (delta > 0 ? "up" : "dn")}>{delta > 0 ? "+" + delta : delta}</span> : null}</span>
      </div>
    );
  };

  return (
    <div className="modal-scrim cz-scrim" onClick={onClose}>
      <div className="cz" onClick={(e) => e.stopPropagation()}>
        <button className="x" onClick={onClose}><Icon name="X" size={20} /></button>
        <div className="cz-card">
          <div style={{ aspectRatio: "70/130", width: 230 }}>
            <TarotCard unit={cat} flippable={false} flipped={false} />
          </div>
        </div>
        <div className="cz-info">
          <div className="cz-name">{cat.name}</div>
          <div className="cz-sub">
            <SuitMark arcana={cat.arcana} />
            <span className="type-tag">{cat.type}</span>
            <RoleTag role={cat.role} />
          </div>

          {live ? (
            <React.Fragment>
              <div className="cz-hp">
                <span className="lbl">Health</span><HealthPips value={unit.hp} max={unit.maxHp} />
                <span className="num">{unit.hp}/{unit.maxHp}</span>
              </div>
              <div className="cz-stats">
                {stat("Move", base.m, eff.mv, "m")}
                {stat("Atk", base.a, eff.atk, "a")}
                {stat("Def", base.d, eff.def, "d")}
              </div>
              {statuses.length > 0 && (
                <div className="cz-statuses">
                  {statuses.map((s, i) => {
                    const meta = ST[s.k] || { label: s.k, icon: "Circle", tone: "neutral", desc: "" };
                    return (
                      <Tooltip key={i} label={meta.desc + (s.turns ? ` (${s.turns} turn${s.turns > 1 ? "s" : ""} left)` : "")}>
                        <span className={"cz-status " + meta.tone}><Icon name={meta.icon} size={13} /> {meta.label}</span>
                      </Tooltip>
                    );
                  })}
                </div>
              )}
            </React.Fragment>
          ) : (
            <div className="cz-stats">
              {stat("Move", base.m, base.m, "m")}
              {stat("Atk", base.a, base.a, "a")}
              {stat("Def", base.d, base.d, "d")}
            </div>
          )}

          <div className="cz-ablock">
            <div className="cz-ahead">Abilities</div>
            {(cat.abilities || []).map((ab, i) => {
              const m = abilityMeta(ab.k);
              const used = live && m.oncePerGame && (unit.usedOnce || []).includes(ab.k);
              return (
                <div className={"cz-ability" + (used ? " used" : "")} key={i}>
                  <div className="cz-ak">
                    <b>{ab.k}</b>
                    <KeywordTag term={m.term}>{m.kind}</KeywordTag>
                    {m.kind === "Active" && <span className="cz-cost">{m.cost} AP{m.oncePerGame ? <KeywordTag term="once per game"> · once/game</KeywordTag> : null}{typeof m.range === "number" && m.range > 0 ? ` · range ${m.range}` : ""}</span>}
                    {used && <span className="cz-used">used</span>}
                  </div>
                  <div className="cz-at">{ab.t}</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CardZoom });