import { prisma } from '@peyzajart/db'
import { notFound } from 'next/navigation'
import { Link } from '@/i18n/navigation'
import type { Metadata } from 'next'

interface Props { params: { slug: string; locale: string } }

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const post = await prisma.blog.findUnique({ where: { slug: params.slug } })
  if (!post) return {}
  const title = params.locale === 'en' ? (post.titleEn ?? post.titleTr) : post.titleTr
  return { title, description: post.excerpt ?? undefined }
}

export default async function BlogPostPage({ params: { slug, locale } }: Props) {
  const en = locale === 'en'
  const base = en ? '/en' : ''

  const post = await prisma.blog.findUnique({ where: { slug, isPublished: true } })
  if (!post) notFound()

  const title   = en ? (post.titleEn   ?? post.titleTr)   : post.titleTr
  const content = en ? (post.contentEn ?? post.contentTr) : post.contentTr

  const date = new Date(post.createdAt).toLocaleDateString(en ? 'en-US' : 'tr-TR', {
    year: 'numeric', month: 'long', day: 'numeric',
  })

  return (
    <div className="pt-20">
      <article className="max-w-3xl mx-auto px-6 md:px-10 py-16">
        <nav className="font-body text-xs text-brown/40 mb-8 flex items-center gap-2 flex-wrap">
          <Link href={`${base}/`} className="hover:text-orange transition-colors">
            {en ? 'Home' : 'Ana Sayfa'}
          </Link>
          <span>/</span>
          <Link href={`${base}/blog`} className="hover:text-orange transition-colors">Blog</Link>
          <span>/</span>
          <span className="text-brown">{title}</span>
        </nav>

        {post.coverImage && (
          <div className="aspect-video bg-sand mb-8 overflow-hidden rounded-xl">
            <img src={post.coverImage} alt={title} className="w-full h-full object-cover" />
          </div>
        )}

        <p className="font-body text-xs text-orange/70 mb-4">{date}</p>
        <h1 className="font-display text-4xl md:text-5xl font-light text-brown leading-tight mb-10">{title}</h1>

        <div className="prose prose-stone font-body text-brown/80 leading-relaxed max-w-none
          prose-headings:font-display prose-headings:font-light prose-headings:text-brown
          prose-a:text-orange prose-a:no-underline hover:prose-a:underline
          prose-img:rounded-none prose-hr:border-sand">
          {content.split('\n').map((para, i) => {
            const trimmed = para.trim()
            if (!trimmed) return null
            if (trimmed.startsWith('## ')) {
              return <h2 key={i} className="font-display text-3xl font-light text-brown mt-8 mb-4">{trimmed.replace('## ', '')}</h2>
            }
            if (trimmed.startsWith('# ')) {
              return <h1 key={i} className="font-display text-4xl font-light text-brown mt-8 mb-4">{trimmed.replace('# ', '')}</h1>
            }
            return <p key={i} className="mb-4 text-sm leading-relaxed text-brown/70">{trimmed}</p>
          })}
        </div>

        <div className="mt-16 pt-8 border-t border-sand">
          <Link href={`${base}/blog`}
            className="font-body text-xs tracking-widest uppercase text-brown/40 hover:text-orange transition-colors">
            ← {en ? 'Back to Blog' : 'Blog\'a Dön'}
          </Link>
        </div>
      </article>
    </div>
  )
}