import type { Metadata } from 'next';
import { NextIntlClientProvider, hasLocale } from 'next-intl';
import { getMessages, getTranslations, setRequestLocale } from 'next-intl/server';
import { notFound } from 'next/navigation';
import '../globals.css';
import { manrope, montserrat } from '@/lib/fonts';
import { Providers } from '@/components/providers';
import { routing } from '@/i18n/routing';

type Params = { locale: string };

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

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

  return {
    metadataBase: new URL(process.env.NEXT_PUBLIC_APP_URL || 'https://xpeditis.com'),
    title: {
      default: t('title'),
      template: `%s | ${t('title').split(' — ')[0] ?? 'Xpeditis'}`,
    },
    description: t('description'),
    icons: {
      icon: '/assets/logos/logo-black.svg',
      shortcut: '/assets/logos/logo-black.svg',
      apple: '/assets/logos/logo-black.svg',
    },
    manifest: '/manifest.json',
    openGraph: {
      type: 'website',
      locale: locale === 'fr' ? 'fr_FR' : 'en_US',
      url: 'https://xpeditis.com',
      siteName: 'Xpeditis',
      title: t('title'),
      description: t('description'),
      images: [
        {
          url: '/assets/logos/logo-black.svg',
          width: 1875,
          height: 1699,
          alt: 'Xpeditis Logo',
        },
      ],
    },
    twitter: {
      card: 'summary_large_image',
      title: t('title'),
      description: t('description'),
      images: ['/assets/logos/logo-black.svg'],
    },
    alternates: {
      languages: {
        fr: '/fr',
        en: '/en',
      },
    },
  };
}

export default async function LocaleLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<Params>;
}) {
  const { locale } = await params;
  if (!hasLocale(routing.locales, locale)) {
    notFound();
  }

  setRequestLocale(locale);
  const messages = await getMessages();

  return (
    <html lang={locale} className={`${manrope.variable} ${montserrat.variable}`}>
      <body className="font-body">
        <NextIntlClientProvider locale={locale} messages={messages}>
          <Providers>{children}</Providers>
        </NextIntlClientProvider>
      </body>
    </html>
  );
}
