import type { Metadata } from 'next'
import { Suspense } from 'react'
import { getPayload } from 'payload'
import config from '@payload-config'
import { normalizeCar, type PayloadCar, type PayloadBrand, type PopulatedCarType } from '@/lib/payload-helpers'
import AllCarsClient from './AllCarsClient'
import { SITE } from '@/lib/seo'
import { getSiteStats } from '@/lib/stats'
import Link from 'next/link'

export const revalidate = 300

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

export async function generateMetadata(): Promise<Metadata> {
  const { carsCount, minPrice } = await getSiteStats()
  const from = minPrice ? `AED ${minPrice}/day` : 'great rates'
  const title = `All Cars for Rent in Dubai | ${carsCount}+ Vehicles | NCK Car Rental`
  const description = `Browse ${carsCount}+ cars for rent in Dubai. Luxury, sports, SUV & economy. Filter by brand or type. From ${from}. Free delivery.`
  return {
    title,
    description,
    alternates: { canonical: `${SITE.domain}/all-cars/` },
    robots: { index: true, follow: true },
    openGraph: {
      title,
      description,
      url:      `${SITE.domain}/all-cars/`,
      siteName: SITE.name,
      locale:   "en_AE",
      images:   [{ url: DEFAULT_OG, width: 1200, height: 630, alt: "All Cars for Rent in Dubai - NCK Car Rental" }],
    },
    twitter: {
      card:    "summary_large_image",
      title,
      description,
      images:  [DEFAULT_OG],
    },
  }
}

export default async function AllCarsPage() {
  const payload = await getPayload({ config })

  const [carsResult, brandsResult, carTypesResult] = await Promise.all([
    payload.find({ collection: 'cars', depth: 1, limit: 500, pagination: false }),
    payload.find({ collection: 'brands', limit: 100, pagination: false }),
    payload.find({ collection: 'car-types', limit: 50, pagination: false }),
  ])

  const cars = (carsResult.docs as unknown as PayloadCar[]).map(doc => normalizeCar(doc))

  const brands = (brandsResult.docs as unknown as PayloadBrand[])
    .filter(b => cars.some(c => c.brand === b.name))
    .map(b => ({ name: b.name, urlSlug: b.urlSlug }))

  const carTypes = (carTypesResult.docs as unknown as PopulatedCarType[])
    .filter(ct => cars.some(c => c.category === ct.key))
    .map(ct => ({ key: ct.key, label: ct.label, urlSlug: ct.urlSlug }))

  const breadcrumbLd = {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    itemListElement: [
      { "@type": "ListItem", position: 1, name: "Home",     item: `${SITE.domain}/` },
      { "@type": "ListItem", position: 2, name: "All Cars", item: `${SITE.domain}/all-cars/` },
    ],
  }

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

      <div className="bg-[#f8f9fb] border-b border-[#e2e6ed]">
        <div className="section-wrap py-6">
          <nav className="flex items-center gap-1.5 text-xs text-[#5c6472] mb-3" aria-label="Breadcrumb">
            <Link href="/" className="hover:text-brand">Home</Link>
            <span>/</span>
            <span className="text-[#1a1f2e] font-medium">All Cars</span>
          </nav>
          <h1 className="text-2xl font-black text-[#1a1f2e] mb-1">
            All Cars for Rent in Dubai
          </h1>
          <p className="text-[#5c6472] text-sm max-w-2xl">
            Browse {cars.length}+ vehicles - luxury, sports, SUV, convertible & economy. Free delivery anywhere in Dubai. Filter by brand, type, or price.
          </p>
        </div>
      </div>

      <Suspense fallback={<div className="section-wrap py-20 text-center text-[#5c6472]">Loading…</div>}>
        <AllCarsClient cars={cars} brands={brands} carTypes={carTypes} />
      </Suspense>
    </>
  )
}