import type { Metadata } from "next";
import { headers } from "next/headers";
import { Plus_Jakarta_Sans, Space_Grotesk } from "next/font/google";
import Script from "next/script";
import Providers from "./providers";
import { detectLocale, HTML_LANG } from "@/config/i18nRoutes";
import { getChatbotSettings } from "@/lib/wp/queries/chatbot";
import "@/index.css";

// Conteneur Google Tag Manager (public, pas un secret). Surchargeable par environnement
// via NEXT_PUBLIC_GTM_ID ; fallback sur l'ID de prod pour fonctionner sans config.
const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID || "GTM-K2Q2NXS";

// Corps de texte. Tous les poids 300..700 sont utilisés (font-light..font-bold).
const jakarta = Plus_Jakarta_Sans({
  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700"],
  display: "swap",
  variable: "--font-body",
});

// Chiffres et stats. Poids 700 uniquement (parité avec l'ancien wght@700).
const grotesk = Space_Grotesk({
  subsets: ["latin"],
  weight: ["700"],
  display: "swap",
  variable: "--font-display",
});

export const metadata: Metadata = {
  metadataBase: new URL("https://www.covalba.fr"),
  title: "Cool roof : expert fabricant français depuis 2018 | Covalba",
  description:
    "Covalba, pionnier français du cool roof depuis 2018. Revêtements réfléchissants haute performance, jusqu'à -10°C en intérieur, déployés sur +2M m² en France.",
  authors: [{ name: "Covalba" }],
  icons: { icon: "/favicon.png" },
  alternates: { canonical: "https://www.covalba.fr/" },
  openGraph: {
    title: "Peinture Cool Roof bâtiment industriel | Covalba",
    description:
      "Peinture cool roof pour bâtiment industriel. Jusqu'à -13°C en intérieur. Revêtements réfléchissants haute performance. Éligible primes CEE. Devis gratuit.",
    type: "website",
    locale: "fr",
    images: ["https://www.covalba.fr/hubfs/img-2024/hero-covalba-1920.webp"],
  },
  twitter: {
    card: "summary_large_image",
    title: "Peinture Cool Roof bâtiment industriel | Covalba",
    images: ["https://www.covalba.fr/hubfs/img-2024/hero-covalba-1920.webp"],
  },
};

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const chatbotSettings = await getChatbotSettings();
  const chatbotWidgetSrc =
    chatbotSettings?.enabled && chatbotSettings.widgetUrl
      ? `${chatbotSettings.widgetUrl.replace(/\/$/, "")}/widget.js`
      : null;

  return (
    <html lang="fr" className={`${jakarta.variable} ${grotesk.variable}`}>
      <head>
        {/* Google Tag Manager — chargé sur tous les environnements (prod + preprod/preview),
            le plus haut possible dans <head>. GA4 et Google Ads partent de ce conteneur. */}
        <Script id="gtm-base" strategy="afterInteractive">
          {`(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','${GTM_ID}');`}
        </Script>
        {/* End Google Tag Manager */}
        {/* Satoshi (titres) — pas de woff2 local dans le repo, donc maintenu sur
            Fontshare. Preconnect pour couper le coût de la requête bloquante :
            le CSS vit sur api.fontshare.com, les woff2 sur cdn.fontshare.com. */}
        <link rel="preconnect" href="https://api.fontshare.com" crossOrigin="anonymous" />
        <link rel="preconnect" href="https://cdn.fontshare.com" crossOrigin="anonymous" />
        <link
          href="https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap"
          rel="stylesheet"
        />
        {/* Plus Jakarta Sans + Space Grotesk : migrés vers next/font (variables
            --font-body / --font-display injectées sur <html>). */}
      </head>
      <body>
        {/* Google Tag Manager (noscript) — fallback sans JS, juste après <body>. */}
        <noscript>
          <iframe
            src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
            height="0"
            width="0"
            style={{ display: "none", visibility: "hidden" }}
          />
        </noscript>
        {/* End Google Tag Manager (noscript) */}
        <Providers>{children}</Providers>
        {chatbotWidgetSrc && (
          <Script
            id="covalba-chatbot-widget"
            src={chatbotWidgetSrc}
            strategy="afterInteractive"
          />
        )}
      </body>
    </html>
  );
}
