import type { ReactNode } from 'react'
import type { Metadata } from 'next'

import { AdminBar } from '@/components/AdminBar'
import { CookieConsent } from '@/components/CookieConsent/index.client'
import { Footer } from '@/components/Footer'
import { Header } from '@/components/Header'
import { LivePreviewListener } from '@/components/LivePreviewListener'
import { MobileNavigation } from '@/components/MobileNavigation'
import { ensureStartsWith } from '@/utilities/ensureStartsWith'
import { getServerSideURL } from '@/utilities/getURL'
import { Providers } from '@/providers'
import { InitTheme } from '@/providers/Theme/InitTheme'
import { GeistMono } from 'geist/font/mono'
import React from 'react'
import './globals.css'

const { SITE_NAME, TWITTER_CREATOR, TWITTER_SITE } = process.env
const baseUrl = getServerSideURL()
const siteName = SITE_NAME || 'Payload Commerce'
const twitterCreator = TWITTER_CREATOR ? ensureStartsWith(TWITTER_CREATOR, '@') : undefined
const twitterSite = TWITTER_SITE ? ensureStartsWith(TWITTER_SITE, 'https://') : undefined

export const metadata: Metadata = {
  metadataBase: new URL(baseUrl),
  robots: {
    follow: true,
    index: true,
  },
  title: {
    default: siteName,
    template: `%s | ${siteName}`,
  },
  ...(twitterCreator &&
    twitterSite && {
      twitter: {
        card: 'summary_large_image',
        creator: twitterCreator,
        site: twitterSite,
      },
    }),
}

export default async function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html
      className={[GeistMono.variable].filter(Boolean).join(' ')}
      lang="en"
      suppressHydrationWarning
    >
      <head>
        <InitTheme />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
        <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet" />
      </head>
      <body>
        <Providers>
          <AdminBar />
          <LivePreviewListener />

          <Header />
          <main className="pb-[var(--bmj-mobile-nav-offset)] md:pb-0">{children}</main>
          <Footer />
          <MobileNavigation />
          <CookieConsent />
        </Providers>
      </body>
    </html>
  )
}
