import type { Metadata } from "next";
import { Cormorant_Garamond, Plus_Jakarta_Sans, Sora } from "next/font/google";
import Script from "next/script";
import "./globals.css";
import { Header } from "@/components/layout/header";
import { Footer } from "@/components/layout/footer";
import { CookieBanner } from "@/components/legal/cookie-banner";
import { SiteTextProvider } from "@/components/providers/site-text-provider";
import { EventModalProvider } from "@/components/store/event-modal-context";
import { EventModalPortal } from "@/components/store/event-modal-portal";
import { getResolvedSiteText } from "@/lib/site-text-server";
import { env } from "@/lib/env";

function getMetadataBase() {
  try {
    return new URL(env.siteUrl);
  } catch (error) {
    console.error("[metadata] Invalid NEXT_PUBLIC_SITE_URL, falling back to localhost", error);
    return new URL("http://localhost:3000");
  }
}

const sora = Sora({
  subsets: ["latin"],
  variable: "--font-sora",
  weight: ["500", "600", "700"],
});

const jakarta = Plus_Jakarta_Sans({
  subsets: ["latin"],
  variable: "--font-jakarta",
  weight: ["500", "600", "700"],
});

const cormorantGaramond = Cormorant_Garamond({
  subsets: ["latin"],
  variable: "--font-cormorant-garamond",
  style: ["normal", "italic"],
  weight: ["500", "600", "700"],
});

export const metadata: Metadata = {
  metadataBase: getMetadataBase(),
  title: {
    default: "Stylunique | Boutique personnalisable",
    template: "%s | Stylunique",
  },
  description: "Cadeaux, gourmandises et papeterie personnalisés pour vos événements.",
  alternates: {
    canonical: "/",
  },
  openGraph: {
    type: "website",
    locale: "fr_FR",
    siteName: "Stylunique",
    title: "Stylunique | Boutique personnalisable",
    description: "Cadeaux, gourmandises et papeterie personnalisés pour vos événements.",
    url: "/",
  },
  twitter: {
    card: "summary_large_image",
    title: "Stylunique | Boutique personnalisable",
    description: "Cadeaux, gourmandises et papeterie personnalisés pour vos événements.",
  },
};

const organizationSchema = {
  "@context": "https://schema.org",
  "@type": "Organization",
  name: "Stylunique",
  url: env.siteUrl,
  description: "Cadeaux, gourmandises et papeterie personnalisés pour vos événements.",
  sameAs: [],
};

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const siteText = await getResolvedSiteText();

  return (
    <html lang="fr">
      <head>
        <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(organizationSchema) }} />
        {/* Google Analytics */}
        <Script
          src="https://www.googletagmanager.com/gtag/js?id=G-LYGFMS3PJS"
          strategy="afterInteractive"
        />
        <Script
          id="google-analytics"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', 'G-LYGFMS3PJS', {
                page_path: window.location.pathname,
              });
            `,
          }}
        />
      </head>
      <body className={`${sora.variable} ${jakarta.variable} ${cormorantGaramond.variable} antialiased`}>
        <EventModalProvider>
          <SiteTextProvider siteText={siteText}>
            <div className="site-shell">
              <Header siteText={siteText} />
              <main className="mx-auto w-full max-w-7xl px-4 py-8 md:px-8 md:py-12">{children}</main>
              <Footer siteText={siteText} />
            </div>
            <CookieBanner />
            <EventModalPortal />
          </SiteTextProvider>
        </EventModalProvider>
      </body>
    </html>
  );
}
