// app.jsx — hash router, site-config fetch, and the React root. Must load last.
// Loaded from index.html as an ordered `text/babel` classic script (position 8 of 8).
// Classic scripts share one global scope — see docs/engineering/Patterns.md §9.

function App() {
  const [route, setRoute] = useState(window.location.hash || "#/");
  const [siteConfig, setSiteConfig] = useState({ nav: [], sections: {}, mdm_url: MDM_URL_FALLBACK });

  useEffect(() => {
    const onHash = () => setRoute(window.location.hash || "#/");
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  // Fetch site config once — nav items + page sections.
  useEffect(() => {
    fetch(`${API_BASE}/site-config`)
      .then(r => { if (!r.ok) throw new Error(r.status); return r.json(); })
      .then(data => {
        if (data && data.nav) setSiteConfig(data);
      })
      .catch(err => console.warn("fetch failed:", err));
  }, []);

  const path = route.split("?")[0];

  switch (path) {
    case "#/login":
      return <AuthPage mode="login" />;
    case "#/register":
      return <AuthPage mode="register" />;
    case "#/check-email":
      return <CheckEmailPage />;
    case "#/verify-email":
      return <VerifyEmailPage />;
    case "#/dashboard":
      return <Dashboard />;
    case "#/community":
      return <CommunityPage siteConfig={siteConfig} />;
    case "#/feed":
      return <FeedPage siteConfig={siteConfig} />;
    case "#/docs":
      return <DocsPage />;
    case "#/zen-admin":
      return <AdminLoginPage />;
    case "#/zen-admin/dashboard":
      return <AdminDashboard />;
    default:
      return <LandingPage siteConfig={siteConfig} />;
  }
}

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