import type { Metadata } from "next";
import { Inter, Plus_Jakarta_Sans } from "next/font/google";
import { ToastContainer } from "react-toastify";
import TanstackWrapper from "./Providers/TanstackWrapper";
import StoreProvider from "./Providers/StoreProvider";
import ClientProviders from "./Providers/ClientProviders";
import { CONNECTOR_DEFAULT_OG_IMAGE_PATH } from "@/Utils/Other/campaignShare";
import "react-toastify/dist/ReactToastify.min.css";
import "react-phone-input-2/lib/style.css";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import "react-datepicker/dist/react-datepicker.css";
import "@cometchat/chat-uikit-react/css-variables.css";
import "./globals.css";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
  display: "swap",
  weight: ["400", "500", "600", "700", "800"],
});

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

const websiteUrl = process.env.WEBSITE_URL || "https://app.connector.cc";

export const metadata: Metadata = {
  metadataBase: new URL(websiteUrl),
  title: "Connector club - all-in-one influencer platform",
  description: "All-in-one influencer platform",
  openGraph: {
    title: "Connector club - all-in-one influencer platform",
    description: "All-in-one influencer platform",
    url: "https://app.connector.cc",
    siteName: "Connector club - all-in-one influencer platform",
    images: [
      {
        // Relative + metadataBase — avoid absolute WEBSITE_URL (self-fetch via CF).
        url: CONNECTOR_DEFAULT_OG_IMAGE_PATH,
        width: 1000,
        height: 1000,
        alt: "Connector club - all-in-one influencer platform",
      },
    ],
    type: "website",
  },
  facebook: {
    appId: "831325955875064",
  }
};

export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en" className={`${inter.variable} ${jakarta.variable}`}>
      <head>
        <script defer async
          dangerouslySetInnerHTML={{
            __html: `(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-P57P76VP');`,
          }}
        />
        <meta name="google-site-verification" content="TDR62WSVouMPTotjq9Ts1Y7KR5MttZdJbA8VkzJ3Y6w" />
      </head>
      <body className="font-inter font-normal antialiased text-neutral-900 bg-surfaceMuted" suppressHydrationWarning>
        {/* Google Tag Manager (noscript) */}
        <noscript>
          <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-P57P76VP" height="0" width="0" style={{ display: 'none', visibility: 'hidden' }}></iframe>
        </noscript>
        {/* End Google Tag Manager (noscript) */}
        <StoreProvider>
          <TanstackWrapper>
            <ClientProviders />
            {children}
          </TanstackWrapper>
        </StoreProvider>
        <ToastContainer />
      </body>
    </html>
  );
}
