import type { Metadata } from "next";
import { Inter, Manrope } from "next/font/google";

import "../globals.css";

import { notFound } from "next/navigation";

import { GoogleAnalyticsTag } from "@/components/analytics/google-analytics";
import { OpenPanelAnalytics } from "@/components/analytics/openpanel";
import { JsonLd } from "@/components/meta/json-ld";
import { siteUrl } from "@/lib/env";
import { locales } from "@/lib/i18n";
import { DEFAULT_OG_IMAGE, SITE_NAME } from "@/lib/seo/pages";
import { ThemeProvider, ThemeScript } from "@/providers/theme-provider";

import { getDictionary, hasLocale } from "./dictionaries";

// Fonts are consumed via CSS variables (Tailwind `font-*`), so Next can't
// statically prove which weights paint first. With the default `preload: true`
// that produces "resource preloaded with link preload was not used within a few
// seconds" console warnings for the weights not used above the fold. `preload:
// false` + `display: "swap"` drops those preload <link>s (no warning) while the
// fallback stays visible and swaps in the webfont once loaded.
const manrope = Manrope({
  variable: "--font-manrope",
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
  display: "swap",
  preload: false,
});
const inter = Inter({
  variable: "--font-inter",
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
  display: "swap",
  preload: false,
});

export async function generateMetadata({
  params,
}: LayoutProps<"/[lang]">): Promise<Metadata> {
  const { lang } = await params;
  const dict = await getDictionary(hasLocale(lang) ? lang : "en");
  return {
    metadataBase: new URL(siteUrl),
    title: `SEO Insight | ${dict.hero.title_line1}`,
    description: dict.hero.subtitle,
    openGraph: {
      type: "website",
      siteName: SITE_NAME,
      title: "SEO Insight",
      description: dict.hero.subtitle,
      images: [DEFAULT_OG_IMAGE],
      locale: lang === "fr" ? "fr_FR" : "en_US",
    },
    // Site-wide Twitter Cards (FS-M1); pages override title/description via
    // their own metadata, but inherit this card type and image by default.
    twitter: {
      card: "summary_large_image",
      site: "@seoinsight",
      title: "SEO Insight",
      description: dict.hero.subtitle,
      images: [DEFAULT_OG_IMAGE.url],
    },
  };
}

export function generateStaticParams() {
  return locales.map((lang) => ({ lang }));
}

export default async function RootLayout({
  children,
  params,
}: LayoutProps<"/[lang]">) {
  const { lang } = await params;
  if (!hasLocale(lang)) notFound();
  return (
    <html
      lang={lang}
      suppressHydrationWarning
      className="scroll-smooth"
      data-scroll-behavior="smooth"
    >
      <head>
        {/* No-flash theme: set the `dark` class before first paint. */}
        <ThemeScript />
      </head>
      <body className={`${manrope.variable} ${inter.variable} antialiased`}>
        {/* Server-rendered outside ThemeProvider so the JSON-LD <script> is
            never re-created on the client (React 19 script warning). */}
        <JsonLd />
        <a
          href="#main-content"
          className="focus:bg-background focus:text-foreground sr-only rounded-md px-4 py-2 focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:shadow-lg focus:outline-2 focus:outline-offset-2"
        >
          {lang === "fr"
            ? "Aller au contenu principal"
            : "Skip to main content"}
        </a>
        <ThemeProvider defaultTheme="system">
          <div className="bg-background text-foreground">{children}</div>
        </ThemeProvider>
        <OpenPanelAnalytics />
        <GoogleAnalyticsTag />
      </body>
    </html>
  );
}