'use client'
import { Section } from '@/components/ui/section'
import { Car, ConditionsSection, FaqSection, Media } from '@/payload-types'
import { TabsContentBlock } from './TabsContents'
import { CustomBreadcrumb } from '@/components/ui/breadcrumb'
import { useCurrentLocale, useI18n } from '@/locales/client'
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { useState } from 'react'
import { addDays, formatISO } from 'date-fns'
import { Button } from '@/components/ui/button'
import Link from 'next/link'
import { CustomAccordion } from '@/components/ui/accordion'
import { CarWheelIcon } from '@/components/icons/common'
import { ChevronDown, ChevronUp } from 'lucide-react'
import { CalculatorLine } from '../Booking/BookingContent'
import { GallerySlider } from './gallerySlider'
import { Vehicle } from '@/lib/types/api/vehicle'

const RANGE_BY_TAB: Record<string, number> = {
  '1': 2,
  '2': 7,
  '3': 30,
  '4': 99,
  '5': 360,
}

export const ProductInfoContent = ({
  car,
  faq,
  conditions,
}: {
  car: Vehicle
  faq: FaqSection
  conditions: ConditionsSection
}) => {
  const locale = useCurrentLocale()
  const [queryDate, setQueryDate] = useState('')
  const t = useI18n()

  function handleTabRange(value: string) {
    const days = RANGE_BY_TAB[value]
    if (!days) return

    const pickUpDate = new Date()
    const returnDate = addDays(pickUpDate, days)

    const pickUpISO = formatISO(pickUpDate, { representation: 'date' })
    const returnISO = formatISO(returnDate, { representation: 'date' })

    const query = `pickUpDate=${pickUpISO}&returnDate=${returnISO}`
    setQueryDate(query)
  }

  const spec = [
    {
      name: 'Body type',
      value: car.body_type,
    },
    {
      name: 'Consumption',
      value: car.consumption,
    },
    {
      name: 'Fuel',
      value: car.fuel,
    },
    {
      name: 'Volume tank',
      value: car.volume_tank,
    },
    {
      name: 'Volume engine',
      value: car.volume_engine,
    },
    {
      name: 'Transmission',
      value: car.transmission.match(/\((.*?)\)/)?.[1] || car.transmission,
    },
    {
      name: 'Color',
      value: car.color.title,
    },
    {
      name: 'Group',
      value: car.group,
    },
    {
      name: 'Mark',
      value: car.mark,
    },
    {
      name: 'Brand',
      value: car.brand,
    },
    {
      name: 'Year',
      value: car.year,
    },
    {
      name: 'Number seats',
      value: car.number_seats,
    },
    {
      name: 'Number doors',
      value: car.number_doors,
    },
    {
      name: 'Large bags',
      value: car.large_bags === 0 ? null : car.large_bags,
    },
    {
      name: 'Small bags',
      value: car.small_bags === 0 ? null : car.small_bags,
    },
  ]

  return (
    <Section sectionClass="pt-20 md:py-10">
      <div className="my-6">
        <CustomBreadcrumb
          pages={[
            { pageName: t('navigation.catalog'), href: `/${locale}/catalog` },
            {
              pageName:
                car.brand.charAt(0).toUpperCase() +
                car.brand.slice(1).toLowerCase() +
                ' ' +
                car.mark,
              href: `${locale}/catalog/${car.id}`,
              isActive: true,
            },
          ]}
        />
      </div>
      <div className="flex flex-col xxl:flex-row justify-between mb-20 gap-y-4">
        <div className="w-full xxl:w-[580px]">
          <GallerySlider images={car.thumbnails} />
        </div>
        <div className="w-full xxl:w-[584px] bg-gradient-to-b from-[#3b3b3b] to-black rounded-lg p-px">
          <div className="p-4 bg-base-black rounded-lg">
            <div className="flex gap-2 flex-wrap">
              {/* {car.carLabels.map((label, index) => (
                <div
                  key={index}
                  className="label-medium-regular text-grey-100 px-4 py-[7px] bg-transparent-beige rounded-[50px]"
                >
                  {option.name}
                </div>
              ))} */}
              <div className="label-medium-regular text-grey-100 px-4 py-[7px] bg-transparent-beige rounded-[50px]">
                {car.color.title}
              </div>
              <div className="label-medium-regular text-grey-100 px-4 py-[7px] bg-transparent-beige rounded-[50px]">
                {`${car.number_seats} seats`}
              </div>
              <div className="label-medium-regular text-grey-100 px-4 py-[7px] bg-transparent-beige rounded-[50px]">
                {`${car.body_type}`}
              </div>
              <div className="label-medium-regular text-grey-100 px-4 py-[7px] bg-transparent-beige rounded-[50px]">
                {`${car.year}`}
              </div>
              <div className="h4 md:h3 pt-6 pb-5 text-base-white border-b border-grey-700 w-full">
                {car.brand.charAt(0).toUpperCase() +
                  car.brand.slice(1).toLowerCase() +
                  ' ' +
                  car.mark}
              </div>
              <div className="py-6 overflow-x-auto">
                <Tabs className="overflow-x-auto">
                  <TabsList className="overflow-x-auto gap-0">
                    <TabsTrigger value="1" onClick={() => handleTabRange('1')}>
                      1–2 {t('catalog.days')}
                    </TabsTrigger>
                    <TabsTrigger value="2" onClick={() => handleTabRange('2')}>
                      3–7 {t('catalog.days')}
                    </TabsTrigger>
                    <TabsTrigger value="3" onClick={() => handleTabRange('3')}>
                      8–30 {t('catalog.days')}
                    </TabsTrigger>
                    <TabsTrigger value="4" onClick={() => handleTabRange('4')}>
                      31–99 {t('catalog.days')}
                    </TabsTrigger>
                    <TabsTrigger value="5" onClick={() => handleTabRange('5')}>
                      100–360 {t('catalog.days')}
                    </TabsTrigger>
                  </TabsList>
                </Tabs>
              </div>
              <div className="flex justify-between pb-7 w-full items-end border-b border-grey-700">
                <div>
                  <span className="h4 lg:h2 text-func-green-main">{car.price} €</span>
                  <span className="ml-1 b1-regular text-grey-100"> / {t('catalog.day')}</span>
                </div>

                <div className="b1-regular text-grey-100">1000 € - {t('catalog.deposit')}</div>
              </div>
              <div className="py-6 w-full">
                <Link href={`/booking/${car.id}?${queryDate}`}>
                  <Button className="w-[240px] justify-center" variant="primary">
                    {t('catalog.bookNow')}
                  </Button>
                </Link>
              </div>
              <div className="w-full">
                <CustomAccordion
                  type="single"
                  collapsible
                  defaultValue="0"
                  icons={{
                    open: <ChevronDown size={24} className="stroke-grey-50 plus" />,
                    closed: <ChevronUp size={24} className="stroke-grey-50 minus hidden" />,
                  }}
                  options={[
                    {
                      value: (
                        <div>
                          <CalculatorLine title={t('catalog.specifications.type')} value={car.body_type} />
                          <CalculatorLine title={t('catalog.specifications.doors')} value={`${car.number_doors}`} />
                          <CalculatorLine title={t('catalog.specifications.fuel')} value={`${car.fuel}`} hideBorder={true} />
                        </div>
                      ),
                      label: (
                        <div className="flex gap-4 items-center">
                          <CarWheelIcon className="size-6 stroke-grey-50" />
                          <div>{t('catalog.specifications.title')}</div>
                        </div>
                      ),
                    },
                  ]}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <TabsContentBlock queryDate={queryDate} car={car} faq={faq} conditions={conditions} />
    </Section>
  )
}
