import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { NextIntlClientProvider } from "next-intl";
import { getMessages } from "next-intl/server";
import { Toaster } from "sonner";
import { Providers } from "@/components/providers";
import { Header } from "@/components/layout/header";
import { Footer } from "@/components/layout/footer";
import "@/styles/globals.css";

const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });

export const metadata: Metadata = {
  title: {
    template: "%s | OmniCommerce Cloud",
    default: "OmniCommerce Cloud — Multi-Vendor B2B & B2C Marketplace",
  },
  description:
    "World-class multi-vendor wholesale and retail marketplace platform. Connect with verified manufacturers, wholesalers, and brands across Pakistan, GCC, Europe, and North America.",
  keywords: [
    "marketplace", "b2b", "wholesale", "ecommerce", "multi-vendor",
    "pakistan", "gcc", "dubai", "export", "import", "trade",
  ],
  openGraph: {
    type: "website",
    locale: "en_US",
    siteName: "OmniCommerce Cloud",
    title: "OmniCommerce Cloud — Global B2B & B2C Marketplace",
    description: "Connect with thousands of verified manufacturers and wholesalers worldwide.",
  },
};

export default async function RootLayout({
  children,
  params: { locale },
}: {
  children: React.ReactNode;
  params: { locale: string };
}) {
  const messages = await getMessages();
  const isRTL = ["ar", "ur", "fa"].includes(locale);

  return (
    <html lang={locale} dir={isRTL ? "rtl" : "ltr"} suppressHydrationWarning>
      <body className={`${inter.variable} font-sans antialiased bg-white`}>
        <NextIntlClientProvider messages={messages}>
          <Providers>
            <div className="relative flex min-h-screen flex-col">
              <Header />
              <main className="flex-1">{children}</main>
              <Footer />
            </div>
            <Toaster position="top-right" richColors closeButton />
          </Providers>
        </NextIntlClientProvider>
      </body>
    </html>
  );
}
