// Hoofdapp — laadt content van /api/content, rendert comic-home of spelletjes.

function useContent() {
  const [data, setData] = React.useState(null);
  const [err, setErr] = React.useState(null);
  React.useEffect(() => {
    fetch("/api/content")
      .then(r => r.ok ? r.json() : Promise.reject(new Error("Kan content niet laden")))
      .then(setData)
      .catch(e => setErr(e.message));
  }, []);
  return [data, err];
}

function useConfig() {
  const [cfg, setCfg] = React.useState({ turnstileSiteKey: null, captchaEnabled: false });
  React.useEffect(() => {
    fetch("/api/config").then(r => r.json()).then(setCfg).catch(() => {});
  }, []);
  return cfg;
}

function App() {
  const [content, err] = useContent();
  const cfg = useConfig();
  const [page, setPage] = React.useState("home");
  const [fontScale, setFontScaleState] = React.useState(() => loadFontScale());
  const [showDisclaimer, setShowDisclaimer] = React.useState(false);

  const setFontScale = React.useCallback((v) => {
    setFontScaleState(v);
    saveFontScale(v);
  }, []);

  React.useEffect(() => {
    if (content?.capabilities?.siteTitle) document.title = content.capabilities.siteTitle;
  }, [content]);

  React.useEffect(() => {
    if (content?.capabilities?.disclaimerEnabled && page === "home") {
      setShowDisclaimer(true);
    }
  }, [content, page]);

  function dismissDisclaimer() {
    setShowDisclaimer(false);
  }

  if (err) return <div className="app-loader" style={{ color: "#1A1A1A" }}>⚠️ {err}</div>;
  if (!content) return <div className="app-loader">🌶️ Laden…</div>;

  const accent = content.hero?.accentKleur || "#E63946";
  const scaleProps = { fontScale, setFontScale };
  const caps = content.capabilities || {};

  return (
    <div className="full-host" style={{ zoom: fontScale }}>
      {showDisclaimer && (
        <OpbouwDisclaimer
          titel={caps.disclaimerTitel}
          tekst={caps.disclaimerTekst}
          onClose={dismissDisclaimer}
        />
      )}
      {page === "home" && (
        <ComicBookHome content={content} config={cfg} onNavigate={setPage} {...scaleProps} />
      )}
      {page === "spelletjes" && (
        <SpelletjesPagina
          games={content.games.filter(g => g.enabled !== false)}
          onBack={() => setPage("home")}
          accent={accent}
          {...scaleProps}
        />
      )}
      {page === "over" && (
        <OverPagina
          over={content.over}
          hero={content.hero}
          caps={content.capabilities}
          onBack={() => setPage("home")}
          accent={accent}
          {...scaleProps}
        />
      )}
      {page === "straffer-historiek" && (
        <StrafferHistoriekPagina
          onBack={() => setPage("home")}
          {...scaleProps}
        />
      )}
    </div>
  );
}

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