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 { tagToSlug } from './tag/[slug]/page'

export const revalidate = 300

export const CATEGORY_LABELS: Record<string, string> = {
  'dubai-car-guides':  'Dubai Car Guides',
  'rental-tips':       'Rental Tips',
  'luxury-cars':       'Luxury Cars',
  'sports-cars':       'Sports Cars',
  'suv-4x4':           'SUV & 4x4',
  'travel-lifestyle':  'Travel & Lifestyle',
}

export type PayloadBlog = {
  id: string
  title: string
  slug: string
  excerpt?: string
  coverImage?: { url?: string; alt?: string } | null
  category?: string
  publishedAt: string
  updatedAt?: string
  featured?: boolean
  author?: string
  readTime?: number
  content?: unknown
  seoTitle?: string
  seoDesc?: string
  status: string
  tags?: { tag: string }[]
}

export function blogCoverUrl(post: PayloadBlog): string | null {
  const img = post.coverImage
  if (!img || typeof img !== 'object') return null
  const url = img.url ?? ''
  const match = url.match(/\/api\/media\/file\/(.+)$/)
  return match ? `/media/${match[1]}` : url.replace(/^https?:\/\/[^/]+/, '') || null
}

const BLOG_OG = "/media/ferrari-f8-tributo-rental-dubai-02.webp"

export async function generateMetadata(): Promise<Metadata> {
  return {
    title: 'Dubai Car Rental Blog | Guides, Tips & Reviews | NCK',
    description:
      'Expert guides, rental tips, and Dubai car culture. Everything you need to know about renting luxury, sports, and SUV cars in Dubai.',
    alternates: { canonical: `${SITE.domain}/blog/` },
    robots: { index: true, follow: true },
    openGraph: {
      title:       'NCK Car Rental Blog - Dubai Car Guides & Tips',
      description: 'Expert rental tips, Dubai driving guides, luxury car reviews, and more from NCK Car Rental.',
      url:         `${SITE.domain}/blog/`,
      siteName:    "NCK Car Rental",
      locale:      "en_AE",
      images:      [{ url: BLOG_OG, width: 1200, height: 630, alt: "NCK Car Rental Dubai Blog" }],
    },
    twitter: {
      card:        "summary_large_image",
      title:       'Dubai Car Rental Blog | Guides, Tips & Reviews | NCK',
      description: 'Expert guides, rental tips, and Dubai car culture from NCK Car Rental.',
      images:      [BLOG_OG],
    },
  }
}

