import type { Metadata } from "next";
import "./globals.css";
// Tailwind CSS v4 - Empty on CodeSandbox (uses CDN), filled by postinstall on Vercel
import "./tailwind.css";
import { GeistSans } from "geist/font/sans";
import { cn } from "@/lib/utils";
import { ThemeProvider } from "@/context/theme-provider";
import { NavBar } from "@/components/navbar";
import { Footer } from "@/components/footer";
import { KleapScripts } from "@/components/kleap-scripts";
import { DevToolsGuard } from "./devtools-guard";
import { TailwindCDNClient } from "@/components/tailwind-cdn-client";

export const metadata: Metadata = {
  title: {
    default: "Your SaaS Name - AI-Powered Solution",
    template: "%s | Your SaaS Name",
  },
  description:
    "Built with Kleap - AI-powered platform to create stunning websites and apps. Turn your ideas into reality in minutes.",
  keywords: ["SaaS", "AI", "Template", "Next.js", "React", "TypeScript"],
  authors: [{ name: "Your Name" }],
  creator: "Your Company",
  publisher: "Your Company",
  icons: {
    icon: "/favicon.ico",
    shortcut: "/favicon.ico",
    apple: "/favicon.ico",
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },
  openGraph: {
    type: "website",
    locale: "en_US",
    url: process.env.NEXT_PUBLIC_URL || "https://kleap.co",
    siteName: "Your SaaS Name",
    title: "Your SaaS Name - AI-Powered Solution",
    description:
      "Built with Kleap - AI-powered platform to create stunning websites and apps. Turn your ideas into reality in minutes.",
    images: [
      {
        url: "/og-image.png",
        width: 1200,
        height: 630,
        alt: "Your SaaS Name",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "Your SaaS Name - AI-Powered Solution",
    description:
      "Built with Kleap - AI-powered platform to create stunning websites and apps. Turn your ideas into reality in minutes.",
    images: ["/og-image.png"],
    creator: "@yourtwitter",
  },
  metadataBase: new URL(process.env.NEXT_PUBLIC_URL || "https://kleap.co"),
  alternates: {
    canonical: "/",
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head suppressHydrationWarning>
        {/*
          Tailwind CSS v4:
          - CodeSandbox: Uses CDN (loaded here in <head> BEFORE React)
          - Vercel: Uses compiled CSS via @tailwindcss/postcss (imported above)
        */}

        {/*
          CRITICAL: Base styles to prevent FOUC and hydration errors
          ⚠️ DO NOT REMOVE OR MODIFY WITHOUT CAREFUL TESTING ⚠️
          React 19 requires href and precedence attributes on style tags
        */}
        <style href="kleap-base-styles" precedence="high">{`
          /* Base styles to prevent FOUC - always rendered server+client */
          .bg-white { background-color: white; }
          .bg-black { background-color: black; }
          .text-white { color: white; }
          .text-black { color: black; }
          .dark .dark\\:bg-black { background-color: black; }
          .dark .dark\\:text-white { color: white; }
          .antialiased { -webkit-font-smoothing: antialiased; }
          .h-full { height: 100%; }
          .w-full { width: 100%; }

          /*
            IMPORTANT: Button and shadcn/ui color styles
            These classes are NOT generated by Tailwind v4 CDN and MUST be defined manually
            Without these, buttons and shadcn components will appear unstyled
            DO NOT REMOVE - Required for all shadcn/ui components to work properly
          */
          .bg-primary { background-color: #020022; }
          .text-primary-foreground { color: hsl(0 0% 98%); }
          .hover\\:bg-primary\\/90:hover { background-color: rgba(2, 0, 34, 0.9); }
          .bg-secondary { background-color: hsl(240 4.8% 95.9%); }
          .text-secondary-foreground { color: hsl(240 5.9% 10%); }
          .hover\\:bg-secondary\\/80:hover { background-color: hsla(240, 4.8%, 95.9%, 0.8); }
          .bg-destructive { background-color: hsl(0 84.2% 60.2%); }
          .text-destructive-foreground { color: hsl(0 0% 98%); }
          .hover\\:bg-destructive\\/90:hover { background-color: hsla(0, 84.2%, 60.2%, 0.9); }
          .border-input { border-color: hsl(240 5.9% 90%); }
          .bg-background { background-color: hsl(0 0% 100%); }
          .bg-accent { background-color: hsl(240 4.8% 95.9%); }
          .text-accent-foreground { color: hsl(240 5.9% 10%); }
          .hover\\:bg-accent:hover { background-color: hsl(240 4.8% 95.9%); }
          .hover\\:text-accent-foreground:hover { color: hsl(240 5.9% 10%); }
          .ring-offset-background { --tw-ring-offset-color: hsl(0 0% 100%); }
          .focus-visible\\:ring-2:focus-visible { --tw-ring-width: 2px; }
          .focus-visible\\:ring-ring:focus-visible { --tw-ring-color: hsl(240 5.9% 10%); }
          .focus-visible\\:ring-offset-2:focus-visible { --tw-ring-offset-width: 2px; }

          /* Dark mode button styles */
          .dark .bg-primary { background-color: #020022; }
          .dark .text-primary-foreground { color: hsl(0 0% 98%); }
          .dark .bg-secondary { background-color: hsl(240 3.7% 15.9%); }
          .dark .text-secondary-foreground { color: hsl(0 0% 98%); }
          .dark .bg-destructive { background-color: hsl(0 62.8% 30.6%); }
          .dark .text-destructive-foreground { color: hsl(0 0% 98%); }
          .dark .border-input { border-color: hsl(240 3.7% 15.9%); }
          .dark .bg-background { background-color: hsl(240 10% 3.9%); }
          .dark .bg-accent { background-color: hsl(240 3.7% 15.9%); }
          .dark .text-accent-foreground { color: hsl(0 0% 98%); }
          .dark .ring-offset-background { --tw-ring-offset-color: hsl(240 10% 3.9%); }
          .dark .focus-visible\\:ring-ring:focus-visible { --tw-ring-color: hsl(240 4.9% 83.9%); }

          /* FOUC Prevention - Hide until CSS loads */
          body { opacity: 0; transition: opacity 0.15s ease-in; }
          body.css-loaded { opacity: 1; }
        `}</style>
      </head>
      <body
        className={cn(
          GeistSans.className,
          "bg-white dark:bg-black antialiased h-full w-full",
        )}
        suppressHydrationWarning // Prevents browser extension conflicts
      >
        <DevToolsGuard />
        <TailwindCDNClient />
        <ThemeProvider
          attribute="class"
          enableSystem={false}
          disableTransitionOnChange
          defaultTheme="light"
        >
          <KleapScripts />
          <main>
            <NavBar />
            {children}
            <Footer />
          </main>
        </ThemeProvider>
      </body>
    </html>
  );
}
