// app.jsx — router และธีม (locked defaults, no design-time tweaks)
const { useState: useStateA, useEffect: useEffectA } = React;

// ฟอนต์ที่รองรับ (ทั้งหมด import ไว้แล้วใน index.html) — สลับได้โดยเปลี่ยนค่า font ด้านล่าง:
//   "Noto Sans Thai" (ค่าเริ่มต้น) | "Anuphan" | "IBM Plex Sans Thai"
const THEME = {
  accent: ["#2f6b4f", "#1e4a37", "#ecf2ee"],
  font: "Noto Sans Thai",
  heroLayout: "split",
  ebookStyle: "cover",
};

function applyTheme(t) {
  const r = document.documentElement;
  const [accent, deep, tint] = t.accent;
  r.style.setProperty("--accent", accent);
  r.style.setProperty("--accent-deep", deep);
  r.style.setProperty("--accent-tint", tint);
  r.style.setProperty("--font", `"${t.font}", system-ui, sans-serif`);
}

function App() {
  const [route, setRoute] = useStateA(() => {
    try { return JSON.parse(localStorage.getItem("pulse_route")) || { page: "home" }; }
    catch { return { page: "home" }; }
  });
  const [articles, setArticles] = useStateA(null);
  const [ebooks, setEbooks] = useStateA(null);

  useEffectA(() => { applyTheme(THEME); }, []);
  useEffectA(() => {
    localStorage.setItem("pulse_route", JSON.stringify(route));
  }, [route]);
  useEffectA(() => {
    let cancelled = false;
    window.loadArticles().then((items) => {
      if (!cancelled) setArticles(items);
    }).catch((err) => {
      console.error("[articles] load failed:", err);
      if (!cancelled) setArticles([]);
    });
    window.loadEbooks().then((items) => {
      if (!cancelled) setEbooks(items);
    }).catch((err) => {
      console.error("[ebooks] load failed:", err);
      if (!cancelled) setEbooks([]);
    });
    return () => { cancelled = true; };
  }, []);

  const go = (r) => { setRoute(r); window.scrollTo(0, 0); };

  let view;
  if (articles === null || ebooks === null) {
    view = (
      <main className="page-pad">
        <div className="container"><div className="pagehead">
          <p className="pagehead-lead">กำลังโหลดเนื้อหา…</p>
        </div></div>
      </main>
    );
  } else if (route.page === "home") view = <Landing go={go} t={THEME} articles={articles} ebooks={ebooks} />;
  else if (route.page === "articles") view = <ArticlesPage go={go} articles={articles} />;
  else if (route.page === "article") view = <ArticleDetail id={route.id} go={go} articles={articles} />;
  else if (route.page === "ebooks") view = <EbooksPage go={go} t={THEME} ebooks={ebooks} />;
  else if (route.page === "ebook") view = <EbookDetail id={route.id} go={go} ebooks={ebooks} />;
  else if (route.page === "about") view = (
    <main className="page-pad">
      <div className="container"><div className="pagehead">
        <span className="sechead-kicker">เกี่ยวกับ</span>
        <h1 className="pagehead-title">AI &amp; IT Pulse</h1>
      </div></div>
      <AboutSection compact />
    </main>
  );
  else view = <Landing go={go} t={THEME} articles={articles} ebooks={ebooks} />;

  return (
    <div className="app">
      <Header route={route} go={go} t={THEME} />
      {view}
      <Footer go={go} />
    </div>
  );
}

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