export default async function BlogPage() {
  const payload = await getPayload({ config })
  const result = await payload.find({
    collection: 'blogs',
    where: { status: { equals: 'published' } },
    sort: '-publishedAt',
    limit: 100,
    pagination: false,
    depth: 1,
  })

  const posts = result.docs as unknown as PayloadBlog[]
  const featured = posts.find(p => p.featured) ?? posts[0] ?? null
  const rest = featured ? posts.filter(p => p.id !== featured.id) : posts

  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Blog',
    name: 'NCK Car Rental Blog',
    url: `${SITE.domain}/blog/`,
    description: 'Car rental guides, Dubai driving tips, and luxury car insights.',
    publisher: { '@type': 'Organization', name: SITE.name, url: SITE.domain },
  }

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

      {/* Hero banner */}
      <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>
            <span className="text-white/60">Blog</span>
          </nav>
          <p className="text-brand text-xs font-bold uppercase tracking-widest mb-2">NCK Blog</p>
          <h1 className="text-4xl lg:text-5xl font-black text-white mb-3">Dubai Car Rental Guides</h1>
          <p className="text-white/60 text-lg max-w-2xl">
            Expert tips, car reviews, and Dubai driving guides - everything you need for the perfect rental.
          </p>
        </div>
      </div>

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

        {/* Featured post */}
        {featured && (
          <Link href={`/blog/${featured.slug}`} className="group block mb-12">
            <div className="grid lg:grid-cols-2 rounded-3xl overflow-hidden shadow-float border border-[#e2e6ed] hover:shadow-xl transition-shadow duration-300">
              {/* Image */}
              <div className="relative aspect-[16/9] lg:aspect-auto lg:min-h-[340px] bg-navy-100 order-1 lg:order-2">
                {blogCoverUrl(featured) ? (
                  <Image
                    src={blogCoverUrl(featured)!}
                    alt={featured.title}
                    fill
                    className="object-cover group-hover:scale-105 transition-transform duration-700"
                    priority
                  />
                ) : (
                  <div className="absolute inset-0 bg-gradient-to-br from-navy-800 to-brand" />
                )}
                <div className="absolute top-4 left-4">
                  <span className="bg-orange text-white text-xs font-bold px-3 py-1.5 rounded-full shadow">Featured</span>
                </div>
              </div>
              {/* Text */}
              <div className="p-8 lg:p-10 xl:p-12 flex flex-col justify-center bg-white order-2 lg:order-1">
                {featured.category && (
                  <p className="text-brand text-xs font-bold uppercase tracking-widest mb-3">
                    {CATEGORY_LABELS[featured.category] ?? featured.category}
                  </p>
                )}
                <h2 className="text-2xl lg:text-3xl font-bold text-navy-900 mb-3 group-hover:text-brand transition-colors leading-tight">
                  {featured.title}
                </h2>
                {featured.excerpt && (
                  <p className="text-[#5c6472] leading-relaxed mb-6 line-clamp-3">{featured.excerpt}</p>
                )}
                <div className="flex flex-wrap items-center gap-2 text-xs text-[#8892a4] mb-6">
                  <span className="font-medium">{featured.author ?? 'NCK Car Rental'}</span>
                  <span>·</span>
                  <span>
                    {new Date(featured.publishedAt).toLocaleDateString('en-AE', {
                      day: 'numeric', month: 'long', year: 'numeric',
                    })}
                  </span>
                  {featured.readTime && (
                    <>
                      <span>·</span>
                      <span>{featured.readTime} min read</span>
                    </>
                  )}
                </div>
                <p className="text-brand font-semibold text-sm group-hover:underline">Read article →</p>
              </div>
            </div>
          </Link>
        )}

        {/* Post grid */}
        {rest.length > 0 && (
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {rest.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"
                >
                  {/* Thumbnail */}
                  <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>
                  {/* Body */}
                  <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>
                    )}
                    <h3 className="font-bold text-[#0b1845] text-base leading-snug mb-2 group-hover:text-brand transition-colors line-clamp-2">
                      {post.title}
                    </h3>
                    {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>
        )}

        {/* Empty state */}
        {posts.length === 0 && (
          <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">Articles coming soon</p>
            <p className="text-sm">Dubai car rental guides, tips, and more.</p>
            <Link href="/all-cars" className="inline-block mt-6 btn-primary">Browse All Cars →</Link>
          </div>
        )}

        {/* Tag cloud */}
        {(() => {
          const tagMap = new Map<string, number>()
          posts.forEach(p => p.tags?.forEach(t => {
            const s = tagToSlug(t.tag)
            tagMap.set(s, (tagMap.get(s) ?? 0) + 1)
          }))
          const sorted = Array.from(tagMap.entries()).sort((a, b) => b[1] - a[1])
          if (sorted.length === 0) return null
          return (
            <div className="mt-14 pt-10 border-t border-[#e2e6ed]">
              <h2 className="text-sm font-bold text-[#5c6472] uppercase tracking-widest mb-4">Browse by Tag</h2>
              <div className="flex flex-wrap gap-2">
                {sorted.map(([slug, count]) => {
                  const label = posts.find(p => p.tags?.some(t => tagToSlug(t.tag) === slug))
                    ?.tags?.find(t => tagToSlug(t.tag) === slug)?.tag ?? slug
                  return (
                    <Link
                      key={slug}
                      href={`/blog/tag/${slug}`}
                      className="inline-flex items-center gap-1.5 bg-[#f1f3f7] hover:bg-brand hover:text-white text-[#5c6472] text-xs font-medium px-3 py-1.5 rounded-full transition-colors"
                    >
                      <span>#{label}</span>
                      <span className="bg-white/30 text-[10px] rounded-full px-1.5 py-0.5 leading-none font-bold">{count}</span>
                    </Link>
                  )
                })}
              </div>
            </div>
          )
        })()}

      </div>
    </>
  )
}