import type { ReactNode } from "react";
import type { Metadata } from "next";
import { Inter, Kantumruy_Pro } from "next/font/google";
import { AppRouterCacheProvider } from "@mui/material-nextjs/v16-appRouter";
import InitColorSchemeScript from "@mui/material/InitColorSchemeScript";

import { AppThemeProvider } from "@/components/providers/app-theme-provider";
import { AppLanguageProvider } from "@/components/providers/app-language-provider";
import { ReactQueryProvider } from "@/components/providers/react-query-provider";

import "./globals.css";

export const metadata: Metadata = {
  title: {
    template: "%s | GPSF MIS",
    default: "GPSF MIS",
  },
  description:
    "Management Information System for tracking working group issues, meeting requests, and progress reports.",
};

const inter = Inter({
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
  variable: "--font-inter",
  display: "swap",
});

const kantumruy = Kantumruy_Pro({
  subsets: ["khmer", "latin"],
  weight: ["300", "400", "500", "600", "700"],
  variable: "--font-kantumruy",
  display: "swap",
});

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html
      lang="en"
      data-language="en"
      suppressHydrationWarning
    >
      <body
        className={`${inter.variable} ${kantumruy.variable}`}
        suppressHydrationWarning
      >
        <InitColorSchemeScript
          attribute="data-mui-color-scheme"
          defaultMode="light"
          modeStorageKey="theme-mode"
        />
        <AppRouterCacheProvider options={{ key: "mui" }}>
          <AppThemeProvider>
            <ReactQueryProvider>
              <AppLanguageProvider>{children}</AppLanguageProvider>
            </ReactQueryProvider>
          </AppThemeProvider>
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}
