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";

const GA_TRACKING_ID = "G-E272LVVQRD";

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>
        <Script
          src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
          strategy="afterInteractive"
        />
        <Script id="google-analytics" strategy="afterInteractive">
          {`
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${GA_TRACKING_ID}');
          `}
        </Script>
      </head>
      <body className="min-h-screen flex flex-col bg-gray-50">
        <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>
  );
}
