import '../globals.css'
import type { Metadata } from 'next'
import { NextIntlClientProvider } from 'next-intl'
import { getMessages, getTranslations } 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 { Footer } from '@/components/layout/footer'
import FloatingChat from '@/components/chat/floating-chat'
import { ServiceWorkerProvider } from '@/components/pwa/service-worker-provider'
import { merriweather, lato } from '@/lib/fonts'

export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
  const { locale } = await params
  const t = await getTranslations({ locale, namespace: 'seo' })

  const currentUrl = locale === 'ro' ? 'https://biblical-guide.com/ro/' : 'https://biblical-guide.com/en/'
  const alternateUrl = locale === 'ro' ? 'https://biblical-guide.com/en/' : 'https://biblical-guide.com/ro/'
  const ogImageUrl = 'https://biblical-guide.com/biblical-guide-og-image.png'

  return {
    title: t('title'),
    description: t('description'),
    keywords: t('keywords'),
    alternates: {
      canonical: currentUrl,
      languages: {
        'ro': 'https://biblical-guide.com/ro/',
        'en': 'https://biblical-guide.com/en/',
        'x-default': 'https://biblical-guide.com/'
      }
    },
    openGraph: {
      title: t('ogTitle'),
      description: t('ogDescription'),
      url: currentUrl,
      siteName: 'Biblical Guide',
      locale: locale,
      type: 'website',
      images: [
        {
          url: ogImageUrl,
          width: 1200,
          height: 630,
          alt: t('ogTitle'),
        },
      ],
    },
    twitter: {
      card: 'summary_large_image',
      site: '@ghidbiblic',
      title: t('twitterTitle'),
      description: t('twitterDescription'),
      images: [ogImageUrl],
    },
    manifest: '/manifest.json',
    other: {
      'application/ld+json': JSON.stringify({
        "@context": "https://schema.org",
        "@type": "MobileApplication",
        "name": locale === 'ro' ? "Ghid Biblic" : "Biblical Guide",
        "url": "https://ghidulbiblic.ro",
        "description": t('description'),
        "applicationCategory": "EducationApplication",
        "operatingSystem": "iOS, Android, Web",
        "inLanguage": [locale],
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "USD"
        }
      })
    }
  }
}

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}>
      <head>
        {/* Google tag (gtag.js) */}
        <script async src="https://www.googletagmanager.com/gtag/js?id=G-KDVCM5G4H1"></script>
        <script
          dangerouslySetInnerHTML={{
            __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', 'G-KDVCM5G4H1');
            `,
          }}
        />
      </head>
      <body className={`${merriweather.variable} ${lato.variable}`}>
        <NextIntlClientProvider messages={messages} locale={locale}>
          <MuiThemeProvider>
            <ServiceWorkerProvider>
              <AuthProvider>
                <Navigation />
                {children}
                <Footer />
                <FloatingChat />
              </AuthProvider>
            </ServiceWorkerProvider>
          </MuiThemeProvider>
        </NextIntlClientProvider>
      </body>
    </html>
  )
}