/* ===========================================================
   Reiktable — App shell (nav, routing, settings) + mount
   =========================================================== */
(function () {
  const { useState, useEffect } = React;

  const NAV = [
    { group: "Table", items: [
      { k: "dashboard", label: "Dashboard", icon: "grid", kbd: "1" },
      { k: "characters", label: "Characters", icon: "users", kbd: "2" },
      { k: "rules", label: "Rulebooks", icon: "book", kbd: "3" },
      { k: "dice", label: "Dice & Tests", icon: "dice", kbd: "4" },
    ] },
    { group: "Game", items: [
      { k: "combat", label: "Combat", icon: "swords" },
      { k: "bestiary", label: "Bestiary", icon: "skull" },
      { k: "journal", label: "Journal", icon: "journal" },
      { k: "npcs", label: "NPCs", icon: "users" },
      { k: "quests", label: "Quests & Timeline", icon: "flag" },
    ] },
    { group: "Assistant", items: [
      { k: "ai", label: "AI Loremaster", icon: "sparkles" },
    ] },
  ];
  const TITLES = {
    dashboard: "Dashboard", characters: "Characters", rules: "Rulebooks", dice: "Dice & Tests",
    combat: "Combat", bestiary: "Bestiary", journal: "Journal", npcs: "NPCs", quests: "Quests", ai: "AI Loremaster",
  };

  function App() {
    const [s] = window.useStore();
    const [view, setView] = useState("dashboard");
    const [param, setParam] = useState(null);
    const [menu, setMenu] = useState(false);
    const [settings, setSettings] = useState(false);

    function go(v, p = null) { setView(v); setParam(p); setMenu(false); }
    window.go = go;

    useEffect(() => {
      const h = e => {
        if (e.target.matches("input,textarea,select")) return;
        const item = NAV[0].items.find(i => i.kbd === e.key);
        if (item) go(item.k);
      };
      window.addEventListener("keydown", h); return () => window.removeEventListener("keydown", h);
    }, []);

    const counts = { characters: s.characters.length, npcs: (s.npcs || []).length, rules: (s.library || []).length };

    return (
      <div className="shell">
        <div className={cls("scrim", menu && "on")} onClick={() => setMenu(false)}></div>
        <aside className={cls("side", menu && "open")}>
          <div className="brand">
            <div className="mark"><Icon name="shield" size={19} /></div>
            <div><b>Reiktable</b><small>{(s.campaign?.name || "Campaign").slice(0, 22)}</small></div>
          </div>
          <nav className="nav">
            {NAV.map(grp => (
              <div key={grp.group} style={{ marginBottom: 6 }}>
                <div className="nlabel">{grp.group}</div>
                {grp.items.map(it => (
                  <button key={it.k} className={cls("nav-i", view === it.k && "on")} onClick={() => go(it.k)}>
                    <Icon name={it.icon} size={17} />{it.label}
                    {counts[it.k] != null && counts[it.k] > 0 ? <span className="ct">{counts[it.k]}</span> : it.kbd ? <span className="kbd">{it.kbd}</span> : null}
                  </button>
                ))}
              </div>
            ))}
          </nav>
          <div className="sfoot">
            <div className="ava sm" style={{ background: "var(--raise)", color: "var(--cyan)" }}>{window.initials(s.campaign?.gm || "GM")}</div>
            <div className="grow" style={{ minWidth: 0 }}><div style={{ fontSize: 13, fontWeight: 500 }}>{s.campaign?.gm || "Game Master"}</div><div className="tx3 mono" style={{ fontSize: 10.5 }}>local · session {s.campaign?.session}</div></div>
            <button className="btn icon sm ghost" onClick={() => setSettings(true)}><Icon name="settings" size={16} /></button>
          </div>
        </aside>

        <main className="main">
          <div className="topbar">
            <button className="btn icon ghost menu-btn" onClick={() => setMenu(true)}><Icon name="menu" size={18} /></button>
            <span className="crumb"><b>{TITLES[view]}</b></span>
            <div className="sp"></div>
            <Btn className="ghost sm" icon="sparkles" onClick={() => go("ai")}>Ask Loremaster</Btn>
            <Btn className="sm" icon="dice" onClick={() => go("dice")}>Roll</Btn>
          </div>

          {view === "dashboard" && <DashboardView go={go} />}
          {view === "characters" && <CharactersView param={param} setParam={setParam} />}
          {view === "rules" && <RulesView />}
          {view === "dice" && <DiceView />}
          {view === "combat" && <CombatView />}
          {view === "bestiary" && <BestiaryView />}
          {view === "journal" && <JournalView />}
          {view === "npcs" && <NpcsView />}
          {view === "quests" && <QuestsView />}
          {view === "ai" && <AIView />}
        </main>

        {settings && <SettingsModal s={s} onClose={() => setSettings(false)} />}
        <window.Toasts />
      </div>
    );
  }

  function SettingsModal({ s, onClose }) {
    const [, update] = window.useStore();
    const [confirmReset, setConfirmReset] = useState(false);
    const importRef = React.useRef();
    const c = s.campaign || {};
    return (
      <Modal title="Campaign Settings" icon="settings" onClose={onClose} footer={<Btn className="pri" onClick={onClose}>Done</Btn>}>
        <div className="eyebrow mb10">Campaign</div>
        <Field label="Name"><input className="input" value={c.name} onChange={e => update(st => { st.campaign.name = e.target.value; })} /></Field>
        <div className="grid g2 mt10">
          <Field label="System"><input className="input" value={c.system} onChange={e => update(st => { st.campaign.system = e.target.value; })} /></Field>
          <Field label="Current session"><input className="input num" value={c.session} onChange={e => update(st => { st.campaign.session = parseInt(e.target.value || 1); })} /></Field>
        </div>
        <div className="mt10"><Field label="GM name"><input className="input" value={c.gm} onChange={e => update(st => { st.campaign.gm = e.target.value; })} /></Field></div>
        <div className="mt10"><Field label="Tagline"><input className="input" value={c.blurb} onChange={e => update(st => { st.campaign.blurb = e.target.value; })} /></Field></div>

        <div className="divider"></div>
        <div className="eyebrow mb10">Data</div>
        <p className="tx3" style={{ fontSize: 13, lineHeight: 1.6, marginTop: 0 }}>Everything is stored locally in this browser. Export the campaign as a file to back it up or hand it to the group; rulebook PDFs stay on each device.</p>
        <div className="center g8 wrap mt10">
          <Btn icon="download" onClick={() => window.Store.exportJSON()}>Export campaign</Btn>
          <Btn icon="upload" onClick={() => importRef.current.click()}>Import campaign</Btn>
          <input ref={importRef} type="file" accept="application/json" style={{ display: "none" }}
            onChange={e => { if (e.target.files[0]) window.Store.importJSON(e.target.files[0]).then(() => { window.toast("Campaign imported", "grn"); onClose(); }).catch(() => window.toast("Invalid file", "red")); }} />
          <div className="sp"></div>
          <Btn className="danger" icon="refresh" onClick={() => setConfirmReset(true)}>Reset to demo</Btn>
        </div>
        <div className="divider"></div>
        <p className="tx3" style={{ fontSize: 12, lineHeight: 1.6 }}>
          <b className="tx2">Going live for the group:</b> this build runs entirely on your machine (one browser). To let everyone edit the same data in real time, it needs hosting with a shared backend — that's the next step when you're ready. For now, share via Export/Import.
        </p>
        {confirmReset && <Confirm title="Reset everything?" danger yes="Reset"
          body="This wipes your campaign and restores the demo data (Bertolt, Hans, the Schwarzwald Chronicle). Uploaded PDFs are kept. This cannot be undone."
          onYes={() => { window.Store.reset(); onClose(); }} onClose={() => setConfirmReset(false)} />}
      </Modal>
    );
  }

  ReactDOM.createRoot(document.getElementById("root")).render(<App />);
})();