/* =========================================================
   COGNERYS — App root
   ========================================================= */

const LS_KEY = "cognerys.state.v1";
const ROUTES = new Set(["home", "research", "writing", "services", "cases", "about", "contact"]);

function readUrlRoute() {
  try {
    const params = new URLSearchParams(window.location.search);
    const queryRoute = params.get("route");
    if (ROUTES.has(queryRoute)) return queryRoute;

    const hashRoute = window.location.hash.replace(/^#\/?/, "");
    if (ROUTES.has(hashRoute)) return hashRoute;
  } catch {}
  return null;
}

function readState() {
  const def = window.__TWEAKS_DEFAULTS || { theme: "light" };
  try {
    const saved = JSON.parse(localStorage.getItem(LS_KEY) || "{}");
    const params = new URLSearchParams(window.location.search);
    const theme = params.get("theme");
    const requestedTheme = theme === "dark" || theme === "light" ? { theme } : {};
    return { ...def, ...saved, ...requestedTheme };
  } catch { return def; }
}

function applyRoot({ theme }) {
  const root = document.documentElement;
  root.classList.toggle("dark", theme === "dark");
}

function App() {
  const [state, setStateObj] = React.useState(readState);
  const [route, setRouteRaw] = React.useState(() => {
    const routeFromUrl = readUrlRoute();
    if (routeFromUrl) return routeFromUrl;
    try {
      const savedRoute = localStorage.getItem("cognerys.route");
      return ROUTES.has(savedRoute) ? savedRoute : "home";
    } catch { return "home"; }
  });
  const [essayId, setEssayId] = React.useState(null);
  const [tweaksVisible, setTweaksVisible] = React.useState(false);
  const [tweaksHostEnabled, setTweaksHostEnabled] = React.useState(false);

  // Apply on mount + on every change
  React.useEffect(() => {
    applyRoot(state);
    try { localStorage.setItem(LS_KEY, JSON.stringify(state)); } catch {}
  }, [state]);

  React.useEffect(() => {
    try { localStorage.setItem("cognerys.route", route); } catch {}
    window.scrollTo({ top: 0, behavior: "auto" });
  }, [route]);

  const setState = (key, value) => {
    setStateObj(prev => {
      const next = { ...prev, [key]: value };
      // Persist to host for tweak-mode
      try {
        window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [key]: value } }, "*");
      } catch {}
      return next;
    });
  };

  const setRoute = (r) => {
    setEssayId(null);
    setRouteRaw(r);
  };

  // Tweaks host protocol
  React.useEffect(() => {
    function onMsg(e) {
      const d = e.data || {};
      if (d.type === "__activate_edit_mode")   setTweaksVisible(true);
      if (d.type === "__deactivate_edit_mode") setTweaksVisible(false);
    }
    window.addEventListener("message", onMsg);
    // Announce availability
    try {
      window.parent.postMessage({ type: "__edit_mode_available" }, "*");
      setTweaksHostEnabled(true);
    } catch {}
    return () => window.removeEventListener("message", onMsg);
  }, []);

  // If no host (standalone), still allow a floating "Tweaks" trigger
  const openEssay = (id) => { setEssayId(id); setRouteRaw("essay"); };

  let page;
  if (route === "home")      page = <Home setRoute={setRoute} />;
  else if (route === "writing") page = <PageWriting setRoute={setRoute} openEssay={openEssay} />;
  else if (route === "essay")   page = <PageEssay id={essayId} back={() => setRoute("writing")} />;
  else if (route === "research") page = <PageResearch />;
  else if (route === "services") page = <PageServices setRoute={setRoute} />;
  else if (route === "cases")    page = <PageCases />;
  else if (route === "about")    page = <PageAbout />;
  else if (route === "contact")  page = <PageContact />;
  else                           page = <Home variant={state.homeVariant} setRoute={setRoute} />;

  return (
    <div className="app" data-route={route} data-screen-label={`Cognerys / ${route}`}>
      <TopNav
        route={route === "essay" ? "writing" : route}
        setRoute={setRoute}
        theme={state.theme}
        setTheme={(t) => setState("theme", t)}
      />
      <main>{page}</main>
      <Footer setRoute={setRoute} route={route === "essay" ? "writing" : route} />
      <Tweaks
        state={state}
        setState={setState}
        visible={tweaksVisible}
        onClose={() => {
          setTweaksVisible(false);
          try { window.parent.postMessage({ type: "__edit_mode_deactivated_by_child" }, "*"); } catch {}
        }}
      />
    </div>
  );
}

// Apply saved state immediately to avoid FOUC
applyRoot(readState());

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