import { useLayoutEffect } from "react";
import { AppProviders } from "./providers/AppProviders";
import { AppRouter } from "./router/routes";
import { AppHeader } from "@shared/ui";
import { useLocation } from "react-router-dom";

const REACT_ONLY_PREFIXES = [
  "/login",
  "/register",
  "/profile",
  "/platform",
  "/verify",
  "/reset-password",
  "/forgot-password",
  "/pages",
  "/enterprise"
];

function isReactShellRoute(pathname: string): boolean {
  return REACT_ONLY_PREFIXES.some((prefix) => pathname === prefix || pathname.startsWith(`${prefix}/`));
}

function AppShell(): JSX.Element {
  const location = useLocation();
  const hideHeader = isReactShellRoute(location.pathname);

  useLayoutEffect(() => {
    document.documentElement.classList.toggle("admin-route", location.pathname.startsWith("/platform"));
  }, [location.pathname]);

  return (
    <>
      {hideHeader ? null : <AppHeader />}
      <AppRouter />
    </>
  );
}

export function App(): JSX.Element {
  return (
    <AppProviders>
      <AppShell />
    </AppProviders>
  );
}
