const { useState: useStateApp, useEffect: useEffectApp, useRef: useRefApp } = React;

function App() {
  // ナビの各項目は独立したページで、URL も切り替わる。
  // トップは無料トライアル。機能マップ、料金、セキュリティは全画面ページ。
  const boot = window.LX_SEO.boot();
  const [page, setPage] = useStateApp(boot.page);
  const [product, setProduct] = useStateApp(null);
  const [mapOpen, setMapOpen] = useStateApp(boot.overlay === 'funcmap');
  const [cmpOpen, setCmpOpen] = useStateApp(boot.overlay === 'pricing');
  const [secOpen, setSecOpen] = useStateApp(boot.overlay === 'security');
  const [trialOpen, setTrialOpen] = useStateApp(false);
  const underRef = useRefApp(boot.page);

  const goto = (id) => {
    setProduct(null);
    if (window.LX_SEO.isOverlay(id)) {
      setMapOpen(id === 'funcmap');
      setCmpOpen(id === 'pricing');
      setSecOpen(id === 'security');
      window.LX_SEO.go(id);
      return;
    }
    setMapOpen(false);
    setCmpOpen(false);
    setSecOpen(false);
    setPage(id);
    underRef.current = id;
    window.scrollTo({ top: 0, behavior: 'auto' });
    window.LX_SEO.go(id);
  };

  // 全画面ページを直接開いた場合、閉じるとトップへ戻る。他ページから開いた場合は前のページへ戻る。
  const closeOverlay = () => {
    if (history.state && history.state.lx) {
      history.back();
      return;
    }
    setMapOpen(false);
    setCmpOpen(false);
    setSecOpen(false);
    setPage(underRef.current || 'home');
    window.LX_SEO.go(underRef.current || 'home', true);
  };

  const openTrial = () => {
    setTrialOpen(true);
    closeOverlay();
  };

  useEffectApp(() => { window.lxGoto = goto; });

  useEffectApp(() => {
    const onPop = () => {
      if (!window.LX_SEO.known()) { location.reload(); return; }
      const next = window.LX_SEO.boot();
      setProduct(null);
      setMapOpen(next.overlay === 'funcmap');
      setCmpOpen(next.overlay === 'pricing');
      setSecOpen(next.overlay === 'security');
      if (!next.overlay) {
        setPage(next.page);
        underRef.current = next.page;
        window.scrollTo({ top: 0, behavior: 'auto' });
      }
      window.LX_SEO.apply(next.overlay || next.page);
    };
    window.addEventListener('popstate', onPop);
    return () => window.removeEventListener('popstate', onPop);
  }, []);

  const PAGES = {
    home: <TrialBanner onCompare={() => goto('pricing')} onTrial={() => setTrialOpen(true)} />,
    product: <Products onOpen={setProduct} />,
    scenario: <Scenarios />,
    about: <About />,
    contact: <Contact />
  };

  // モジュール紹介ページ（ipcs-*.html、smart-bim.html）は製品紹介の下に属する
  const mod = window.lxModuleById(page);
  const active = mapOpen ? 'funcmap' : cmpOpen ? 'pricing' : secOpen ? 'security' : mod ? 'product' : page;

  return (
    <>
      <Navbar
        active={active}
        onHome={(e) => { if (e) e.preventDefault(); goto('home'); }}
        onNav={(id, e) => { e.preventDefault(); goto(id); }}
      />
      <main data-screen-label="Home" hidden={mapOpen || cmpOpen || secOpen} className={page === 'home' ? '' : 'lx-subpage'}>
        {mod ? <ModulePage mod={mod} /> : (PAGES[page] || PAGES.home)}
      </main>
      <Footer />
      <ProductDetail productKey={product} onClose={() => setProduct(null)} />
      <FunctionMap open={mapOpen} onClose={closeOverlay} />
      <PlanCompare open={cmpOpen} onClose={closeOverlay} onTrial={openTrial} />
      <SecurityPage open={secOpen} onClose={closeOverlay} onTrial={openTrial} />
      <TrialModal open={trialOpen} onClose={() => setTrialOpen(false)} />
    </>
  );
}
// 本番用はビルド時に画面を HTML へ書き出してあるので（tools/build.mjs）、それを引き継ぐ。開発時に原本を開いた場合は最初から描画する
const lxRoot = document.getElementById('root');
if (lxRoot.firstElementChild) ReactDOM.hydrateRoot(lxRoot, <App />);
else ReactDOM.createRoot(lxRoot).render(<App />);