import type { Metadata } from "next";
import Script from "next/script";
import "./globals.css";
import { Toaster } from "react-hot-toast";
import LayoutClient from "./layout-client";
import { Providers } from "./providers";

// Google Analytics 4
const GA_TRACKING_ID = "G-E272LVVQRD";
// Google Tag Manager
const GTM_ID = "GTM-WN8H6RTC";

export const metadata: Metadata = {
  metadataBase: new URL(process.env.NEXT_PUBLIC_FRONTEND_URL || 'https://dsp5-archi-o24a-15m-g3.fr'),
  title: "Thé Tip Top - Jeu Concours",
  description: "Participez au grand jeu-concours Thé Tip Top et gagnez des lots exceptionnels ! 100% de tickets gagnants.",
  keywords: "thé, concours, jeu, tip top, nice, gain, lot, infuseur, coffret",
  authors: [{ name: "Thé Tip Top" }],
  icons: {
    icon: [
      { url: '/favicon.svg', type: 'image/svg+xml' },
      { url: '/icon.svg', type: 'image/svg+xml' },
      { url: '/logos/logo.svg', type: 'image/svg+xml' },
    ],
    shortcut: '/favicon.svg',
    apple: '/logos/logo.svg',
  },
  openGraph: {
    title: "Thé Tip Top - Jeu Concours",
    description: "Participez au grand jeu-concours et gagnez des lots exceptionnels !",
    type: "website",
    locale: "fr_FR",
    images: [
      {
        url: '/logos/logo.svg',
        width: 1200,
        height: 630,
        alt: 'Thé Tip Top Logo',
      },
    ],
  },
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fr">
      <head>
        {/* Google Tag Manager - must load first */}
        <Script id="google-tag-manager" strategy="beforeInteractive">
          {`
            (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-WN8H6RTC');
          `}
        </Script>
        {/* Google Analytics 4 */}
        <Script
          src="https://www.googletagmanager.com/gtag/js?id=G-E272LVVQRD"
          strategy="beforeInteractive"
        />
        <Script id="google-analytics" strategy="beforeInteractive">
          {`
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'G-E272LVVQRD');
          `}
        </Script>
      </head>
      <body className="min-h-screen flex flex-col bg-gray-50">
        {/* Google Tag Manager (noscript) */}
        <noscript>
          <iframe
            src="https://www.googletagmanager.com/ns.html?id=GTM-WN8H6RTC"
            height="0"
            width="0"
            style={{ display: 'none', visibility: 'hidden' }}
          />
        </noscript>
        <Providers>
          <LayoutClient>{children}</LayoutClient>
        </Providers>
        <Toaster
            position="top-right"
            toastOptions={{
              duration: 4000,
              style: {
                background: '#fff',
                color: '#333',
              },
              success: {
                iconTheme: {
                  primary: '#10B981',
                  secondary: '#fff',
                },
              },
              error: {
                iconTheme: {
                  primary: '#EF4444',
                  secondary: '#fff',
                },
              },
            }}
          />
      </body>
    </html>
  );
}
