import type { Metadata } from 'next'
import Link from 'next/link'
import Image from 'next/image'
import { getPayload } from 'payload'
import config from '@payload-config'
import { SITE } from '@/lib/seo'
import { CATEGORY_LABELS, type PayloadBlog, blogCoverUrl } from '../../page'

export const revalidate = 3600

export function tagToSlug(tag: string): string {
  return tag.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')
}

function slugToTitle(slug: string): string {
  return slug.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ')
}

export async function generateStaticParams() {
  const payload = await getPayload({ config })
  const result = await payload.find({
    collection: 'blogs',
    where: { status: { equals: 'published' } },
    limit: 500,
    pagination: false,
    depth: 0,
  })
  const posts = result.docs as unknown as PayloadBlog[]
  const tagSet = new Set<string>()
  posts.forEach(p => p.tags?.forEach(t => tagSet.add(tagToSlug(t.tag))))
  return Array.from(tagSet).map(slug => ({ slug }))
}

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
  const { slug } = await params
  const tagName = slugToTitle(slug)
  const title = `${tagName} - Dubai Car Rental Articles | NCK Blog`
  const description = `Browse all NCK Car Rental blog posts tagged "${tagName}". Expert guides, rental tips, and Dubai car insights.`
  const ogImg = "/media/ferrari-f8-tributo-rental-dubai-02.webp"
  return {
    title,
    description,
    alternates: { canonical: `${SITE.domain}/blog/tag/${slug}/` },
    robots: { index: true, follow: true },
    openGraph: {
      title,
      description,
      url:      `${SITE.domain}/blog/tag/${slug}/`,
      siteName: "NCK Car Rental",
      locale:   "en_AE",
      images:   [{ url: ogImg, width: 1200, height: 630, alt: `${tagName} articles - NCK Car Rental Blog` }],
    },
    twitter: {
      card:        "summary_large_image",
      title,
      description,
      images:      [ogImg],
    },
  }
}

export default async function TagPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  const payload = await getPayload({ config })

  const result = await payload.find({
    collection: 'blogs',
    where: { status: { equals: 'published' } },
    sort: '-publishedAt',
    limit: 500,
    pagination: false,
    depth: 1,
  })

  const allPosts = result.docs as unknown as PayloadBlog[]
  const posts = allPosts.filter(p => p.tags?.some(t => tagToSlug(t.tag) === slug))

  const displayTag = posts[0]?.tags?.find(t => tagToSlug(t.tag) === slug)?.tag ?? slugToTitle(slug)

  const breadcrumbLd = {
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: [
      { '@type': 'ListItem', position: 1, name: 'Home', item: `${SITE.domain}/` },
      { '@type': 'ListItem', position: 2, name: 'Blog', item: `${SITE.domain}/blog/` },
      { '@type': 'ListItem', position: 3, name: `#${displayTag}`, item: `${SITE.domain}/blog/tag/${slug}/` },
    ],
  }

  const itemListLd = posts.length > 0 ? {
    '@context': 'https://schema.org',
    '@type': 'ItemList',
    name: `${displayTag} - NCK Car Rental Blog`,
    numberOfItems: posts.length,
    itemListElement: posts.map((p, i) => ({
      '@type': 'ListItem',
      position: i + 1,
      name: p.title,
      url: `${SITE.domain}/blog/${p.slug}/`,
    })),
  } : null

  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbLd) }} />
      {itemListLd && (
        <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(itemListLd) }} />
      )}

      {/* Header */}
      <div className="bg-navy-900 pt-14 pb-12">
        <div className="section-wrap">
          <nav className="flex items-center gap-2 text-xs text-white/40 mb-5">
            <Link href="/" className="hover:text-white/70 transition-colors">Home</Link>
            <span>/</span>
            <Link href="/blog" className="hover:text-white/70 transition-colors">Blog</Link>
            <span>/</span>
            <span className="text-white/60">#{displayTag}</span>
          </nav>
          <div className="inline-flex items-center gap-1.5 bg-brand/20 text-brand text-xs font-bold px-3 py-1.5 rounded-full mb-4">
            <span>#</span><span>{displayTag}</span>
          </div>
          <h1 className="text-3xl lg:text-4xl font-black text-white mb-3">{displayTag}</h1>
          <p className="text-white/60 text-sm">
            {posts.length} article{posts.length !== 1 ? 's' : ''} tagged &ldquo;{displayTag}&rdquo;
          </p>
        </div>
      </div>

      <div className="section-wrap py-12">

        {posts.length > 0 ? (
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {posts.map(post => {
              const img = blogCoverUrl(post)
              return (
                <Link
                  key={post.id}
                  href={`/blog/${post.slug}`}
                  className="group flex flex-col bg-white rounded-2xl overflow-hidden border border-[#e2e6ed] hover:shadow-float transition-shadow duration-300"
                >
                  <div className="relative aspect-[16/9] bg-navy-100 flex-shrink-0">
                    {img ? (
                      <Image
                        src={img}
                        alt={post.title}
                        fill
                        className="object-cover group-hover:scale-105 transition-transform duration-700"
                      />
                    ) : (
                      <div className="absolute inset-0 bg-gradient-to-br from-navy-700 to-brand" />
                    )}
                  </div>
                  <div className="p-5 flex flex-col flex-1">
                    {post.category && (
                      <p className="text-brand text-xs font-bold uppercase tracking-widest mb-2">
                        {CATEGORY_LABELS[post.category] ?? post.category}
                      </p>
                    )}
                    <h2 className="font-bold text-[#0b1845] text-base leading-snug mb-2 group-hover:text-brand transition-colors line-clamp-2">
                      {post.title}
                    </h2>
                    {post.excerpt && (
                      <p className="text-[#5c6472] text-sm leading-relaxed line-clamp-2 mb-4 flex-1">
                        {post.excerpt}
                      </p>
                    )}
                    <div className="flex items-center gap-2 text-xs text-[#8892a4] mt-auto">
                      <span>
                        {new Date(post.publishedAt).toLocaleDateString('en-AE', {
                          day: 'numeric', month: 'short', year: 'numeric',
                        })}
                      </span>
                      {post.readTime && (
                        <>
                          <span>·</span>
                          <span>{post.readTime} min read</span>
                        </>
                      )}
                    </div>
                  </div>
                </Link>
              )
            })}
          </div>
        ) : (
          <div className="text-center py-24 text-[#8892a4]">
            <p className="text-5xl mb-5">🏷️</p>
            <p className="text-xl font-bold text-[#3a4051] mb-2">No articles yet</p>
            <p className="text-sm">No published articles with this tag.</p>
            <Link href="/blog" className="inline-block mt-6 btn-primary">Browse All Articles →</Link>
          </div>
        )}

        <div className="mt-10 pt-8 border-t border-[#e2e6ed]">
          <Link href="/blog" className="text-brand font-semibold text-sm hover:underline">
            ← Back to all articles
          </Link>
        </div>

      </div>
    </>
  )
}