import PlausibleProvider from 'next-plausible'
import TopLoader from '../components/top-loader'
import Navigasyon from '../components/navigasyon'
import ThemeRegistry from './theme-registy'

const siteName = process.env.NEXT_PUBLIC_SITE_NAME || 'PAWÒL-NU. Paroles et traductions.'
const siteDescription = process.env.NEXT_PUBLIC_SITE_DESCRIPTION || 'PAWÒL-NU a pour but de promouvoir le Medukam (ou Wanni Wannan) et les productions afro-diasporiques.'
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://pawol.nu'
const orgName = process.env.NEXT_PUBLIC_ORG_NAME || 'OKI'
const orgEmail = process.env.NEXT_PUBLIC_ORG_EMAIL || 'kontak@o-k-i.net'
const orgLocation = process.env.NEXT_PUBLIC_ORG_LOCATION || 'Guadeloupe'
const twitterHandle = `@${process.env.NEXT_PUBLIC_TWITTER_USERNAME || 'OrganisationKA'}`
const plausibleUrl = process.env.NEXT_PUBLIC_PLAUSIBLE_URL || null

export const metadata = {
  metadataBase: new URL(siteUrl),
  manifest: '/manifest.webmanifest',
  title: siteName,
  description: siteDescription,
  author: orgName,
  category: 'music',
  creator: orgName,
  publisher: orgName,
  applicationName: siteName,
  openGraph: {
    title: siteName,
    description: siteDescription,
    url: siteUrl,
    siteName,
    images: [
      {
        url: `${siteUrl}/logo-512x512.png`,
        width: 512,
        height: 512
      }
    ],
    locale: 'fr_FR',
    type: 'website'
  },
  twitter: {
    site: twitterHandle,
    card: 'summary_large_image',
    title: siteName,
    description: siteDescription,
    creator: twitterHandle,
    images: {
      url: `${siteUrl}/logo-512x512.png`,
      alt: `${siteName} Logo`,
    },
  }
}

const jsonLd = {
  '@context': 'https://schema.org',
  '@type': 'Organization',
  url: siteUrl,
  email: orgEmail,
  keywords: [orgName, siteName, 'Paroles', 'Pawol'],
  legalName: siteName,
  location: orgLocation,
}

export default async function RootLayout({children}) {
  const inner = (
    <>
      <TopLoader color='#ffeb3b' />
      <ThemeRegistry>
        <Navigasyon />
        {children}
      </ThemeRegistry>
      <section>
        <script
          type='application/ld+json'
          dangerouslySetInnerHTML={{__html: JSON.stringify(jsonLd)}}
        />
      </section>
    </>
  )

  return (
    <html suppressHydrationWarning lang='fr'>
      <body>
        {plausibleUrl
          ? <PlausibleProvider src={plausibleUrl}>{inner}</PlausibleProvider>
          : inner}
      </body>
    </html>
  )
}
