import { motion, AnimatePresence } from 'framer-motion';
import { useEffect, useState, useRef } from 'react';
import { Swiper, SwiperRef, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

interface Slide {
  id: number;
  image: string;
  title?: string;
  description?: string;
}

interface CarouselProps {
  slides: Slide[];
  autoplayDelay?: number;
  className?: string;
  swiperConfig?: {
    spaceBetween?: number;
    slidesPerView?: number;
    navigation?: boolean;
    loop?: boolean;
    pagination?: boolean | { clickable: boolean };
    autoplayOptions?: {
      delay: number;
      disableOnInteraction: boolean;
    };
  };
}

export const Carousel = ({
  slides,
  autoplayDelay = 3000,
  className = '',
  swiperConfig = {},
}: CarouselProps) => {
  const [activeIndex, setActiveIndex] = useState(0);
  const swiperRef = useRef<any>(null);

  const {
    spaceBetween = 0,
    slidesPerView = 1,
    navigation = true,
    loop = true,
    pagination = { clickable: true },
    autoplayOptions = {
      delay: autoplayDelay,
      disableOnInteraction: false,
    },
  } = swiperConfig;

  return (
    <div className={`relative overflow-hidden ${className}`}>
      <Swiper
        modules={[Navigation, Pagination, Autoplay]}
        spaceBetween={spaceBetween}
        slidesPerView={slidesPerView}
        navigation={navigation}
        loop={loop}
        pagination={pagination}
        autoplay={autoplayOptions}
        onSlideChange={(swiper) => setActiveIndex(swiper.realIndex)}
        onSwiper={(swiper) => (swiperRef.current = swiper)}
        className="w-full h-full rounded-xl"
      >
        {slides.map((slide) => (
          <SwiperSlide key={slide.id}>
            <div className="relative w-full h-[400px] md:h-[600px]">
              <img
                src={slide.image}
                alt={slide.title || `Slide ${slide.id}`}
                className="w-full h-full object-cover"
              />
              <AnimatePresence>
                {(slide.title || slide.description) && (
                  <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: 20 }}
                    className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/60 to-transparent"
                  >
                    {slide.title && (
                      <h3 className="text-white text-2xl font-semibold mb-2">
                        {slide.title}
                      </h3>
                    )}
                    {slide.description && (
                      <p className="text-white/90 text-sm">
                        {slide.description}
                      </p>
                    )}
                  </motion.div>
                )}
              </AnimatePresence>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>

      <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 z-10 flex gap-2">
        {slides.map((_, index) => (
          <button
            key={index}
            className={`w-2 h-2 rounded-full transition-all duration-300 ${index === activeIndex
                ? 'bg-white scale-125'
                : 'bg-white/50 hover:bg-white/70'
              }`}
            onClick={() => {
              if (swiperRef.current) {
                swiperRef.current.slideToLoop(index); // 使用 Swiper 的 slideToLoop 方法切换到指定的幻灯片
              }
            }}
          />
        ))}
      </div>
    </div>
  );
};