/* The Whole Table — app shell, routing, contrast mode, tweaks. Babel JSX. */

const { useState: useAppState, useEffect: useAppEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "masthead": "centered",
  "homeHero": "full",
  "profileStyle": "bars",
  "postLayout": "aside",
  "typeScale": "editorial"
}/*EDITMODE-END*/;

function Header({ route, go, hc, setHc, t }) {
  const nav = [
    { k: "home", label: "Home" },
    { k: "browse", label: "The Index" },
    { k: "method", label: "Method" },
  ];
  function navTo(k) {
    if (k === "method") go("post", "essay-rating");
    else go(k);
  }
  const active = (k) =>
    (k === "home" && route.screen === "home") ||
    (k === "browse" && route.screen === "browse") ||
    (k === "method" && route.screen === "post" && route.postId === "essay-rating");

  return (
    <header className={"site-head mh-" + (t.masthead || "centered")}>
      <div className="head-inner">
        <Wordmark onClick={() => go("home")} size="md" />
        <nav className="site-nav" aria-label="Primary">
          {nav.map((n) => (
            <button key={n.k} className={"nav-link" + (active(n.k) ? " active" : "")}
              onClick={() => navTo(n.k)}>{n.label}</button>
          ))}
          <a className="nav-link" href="/gastronomy" style={{ textDecoration: "none" }}>Gastronomy</a>
        </nav>
        <button className={"contrast-toggle" + (hc ? " on" : "")} onClick={() => setHc(!hc)}
          aria-pressed={hc} title="High-contrast reading mode">
          <span className="ct-dot" aria-hidden="true" />
          <span className="ct-label">{hc ? "High contrast: on" : "High contrast"}</span>
        </button>
      </div>
    </header>
  );
}

function Footer({ go }) {
  return (
    <footer className="site-foot">
      <div className="foot-inner">
        <div className="foot-brand">
          <Wordmark onClick={() => go("home")} size="sm" />
          <p>Travels in taste, place, and access. Written by Sophia Chan.</p>
        </div>
        <nav className="foot-nav">
          <button onClick={() => go("home")}>Home</button>
          <button onClick={() => go("browse")}>The Index</button>
          <button onClick={() => go("post", "essay-rating")}>Method</button>
          <a href="/gastronomy">What is gastronomy?</a>
          <a href="/">sophiachan.ca {"\u2197"}</a>
        </nav>
        <p className="foot-fine">Every entry rates access in plain language. Found something out of date? It gets corrected.</p>
      </div>
    </footer>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const [route, setRoute] = useAppState(() => {
    try {
      const saved = JSON.parse(localStorage.getItem("twt-route") || "null");
      if (saved && saved.screen) return saved;
    } catch (e) {}
    return { screen: "home", postId: null };
  });
  const [hc, setHc] = useAppState(() => {
    const stored = localStorage.getItem("twt-hc");
    if (stored !== null) return stored === "1";
    return window.matchMedia("(prefers-contrast: more)").matches;
  });

  useAppEffect(() => {
    localStorage.setItem("twt-route", JSON.stringify(route));
    // scroll to top of content on route change (no scrollIntoView)
    const el = document.querySelector(".app-scroll");
    if (el) el.scrollTop = 0;
    window.scrollTo(0, 0);
  }, [route.screen, route.postId]);

  useAppEffect(() => {
    document.documentElement.classList.toggle("hc", hc);
    localStorage.setItem("twt-hc", hc ? "1" : "0");
  }, [hc]);

  function go(screen, postId = null) { setRoute({ screen, postId }); }
  function onOpen(postId) { setRoute({ screen: "post", postId }); }

  return (
    <div className={"app ts-" + (t.typeScale || "editorial")}>
      <Header route={route} go={go} hc={hc} setHc={setHc} t={t} />

      <div className="app-scroll">
        {route.screen === "home" && <Home t={t} onOpen={onOpen} go={go} />}
        {route.screen === "browse" && <Browse t={t} onOpen={onOpen} go={go} />}
        {route.screen === "post" && <Post t={t} id={route.postId} onOpen={onOpen} go={go} />}
        <Footer go={go} />
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Masthead" />
        <TweakRadio label="Layout" value={t.masthead}
          options={["centered", "left", "stacked"]}
          onChange={(v) => setTweak("masthead", v)} />

        <TweakSection label="Home" />
        <TweakRadio label="Hero" value={t.homeHero}
          options={["full", "split", "type"]}
          onChange={(v) => setTweak("homeHero", v)} />

        <TweakSection label="Post page" />
        <TweakRadio label="Profile style" value={t.profileStyle}
          options={["bars", "dots", "number"]}
          onChange={(v) => setTweak("profileStyle", v)} />
        <TweakRadio label="Body layout" value={t.postLayout}
          options={["aside", "inline"]}
          onChange={(v) => setTweak("postLayout", v)} />

        <TweakSection label="Typography" />
        <TweakRadio label="Scale" value={t.typeScale}
          options={["editorial", "compact"]}
          onChange={(v) => setTweak("typeScale", v)} />
      </TweaksPanel>
    </div>
  );
}

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