// ── WiseTip Site Router ───────────────────────────────────

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "dark": true,
  "lang": "en",
  "memberView": false
}/*EDITMODE-END*/;

const PAGES = {
  home:       { label: "Home" },
  archive:    { label: "Archive" },
  article:    { label: "Article" },
  activities: { label: "Activities" },
  catalog:    { label: "Activities by category" },
  activitydetail: { label: "Activity" },
  edition:    { label: "Sample edition" },
  pack:       { label: "Pack" },
  signup:     { label: "Join free" },
  audiobooks: { label: "Audio · Podcast" },
  tailor:     { label: "TailorAudioBooks" },
  packs:      { label: "Packs" },
  membership: { label: "Membership" },
  profile:    { label: "My library" },
  seasonal:   { label: "Seasonal" },
  workshops:  { label: "Workshops" },
  schools:    { label: "Schools" },
  sponsors:   { label: "Sponsors" },
  story:      { label: "Our story" },
  about:      { label: "About / Press / Contact / Legal" },
  notfound:   { label: "Not found" },
};

function App() {
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const dark = tw.dark, lang = tw.lang, isMember = tw.memberView;
  const setDark = (v) => setTweak("dark", v);
  const setLang = (v) => setTweak("lang", v);
  const setIsMember = (v) => setTweak("memberView", v);
  const theme = dark ? WS_DARK : WS_LIGHT;

  // hash-based routing — survives refresh
  const [page, setPage] = useState("home");
  const [pageData, setPageData] = useState(null);

  useEffect(() => {
    const parse = () => {
      const h = (window.location.hash || "#home").slice(1);
      const [p, q] = h.split("?");
      if (PAGES[p]) {
        setPage(p);
        if (q) {
          const params = {};
          q.split("&").forEach(kv => { const [k, v] = kv.split("="); params[k] = isNaN(+v) ? v : +v; });
          setPageData(params);
        } else setPageData(null);
      } else {
        // unknown route — surface the 404 page with the attempted slug
        setPage("notfound");
        setPageData({ slug: h });
      }
    };
    parse();
    window.addEventListener("hashchange", parse);
    return () => window.removeEventListener("hashchange", parse);
  }, []);

  const nav = (p, data) => {
    const query = data ? "?" + Object.entries(data).map(([k,v]) => `${k}=${v}`).join("&") : "";
    window.location.hash = `#${p}${query}`;
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  // inject fonts once
  useEffect(() => {
    const id = "ws-fonts";
    if (!document.getElementById(id)) {
      const s = document.createElement("style");
      s.id = id; s.innerHTML = WS_FONT_CSS;
      document.head.appendChild(s);
    }
  }, []);

  // sync body bg
  useEffect(() => {
    document.body.style.background = theme.bg;
    document.body.style.color = theme.text;
    document.body.style.transition = "background .4s ease, color .4s ease";
  }, [theme]);

  const shared = { theme, dark, lang, isMember, setIsMember, nav, pageData, setTweak };

  return (
    <div data-screen-label={`WiseTip · ${PAGES[page].label}`} style={{
      background: theme.bg, color: theme.text, minHeight:"100vh",
    }}>
      <Nav theme={theme} dark={dark} lang={lang} setLang={setLang} setDark={setDark} nav={nav} currentPage={page}/>

      <main key={page}>
        {page === "home"       && <Home {...shared}/>}
        {page === "archive"    && <Archive {...shared}/>}
        {page === "article"    && <Article {...shared}/>}
        {page === "activities" && <Activities {...shared}/>}
        {page === "catalog"    && <ActivityCatalog {...shared}/>}
        {page === "activitydetail" && <ActivityDetail {...shared}/>}
        {page === "edition"    && <FullEdition {...shared}/>}
        {page === "pack"       && <PackDetail {...shared}/>}
        {page === "signup"     && <Signup {...shared}/>}
        {page === "audiobooks" && <Audiobooks {...shared}/>}
        {page === "tailor"     && <TailorPage {...shared}/>}
        {page === "packs"      && <Packs {...shared}/>}
        {page === "membership" && <MembershipPage {...shared}/>}
        {page === "profile"    && <Profile {...shared}/>}
        {page === "seasonal"   && <Seasonal {...shared}/>}
        {page === "workshops"  && <Workshops {...shared}/>}
        {page === "schools"    && <Schools {...shared}/>}
        {page === "sponsors"   && <Sponsors {...shared}/>}
        {page === "story"      && <StoryPage {...shared}/> }
        {page === "about"      && <AboutPage {...shared}/>}
        {page === "notfound"   && <NotFound {...shared}/>}
      </main>

      {/* Footer: rendered here for pages that don't self-include it */}
      {!["home","membership","profile","seasonal","workshops","schools","sponsors","about","notfound","tailor","story"].includes(page) && (
        <Footer theme={theme} dark={dark} lang={lang} nav={nav}/>
      )}

      {/* Tweaks */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Mode" />
        <TweakRadio label="Theme" value={dark ? "dark" : "light"}
          options={["dark", "light"]} onChange={(v)=>setDark(v==="dark")}/>

        <TweakSection label="Language" />
        <TweakRadio label="Locale" value={lang}
          options={["en", "es"]} onChange={setLang}/>

        <TweakSection label="Reader state" />
        <TweakRadio label="Tier" value={isMember ? "WiseTip+" : "Free"}
          options={["Free", "WiseTip+"]} onChange={(v)=>setIsMember(v === "WiseTip+")}/>

        <TweakSection label="Go to page" />
        <div style={{ display:"flex", flexDirection:"column", gap: 3 }}>
          {Object.entries(PAGES).map(([id, p]) => (
            <button key={id} onClick={() => nav(id)} style={{
              background: page === id ? "rgba(125,190,90,.16)" : "transparent",
              border:`1px solid ${page === id ? "#9DC872" : "rgba(255,255,255,.12)"}`,
              color: page === id ? "#9DC872" : "#F0EBE0", padding:"5px 10px", borderRadius: 6,
              fontSize:".74rem", textAlign:"left", cursor:"pointer",
            }}>↳ {p.label}</button>
          ))}
        </div>
      </TweaksPanel>
    </div>
  );
}

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