import {EntityLocale} from '@prisma/client'
import type {Metadata} from 'next'
import {notFound} from 'next/navigation'
import {Suspense} from 'react'

import {getPageEntityBySlug} from '@/actions/admin/entity'
import YoutubeComponent from '@/components/shared/youtube-component'
import {dump, normalizeData, thisLocale} from '@/lib/utils'
import {Skeleton} from '@/ui/skeleton'

type Props = {
	params: Promise<{slug?: string}>
}

export const generateMetadata = async ({params}: Props): Promise<Metadata> => {
	const {slug} = await params
	const page = await getPageEntityBySlug(slug || '')
	if (!page) {
		notFound()
	}
	const {locales} = page
	const locale: EntityLocale = await thisLocale(locales)
	const {title, annotation} = locale
	return {
		title,
		description: normalizeData(annotation, {
			stripTags: true
		})
	}
}

export default async function Pages({params}: Props) {
	const {slug} = await params
	const page = await getPageEntityBySlug(slug || '')

	if (!page) {
		notFound()
	}

	const {locales} = page
	const locale: EntityLocale = await thisLocale(locales)
	const {title, annotation, body} = locale

	return (
		<div className='mb-12 mt-8'>
			<div className='bw-page container max-w-[800px] text-lg text-brand-violet-950'>
				<h1>{title}</h1>
				<section className='min-h-[450px]'>
					<Suspense fallback={<Skeleton className='h-full w-full' />}>
						<YoutubeComponent id='qfg2UlQk__M' />
					</Suspense>
				</section>

				<article
					className='mt-6'
					dangerouslySetInnerHTML={{
						__html: ((annotation ?? '') + body) as string
					}}
				></article>

				{/*{dump(locale)}*/}
			</div>
		</div>
	)
}