import type { Metadata } from "next";
import "../globals.css";
import { NextIntlClientProvider } from 'next-intl';
import { getMessages } from 'next-intl/server';
import { notFound } from 'next/navigation';
import { routing } from '@/i18n/routing';
import Providers from '@/components/Providers';
import Ticker from '@/components/Ticker';

import Footer from '@/components/Footer';
import ChatPopup from '@/components/chat/ChatPopup';
import LocaleDomTranslator from '@/components/LocaleDomTranslator';

export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
  const { locale } = await params;
  // Keep page rendering independent from the local API availability.
  const siteConfig = { siteName: 'SHOP MMO', seoTitle: 'SHOP MMO - Marketplace', seoDescription: 'Marketplace giao dịch số an toàn', seoKeywords: 'marketplace, sản phẩm số, escrow', siteDescription: 'Marketplace giao dịch số an toàn' };

  return {
    title: siteConfig.seoTitle || `${siteConfig.siteName} - Marketplace`,
    description: siteConfig.seoDescription || siteConfig.siteDescription,
    keywords: siteConfig.seoKeywords || 'marketplace, sản phẩm số',
    metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL || 'https://shopmmo.com.vn'),
  };
}

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

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

  const messages = await getMessages();

  return (
    <html lang={locale} className="dark" suppressHydrationWarning>
      <body className="bg-background font-sans text-foreground">
        <Providers>
          <NextIntlClientProvider messages={messages}>
            <LocaleDomTranslator locale={locale} />
            <Ticker />
            {children}
            <ChatPopup />
            <Footer locale={locale} />
          </NextIntlClientProvider>
        </Providers>
      </body>
    </html>
  );
}