import type { Metadata } from "next";
import type { CSSProperties } from "react";
import { notFound } from "next/navigation";
import { LocaleProvider } from "../../digital/context/LocaleContext";
import type { Locale } from "../../digital/context/LocaleContext";
import { getDigitalVisualThemeConfig, getThemeConfig } from "@/config/digital";
import { getThemeMessages } from "@/app/digital/lib/theme-data";
import DigitalProviders from "@/app/digital/DigitalProviders";

const LOCALES: Locale[] = ["zh", "en"];

export const metadata: Metadata = (() => {
  const theme = getThemeConfig();
  return {
    title: theme.meta.title,
    description: theme.meta.description,
  };
})();

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

export default async function LocaleLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  if (!LOCALES.includes(locale as Locale)) {
    notFound();
  }

  const messages = await getThemeMessages(locale as Locale);
  const visualTheme = getDigitalVisualThemeConfig();

  return (
    <LocaleProvider locale={locale as Locale} messages={messages}>
      <DigitalProviders>
        <div
          className={`digital-scope ${visualTheme.className}`}
          data-digital-visual-theme={visualTheme.id}
          style={visualTheme.cssVars as CSSProperties}
        >
          {children}
        </div>
      </DigitalProviders>
    </LocaleProvider>
  );
}