/* Tarot Battle UI Kit — screens */

function TopBar({ view, onNav, query, onQuery, onAccount }) {
  const items = [
    { id: "home", label: "Play", icon: "Home" },
    { id: "codex", label: "Codex", icon: "LayoutGrid", alt: ["detail"] },
    { id: "deck", label: "Deck", icon: "Layers" },
    { id: "board", label: "Board", icon: "Swords" },
    { id: "rules", label: "Rules", icon: "BookOpen" }
  ];
  const isActive = (it) => view === it.id || (it.alt && it.alt.includes(view));
  return (
    <div className="topbar">
      <div className="brand" style={{ cursor: "pointer" }} onClick={() => onNav("home")}><span className="bar"><b>Tarot Battle</b></span></div>
      <div className="nav">
        {items.map((it) => (
          <button key={it.id} className={"nav-btn" + (isActive(it) ? " active" : "")} onClick={() => onNav(it.id)}>
            <Icon name={it.icon} size={15} /> {it.label}
          </button>
        ))}
      </div>
      <div className="spacer" />
      {(view === "codex" || view === "deck") && (
        <div className="search">
          <Icon name="Search" size={15} />
          <input value={query} onChange={(e) => onQuery(e.target.value)} placeholder="Search units…" />
        </div>
      )}
      <button className="nav-btn" title="Cloud save" onClick={onAccount} style={{ padding: "8px 10px" }}>
        <Icon name={window.TBCloud && window.TBCloud.isOn() ? "Cloud" : "CloudOff"} size={17} style={{ color: window.TBCloud && window.TBCloud.isOn() ? "var(--volt-green)" : "var(--fg-3)" }} />
      </button>
      <div className="turn-coin" title="Rank — The Emperor">IV</div>
    </div>
  );
}

const FILTERS = [
  { id: "all", label: "All Arcana" },
  { id: "major", label: "Major" },
  { id: "cups", label: "Cups" },
  { id: "swords", label: "Swords" },
  { id: "wands", label: "Wands" },
  { id: "pentacles", label: "Pentacles" }
];

function Codex({ onSelect, query }) {
  const [filter, setFilter] = React.useState("all");
  let units = window.TB_UNITS;
  if (filter !== "all") units = units.filter((u) => u.arcana === filter);
  if (query && query.trim()) {
    const q = query.toLowerCase();
    units = units.filter((u) => u.name.toLowerCase().includes(q) || u.type.toLowerCase().includes(q));
  }
  return (
    <div className="codex">
      <div className="codex-head">
        <div>
          <h1>The Codex</h1>
          <p>Every card of the deck is a unit. Browse the Arcana, study the M·A·D line, and read each unit's special abilities.</p>
        </div>
        <div style={{ color: "var(--fg-3)", fontSize: 13, fontFamily: "var(--font-numeric)" }}>{units.length} units</div>
      </div>
      <div className="filters">
        {FILTERS.map((f) => (
          <button key={f.id} className={"filter" + (filter === f.id ? " active" : "")} onClick={() => setFilter(f.id)}>
            {f.id !== "all" && <span style={{ color: filter === f.id ? "inherit" : (window.TB_SUITS[f.id] || {}).color }}>{(window.TB_SUITS[f.id] || {}).glyph}</span>}
            {f.label}
          </button>
        ))}
      </div>
      <div className="grid">
        {units.map((u) => (
          <div className="grid-card" key={u.id} onClick={() => onSelect(u)}>
            <div style={{ aspectRatio: "70/130" }}>
              <TarotCard unit={u} flippable={false} flipped={false} />
            </div>
            <div className="cap">
              <span className="nm">{u.name}</span>
              <span className="ty">{u.m}·{u.a}·{u.d}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function CardDetail({ unit, onBack, onDeck }) {
  const [flipped, setFlipped] = React.useState(false);
  return (
    <div className="detail">
      <div className="stage">
        <TarotCard unit={unit} flipped={flipped} onToggle={() => setFlipped((v) => !v)} />
        <button className="nav-btn" onClick={() => setFlipped((v) => !v)}>
          <Icon name="RefreshCw" size={14} /> Flip card
        </button>
      </div>
      <div className="info">
        <button className="nav-btn" style={{ paddingLeft: 0, marginBottom: 10 }} onClick={onBack}>
          <Icon name="ArrowLeft" size={15} /> Back to Codex
        </button>
        <h1>{unit.name}</h1>
        <div className="sub">
          <SuitMark arcana={unit.arcana} />
          <span className="type-tag">{unit.type}</span>
          <RoleTag role={unit.role} />
          {unit.numeral && <span style={{ color: "var(--fg-3)", fontFamily: "var(--font-numeric)", letterSpacing: ".1em" }}>{unit.numeral}</span>}
        </div>
        <div className="block-label" style={{ marginTop: 24 }}>M · A · D</div>
        <MadChannels m={unit.m} a={unit.a} d={unit.d} />
        {unit.mechanic && (
          <div className="v2-mech-row">
            <span className="v2-mech-badge">{unit.mechanic}</span>
            {unit.special && <span className="v2-mech-special"><i>{unit.special.label}</i> {unit.special.value}</span>}
          </div>
        )}
        <div className="block-label">Special Abilities</div>
        <AbilityList abilities={unit.abilities} />
        {unit.resonance && (
          <div className="v2-res-block">
            <div className="v2-res-h">⟳ Resonance · with {unit.resonance.with}</div>
            <div className="v2-res-t">{unit.resonance.effect}</div>
          </div>
        )}
        {unit.illustrative && (
          <div className="illus-flag"><Icon name="Info" size={13} /> Illustrative stats — not authored in the source prototype.</div>
        )}
        <div style={{ display: "flex", gap: 12, marginTop: 28 }}>
          <Btn kind="primary" icon="Layers" onClick={onDeck}>Add to Deck</Btn>
          <Btn kind="ghost" icon="ArrowLeft" onClick={onBack}>Back to Codex</Btn>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TopBar, Codex, CardDetail });