/* ============================================================
   app.jsx — Root + Router (v2 · 4 folders)
   ============================================================ */
function App() {
  const PAGES = ["cpr-archive", "cpr-flow", "prod-flow", "dist", "entity"];

  // hydrate localStorage with seed on first ever load so Export captures full structure
  useEffect(() => {
    const S = window.__SEED__;
    const pairs = [
      ["publishers_v6",        S.PUBLISHERS],
      ["apply_channels_v3",    S.APPLY_CHANNELS],
      ["external_forms_v3",    S.EXTERNAL_FORMS],
      ["operators_v5",         S.OPERATORS],
      ["platforms_v6",         S.PLATFORM_DETAILS],
      ["dist_docs_v3",         S.DIST_DOCS],
      ["entities_v4",          S.ENTITIES],
    ];
    pairs.forEach(([k, seed]) => {
      const key = `__mj_tbl_${k}__`;
      if (localStorage.getItem(key) == null) {
        try { localStorage.setItem(key, JSON.stringify(seed)); } catch {}
      }
    });
  }, []);

  const [active, setActive] = useState(() => {
    try {
      const saved = localStorage.getItem("__mj_page__");
      return PAGES.includes(saved) ? saved : "cpr-archive";
    } catch { return "cpr-archive"; }
  });
  useEffect(() => {
    try { localStorage.setItem("__mj_page__", active); } catch {}
    window.scrollTo(0, 0);
  }, [active]);

  const Page = useMemo(() => {
    switch (active) {
      case "cpr-archive": return PageCprArchive;
      case "cpr-flow":    return PageCprFlow;
      case "prod-flow":   return PageProdFlow;
      case "dist":        return PageDist;
      case "entity":      return PageEntity;
      default:            return PageCprArchive;
    }
  }, [active]);

  return (
    <EditProvider>
      <TopBar activePage={active} />
      <EditBanner />
      <div className="layout">
        <Sidebar active={active} onPick={setActive} />
        <main className="content">
          <Page />
        </main>
      </div>
    </EditProvider>
  );
}

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