import type { Metadata } from "next";
import localFont from "next/font/local";
import { NextIntlClientProvider } from 'next-intl';
import { getMessages, getTranslations } from 'next-intl/server';
import { notFound } from 'next/navigation';
import NextTopLoader from "nextjs-toploader";
import { ToastContainer } from "react-toastify";
import { ThemeProvider } from "@/components/theme-provider";
import { DirectionProvider } from "@/components/ui/direction";
import { routing } from '@/i18n/routing';

import "../globals.css";

const dmSans = localFont({
  src: [
    {
      path: "../../public/fonts/custom/dm-sans/DMSans-VariableFont_opsz,wght.ttf",
      weight: "100 900",
      style: "normal",
    },
  ],
  variable: "--font-dm-sans",
  display: "swap",
});

const manjari = localFont({
  src: [
    {
      path: "../../public/fonts/custom/manjari/Manjari-Thin.ttf",
      weight: "100",
      style: "normal",
    },
    {
      path: "../../public/fonts/custom/manjari/Manjari-Regular.ttf",
      weight: "400",
      style: "normal",
    },
    {
      path: "../../public/fonts/custom/manjari/Manjari-Bold.ttf",
      weight: "700",
      style: "normal",
    },
  ],
  variable: "--font-manjari",
  display: "swap",
});

const afrah = localFont({
  src: [
    {
      path: "../../public/fonts/custom/afrah/Afrah-Thin.ttf",
      weight: "100",
      style: "normal",
    },
    {
      path: "../../public/fonts/custom/afrah/Afrah-Light.ttf",
      weight: "300",
      style: "normal",
    },
    {
      path: "../../public/fonts/custom/afrah/Afrah-Regular.ttf",
      weight: "400",
      style: "normal",
    },
    {
      path: "../../public/fonts/custom/afrah/Afrah-Round.ttf",
      weight: "500",
      style: "normal",
    },
    {
      path: "../../public/fonts/custom/afrah/Afrah-Bold.ttf",
      weight: "700",
      style: "normal",
    },
  ],
  variable: "--font-afrah",
  display: "swap",
});

const ablation = localFont({
  src: [
    {
      path: "../../public/fonts/custom/ablation/Ablation-FreeDemo-BF6756d2fd9ebe3.otf",
      weight: "400",
      style: "normal",
    },
  ],
  variable: "--font-ablation",
  display: "swap",

  adjustFontFallback: false,
});

const firaCode = localFont({
  src: [
    {
      path: "../../public/fonts/custom/fira-code/FiraCode-VariableFont_wght.ttf",
      weight: "300 700",
      style: "normal",
    },
  ],
  variable: "--font-fira-code",
  display: "swap",
});

type AppLocale = (typeof routing.locales)[number];

const isSupportedLocale = (locale: string): locale is AppLocale =>
  routing.locales.includes(locale as AppLocale);

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "metadata" });

  return {
    title: t("title"),
    description: t("description"),
  };
}

export function generateStaticParams() {
  return routing.locales.map((locale) => ({ locale }));
}

export default async function LocaleLayout({
  children,
  params,
}: Readonly<{
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}>): Promise<React.ReactElement> {
  const { locale } = await params;

  if (!isSupportedLocale(locale)) {
    notFound();
  }

  const messages = await getMessages();

  return (
    <html lang={locale} dir={locale === 'ar' ? 'rtl' : 'ltr'} suppressHydrationWarning>
      <body
        className={`${dmSans.variable} ${manjari.variable} ${afrah.variable} ${ablation.variable} ${firaCode.variable} antialiased font-sans`}
      >
        <NextIntlClientProvider messages={messages}>
          <ThemeProvider
            attribute="class"
            defaultTheme="light"
            enableSystem
            disableTransitionOnChange
          >
            <DirectionProvider dir={locale === 'ar' ? 'rtl' : 'ltr'}>
              <ToastContainer />
              <NextTopLoader
                color="#1C75BC"
                initialPosition={0.08}
                crawlSpeed={200}
                height={3}
                crawl={true}
                showSpinner={false}
                easing="ease"
                speed={200}
                shadow="0 0 10px #1C75BC,0 0 5px #1C75BC"
              />
              {children}
            </DirectionProvider>
          </ThemeProvider>
        </NextIntlClientProvider>
      </body>
    </html>
  );
}
