import React from "react";
import "../globals.css";
import { notFound } from "next/navigation";
import { golosText, routing } from "@/shared/config";
import { Locale } from "@/shared/types/locale";
import { LanguageRoutes } from "@/shared/config/i18n/types";
import { Navbar } from "@/widgets";
import Footer from "@/widgets/footer/footer";
import { Metadata } from "next";
import { PRODUCT_INFO } from "@/shared/constants";
import { hasLocale, NextIntlClientProvider } from "next-intl";
import { setRequestLocale } from "next-intl/server";
import QueryProvider from "@/shared/providers/QueryProvider";
import ProgressBar from "@/shared/ui/progressbar";
import { Toaster } from "@/shared/ui/sonner";
import Script from "next/script";

export const metadata: Metadata = {
  title: PRODUCT_INFO.name,
  description: PRODUCT_INFO.description,
  icons: PRODUCT_INFO.favicon,
  keywords: [
    "get green",
    "green energy",
    "get green energy trade",
    "quyosh uskunalari",
    "солнечное оборудование",
  ],
  metadataBase: new URL(PRODUCT_INFO.url),
  alternates: {
    canonical: PRODUCT_INFO.url,
    languages: {
      uz: `${PRODUCT_INFO.url}/${LanguageRoutes.UZ}`,
      ru: `${PRODUCT_INFO.url}/${LanguageRoutes.RU}`,
    },
  },
  applicationName: PRODUCT_INFO.name,
  authors: [{ name: PRODUCT_INFO.creator, url: "https://felix-its.uz/" }],
  category: "website",
  openGraph: {
    title: PRODUCT_INFO.name,
    url: PRODUCT_INFO.url,
    description: PRODUCT_INFO.description,
    type: "website",
    countryName: "O'zbekiston",
    siteName: PRODUCT_INFO.name,
    images: {
      url: "/og-banner.png",
      alt: "get green",
      width: 1200,
      height: 630,
    },
    alternateLocale: [LanguageRoutes.UZ, LanguageRoutes.RU],
  },
};

type LayoutProps = {
  children: React.ReactNode;
  params: Promise<{ locale: Locale }>;
};

export default async function LocaleLayout({ children, params }: LayoutProps) {
  const { locale } = await params;
  if (!hasLocale(routing.locales, locale)) {
    notFound();
  }

  // Enable static rendering
  setRequestLocale(locale);

  return (
    <html lang={locale} suppressHydrationWarning>
      <head>
        {/* Google tag (gtag.js) */}
        <Script
          src="https://www.googletagmanager.com/gtag/js?id=AW-17219198796"
          strategy="afterInteractive"
        />
        <Script id="gtag-init" strategy="afterInteractive">
          {`
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'AW-17219198796');
          `}
        </Script>
        {/* Google Ads Conversion Tracking */}
        <Script id="conversion-tracking" strategy="afterInteractive">
          {`
          gtag('event', 'conversion', {
            send_to: 'AW-17219198796/SQJ6CJuH8dwaEMy-4JJA',
            value: 1.0,
            currency: 'USD'
          });
        `}
        </Script>
      </head>
      <body
        className={`${golosText.variable} ${golosText.className} font-poppins antialiased`}
      >
        <NextIntlClientProvider locale={locale as LanguageRoutes}>
          <QueryProvider>
            <ProgressBar />
            <Navbar />
            {children}
            <Footer />
            <Toaster position="bottom-center" richColors />
          </QueryProvider>
        </NextIntlClientProvider>
      </body>
    </html>
  );
}
