import type { Metadata, Viewport } from "next"
import { Geist, Geist_Mono } from "next/font/google"
import { Analytics } from "@vercel/analytics/next"
import { ThreeBackground } from "@/components/three-background"
import { AdGateProvider } from "@/components/ads/ad-gate"
import "./globals.css"

const _geist = Geist({ subsets: ["latin"] })
const _geistMono = Geist_Mono({ subsets: ["latin"] })

// Canonical origin — used by `metadataBase` so relative OG/Twitter
// image URLs resolve correctly when crawlers fetch them, and by the
// manifest/robots/sitemap files that need an absolute URL.
const SITE_URL = "https://zunochat.lakhan.in"

export const metadata: Metadata = {
  metadataBase: new URL(SITE_URL),
  // Title template — pages can set `title: "Something"` and Next.js will
  // render "Something · ZunoChat". Homepage uses the default below.
  title: {
    default: "ZunoChat — Free Random Video Chat with Strangers",
    template: "%s · ZunoChat",
  },
  description:
    "ZunoChat is a free random video chat app to meet new people around the world. Enjoy instant 1-on-1 video calls, live beauty filters, safe matchmaking, and verified profiles. No download required — works in your browser.",
  applicationName: "ZunoChat",
  generator: "Next.js",
  referrer: "origin-when-cross-origin",
  keywords: [
    "ZunoChat",
    "random video chat",
    "video chat with strangers",
    "free random chat",
    "meet new people online",
    "omegle alternative",
    "chatroulette alternative",
    "live video chat",
    "1 on 1 video call",
    "webcam chat",
    "cam chat",
    "talk to strangers",
    "online video chat",
    "stranger video chat",
    "make new friends online",
    "video filters chat",
    "beauty filter video chat",
    "safe random chat",
    "verified video chat",
    "peer to peer video chat",
    "instant video chat",
    "anonymous video chat",
    "social video app",
    "global video chat",
    "zunochat",
  ],
  authors: [{ name: "ZunoChat" }],
  creator: "ZunoChat",
  publisher: "ZunoChat",
  category: "Social Networking",
  alternates: {
    canonical: "/",
  },
  // Robots — explicitly tell all major crawlers to index and follow,
  // with Google-specific hints for rich image/video previews.
  robots: {
    index: true,
    follow: true,
    nocache: false,
    googleBot: {
      index: true,
      follow: true,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },
  openGraph: {
    type: "website",
    locale: "en_US",
    url: SITE_URL,
    siteName: "ZunoChat",
    title: "ZunoChat — Free Random Video Chat with Strangers",
    description:
      "Meet new people face-to-face over peer-to-peer video with live beauty filters, verified profiles, and instant matchmaking. Free, no download required.",
    images: [
      {
        url: "/opengraph-image.jpg",
        width: 1200,
        height: 630,
        alt: "ZunoChat — Random Video Chat",
        type: "image/jpeg",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "ZunoChat — Free Random Video Chat with Strangers",
    description:
      "Meet new people face-to-face over peer-to-peer video with live beauty filters, verified profiles, and instant matchmaking.",
    images: ["/opengraph-image.jpg"],
  },
  manifest: "/manifest.webmanifest",
  // Icon set — order matters: browsers pick the first format they can
  // decode. The SVG is the preferred modern icon (infinite resolution),
  // the 96x96 PNG is a universal fallback, the .ico is for legacy IE /
  // bookmark UIs, and the apple-icon is iOS home-screen specific.
  icons: {
    icon: [
      { url: "/favicon.ico", sizes: "any", rel: "shortcut icon" },
      { url: "/icon0.svg", type: "image/svg+xml" },
      { url: "/icon1.png", sizes: "96x96", type: "image/png" },
      {
        url: "/web-app-manifest-192x192.png",
        sizes: "192x192",
        type: "image/png",
      },
      {
        url: "/web-app-manifest-512x512.png",
        sizes: "512x512",
        type: "image/png",
      },
    ],
    shortcut: ["/favicon.ico"],
    apple: [{ url: "/apple-icon.png", sizes: "180x180", type: "image/png" }],
    other: [
      {
        rel: "mask-icon",
        url: "/icon0.svg",
        color: "#E6299B",
      },
    ],
  },
  appleWebApp: {
    capable: true,
    title: "ZunoChat",
    statusBarStyle: "black-translucent",
  },
  formatDetection: {
    email: false,
    address: false,
    telephone: false,
  },
  // Localized variants — keeps the SEO surface consistent if we add
  // hreflang alternates later.
  other: {
    "msapplication-TileColor": "#E6299B",
    "msapplication-config": "/browserconfig.xml",
  },
}

// Viewport metadata lives in its own export per Next.js 15+ guidelines.
// `themeColor` here drives the mobile browser address-bar tint — we use
// the app's off-white surface so the chrome blends with the header.
export const viewport: Viewport = {
  themeColor: [
    { media: "(prefers-color-scheme: light)", color: "#FAFAFC" },
    { media: "(prefers-color-scheme: dark)", color: "#17162A" },
  ],
  width: "device-width",
  initialScale: 1,
  viewportFit: "cover",
  // Allow user scaling for accessibility — never disable zoom.
  userScalable: true,
  maximumScale: 5,
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" className="h-full bg-background">
      <head>
        {/* JSON-LD structured data for Google — declares the site as a
            WebApplication which unlocks richer SERP presentation (app
            badge, rating stars once reviews exist, etc.). */}
        <script
          type="application/ld+json"
          // eslint-disable-next-line react/no-danger
          dangerouslySetInnerHTML={{
            __html: JSON.stringify({
              "@context": "https://schema.org",
              "@type": "WebApplication",
              name: "ZunoChat",
              url: SITE_URL,
              applicationCategory: "SocialNetworkingApplication",
              operatingSystem: "Any",
              description:
                "ZunoChat is a free random video chat app to meet new people around the world with live beauty filters, verified profiles, and instant matchmaking.",
              browserRequirements: "Requires modern browser with WebRTC",
              offers: {
                "@type": "Offer",
                price: "0",
                priceCurrency: "USD",
              },
              image: `${SITE_URL}/opengraph-image.jpg`,
              logo: `${SITE_URL}/web-app-manifest-512x512.png`,
              potentialAction: {
                "@type": "UseAction",
                target: SITE_URL,
              },
            }),
          }}
        />
        <script
          type="application/ld+json"
          // eslint-disable-next-line react/no-danger
          dangerouslySetInnerHTML={{
            __html: JSON.stringify({
              "@context": "https://schema.org",
              "@type": "WebSite",
              name: "ZunoChat",
              url: SITE_URL,
              potentialAction: {
                "@type": "SearchAction",
                target: `${SITE_URL}/?q={search_term_string}`,
                "query-input": "required name=search_term_string",
              },
            }),
          }}
        />
      </head>
      <body className="relative min-h-full overscroll-none font-sans antialiased">
        {/* Ambient Three.js background — fixed behind all content, purely
            decorative, auto-disabled under prefers-reduced-motion. Must
            be mounted once at the root so it persists across client
            navigations without re-initialising WebGL. */}
        <ThreeBackground />
        {/* Adsterra ad gate. Mounted at the root so its modal/context is
            available to every page; renders nothing visible until the
            admin turns ads on in /admin/ads. */}
        <AdGateProvider>{children}</AdGateProvider>
        {process.env.NODE_ENV === "production" && <Analytics />}
      </body>
    </html>
  )
}