/* MACHIKADO ROOMS — app shell, theme, routing */
const { useState: useS, useEffect: useE } = React;

/* placeholder for pages not yet built (category / article / feature / column) */
function ComingSoon({ go, label }) {
  return (
    <main className="wrap section" style={{ minHeight: "52vh" }}>
      <div className="sec-head">
        <span className="sec-idx">—</span>
        <h2 className="sec-title">{label}<span className="en">COMING SOON</span></h2>
      </div>
      <p style={{ color: "var(--muted)", lineHeight: 2, maxWidth: "46ch" }}>
        このページは次のステップで実装します。トップページの設計（トークン・コンポーネント）を土台に、同じ作法で組み上げていきます。
      </p>
      <p style={{ marginTop: 28 }}>
        <a className="readlink" onClick={() => go({ page: "top" })}>トップへ戻る <span>→</span></a>
      </p>
    </main>
  );
}

function App() {
  const [theme, setTheme] = useS(() => {
    try { return localStorage.getItem("mr-theme") || "light"; } catch (e) { return "light"; }
  });
  const [route, setRoute] = useS(() => {
    try { const h = JSON.parse(decodeURIComponent(location.hash.slice(1) || "")); if (h && h.page) return h; } catch (e) {}
    return { page: "top" };
  });

  const toggleTheme = () => setTheme((t) => (t === "dark" ? "light" : "dark"));
  useE(() => { try { localStorage.setItem("mr-theme", theme); } catch (e) {} }, [theme]);

  // ブラウザの戻る/進む（ハッシュ変更）に追従
  useE(() => {
    const onHash = () => {
      try { const h = JSON.parse(decodeURIComponent(location.hash.slice(1) || "")); if (h && h.page) setRoute(h); } catch (e) {}
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const go = (r) => {
    setRoute(r);
    try { location.hash = encodeURIComponent(JSON.stringify(r)); } catch (e) {}
    window.scrollTo(0, 0);
  };

  const labelFor = {
    article: "記事", feature: "特集 ／ 街角採集", column: "街角コラム",
  };

  return (
    <div className="mr" data-theme={theme}>
      <Header go={go} theme={theme} toggleTheme={toggleTheme} route={route} />
      {route.page === "top" ? <TopPage go={go} />
        : route.page === "category" ? <CategoryPage go={go} cat={route.cat} />
        : route.page === "article" ? <ArticlePage go={go} id={route.id} />
        : <ComingSoon go={go} label={labelFor[route.page] || "ページ"} />}
      <Footer go={go} />
    </div>
  );
}

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