import type { Metadata } from "next";
import { unstable_noStore as noStore } from "next/cache";
import localFont from "next/font/local";
import Script from "next/script";
import { getLocale } from "next-intl/server";
import { QueryToastBridge } from "@/components/admin/query-toast-bridge";
import { SoundProvider } from "@/components/sound-provider";
import { ThemeProvider } from "@/components/theme-provider";
import { Toaster } from "@/components/ui/toaster";
import { buildAppMetadata } from "@/lib/metadata";
import { getDirection } from "@/lib/locale";
import "./globals.css";

const museo = localFont({
  src: [
    {
      path: "./fonts/MuseoSansRounded300.woff2",
      weight: "300",
      style: "normal",
    },
    {
      path: "./fonts/MuseoSansRounded500.woff2",
      weight: "500",
      style: "normal",
    },
    {
      path: "./fonts/MuseoSansRounded700.woff2",
      weight: "700",
      style: "normal",
    },
    {
      path: "./fonts/MuseoSansRounded900.woff2",
      weight: "900",
      style: "normal",
    },
  ],
  variable: "--font-museo",
  display: "swap",
  preload: false,
  fallback: ["Arial", "Helvetica", "sans-serif"],
  adjustFontFallback: "Arial",
});

const dubai = localFont({
  src: [
    {
      path: "./fonts/Dubai-Light.woff2",
      weight: "300",
      style: "normal",
    },
    {
      path: "./fonts/Dubai-Regular.woff2",
      weight: "400",
      style: "normal",
    },
    {
      path: "./fonts/Dubai-Bold.woff2",
      weight: "700",
      style: "normal",
    },
  ],
  variable: "--font-dubai",
  display: "swap",
  preload: false,
  fallback: ["Tahoma", "Arial", "sans-serif"],
  adjustFontFallback: "Arial",
});

export const dynamic = "force-dynamic";
export const revalidate = 0;

export async function generateMetadata(): Promise<Metadata> {
  noStore();

  return buildAppMetadata();
}

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  noStore();

  const locale = await getLocale().catch(() => "de");

  return (
    <html lang={locale} dir={getDirection(locale)} suppressHydrationWarning>
      <body className={`${museo.variable} ${dubai.variable}`}>
        <ThemeProvider>
          <SoundProvider>
            {children}
            <QueryToastBridge />
            <Toaster />
          </SoundProvider>
        </ThemeProvider>
        <Script
          src="https://plausible.mohfarawati.de/js/pa-H7WDubj39eeDW3cfzeXhU.js"
          strategy="afterInteractive"
        />
        <Script id="plausible-init" strategy="afterInteractive">
          {`window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)};plausible.init=plausible.init||function(i){plausible.o=i||{}};plausible.init();`}
        </Script>
      </body>
    </html>
  );
}
