import type { Metadata } from "next";
import { NextIntlClientProvider } from 'next-intl';
import { getMessages, getTranslations } from 'next-intl/server';
import { getPublicCompanySettings, getPublicTrackingSettings } from "@/lib/api/website/global-settings-api";
import type { Locale } from "@/lib/i18n-utils";
import { notFound } from 'next/navigation';
import NextTopLoader from "nextjs-toploader";
import { ToastContainer } from "react-toastify";
import { ThemeProvider } from "@/components/theme-provider";
import { routing } from '@/i18n/routing';

import "../globals.css";

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" });
  const [company, tracking] = await Promise.all([
    getPublicCompanySettings(locale as Locale),
    getPublicTrackingSettings(locale as Locale),
  ]);

  return {
    title: tracking?.site_title || t("title"),
    description: tracking?.seo_description || t("description"),
    ...(tracking?.seo_keywords ? { keywords: tracking.seo_keywords } : {}),
    ...(company?.favicon ? { icons: { icon: company.favicon } } : {}),
    ...(tracking?.og_title || tracking?.og_description || tracking?.og_image ? {
      openGraph: {
        title: tracking?.og_title || undefined,
        description: tracking?.og_description || undefined,
        images: tracking?.og_image ? [tracking.og_image] : undefined,
      },
    } : {}),
  };
}

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;

  // Ensure that the incoming `locale` is valid
  if (!isSupportedLocale(locale)) {
    notFound();
  }

  // Providing all messages to the client
  // side is the easiest way to get started
  const messages = await getMessages();

  return (
    <html lang={locale} dir={locale === 'ar' ? 'rtl' : 'ltr'} suppressHydrationWarning>
      <body className="antialiased font-sans">
        <NextIntlClientProvider messages={messages}>
          <ThemeProvider
            attribute="class"
            defaultTheme="light"
            enableSystem
            disableTransitionOnChange
          >
            <ToastContainer />
            <NextTopLoader
              color="var(--color-primary)"
              initialPosition={0.08}
              crawlSpeed={200}
              height={3}
              crawl={true}
              showSpinner={false}
              easing="ease"
              speed={200}
              shadow="0 0 10px var(--focus-ring-soft),0 0 5px var(--interactive-pressed)"
            />
            {children}
          </ThemeProvider>
        </NextIntlClientProvider>
      </body>
    </html>
  );
}
