import type { Metadata } from "next";
import { Poppins } from "next/font/google";
import { NextIntlClientProvider } from 'next-intl';
import { getMessages } from 'next-intl/server';
import "../globals.css";
import { CookiesProvider } from 'next-client-cookies/server';
import AuthManager from "../components/AuthManager";
import UserAuthWatcher from "../components/UserAuthWatcher";
import { AuthProvider } from "../contexts/AuthContext";
import { UserProvider } from "../contexts/UserContext";
import NextTopLoader from 'nextjs-toploader';

const poppins = Poppins({
  variable: "--font-poppins",
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
});

type Props = {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
};

export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
  const { locale } = await params;
  const messages = await getMessages({ locale });
  const metadataMessages = messages.metadata as { description: string } | undefined;
  
  return {
    title: "OwaSpaces",
    description: metadataMessages?.description || "Community space for discussion and sharing on the OwaShop platform.",
    icons: {
      icon: [
        { url: '/logo.png', type: 'image/png' },
      ],
      apple: [
        { url: '/logo.png', type: 'image/png' },
      ],
      shortcut: '/logo.png',
    },
  };
}

export default async function LocaleLayout({
  children,
  params
}: Props) {
  const { locale } = await params;
  
  // Passer explicitement la locale à getMessages
  const messages = await getMessages({ locale });

  return (
    <html lang={locale}>
      <body className={`${poppins.variable}`}>
        <CookiesProvider>
          <NextIntlClientProvider messages={messages}>
            <UserProvider>
              <AuthProvider>
                <AuthManager />
                <UserAuthWatcher />
                <NextTopLoader
                  color="#f54900"
                  showSpinner={false}
                  speed={500}
                  height={2}
                />
                {children}
              </AuthProvider>
            </UserProvider>
          </NextIntlClientProvider>
        </CookiesProvider>
      </body>
    </html>
  )
} 