import { Provider } from "@/components/ui/provider";
import { Bricolage_Grotesque } from "next/font/google";
import { hasLocale, NextIntlClientProvider } from "next-intl";
import { notFound } from "next/navigation";
import { routing } from "@/i18n/routing";
import { dir } from "i18next";
import { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import "./global.css";

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "seo" });
  const siteUrl = process.env.NEXT_PUBLIC_APP_URL || "https://iddaai.com";

  return {
    metadataBase: new URL(siteUrl),
    title: {
      template: `%s | ${t("global.title").split(" | ")[0]}`,
      default: t("global.title"),
    },
    description: t("global.description"),
    keywords: t("global.keywords"),
    openGraph: {
      title: t("global.title"),
      description: t("global.description"),
      siteName: t("global.title").split(" | ")[0],
      locale: locale,
      type: "website",
    },
    twitter: {
      card: "summary_large_image",
      title: t("global.title"),
      description: t("global.description"),
    },
  };
}

const bricolage = Bricolage_Grotesque({
  variable: "--font-bricolage",
  subsets: ["latin"],
});

export default async function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  if (!hasLocale(routing.locales, locale)) {
    notFound();
  }

  const siteUrl = process.env.NEXT_PUBLIC_APP_URL || "https://iddaai.com";
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "WebSite",
    name: "iddaai.com",
    url: siteUrl,
    potentialAction: {
      "@type": "SearchAction",
      target: `${siteUrl}/search?q={search_term_string}`,
      "query-input": "required name=search_term_string",
    },
  };

  const orgJsonLd = {
    "@context": "https://schema.org",
    "@type": "Organization",
    name: "iddaai.com",
    url: siteUrl,
    logo: `${siteUrl}/favicon/android-chrome-512x512.png`,
  };

  return (
    <html
      lang={locale}
      dir={dir(locale)}
      suppressHydrationWarning
      data-scroll-behavior="smooth"
    >
      <head>
        {/* <link rel='apple-touch-icon' sizes='180x180' href='/favicon/apple-touch-icon.png' />
        <link rel='icon' type='image/png' sizes='32x32' href='/favicon/favicon-32x32.png' />
        <link rel='icon' type='image/png' sizes='16x16' href='/favicon/favicon-16x16.png' /> */}
        <link rel="manifest" href="/favicon/site.webmanifest" />
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
        />
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(orgJsonLd) }}
        />
      </head>
      <body className={bricolage.variable} suppressHydrationWarning>
        <NextIntlClientProvider>
          <Provider>{children}</Provider>
        </NextIntlClientProvider>
      </body>
    </html>
  );
}
