'use client'
import { FC, useState, useEffect, useRef } from 'react'
import { Swiper, SwiperSlide, SwiperRef } from 'swiper/react';
import { Pagination } from 'swiper/modules';
import { ArrowLeft2, ArrowRight2 } from 'iconsax-react';
import Image from 'next/image';
import Link from 'next/link';
import { useGetLanding } from '../hooks/useHomeData';

const Carousel: FC = () => {
    const { data } = useGetLanding()
    const [isMobile, setIsMobile] = useState(false)
    const swiperRef = useRef<SwiperRef>(null)
    const [isBeginning, setIsBeginning] = useState(true)
    const [isEnd, setIsEnd] = useState(false)

    useEffect(() => {
        const checkIsMobile = () => {
            setIsMobile(window.innerWidth < 768) // md breakpoint
        }

        checkIsMobile()
        window.addEventListener('resize', checkIsMobile)

        return () => window.removeEventListener('resize', checkIsMobile)
    }, [])

    // Choose appropriate sliders based on device type
    const sliders = isMobile ? data?.results?.sliders?.mobile : data?.results?.sliders?.desktop

    if (!sliders || sliders.length === 0) {
        return null
    }

    return (
        <div className='relative' style={{ zIndex: 0 }}>
            <Swiper
                ref={swiperRef}
                pagination={true}
                modules={[Pagination]}
                className="mySwiper pb-5"
                style={{ zIndex: 0, position: 'relative' }}
                onSlideChange={(swiper) => {
                    setIsBeginning(swiper.isBeginning)
                    setIsEnd(swiper.isEnd)
                }}
                onSwiper={(swiper) => {
                    setIsBeginning(swiper.isBeginning)
                    setIsEnd(swiper.isEnd)
                }}
            >
                {sliders.map((slider) => (
                    <SwiperSlide key={slider._id}>
                        {slider.linkUrl ? (
                            <Link href={slider.linkUrl} className='block h-[200px] sm:h-[300px] md:h-[400px] relative'>
                                <Image
                                    src={slider.imageUrl}
                                    alt={slider.altText}
                                    fill
                                    className="object-cover rounded-lg"
                                />
                            </Link>
                        ) : (
                            <div className='h-[200px] sm:h-[300px] md:h-[400px] relative'>
                                <Image
                                    src={slider.imageUrl}
                                    alt={slider.altText}
                                    fill
                                    className="object-cover rounded-lg"
                                />
                            </div>
                        )}
                    </SwiperSlide>
                ))}
            </Swiper>

            {/* Navigation buttons */}
            <button
                onClick={() => swiperRef.current?.swiper?.slidePrev()}
                disabled={isBeginning}
                className={`absolute left-2 top-1/2 -translate-y-1/2 z-10 rounded-full p-2 shadow-md transition-all duration-200 ${isBeginning
                    ? 'bg-gray-100 cursor-not-allowed opacity-50'
                    : 'bg-white/80 hover:bg-white cursor-pointer'
                    }`}
            >
                <ArrowLeft2 size="20" color={isBeginning ? "#9CA3AF" : "#374151"} />
            </button>
            <button
                onClick={() => swiperRef.current?.swiper?.slideNext()}
                disabled={isEnd}
                className={`absolute right-2 top-1/2 -translate-y-1/2 z-10 rounded-full p-2 shadow-md transition-all duration-200 ${isEnd
                    ? 'bg-gray-100 cursor-not-allowed opacity-50'
                    : 'bg-white/80 hover:bg-white cursor-pointer'
                    }`}
            >
                <ArrowRight2 size="20" color={isEnd ? "#9CA3AF" : "#374151"} />
            </button>
        </div>
    )
}

export default Carousel