/* global React, ReactDOM, HomePage, LibraryPage, DivinationPage, AboutPage, AIDivination, SelfDivination */
const { useState, useEffect } = React;

const ROUTES = ['home','library','divination','about'];
const routeFromPath = () => {
  const path = window.location.pathname.replace(/^\/+|\/+$/g, '');
  return ROUTES.includes(path) ? path : null;
};

const isReloadNavigation = () => {
  const [entry] = performance.getEntriesByType('navigation');
  return entry?.type === 'reload';
};

const routeFromHistoryState = () => {
  const stateRoute = window.history.state?.route;
  return ROUTES.includes(stateRoute) ? stateRoute : null;
};

const routeFromLocation = () => {
  const pathRoute = routeFromPath();
  if (pathRoute) return pathRoute;
  if (isReloadNavigation()) return routeFromHistoryState() || 'home';
  return 'home';
};

const App = () => {
  const [route, setRoute] = useState(routeFromLocation);

  useEffect(() => {
    const onPopState = () => {
      setRoute(routeFromLocation());
    };
    window.addEventListener('popstate', onPopState);
    return () => window.removeEventListener('popstate', onPopState);
  }, []);

  useEffect(() => {
    const isFilePreview = window.location.protocol === 'file:';
    if (!isFilePreview && window.history.state?.route !== route) {
      window.history.replaceState({ route }, '', window.location.pathname || '/');
    }
    window.scrollTo(0, 0);
  }, [route]);

  const go = (r) => {
    const isFilePreview = window.location.protocol === 'file:';
    const next = r === 'home' ? '/' : `/${r}`;
    if (!isFilePreview && window.location.pathname !== next) {
      window.history.pushState({ route: r }, '', next);
    }
    setRoute(r);
    window.scrollTo(0, 0);
  };

  return (
    <div className="app">
      <nav className="nav">
        <div className="nav-brand" onClick={() => go('home')}>
          <span className="nav-brand-mark">牌间</span>
          <span className="nav-brand-zh">Tarot Room</span>
        </div>
        <div className="nav-links">
          <button className={`nav-link ${route==='library' ? 'active' : ''}`} onClick={() => go('library')}>
            牌库
            <span className="nav-link-en">Library</span>
          </button>
          <button className={`nav-link ${route==='divination' ? 'active' : ''}`} onClick={() => go('divination')}>
            占卜
            <span className="nav-link-en">Reading</span>
          </button>
          <button className={`nav-link ${route==='about' ? 'active' : ''}`} onClick={() => go('about')}>
            关于
            <span className="nav-link-en">About</span>
          </button>
        </div>
      </nav>
      <main className="main">
        {route === 'home' && <HomePage/>}
        {route === 'library' && <LibraryPage/>}
        {route === 'divination' && <DivinationPage/>}
        {route === 'about' && <AboutPage/>}
      </main>
      <footer className="site-footer">
        <div>塔罗解读仅供自我探索与娱乐，不替代医疗、法律、财务或心理咨询等专业建议。</div>
        <a href="https://liangmouyin.com" target="_blank" rel="noreferrer">liangmouyin.com</a>
      </footer>
    </div>
  );
};

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