import '../globals.css'
import type { Metadata } from 'next'
import { NextIntlClientProvider } from 'next-intl'
import { getMessages } from 'next-intl/server'
import { notFound } from 'next/navigation'
import { MuiThemeProvider } from '@/components/providers/theme-provider'
import { AuthProvider } from '@/components/auth/auth-provider'
import { Navigation } from '@/components/layout/navigation'
import FloatingChat from '@/components/chat/floating-chat'
import { merriweather, lato } from '@/lib/fonts'

export const metadata: Metadata = {
  title: 'Ghid Biblic - Biblical Guide',
  description: 'A comprehensive Bible study application with AI chat capabilities',
}

export async function generateStaticParams() {
  return [
    { locale: 'ro' },
    { locale: 'en' }
  ]
}

interface LocaleLayoutProps {
  children: React.ReactNode
  params: Promise<{ locale: string }>
}

const locales = ['ro', 'en']

export default async function LocaleLayout({
  children,
  params
}: LocaleLayoutProps) {
  const { locale } = await params

  // Validate locale
  if (!locales.includes(locale)) {
    notFound()
  }

  const messages = await getMessages({ locale })

  return (
    <html lang={locale}>
      <body className={`${merriweather.variable} ${lato.variable}`}>
        <NextIntlClientProvider messages={messages} locale={locale}>
          <MuiThemeProvider>
            <AuthProvider>
              <Navigation />
              {children}
              <FloatingChat />
            </AuthProvider>
          </MuiThemeProvider>
        </NextIntlClientProvider>
      </body>
    </html>
  )
}