import { Metadata, Viewport } from 'next'
import { GeistSans } from 'geist/font/sans'
import { GeistMono } from 'geist/font/mono'

// import { Toaster } from 'react-hot-toast'
import { Analytics } from '@vercel/analytics/react'

import '@/app/globals.css'
import i18nConfig from '@/i18nConfig';
import { fontMono, fontSans } from '@/lib/fonts'
import { cn } from '@/lib/utils'
// import { Providers } from '@/components/providers/ui-providers'
// import { Header } from '@/components/header'
// import { Footer } from '@/components/footer'
// import { Web3Provider } from '@/components/providers/web3-provider'
import { descriptionRoot } from '@/lib/metadata'


import { TailwindIndicator } from '@/components-ai/tailwind-indicator'
import { Providers } from '@/components-ai/providers'
import { Header } from '@/components-ai/header'
import { Toaster } from '@/components-ai/ui/sonner'

import { Inter } from 'next/font/google';
import { dir } from 'i18next';
import { ReactNode } from 'react';
import TranslationsProvider from '@/components/TranslationsProvider';
import initTranslations from '../i18n';
import { Navigation } from '@/components/navbar/navigation'
import { Footer } from "@/components/footer/footer";

export const runtime = 'edge' // 'nodejs' (default) | 'edge'


const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  metadataBase: new URL('https://jellyai.xyz'),
  // title: {
  //   default: 'JellyAi',
  //   template: `JellyAi`
  // },
  title: {
    template: `%s | JellyAI-一个探索人工智能和区块链的有趣应用`,
    default: `JellyAi`,
  },
  description: `${descriptionRoot("JellyAI")}`,

  icons: {
    icon: '/favicon.png'
  }
}

export const viewport: Viewport = {
  themeColor: [
    { media: '(prefers-color-scheme: light)', color: 'white' },
    { media: '(prefers-color-scheme: dark)', color: 'black' }
  ]
}

interface RootLayoutProps {
  children: React.ReactNode
}

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



// export default function RootLayout({ children }: RootLayoutProps) {

// export default async function RootLayout({
//   children,
//   params: { locale }
// }: {
//   children: ReactNode;
//   params: { locale: string };
// }) {
//   return (
//     <html lang={locale} dir={dir(locale)} suppressHydrationWarning>
//       <body
//         className={cn(
//           'font-sans antialiased',
//           GeistSans.variable,
//           GeistMono.variable
//         )}
//       >
//         <Toaster position="top-center" />
//         <Providers
//           attribute="class"
//           defaultTheme="system"
//           enableSystem
//           disableTransitionOnChange
//         >
//           <div className="flex flex-col min-h-screen">
//             {/* <Header /> */}

//             <Navigation />

//             <main className="flex flex-col flex-1 bg-muted/2">{children}</main>
//             <Footer />
//           </div>
//           <TailwindIndicator />
//         </Providers>
//       </body>
//     </html>
//   )
// }



const i18nNamespaces = ['common', 'home'];

export default async function RootLayout({
  children,
  params: { locale }
}: {
  children: ReactNode;
  params: { locale: string };
}) {

  const { t, resources } = await initTranslations(locale, i18nNamespaces);
  return (
    <html lang={locale} dir={dir(locale)} suppressHydrationWarning>
      <head />
      <body
        className={cn(
          inter.className,
          'font-sans antialiased',
          fontSans.variable,
          fontMono.variable
        )}
      >

        <TranslationsProvider
          namespaces={i18nNamespaces}
          locale={locale}
          resources={resources}>
          <Toaster position="top-center" />
          <Providers attribute="class" defaultTheme="system" enableSystem>
            <Navigation />

            <main
              // className="flex flex-col flex-1 bg-muted/2"
              className=" bg-muted/2"
            >{children}</main>
            <Footer />

            <TailwindIndicator />
          </Providers>
        </TranslationsProvider>
      </body>
    </html>
  )
}
