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'

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

async function jwennAnTeks(slug) {
  const teks = await jwennTeksEpiSlug(slug)

  if (!teks) {
    notFound()
  }

  return teks
}

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

  const anTeks = await jwennAnTeks(slug)

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

  const {couverture} = anTeks.attributes
  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({params}) {
  const {slug} = params

  const anTeks = await jwennAnTeks(slug)

  const jsonLd = {
    '@context': 'http://schema.org',
    '@type': 'MusicRecording',
    name: anTeks.attributes.titre,
    url: `${siteUrl}/paroles/${slug}`,
    byArtist: anTeks.attributes.artistes.data.map(({attributes}) => ({
      '@type': 'Person',
      name: attributes.alias,
      url: `${siteUrl}/awtis/${attributes.slug}`
    })),
    datePublished: anTeks.attributes?.annee
  }

  return (
    <>
      <Box sx={{display: 'flex'}}>
        <Box
          component='main'
          sx={{flexGrow: 1, p: 2, mt: 2, width: {sm: `calc(100% - ${drawerWidth}px)`}}}
        >
          <AnTeks parole={anTeks.attributes} paroleId={anTeks.id} />
        </Box>
      </Box>

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