import { getPayload } from 'payload'
import configPromise from '@payload-config'
import { notFound } from 'next/navigation'
import { Section } from '@/components/ui/section'
import { ProductInfoContent } from '@/components/pages/Catalog/ProductInfoContent'
import { ContactSectionForm } from '@/globals/ContactForm/Component'
import { RecommendsTeslaBlock } from '@/components/pages/Catalog/recomendsBlock'
import { Vehicle } from '@/lib/types/api/vehicle'
import { customFetch } from '@/lib/utils/apiClient'
import { getCurrentLocale } from '@/locales/server'

interface Props {
  params: { id: string }
}

export default async function ProductInfoPage({ params }: Props) {
  const payload = await getPayload({ config: configPromise })
  const { id } = await params
  // const car = await payload.findByID({
  //   collection: 'cars',
  //   id: id,
  //   depth: 2,
  // })
  const locale = await getCurrentLocale()

  const { faq, conditions } = await payload.findGlobal({
    slug: 'rental-terms',
    depth: 1,
    locale,
  })

  let carData: Vehicle | null = null
  try {
    const car = await customFetch(`https://api.rentsyst.com/v2/vehicle/${id}`, true, 'GET')
    carData = await car.json()
  } catch {
    console.error('Failed to fetch vehicle from rentsyst API')
  }

  if (!carData) return notFound()

  return (
    <Section sectionClass="py-12">
      <ProductInfoContent car={carData} faq={faq} conditions={conditions} />
      <RecommendsTeslaBlock />
      <ContactSectionForm />
    </Section>
  )
}
