// app/[lang]/layout.tsx
import { Roboto } from "next/font/google";
import { ThemeProvider } from "next-themes";
import "../../globals.css";
import { hasLocale, Locale, NextIntlClientProvider } from "next-intl";
import { notFound } from "next/navigation";
import { routing } from "@/i18n/routing";
import { Providers } from "./providers";
import { setRequestLocale } from "next-intl/server";
import { OrganizationJsonLd, PWAServiceWorker } from "@/components";
import QueryProvider from "@/components/QueryProvider";
import { metaObject } from "@/config/site.config";
import localFont from "next/font/local";

export async function generateMetadata() {
  return metaObject();
}

const roboto = Roboto({
  variable: "--font-roboto",
  subsets: ["latin"],
  weight: ["200", "300", "400", "500", "600", "700", "800", "900"],
});

const droidArabicKufi = localFont({
  src: "../fonts/Droid.Arabic.Kufi.ttf",
  variable: "--font-kufi",
});

const RootLayout = async ({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ lang: Locale }>;
}) => {
  // Ensure that the incoming `locale` is valid
  const { lang } = await params;
  if (!hasLocale(routing.locales, lang)) {
    notFound();
  }

  // Enable static rendering
  setRequestLocale(lang);

  const direction = lang === "ar" ? "rtl" : "ltr";

  return (
    <html lang={lang} dir={direction} suppressHydrationWarning>
      <head>
        {/* Favicon for most browsers */}
        <link rel="icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" href="/images/logo.png" />

        <meta name="application-name" content="Digital Menu" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="#007AFF" />
        <meta name="apple-mobile-web-app-title" content="Digital Menu" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="theme-color" content="#007AFF" />

        {/* Manifest for PWA support */}
        <link rel="manifest" href={`/manifest/${lang}.json`} />

        <OrganizationJsonLd />
      </head>
      <body
        className={`${
          lang === "ar" ? droidArabicKufi.className : roboto.className
        } antialiased`}
      >
        <PWAServiceWorker />
        <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
          <NextIntlClientProvider locale={lang}>
            <QueryProvider>
              <Providers>{children}</Providers>
            </QueryProvider>
          </NextIntlClientProvider>
        </ThemeProvider>
      </body>
    </html>
  );
};

export default RootLayout;
