'use client'

import { Button } from '@/components/ui/button'
import ImageLoader from '@/lib/utils/ImageLoader'
import { Media } from '@/payload-types'
import { ChevronLeft, ChevronRight } from 'lucide-react'
import { useState, useEffect } from 'react'
import { useKeenSlider, KeenSliderInstance } from 'keen-slider/react'
import 'keen-slider/keen-slider.min.css'
import { cn } from '@/lib/utils/cn'
import ModalRadix from '@/components/shared/ModalRadix'
import Image from 'next/image'

export const GallerySlider = ({ images }: { images: string[] }) => {
  const [activeIndex, setActiveIndex] = useState(0)
  const [thumbSlider, setThumbSlider] = useState<KeenSliderInstance | null>(null)
  const [open, setOpen] = useState(false)

  const [thumbRef] = useKeenSlider<HTMLDivElement>(
    {
      initial: 0,
      slides: { perView: 4, spacing: 8 },
      slideChanged(s) {
        setActiveIndex(s.track.details.abs)
      },
    },
    [(slider) => setThumbSlider(slider)],
  )

  const prev = () => {
    const newIdx = Math.max(0, activeIndex - 1)
    setActiveIndex(newIdx)
    thumbSlider?.moveToIdx(newIdx)
  }
  const next = () => {
    const newIdx = Math.min(images.length - 1, activeIndex + 1)
    setActiveIndex(newIdx)
    thumbSlider?.moveToIdx(newIdx)
  }

  const onThumbClick = (idx: number) => {
    setActiveIndex(idx)
  }

  useEffect(() => {
    thumbSlider?.moveToIdx(activeIndex)
  }, [activeIndex, thumbSlider])

  return (
    <>
      <div className="w-full">
        <div className="relative">
          <div onClick={() => setOpen(true)}>
            {images.length > 0 ? (
              <Image
                src={images[activeIndex]}
                alt=""
                width={580}
                height={386}
                className="w-full xxl:w-[580px] h-[386px] object-cover rounded-xl cursor-pointer"
              />
            ) : (
              <div className="w-full xxl:w-[580px] h-[386px] object-cover rounded-xl cursor-pointer bg-grey-200"></div>
            )}
          </div>
          <Button
            variant="secondary"
            onClick={prev}
            disabled={activeIndex === 0}
            className="absolute z-10 left-2 top-1/2 -translate-y-1/2"
          >
            <ChevronLeft width={16} className="string-grey-200" />
          </Button>
          <Button
            variant="secondary"
            onClick={next}
            disabled={activeIndex === images.length - 1}
            className="absolute z-10 right-2 top-1/2 -translate-y-1/2"
          >
            <ChevronRight width={16} className="string-grey-200" />
          </Button>
        </div>

        <div ref={thumbRef} className="!hidden lg:!flex keen-slider mt-4">
          {images.map((image, idx) => (
            <div
              key={idx}
              onClick={() => onThumbClick(idx)}
              className={cn(
                'keen-slider__slide w-[140px] h-[96px] p-3 cursor-pointer relative',
                idx === activeIndex ? '' : 'opacity-60',
              )}
            >
              <Image
                src={image}
                alt=""
                width={116}
                height={72}
                className="w-[116px] h-[72px] object-cover rounded-xl"
              />
              {idx !== activeIndex && (
                <div className="absolute inset-0 bg-black/30 rounded-xl pointer-events-none" />
              )}
            </div>
          ))}
        </div>
        <div className="lg:hidden flex items-center justify-center gap-2 mt-4">
          {images.map((_, idx) => (
            <div
              key={idx}
              onClick={() => onThumbClick(idx)}
              className={cn(
                'size-2 rounded-full transition-colors bg-grey-100 cursor-pointer',
                idx === activeIndex && 'bg-grey-200 size-3',
              )}
            />
          ))}
        </div>
      </div>
      <ModalRadix open={open} onClose={() => setOpen(false)}>
        <div className="w-[328px] md:w-[664px] lg:w-[984px] max-h-[80vh] border border-transparent-grey-40 p-6 bg-transparent-black-78 rounded-lg">
          <div className="relative p-4 rounded-lg w-[296px] min-h-[200px] max-h-[394px] md:w-[616px] md:h-[436px] lg:w-[936px] lg:h-[420px] bg-transparent-white-8 flex items-center justify-center object-cover">
            <Image
              src={images[activeIndex]}
              alt=""
              width={936}
              height={420}
              className="w-2/3 h-full object-cover rounded-lg"
            />
            <div className="flex items-center absolute bottom-6 left-1/2 -translate-x-1/2 justify-center gap-2 mt-4">
              {images.map((_, idx) => (
                <div
                  key={idx}
                  onClick={() => onThumbClick(idx)}
                  className={cn(
                    'size-2 rounded-full transition-colors bg-grey-100 cursor-pointer',
                    idx === activeIndex && 'bg-grey-200 size-3',
                  )}
                />
              ))}
            </div>
          </div>
          <div className="mt-6 flex items-center justify-between">
            <Button variant="secondary" onClick={prev} disabled={activeIndex === 0}>
              <ChevronLeft width={16} className="string-grey-200" />
            </Button>

            <div className="w-[290px] hidden md:block overflow-hidden md:w-[352px]] lg:w-[580px] ">
              <div ref={thumbRef} className="keen-slider">
                {images.map((image, idx) => (
                  <div
                    key={idx}
                    onClick={() => onThumbClick(idx)}
                    className={cn(
                      'keen-slider__slide w-[80px] h-[80px] lg:w-[140px] lg:h-[96px] p-3 cursor-pointer relative',
                      idx === activeIndex ? '' : 'opacity-60',
                    )}
                  >
                    <Image
                      src={image}
                      alt=""
                      width={116}
                      height={72}
                      className="w-[66px] h-[66px] lg:w-[116px] lg:h-[72px] object-contain lg:object-cover rounded-xl"
                    />
                    {idx !== activeIndex && (
                      <div className="absolute inset-0 bg-black/30 rounded-xl pointer-events-none" />
                    )}
                  </div>
                ))}
              </div>
            </div>

            <Button variant="secondary" onClick={next} disabled={activeIndex === images.length - 1}>
              <ChevronRight width={16} className="string-grey-200" />
            </Button>
          </div>
        </div>
      </ModalRadix>
    </>
  )
}
