import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import SplashScreen from "@/components/shared/SplashScreen";
import SmoothScroll from "@/components/shared/SmoothScroll";
import { CartProvider } from "@/context/CartContext";
import { SiteConfigProvider } from "@/context/SiteConfigContext";
import { fetchSiteConfig } from "@/services/site-config.service";
import FloatingCart from "@/components/shared/FloatingCart";
import CartSidebar from "@/components/shared/CartSidebar";
import FloatingWhatsApp from "@/components/shared/FloatingWhatsApp";
import { Toaster } from "sonner";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export async function generateMetadata(): Promise<Metadata> {
  const siteConfig = (await fetchSiteConfig()) as any;
  const companyName = siteConfig.company_name || "Electronics Store";
  const title = {
    default: siteConfig.site_meta_title || `${companyName} | Home`,
    template: `${companyName} | %s`
  };
  const description = siteConfig.site_meta_description || (siteConfig.company_short_description
    ? siteConfig.company_short_description
    : "Genuine electronics, home appliances and gadgets from trusted brands — with warranty, EMI options and fast nationwide delivery.");
  const logo = siteConfig.company_logo || "/favicon.ico";
  const ogImage = siteConfig.site_og_image || siteConfig.company_logo || "/images/og-image.webp";
  const keywordsString = siteConfig.site_meta_keywords || "electronics, gadgets, home appliances, smartphones, laptops, tv, refrigerator, warranty";
  const keywords = keywordsString.split(",").map((k: string) => k.trim());

  return {
    title,
    description,
    keywords,
    metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000"),
    openGraph: {
      title,
      description,
      siteName: siteConfig.company_name || "Electronics Store",
      images: [
        {
          url: ogImage,
        },
      ],
      locale: "en_US",
      type: "website",
    },
    twitter: {
      card: "summary_large_image",
      title,
      description,
      images: [ogImage],
    },
    authors: [{ name: siteConfig.company_name || "Electronics Store" }],
    icons: {
      icon: logo,
      shortcut: logo,
      apple: logo,
    },
  };
}

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

  return (
    <html lang="en">
      <head>
        <meta
          name="google-site-verification"
          content="t8Oyf20bPl5W-UsQvEsrEaxwM66bah4PHMnx8YyoYPM"
        />
      </head>
      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
        <SiteConfigProvider config={siteConfig}>
          <CartProvider>
            <SplashScreen />
            <SmoothScroll />
            {children}
            <FloatingCart />
            <FloatingWhatsApp />
            <CartSidebar />
          </CartProvider>
        </SiteConfigProvider>

        <Toaster
          position="top-right"
          richColors
          closeButton
          toastOptions={{
            style: {
              fontFamily: "var(--font-geist-sans)",
              fontSize: "12px",
              fontWeight: 600,
              borderRadius: "12px",
            },
            classNames: {
              toast: "shadow-xl border",
              success: "border-emerald-200 dark:border-emerald-900",
              error: "border-red-200 dark:border-red-900",
            },
          }}
        />
      </body>
    </html>
  );
}
