import type { ReactNode } from 'react'
import { ColorSchemeScript, mantineHtmlProps } from '@pikku/mantine/core'
import { WebsiteProviders } from '@/framework/website-providers'
import {
  getOrganizationStructuredData,
  getWebsiteStructuredData,
} from '@/lib/seo'

type RootDocumentProps = {
  children: ReactNode
  lang: string
  initialTheme: 'light' | 'dark' | 'auto'
  gaId?: string
  headContent?: ReactNode
  bodyEnd?: ReactNode
}

const FACEBOOK_PIXEL_BOOTSTRAP = `
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '1553398729104801');
fbq('track', 'PageView');
`

const getTextDirection = (lang: string) => (lang === 'ar' ? 'rtl' : 'ltr')

export function RootDocument({
  children,
  lang,
  initialTheme,
  gaId,
  headContent,
  bodyEnd,
}: RootDocumentProps) {
  const dir = getTextDirection(lang)
  const organizationStructuredData = getOrganizationStructuredData()
  const websiteStructuredData = getWebsiteStructuredData()

  return (
    <html lang={lang} dir={dir} {...mantineHtmlProps} suppressHydrationWarning>
      <head>
        {headContent}
        <ColorSchemeScript
          defaultColorScheme={initialTheme}
          suppressHydrationWarning
        />
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify(organizationStructuredData),
          }}
        />
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{
            __html: JSON.stringify(websiteStructuredData),
          }}
        />
        <script
          dangerouslySetInnerHTML={{ __html: FACEBOOK_PIXEL_BOOTSTRAP }}
        />
        {gaId ? (
          <>
            <script
              async
              src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}
            />
            <script
              dangerouslySetInnerHTML={{
                __html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${gaId}');
`,
              }}
            />
          </>
        ) : null}
      </head>
      <body suppressHydrationWarning>
        <noscript>
          <img
            height="1"
            width="1"
            style={{ display: 'none' }}
            src="https://www.facebook.com/tr?id=1553398729104801&ev=PageView&noscript=1"
          />
        </noscript>
        <script
          id="Cookiebot"
          src="https://consent.cookiebot.com/uc.js"
          data-cbid="2a5d6922-1fcb-4fcc-969c-4db4b935a77d"
          data-blockingmode="auto"
        />
        <WebsiteProviders initialTheme={initialTheme} locale={lang}>
          {children}
        </WebsiteProviders>
        {bodyEnd}
      </body>
    </html>
  )
}
