/* Tarot Battle UI Kit — app shell */
function App() {
  const [view, setView] = React.useState("home");
  const [selected, setSelected] = React.useState(null);
  const [query, setQuery] = React.useState("");
  const [account, setAccount] = React.useState(false);
  const [, bump] = React.useReducer((x) => x + 1, 0);

  const select = (u) => { setSelected(u); setView("detail"); };
  // re-render the shell when the profile changes (unlocks, wins, starter set)
  React.useEffect(() => {
    const on = () => bump();
    window.addEventListener("tb-profile", on);
    return () => window.removeEventListener("tb-profile", on);
  }, []);

  const started = window.TBProfile.isStarted();
  // first run, or entering the board before choosing a starter → starter draft.
  // (Deck is no longer a first-run gate — new players go straight to a battle.)
  const needStarter = !started && (view === "starter" || view === "board");

  return (
    <div className="app felt">
      <TopBar view={view} onNav={setView} query={query} onQuery={setQuery} onAccount={() => setAccount(true)} />
      <AccountModal open={account} onClose={() => setAccount(false)} />
      {needStarter && <StarterSelect onDone={() => setView("board")} />}
      {!needStarter && view === "starter" && <StarterSelect onDone={() => setView("board")} />}
      {!needStarter && view === "home" && <Home onNav={setView} onSelect={select} />}
      {!needStarter && view === "codex" && <Codex query={query} onSelect={select} />}
      {!needStarter && view === "detail" && selected && (
        <CardDetail unit={selected} onBack={() => setView("codex")}
          onDeck={() => setView("deck")} />
      )}
      {!needStarter && view === "deck" && <DeckBuilder />}
      {!needStarter && view === "board" && <BattleHub />}
      {!needStarter && view === "learn" && <Learn onNav={setView} />}
      {!needStarter && view === "rules" && <Rulebook />}
      <ToastHost />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);