/* Main app: router, state, mount */
const { useState: aS, useEffect: aE, useMemo: aM } = React;

function parseHash() {
  const h = (location.hash || "#/home").replace(/^#\/?/, "");
  const [page, ...rest] = h.split("/");
  if (page === "team" && rest[0]) return { page: "team", slug: rest[0] };
  if (page === "news" && rest[0]) return { page: "newsItem", id: rest[0] };
  if (!page) return { page: "home" };
  return { page };
}
function buildHash(route) {
  if (route.page === "team") return `#/team/${route.slug}`;
  if (route.page === "newsItem") return `#/news/${route.id}`;
  return `#/${route.page}`;
}

function App() {
  const [lang, setLang] = aS(() => localStorage.getItem("abyss-lang") || "en");
  const [route, setRoute] = aS(parseHash);

  aE(() => { localStorage.setItem("abyss-lang", lang); }, [lang]);

  aE(() => {
    const onHash = () => setRoute(parseHash());
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const navigate = (r) => {
    location.hash = buildHash(r);
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  let page;
  switch (route.page) {
    case "home":          page = <HomePage navigate={navigate} lang={lang} />; break;
    case "teams":         page = <TeamsPage navigate={navigate} lang={lang} />; break;
    case "team":          page = <TeamDetailPage slug={route.slug} navigate={navigate} lang={lang} />; break;
    case "news":          page = <NewsPage navigate={navigate} lang={lang} />; break;
    case "newsItem":      page = <NewsItemPage id={route.id} navigate={navigate} lang={lang} />; break;
    case "achievements":  page = <AchievementsPage navigate={navigate} lang={lang} />; break;
    case "about":         page = <AboutPage navigate={navigate} lang={lang} />; break;
    case "matchhistory":  page = <MatchHistoryPage navigate={navigate} lang={lang} />; break;
    case "matchdays":     page = <MatchdaysPage navigate={navigate} lang={lang} />; break;
    default:              page = <HomePage navigate={navigate} lang={lang} />;
  }

  return (
    <>
      <Header route={route} navigate={navigate} lang={lang} setLang={setLang} />
      <main key={route.page + (route.slug || route.id || "")}>{page}</main>
      <Footer navigate={navigate} lang={lang} />
    </>
  );
}

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