// App root: handles routing, language state, search state

function App() {
  // Read view from hash for prev/next nav. Default = archive.
  const [view, setView]   = React.useState(() => parseHash().view);
  const [openIso, setOpenIso] = React.useState(() => parseHash().iso);
  const [lang, setLang]   = React.useState(() => localStorage.getItem("adm:lang") || "cht");
  const [query, setQuery] = React.useState("");

  function parseHash() {
    const h = window.location.hash.replace(/^#/, "");
    if (h.startsWith("entry/")) return { view: "entry", iso: h.slice("entry/".length) };
    if (h === "about") return { view: "about", iso: null };
    if (h === "admin") return { view: "admin", iso: null };
    return { view: "archive", iso: null };
  }

  // Sync body class for language fonts
  React.useEffect(() => {
    document.body.classList.toggle("lang-eng", lang === "eng");
    localStorage.setItem("adm:lang", lang);
    document.documentElement.lang = lang === "cht" ? "zh-Hant" : "en";
  }, [lang]);

  // Hash sync
  React.useEffect(() => {
    let h = "";
    if (view === "entry" && openIso) h = "entry/" + openIso;
    else if (view === "about") h = "about";
    else if (view === "admin") h = "admin";
    if (("#" + h) !== window.location.hash) window.location.hash = h;
  }, [view, openIso]);

  React.useEffect(() => {
    const onHash = () => {
      const p = parseHash();
      setView(p.view);
      setOpenIso(p.iso);
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  // Nav helpers
  function navTo(v) {
    if (v === "archive") { setView("archive"); setOpenIso(null); }
    else if (v === "about") setView("about");
    else if (v === "admin") setView("admin");
  }
  function openEntry(iso) {
    setView("entry");
    setOpenIso(iso);
  }

  return (
    <>
      <TopBar lang={lang} setLang={setLang} query={query} setQuery={setQuery} onNav={navTo} view={view} />
      {view === "archive" && <ArchiveView lang={lang} query={query} onOpen={openEntry} />}
      {view === "entry"   && <EntryView   lang={lang} iso={openIso} onNav={navTo} onOpen={openEntry} />}
      {view === "about"   && <AboutView    lang={lang} />}
      {view === "admin"   && <AdminView    lang={lang} />}
      <BBFoot lang={lang} />
    </>
  );
}

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