// Reaksiyoner — Republik-style magazine app
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#00AA00",
  "headerSticky": true
}/*EDITMODE-END*/;

function App() {
  const [route, setRoute] = useState({ view: "home" });
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    document.documentElement.style.setProperty("--primary", t.accent);
    document.documentElement.style.setProperty("--accent", t.accent);
  }, [t.accent]);

  useEffect(() => {
    document.documentElement.style.setProperty(
      "--header-position", t.headerSticky ? "sticky" : "relative"
    );
  }, [t.headerSticky]);

  useEffect(() => { window.scrollTo({ top: 0, behavior: "instant" }); }, [route]);

  const navigate = (r) => setRoute(r);
  const open = (id) => setRoute({ view: "article", id });

  return (
    <>
      <Header route={route} onNav={navigate} />
      {route.view === "home"    && <MagazineFront onOpen={open} />}
      {route.view === "feed"    && <FeedPage onOpen={open} />}
      {route.view === "dialog"  && <DialogPage onOpen={open} />}
      {route.view === "search"  && <SearchPage />}
      {route.view === "article" && <ArticlePage articleId={route.id} onOpen={open} onNav={navigate} />}
      <Footer onNav={navigate} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Renk">
          <TweakColor
            label="Aksan rengi (link & format)"
            value={t.accent}
            onChange={(v) => setTweak("accent", v)}
            options={["#00AA00", "#c4145c", "#E2562B", "#1a3d8f", "#020202"]}
          />
        </TweakSection>

        <TweakSection label="Düzen">
          <TweakToggle
            label="Sticky başlık"
            value={t.headerSticky}
            onChange={(v) => setTweak("headerSticky", v)}
          />
        </TweakSection>

        <TweakSection label="Gezinme">
          <TweakButton label="Magazin (anasayfa)" onClick={() => setRoute({ view: "home" })} />
          <TweakButton label="Akış" onClick={() => setRoute({ view: "feed" })} secondary />
          <TweakButton label="Diyalog" onClick={() => setRoute({ view: "dialog" })} secondary />
          <TweakButton label="Ara" onClick={() => setRoute({ view: "search" })} secondary />
          <TweakSelect
            label="Bir yazıya atla"
            value={route.view === "article" ? route.id : ""}
            onChange={(v) => v && setRoute({ view: "article", id: v })}
            options={[
              { value: "", label: "— seç —" },
              ...Object.values(ARTICLES).map(a => ({
                value: a.id,
                label: `${FORMATS[a.fmt].label} · ${a.title.slice(0, 38)}${a.title.length > 38 ? "…" : ""}`
              }))
            ]}
          />
        </TweakSection>
      </TweaksPanel>

      <style>{`
        .masthead { position: ${t.headerSticky ? "sticky" : "relative"}; }
      `}</style>
    </>
  );
}

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