// pdx-app.jsx — Pokédex device shell: topbar, nav, screen, footer, tweaks.
const { useState: useSA, useEffect: useEA } = React;

const CASES = [
  { v: "red", label: "Classic Red", sw: "#cc0000" },
  { v: "blue", label: "Kanto Blue", sw: "#1f6feb" },
  { v: "amber", label: "Hoenn Amber", sw: "#e8a31e" },
  { v: "slate", label: "Steel Slate", sw: "#3a4250" },
];

const PDX_DEFAULTS = /*EDITMODE-BEGIN*/{
  "case": "red",
  "screen": "green",
  "density": "regular",
  "motion": 100,
  "sprite": 100,
  "holo": true
}/*EDITMODE-END*/;

function DeviceNav({ tab, setTab }) {
  const tabs = [
    ["fusions", "Fusions", <window.IcoGrid s={15} />],
    ["teams", "Trainer Teams", <window.IcoUsers s={15} />],
    ["guide", "Game Guide", <window.IcoBook s={15} />],
  ];
  return (
    <nav className="dnav">
      {tabs.map(([k, l, ic]) => (
        <button key={k} className="dbtn" aria-current={tab === k} onClick={() => setTab(k)}>{ic}<span>{l}</span></button>
      ))}
    </nav>
  );
}

function App() {
  const [t, setTweak] = window.useTweaks(PDX_DEFAULTS);
  const [tab, setTab] = useSA("fusions");
  const [seen, mark] = window.useSeen();

  useEA(() => {
    const r = document.documentElement;
    r.dataset.case = t.case; r.dataset.screen = t.screen; r.dataset.density = t.density;
    r.style.setProperty("--motion", (t.motion / 100).toFixed(2));
    r.style.setProperty("--sprite", (t.sprite / 100).toFixed(2));
  }, [t.case, t.screen, t.density, t.motion, t.sprite]);

  return (
    <div className="pdx">
      <div className="device">
        <header className="topbar">
          <div className="lens-cluster">
            <div className="lens" aria-hidden="true" />
            <div className="lights" aria-hidden="true"><span className="light r" /><span className="light y" /><span className="light g" /></div>
          </div>
          <div className="wordmark">
            <span className="wm-1">Infinite Fusions</span>
            <span className="wm-2">Pokédex</span>
          </div>
          <div className="topbar-spacer" />
          <DeviceNav tab={tab} setTab={setTab} />
          <div className="lcd" title="Fusions registered this session">
            <span className="lcd-k">Seen</span>
            <span className="lcd-v">{String(seen.size).padStart(3, "0")}</span>
          </div>
        </header>

        <div className="screen">
          <div className="screen-inner" key={tab}>
            {tab === "fusions" && <window.FusionsView seen={seen} mark={mark} holo={t.holo} />}
            {tab === "teams" && <window.TeamsView />}
            {tab === "guide" && <window.GuideView />}
          </div>
        </div>

        <div className="dfoot">
          <div className="dpad" aria-hidden="true" />
          <div className="grille" aria-hidden="true" />
          <span className="tag">v1 · {tab === "fusions" ? "Fusion Dex" : tab === "teams" ? "Gauntlet" : "Field Guide"}</span>
        </div>
      </div>

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Casing" />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
          {CASES.map((c) => (
            <button key={c.v} onClick={() => setTweak("case", c.v)}
              style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 10px", borderRadius: 9, cursor: "pointer",
                border: t.case === c.v ? "2px solid var(--glow,#2fe6b0)" : "1px solid rgba(255,255,255,.12)",
                background: "rgba(255,255,255,.04)", color: "#e8f3ee", font: "inherit", fontSize: 12, fontWeight: 600 }}>
              <span style={{ width: 16, height: 16, borderRadius: "50%", background: c.sw, boxShadow: "inset 0 0 0 2px rgba(255,255,255,.3)" }} />
              {c.label}
            </button>
          ))}
        </div>

        <window.TweakSection label="Screen" />
        <window.TweakRadio label="Phosphor tint" value={t.screen}
          options={[{ value: "green", label: "Green" }, { value: "blue", label: "Blue" }, { value: "amber", label: "Amber" }]}
          onChange={(v) => setTweak("screen", v)} />

        <window.TweakSection label="Display" />
        <window.TweakToggle label="Holo cards" value={t.holo} onChange={(v) => setTweak("holo", v)} />
        <window.TweakRadio label="Density" value={t.density}
          options={["compact", "regular", "comfy"]} onChange={(v) => setTweak("density", v)} />
        <window.TweakSlider label="Sprite scale" value={t.sprite} min={80} max={150} unit="%" onChange={(v) => setTweak("sprite", v)} />
        <window.TweakSlider label="Motion / glow" value={t.motion} min={0} max={150} unit="%" onChange={(v) => setTweak("motion", v)} />
      </window.TweaksPanel>
    </div>
  );
}

// ── Bootstrap: load REAL data, populate the globals the views read, then mount ──
const _root = ReactDOM.createRoot(document.getElementById("root"));
function BootError({ msg }) {
  return (
    <div className="pdx"><div className="device"><div className="screen"><div className="screen-inner">
      <div className="empty" style={{ padding: 48 }}><h3>Couldn't load the dex</h3><p>{msg}</p></div>
    </div></div></div></div>
  );
}
(async function boot() {
  try {
    const [fusions, teams] = await Promise.all([
      window.IF.loadSearchIndex(),
      window.IF.loadTeams(),
    ]);
    window.FUSIONS = fusions;
    window.MAP_TEAMS = [...teams].sort((a, b) => a.level - b.level);
    _root.render(<App />);
  } catch (e) {
    _root.render(<BootError msg={String(e && e.message || e)} />);
  }
})();