import {notFound} from 'next/navigation'
import Box from '@mui/material/Box'

import AwtisDetay from '../../../components/awtis/awtis-detay'
import {jwennAwtisEpiSlug} from '../../../lib/oki-api'
import {formatKuveti} from '../../../lib/kuveti'
import Footer from '../../../components/footer'

const apiUrl = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'

async function jwennAwtis(slug) {
  const awtis = await jwennAwtisEpiSlug(slug)

  if (!awtis) {
    notFound()
  }

  return awtis
}

export async function generateMetadata({params}) {
  const {slug} = params
  const anAwtis = await jwennAwtis(slug)

  const title = `OKI | ${anAwtis.attributes.alias} - Paroles et Traductions`
  const description = `${anAwtis.attributes.alias}${anAwtis?.attributes?.biographie ? ` : ${anAwtis?.attributes?.biographie.slice(0, 100)}...` : ''}`
  const url = `${siteUrl}/awtis/${slug}`

  const {photo} = anAwtis.attributes
  const kuvetiFormat = formatKuveti(photo)

  return {
    title,
    description,
    openGraph: {
      title,
      description,
      url,
      siteName: title,
      images: [
        {
          url: `${apiUrl}${kuvetiFormat?.url}`,
          width: kuvetiFormat?.width,
          height: kuvetiFormat?.height
        }
      ],
      locale: 'fr_FR',
      type: 'website'
    },
    twitter: {
      site: '@OrganisationKA',
      card: 'summary_large_image',
      title,
      description,
      creator: '@OrganisationKA',
      images: {
        url: `${apiUrl}${kuvetiFormat?.url}`,
        alt: `Photo de ${anAwtis.attributes.alias}`,
      }
    }
  }
}

export default async function AwtisPajSlug({params}) {
  const {slug} = params
  const anAwtis = await jwennAwtis(slug)

  const {photo} = anAwtis.attributes
  const kuvetiFormat = formatKuveti(photo)

  const jsonLd = {
    '@context': 'http://schema.org',
    '@type': 'Person',
    '@id': anAwtis.attributes.musicBrainzUrl || undefined,
    name: anAwtis.attributes.alias,
    url: `${siteUrl}/awtis/${slug}`,
    image: kuvetiFormat?.url ? `${apiUrl}${kuvetiFormat.url}` : undefined
  }

  return (
    <>
      <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
        <Box sx={{flexGrow: 1}}>
          <AwtisDetay anAwtis={anAwtis.attributes} />
        </Box>
        <Footer />
      </Box>
      <section>
        <script
          type='application/ld+json'
          dangerouslySetInnerHTML={{__html: JSON.stringify(jsonLd)}}
        />
      </section>
    </>
  )
}