/* Entry point — loads data, mounts app. */

const Root = () => {
  const [data, setData] = React.useState(null);
  const [err, setErr] = React.useState(null);
  const [tweaks, setTweak] = useTweaks(window.TweakDefaults);

  React.useEffect(() => {
    loadData().then(setData).catch(e => setErr(String(e)));
  }, []);

  // setTweaks accepts a partial object: {theme: 'dark', density: 'compact'}
  const setTweaks = (patch) => {
    Object.entries(patch).forEach(([k, v]) => setTweak(k, v));
  };

  if (err) return <div style={{padding: 40, color: "var(--seal)", fontFamily: "var(--serif-display)"}}>Failed to load codex: {err}</div>;
  if (!data) return (
    <div style={{padding: 80, textAlign: "center", fontFamily: "var(--serif-display)", fontStyle: "italic", color: "var(--ink-mute)"}}>
      Unsealing the codex…
    </div>
  );

  return (
    <>
      <App data={data} tweaks={tweaks} setTweaks={setTweaks} />
      <TweaksWiring tweaks={tweaks} setTweaks={setTweaks} />
    </>
  );
};

ReactDOM.createRoot(document.getElementById("app")).render(<Root />);