import Link from 'next/link'
import { notFound } from 'next/navigation'
import { getPost, getPostSlugs } from '../blog-data'
import { ldJson, sanitizeHtml } from '@/lib/format'

export const revalidate = 300

export async function generateStaticParams() {
  const slugs = await getPostSlugs()
  return slugs.map((slug) => ({ slug }))
}

export async function generateMetadata({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug)
  if (!post) return { title: 'Article' }
  return {
    title: post.meta_title || post.title,
    description: post.meta_description || post.excerpt,
    alternates: { canonical: `/blog/${params.slug}` },
    openGraph: {
      type: 'article',
      title: post.title,
      description: post.excerpt,
      url: `/blog/${params.slug}`,
      images: post.cover_image ? [{ url: post.cover_image }] : undefined,
    },
  }
}

function renderBody(body?: string | null) {
  if (!body) {
    return <p>This article will be available shortly.</p>
  }
  if (/<[a-z][\s\S]*>/i.test(body)) {
    return <div dangerouslySetInnerHTML={{ __html: sanitizeHtml(body) }} />
  }
  return body.split(/\n{2,}/).map((para, i) => <p key={i}>{para}</p>)
}

export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug)
  if (!post) notFound()
  const SITE = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
  const articleLd = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: post.title,
    description: post.excerpt,
    datePublished: post.date,
    image: post.cover_image || undefined,
    author: { '@type': 'Organization', name: post.author_name || 'Fitorza' },
    publisher: { '@type': 'Organization', name: 'Fitorza', logo: { '@type': 'ImageObject', url: `${SITE}/brand/fitorza-mark.png` } },
    mainEntityOfPage: `${SITE}/blog/${params.slug}`,
  }
  return (
    <article className="container-x py-12">
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: ldJson(articleLd) }} />
      <nav className="mb-4 text-xs text-muted"><Link href="/blog">Blog</Link> / <span className="text-ink">{post.title}</span></nav>
      <h1 className="max-w-3xl text-3xl font-extrabold">{post.title}</h1>
      <div className="mt-2 text-[13px] text-muted">
        {new Date(post.date).toLocaleDateString()}{post.author_name ? ` · ${post.author_name}` : ''}
      </div>
      {post.cover_image && (
        // eslint-disable-next-line @next/next/no-img-element
        <img src={post.cover_image} alt={post.title} className="mt-6 w-full max-w-3xl rounded-xl object-cover" />
      )}
      <div className="prose mt-6 max-w-3xl space-y-4 text-sm leading-relaxed text-muted">
        {renderBody(post.body)}
      </div>
    </article>
  )
}