import type { Metadata } from 'next'
import { Syne, DM_Mono, JetBrains_Mono, VT323 } from 'next/font/google'
import { notFound } from 'next/navigation'
import { NextIntlClientProvider } from 'next-intl'
import { getMessages } from 'next-intl/server'
import { routing, type Locale } from '@/i18n/routing'
import '../globals.css'
import { Providers } from '../providers'
import { AutoHealingErrorBoundary } from '@/components/shared/auto-healing-error-boundary'

// Syne - 標題 / Display（接近 Nothing Ndot 顯示感）
const syne = Syne({
  subsets: ['latin'],
  variable: '--font-heading',
})

// DM Mono - 內文 / 標籤 / UI 文字（乾淨等寬）
const dmMono = DM_Mono({
  weight: ['300', '400', '500'],
  subsets: ['latin'],
  variable: '--font-body',
})

// JetBrains Mono - 程式碼 / Terminal 專用
const jetbrainsMono = JetBrains_Mono({
  subsets: ['latin'],
  variable: '--font-mono',
})

// VT323 - 點陣像素字體，品牌 AWOOOI 專用
const vt323 = VT323({
  weight: '400',
  subsets: ['latin'],
  variable: '--font-dot-matrix',
})

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

export async function generateMetadata({
  params: { locale: _locale },
}: {
  params: { locale: Locale }
}): Promise<Metadata> {
  const messages = await getMessages()
  const metadata = messages.metadata as { title: string; description: string }

  return {
    title: metadata?.title || 'AWOOOI',
    description: metadata?.description || 'AI-Powered Intelligent Operations Platform',
    icons: {
      icon: '/favicon.svg',
    },
  }
}

export default async function LocaleLayout({
  children,
  params: { locale },
}: {
  children: React.ReactNode
  params: { locale: string }
}) {
  // 驗證語系
  if (!routing.locales.includes(locale as Locale)) {
    notFound()
  }

  // 取得翻譯訊息
  const messages = await getMessages()

  return (
    <html lang={locale}>
      <body
        className={`${syne.variable} ${dmMono.variable} ${jetbrainsMono.variable} ${vt323.variable} font-body bg-nothing-gray-50 text-nothing-black antialiased`}
      >
        <NextIntlClientProvider messages={messages}>
          <AutoHealingErrorBoundary fallbackMessage="Critical Application Error">
            <Providers>{children}</Providers>
          </AutoHealingErrorBoundary>
        </NextIntlClientProvider>
      </body>
    </html>
  )
}
