/* App shell - state router + lifted chat state (the guide). */

function App() {
  const [route, setRoute] = React.useState(function () {
    const h = (typeof location !== "undefined" && location.hash) || "";
    if (h === "#directory") return "directory";
    if (h === "#digest" || h === "#news") return "news"; // deep link from static pages (guide, compare)
    return "home";
  });
  const [chatOpen, setChatOpen] = React.useState(false);
  const [articleId, setArticleId] = React.useState(null);
  const [courseId, setCourseId] = React.useState(null);
  // re-render when live courses arrive from /api/quals (see content.jsx loader)
  const [, _force] = React.useState(0);
  React.useEffect(function () {
    window.__TR_RELOAD = function () { _force(function (x) { return x + 1; }); };
    return function () { window.__TR_RELOAD = null; };
  }, []);

  function navigate(r) {
    if (r === "careers" || r === "about") {
      setRoute("home");
      setTimeout(() => {
        const el = document.getElementById(r);
        if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 76, behavior: "smooth" });
      }, 30);
      return;
    }
    if (r === "news") { setRoute("news"); window.scrollTo({ top: 0 }); return; }
    if (r === "search" || r === "directory") { setRoute("directory"); window.scrollTo({ top: 0 }); return; }
    setRoute(r);
    window.scrollTo({ top: 0 });
  }

  const openChat = () => setChatOpen(true);
  const openCourse = (id) => { setCourseId(id || null); setRoute("course"); window.scrollTo({ top: 0 }); };
  const browse = () => { window.location.href = "get-certified.html"; };
  const openNews = () => { setRoute("news"); window.scrollTo({ top: 0 }); };
  const openArticle = (id) => { setArticleId(id); setRoute("article"); window.scrollTo({ top: 0 }); };

  let screen;
  if (route === "course") screen = <CourseDetail courseId={courseId} onNavigate={navigate} onOpenChat={openChat} />;
  else if (route === "directory") screen = <Directory onOpenCourse={openCourse} />;
  else if (route === "news") screen = <NewsPage onOpenArticle={openArticle} />;
  else if (route === "article") screen = <Article id={articleId} onBack={openNews} onReadNews={openArticle} />;
  else screen = <Home onNavigate={navigate} onOpenChat={openChat} onOpenCourse={openCourse} onBrowse={browse} onReadNews={openNews} onOpenArticle={openArticle} />;

  return (
    <React.Fragment>
      <Nav route={route} onNavigate={navigate} onOpenChat={openChat} />
      {screen}
      <Footer />
      <ChatBubble open={chatOpen} setOpen={setChatOpen} />
    </React.Fragment>
  );
}

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