import { useMemo } from "react";
import { Outlet } from "@modern-js/runtime/router";
import { ErrorBoundary } from "@/ui/errors/ErrorBoundary";
import { LoggerProvider } from "@/observability/logger/provider";
import { createRootLogger } from "@/observability/logger/root";
import { ApiClientProvider } from "@/shared/api/provider";
import { ApiClient } from "@/shared/api/client";
import { getEnv } from "@/env/index";

// Global styles
import "@/styles/index.scss";
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";
import "leaflet/dist/leaflet.css";

/**
 * Root layout — wraps the entire app with global providers.
 * Uses <Outlet /> (not {children}) because Modern.js uses React Router
 * nested routes.
 */
export default function RootLayout(): JSX.Element {
  const logger = useMemo(() => createRootLogger(), []);

  const apiClient = useMemo(
    () => {
      const env = getEnv();
      return new ApiClient({
        baseUrl: env.API_BASE_URL,
        locale: "ru",
        logger,
      });
    },
    [logger],
  );

  return (
    <LoggerProvider logger={logger}>
      <ApiClientProvider client={apiClient}>
        <ErrorBoundary>
          <Outlet />
        </ErrorBoundary>
      </ApiClientProvider>
    </LoggerProvider>
  );
}
