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

import {jwennTeksEpiSlug} from '../../../lib/oki-api'
import AnTeks from '../../../components/teks/an-teks'
import {getAlias} from '../../../lib/utils/format'
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 jwennAnTeks(slug) {
  const teks = await jwennTeksEpiSlug(slug)

  if (!teks) {
    notFound()
  }

  return teks
}

export async function generateMetadata(props) {
  const params = await props.params;
  const {slug} = params

  const anTeks = await jwennAnTeks(slug)  

  const awtis = anTeks?.artistes?.length === 1 ? anTeks?.artistes[0].alias : getAlias(anTeks.artistes, anTeks.prioriteArtistes)
  const title = `OKI | ${awtis} - ${anTeks.titre} | Paroles et Traductions`
  const description = `Paroles de « ${anTeks?.titre} » : ${anTeks?.transcription.slice(0, 100)}...`
  const url = `${siteUrl}/paroles/${slug}`

  const {couverture} = anTeks
  const kuvetiFormat = formatKuveti(couverture)

  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: `Couverture ${title}`,
      }
    }
  }
}

export default async function AnPawolPaj(props) {
  const params = await props.params;
  const {slug} = params

  const anTeks = await jwennAnTeks(slug)
  const {couverture} = anTeks
  const teksKuvetiFormat = formatKuveti(couverture)  

  const jsonLd = {
    '@context': 'http://schema.org',
    '@type': 'MusicRecording',
    '@id': anTeks.musicBrainzUrl || undefined,
    name: anTeks.titre,
    url: `${siteUrl}/paroles/${slug}`,
    image: teksKuvetiFormat?.url ? `${apiUrl}${teksKuvetiFormat?.url}` : undefined,
    thumbnailUrl: couverture?.formats?.thumbnail?.url ? `${apiUrl}${couverture.formats.thumbnail.url}` : undefined,
    byArtist: anTeks.artistes.map(({photo, musicBrainzUrl, alias, slug}) => {
      const kuvetiFormat = formatKuveti(photo)

      return {
        '@type': 'Person',
        '@id': musicBrainzUrl || undefined,
        name: alias,
        url: `${siteUrl}/awtis/${slug}`,
        image: kuvetiFormat?.url ? `${apiUrl}${kuvetiFormat?.url}` : undefined
      }
    }),
    datePublished: anTeks?.annee
  }

  return (
    <>
      <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
        <Box
          component='main'
          sx={{flexGrow: 1, p: 2, mt: 2}}
        >
          <AnTeks parole={anTeks} paroleId={anTeks.id} />
        </Box>
        <Footer />
      </Box>

      <section>
        <script
          type='application/ld+json'
          dangerouslySetInnerHTML={{__html: JSON.stringify(jsonLd)}}
        />
      </section>
    </>
  )
}