import type { CSSProperties } from "react";
import type { Metadata, Viewport } from "next";
import { NextIntlClientProvider } from "next-intl";
import { getMessages, setRequestLocale } from "next-intl/server";
import { notFound } from "next/navigation";
import { Geist, Geist_Mono } from "next/font/google";
import { routing, getDirection } from "@/i18n/routing";
import SessionProvider from "@/components/providers/SessionProvider";
import ToasterProvider from "@/components/providers/ToasterProvider";
import { BrandProvider } from "@/components/providers/BrandProvider";
import { brandToCssVars } from "@/lib/brand";
import { resolveBrand } from "@/lib/brand-server";
import "../globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

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

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  viewportFit: "cover",
};

export async function generateMetadata(): Promise<Metadata> {
  const brand = await resolveBrand();
  const metadata: Metadata = {
    title: {
      default: brand.name,
      template: `%s | ${brand.name}`,
    },
    applicationName: brand.name,
  };

  if (brand.faviconUrl) {
    metadata.icons = { icon: brand.faviconUrl };
  }

  return metadata;
}

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

  if (!routing.locales.includes(locale as never)) {
    notFound();
  }

  setRequestLocale(locale);
  const messages = await getMessages();
  const brand = await resolveBrand();
  const accentStyle = brandToCssVars(brand) as CSSProperties;

  return (
    <div
      dir={getDirection(locale)}
      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
      style={accentStyle}
    >
      <div className="min-h-full flex flex-col font-sans">
        <NextIntlClientProvider messages={messages}>
          <BrandProvider brand={brand}>
            <ToasterProvider />
            <SessionProvider>{children}</SessionProvider>
          </BrandProvider>
        </NextIntlClientProvider>
      </div>
    </div>
  );
}