import type { Metadata } from 'next'
import { Inter, Cinzel } from 'next/font/google'
import Script from 'next/script'
import { Suspense } from 'react'
import './globals.css'
import Header from '@/components/navigation/Header'
import AppProviders from '@/components/providers/AppProviders'
import { SITE_URL } from '@/lib/site-config'

const GA_MEASUREMENT_ID = 'G-LWHEK7VY61'

const inter = Inter({ subsets: ['latin', 'latin-ext'] })
const cinzel = Cinzel({ weight: '400', subsets: ['latin', 'latin-ext'], variable: '--font-cinzel' })

export const metadata: Metadata = {
  metadataBase: new URL(SITE_URL),
  title: {
    default: 'Twoja Łódka — łodzie i jachty na sprzedaż',
    template: '%s | Twoja Łódka',
  },
  description: 'Profesjonalna sprzedaż, wynajem i serwis żaglówek w Polsce',
  openGraph: {
    type: 'website',
    locale: 'pl_PL',
    siteName: 'Twoja Łódka',
    title: 'Twoja Łódka — łodzie i jachty na sprzedaż',
    description: 'Ogłoszenia sprzedaży łodzi, jachtów, silników i wyposażenia w całej Polsce.',
    url: SITE_URL,
  },
  icons: {
    icon: [{ url: '/images/brand/logo-mark-dark.png', type: 'image/png' }],
    shortcut: ['/images/brand/logo-mark-dark.png'],
    apple: [{ url: '/images/brand/logo-mark-dark.png', type: 'image/png' }],
  },
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const websiteJsonLd = {
    '@context': 'https://schema.org',
    '@graph': [
      {
        '@type': 'Organization',
        '@id': `${SITE_URL}/#organization`,
        name: 'Twoja Łódka',
        url: SITE_URL,
        logo: `${SITE_URL}/images/brand/logo-mark-dark.png`,
      },
      {
        '@type': 'WebSite',
        '@id': `${SITE_URL}/#website`,
        url: SITE_URL,
        name: 'Twoja Łódka',
        inLanguage: 'pl-PL',
        publisher: { '@id': `${SITE_URL}/#organization` },
      },
    ],
  }

  return (
    <html lang="pl">
      <body className={`${inter.className} ${cinzel.variable}`} suppressHydrationWarning>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(websiteJsonLd).replace(/</g, '\\u003c') }}
        />
        <Suspense fallback={null}>
          <AppProviders>
            <Header />
            <main>{children}</main>
          </AppProviders>
        </Suspense>
        <Script
          strategy="afterInteractive"
          src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}
        />
        <Script id="google-tag" strategy="afterInteractive">
          {`
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${GA_MEASUREMENT_ID}');
          `}
        </Script>
      </body>
    </html>
  )
}
