import { notFound } from 'next/navigation'
import Link from 'next/link'
import { getPosts, getPost, tagToSlug } from '@/lib/posts'
import { TableOfContents } from '@/components/posts/TableOfContents'
import { ScrollToTop } from '@/components/ui/ScrollToTop'
import { ReadingProgress } from '@/components/ui/ReadingProgress'

export const dynamicParams = false
export const dynamic = 'force-static'

export async function generateStaticParams() {
  const posts = await getPosts()
  return posts.map((post) => ({ slug: post.slug }))
}

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
  const slug = (await params).slug
  const post = await getPost(slug)
  if (!post) return { title: 'Not Found' }
  return { title: post.title }
}

export default async function PostPage({ params }: { params: Promise<{ slug: string }> }) {
  const slug = (await params).slug
  const post = await getPost(slug)

  if (!post) notFound()

  const { default: PostContent } = await import(
    /* turbopackOptional: true */
    `@/content/posts/${slug}.mdx`
  )

  return (
    <>
      <ScrollToTop />
      <ReadingProgress />
      <div className="max-w-4xl mx-auto px-6 py-16">
        <div className="grid grid-cols-1 lg:grid-cols-[1fr_200px] gap-8">
          <article className="min-w-0">
            <header className="mb-12">
              <time className="font-mono text-sm text-ink-soft" dateTime={post.date}>{new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</time>
              <h1 className="heading-xl text-ink mt-3 mb-2">
                {post.title}
              </h1>
              <div className="flex items-center gap-4 font-mono text-xs text-ink-soft">
                {post.author && <span>by {post.author}</span>}
                <span>{post.readingTime} min read</span>
              </div>
              {post.coverImage && (
                <img
                  src={post.coverImage}
                  alt={`Featured image for article: ${post.title}`}
                  className="my-8 aspect-[16/9] w-full rounded-2xl border border-border bg-surface object-cover shadow-card"
                  loading="eager"
                  decoding="async"
                  fetchPriority="high"
                />
              )}
              {post.tags.length > 0 && (
                <div className="flex flex-wrap gap-2 mt-4">
                  {post.tags.map((tag) => (
                    <Link key={tag} href={`/tags/${tagToSlug(tag)}/`} className="rounded-full bg-surface px-3 py-1 text-xs font-medium text-ink-soft border border-border transition-colors hover:border-accent/50 hover:text-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent">
                      {tag}
                    </Link>
                  ))}
                </div>
              )}
            </header>
            <div className="prose prose-lg max-w-none min-w-0">
              <PostContent />
            </div>
          </article>
          <aside className="hidden lg:block">
            <TableOfContents />
          </aside>
        </div>
      </div>
    </>
  )
}