import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { getDictionary } from "@/lib/dictionaries"
import { Navbar } from "@/components/navbar"
import { Footer } from "@/components/footer"
import { Toaster } from "@/components/ui/toaster"
import { ThemeProvider } from "@/components/theme-provider"

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

export async function generateMetadata({
  params,
}: {
  params: Promise<{ lang: "sq" | "en" }>
}): Promise<Metadata> {
  const { lang } = await params
  const dict = await getDictionary(lang)

  return {
    title: dict.seo.title,
    description: dict.seo.description,
    keywords: dict.seo.keywords,
    authors: [{ name: dict.seo.author }],
    creator: dict.seo.author,
    publisher: dict.seo.author,
    robots: {
      index: true,
      follow: true,
      googleBot: {
        index: true,
        follow: true,
        "max-video-preview": -1,
        "max-image-preview": "large",
        "max-snippet": -1,
      },
    },
    openGraph: {
      type: "website",
      locale: lang === "sq" ? "sq_AL" : "en_US",
      url: `https://nderrimbravash.com/${lang}`,
      siteName: dict.seo.site_name,
      title: dict.seo.title,
      description: dict.seo.description,
      images: [
        {
          url: "/og-image.jpg",
          width: 1200,
          height: 630,
          alt: dict.seo.title,
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      title: dict.seo.title,
      description: dict.seo.description,
      images: ["/og-image.jpg"],
    },
    alternates: {
      canonical: `https://nderrimbravash.com/${lang}`,
      languages: {
        "sq-AL": "https://nderrimbravash.com/sq",
        "en-US": "https://nderrimbravash.com/en",
      },
    },
  }
}

export async function generateStaticParams() {
  return [{ lang: "sq" }, { lang: "en" }]
}

export default async function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode
  params: Promise<{ lang: "sq" | "en" }>
}) {
  try {
    const { lang } = await params
    const dict = await getDictionary(lang)

    return (
      <html lang={lang} suppressHydrationWarning>
        <head>
          <link rel="icon" href="/favicon.ico" />
          <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
          <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
          <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
          <link rel="manifest" href="/site.webmanifest" />
          <meta name="theme-color" content="#1e40af" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
        </head>
        <body className={inter.className}>
          <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
            <Navbar dict={dict} lang={lang} />
            <main>{children}</main>
            <Footer dict={dict} lang={lang} />
            <Toaster />
          </ThemeProvider>
        </body>
      </html>
    )
  } catch (error) {
    console.error("Layout error:", error)

    // Fallback layout with minimal functionality
    return (
      <html lang="sq" suppressHydrationWarning>
        <body className={inter.className}>
          <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
            <main>{children}</main>
            <div className="bg-gray-900 text-white p-4 text-center">
              <p>© 2024 Nderrim Bravash. All rights reserved.</p>
            </div>
            <Toaster />
          </ThemeProvider>
        </body>
      </html>
    )
  }
}
