import { Metadata, Viewport } from 'next'

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 { Inter } from 'next/font/google';
import { dir } from 'i18next';
import { ReactNode } from 'react';
import TranslationsProvider from '@/components/TranslationsProvider';
import initTranslations from '../i18n';
import { ConsoleSilencer } from '@/components/dev-only/console-silencer'

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


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

export const metadata: Metadata = {
  metadataBase: new URL('http://localhost'),
  // title: {
  //   default: 'JellyAI',
  //   template: `JellyAI`
  // },
  title: {
    template: `%s | Cradle-硅基生命的发源地`,
    default: `Cradle`,
  },
  description: `${descriptionRoot("Cradle")}`,

  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) {

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>
        {/* 在这里注入 env.js（路径按你实际放置的 public 目录） */}
        <script src="/env.js"></script>
      </head>

      <body
        className={cn(
          inter.className,
          'font-sans antialiased',
          fontSans.variable,
          fontMono.variable
        )}
      >
        <TranslationsProvider
          namespaces={i18nNamespaces}
          locale={locale}
          resources={resources}>
          <Toaster />
          <Providers attribute="class" defaultTheme="system" enableSystem>
            {/* <ConsoleSilencer /> */}
            <div className="flex min-h-screen flex-col">
              <main className="flex flex-1 flex-col bg-muted/0.3">
                {/* <Header /> */}
                {children}
                {/* <Footer /> */}
              </main>
            </div>
            {/* <Analytics /> */}
          </Providers>
        </TranslationsProvider>
      </body>
    </html>
  )
}
