import { isLocale } from '@impuestos/i18n';
import type { Metadata, Viewport } from 'next';
import { Inter } from 'next/font/google';
import { NextIntlClientProvider } from 'next-intl';
import { setRequestLocale } from 'next-intl/server';
import { getT } from '@/i18n/t';
import { notFound } from 'next/navigation';
import type { ReactNode } from 'react';
import { Providers } from '@/components/providers';
import { ThemeScript } from '@/components/theme-script';
import { routing } from '@/i18n/routing';
import '../globals.css';

// Self hosted by next/font: no third party font request at runtime, which keeps the
// CSP tight (SPEC.md section 14).
const inter = Inter({ subsets: ['latin'], variable: '--font-inter', display: 'swap' });

/**
 * The browser chrome follows the theme, and the accent is the same deep teal the icon and
 * the manifest use.
 */
export const viewport: Viewport = {
  themeColor: [
    { media: '(prefers-color-scheme: light)', color: '#fbfbfc' },
    { media: '(prefers-color-scheme: dark)', color: '#1b1d20' },
  ],
};

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

export async function generateMetadata(props: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> {
  const { locale } = await props.params;
  const t = await getT(locale);
  return {
    title: t('common.appName'),
    description: t('landing.hero.subtitle'),
    applicationName: t('common.appName'),
    appleWebApp: { capable: true, title: t('common.appName'), statusBarStyle: 'default' },
    icons: { icon: '/icon-192.png', apple: '/apple-touch-icon.png' },
  };
}

export default async function LocaleLayout({
  children,
  params,
}: {
  children: ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  if (!isLocale(locale)) notFound();
  setRequestLocale(locale);

  return (
    <html lang={locale} className={inter.variable} suppressHydrationWarning>
      <head>
        <ThemeScript />
      </head>
      <body className="min-h-dvh font-sans antialiased">
        <NextIntlClientProvider>
          <Providers>{children}</Providers>
        </NextIntlClientProvider>
      </body>
    </html>
  );
}