import type { Metadata } from 'next'
import { notFound } from 'next/navigation'
import Link from 'next/link'
import { BLOG_POSTS } from '@/lib/blog'

export async function generateStaticParams() {
  return BLOG_POSTS.map(p => ({ slug: p.slug }))
}

export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
  const post = BLOG_POSTS.find(p => p.slug === params.slug)
  if (!post) return { title: 'Post not found' }
  return { title: post.title, description: post.excerpt }
}

const CATEGORY_LABELS: Record<string, string> = {
  campaign: 'Campaign', tavistock: 'Tavistock Line',
  dawlish: 'Dawlish', network: 'Network', policy: 'Policy',
}
const CATEGORY_COLOURS: Record<string, string> = {
  campaign: 'bg-blue-100 text-blue-800', tavistock: 'bg-purple-100 text-purple-800',
  dawlish: 'bg-red-100 text-red-800', network: 'bg-teal-100 text-teal-800', policy: 'bg-amber-100 text-amber-800',
}

export default function BlogPostPage({ params }: { params: { slug: string } }) {
  const post = BLOG_POSTS.find(p => p.slug === params.slug)
  if (!post) notFound()

  const sorted = [...BLOG_POSTS].sort((a, b) => b.date.localeCompare(a.date))
  const idx = sorted.findIndex(p => p.slug === params.slug)
  const prev = idx < sorted.length - 1 ? sorted[idx + 1] : null
  const next = idx > 0 ? sorted[idx - 1] : null

  const paragraphs = post.content.split('\n\n').filter(Boolean)

  return (
    <>
      <section className="bg-hero-gradient text-white py-16 sm:py-20">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center gap-2 mb-4 text-sm text-white/60">
            <Link href="/blog" className="hover:text-white transition-colors">Blog</Link>
            <span>/</span>
          </div>
          <div className="flex items-center gap-3 mb-5">
            <span className={`text-xs font-semibold px-3 py-1 rounded-full bg-white/15 text-white`}>
              {CATEGORY_LABELS[post.category]}
            </span>
            <time className="text-sm text-white/60">
              {new Date(post.date).toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' })}
            </time>
          </div>
          <h1 className="text-3xl sm:text-4xl font-black mb-5 leading-tight">{post.title}</h1>
          <p className="text-lg text-white/75 leading-relaxed">{post.excerpt}</p>
          <p className="text-sm text-white/50 mt-4">By {post.author}</p>
        </div>
      </section>

      <section className="py-14 bg-white">
        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
          <article className="prose-metro">
            {paragraphs.map((para, i) => (
              <p key={i} className="text-metro-muted leading-relaxed mb-5 text-[1.05rem]">{para}</p>
            ))}
          </article>

          {/* CTA */}
          <div className="mt-12 p-6 bg-hero-gradient rounded-2xl text-white text-center">
            <h3 className="font-bold text-lg mb-2">Support Plymouth Metro</h3>
            <p className="text-white/75 text-sm mb-4">Sign the petition and help us build the case for a modern metro network for Plymouth.</p>
            <Link href="/support" className="inline-flex items-center gap-2 bg-white text-metro-navy font-bold px-6 py-3 rounded-xl text-sm hover:bg-metro-light transition-colors">
              Sign the Petition
            </Link>
          </div>
        </div>
      </section>

      {/* Prev / Next */}
      <section className="py-8 bg-metro-light border-t border-metro-border">
        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between gap-4">
            {prev ? (
              <Link href={`/blog/${prev.slug}`} className="flex-1 text-left">
                <p className="text-xs text-metro-muted mb-1">← Previous</p>
                <p className="text-sm font-semibold text-metro-sky hover:text-metro-blue transition-colors line-clamp-2">{prev.title}</p>
              </Link>
            ) : <span />}
            <Link href="/blog" className="text-xs text-metro-muted hover:text-metro-navy transition-colors flex-shrink-0">All posts</Link>
            {next ? (
              <Link href={`/blog/${next.slug}`} className="flex-1 text-right">
                <p className="text-xs text-metro-muted mb-1">Next →</p>
                <p className="text-sm font-semibold text-metro-sky hover:text-metro-blue transition-colors line-clamp-2">{next.title}</p>
              </Link>
            ) : <span />}
          </div>
        </div>
      </section>
    </>
  )
}