import { Suspense } from 'react'
import type { Metadata } from 'next'
import { Geist, Geist_Mono } from 'next/font/google'
import { Analytics } from '@vercel/analytics/next'
import { Header } from '@/components/shared/Header'
import { Footer } from '@/components/shared/Footer'
import { AuthProvider } from '@/components/providers/AuthProvider'
import { ContactDialog } from '@/components/shared/ContactDialog'
import { ShareDialog } from '@/components/shared/ShareDialog'
import { WhatsAppFloatingButton } from '@/components/shared/WhatsAppFloatingButton'
import { PageTracker } from '@/components/shared/PageTracker'
import { ContentProtection } from '@/components/shared/ContentProtection'
import './globals.css'

import { SITE_CONFIG } from '@/lib/constants'
import { ThemeProvider } from '@/components/theme-provider'
import { Toaster } from '@/components/ui/sonner'

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

export const metadata: Metadata = {
  metadataBase: new URL(SITE_CONFIG.url),
  title: {
    default: SITE_CONFIG.name,
    template: `%s | ${SITE_CONFIG.name}`,
  },
  description: SITE_CONFIG.description,
  keywords: 'toko volt, toko volt ponorogo,voltify store ponorogo, voltify ponorogo, toko elektronik ponorogo, komponen elektronik ponorogo, jual arduino ponorogo, jual esp32 ponorogo, sensor iot ponorogo, komponen elektronika jawa timur, toko arduino jawa tengah, robotika ponorogo',
  verification: {
    google: 'IimPyLMoKlY6cldyOJp6Fx33QNQTjrq3egcbYDhC3lw',
  },
  openGraph: {
    title: SITE_CONFIG.fullName,
    description: SITE_CONFIG.description,
    url: SITE_CONFIG.url,
    siteName: SITE_CONFIG.name,
    type: 'website',
    locale: 'id_ID',
    images: [
      {
        url: '/og-main.webp',
        width: 1200,
        height: 630,
        alt: SITE_CONFIG.fullName,
      },
    ],
  },
  twitter: {
    card: 'summary_large_image',
    title: SITE_CONFIG.fullName,
    description: SITE_CONFIG.description,
    images: ['/og-main.webp'],
  },
  icons: {
    icon: [
          {
      url: '/favicon.ico',
    },
      {
        url: '/icon-light-32x32-v2.png',
        media: '(prefers-color-scheme: light)',
      },
      {
        url: '/icon-dark-32x32-v2.png',
        media: '(prefers-color-scheme: dark)',
      },
      {
        url: '/icon-v2.svg',
        type: 'image/svg+xml',
      },
    ],
    apple: '/apple-icon-v2.png',
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="id" className={`${geistSans.variable} ${geistMono.variable} bg-background no-select-content`} suppressHydrationWarning>
      <body className="font-sans antialiased flex flex-col min-h-screen" suppressHydrationWarning>
        <ThemeProvider
          attribute="class"
          defaultTheme="light"
          enableSystem
          disableTransitionOnChange
        >
          <AuthProvider>
            <Header />
            <main className="flex-1">
              {children}
            </main>
            <Footer />
            <Toaster />
            <ContactDialog />
            <ShareDialog />
            <WhatsAppFloatingButton />
            <ContentProtection />
            {/* useSearchParams wajib dibungkus Suspense di app router */}
            <Suspense fallback={null}>
              <PageTracker />
            </Suspense>
            {process.env.NODE_ENV === 'production' && <Analytics />}
          </AuthProvider>
        </ThemeProvider>
      </body>
    </html>
  )
}

