"use client"

import { useState, useEffect } from "react";
import { IconButton } from "@/components/ui/button";
import { useGetMemberDetail } from "@/hooks/useWallet";
import { VipType } from "@/services/wallet";

const CarouselBanner = ({ vipType, visible }: { vipType?: VipType, visible: boolean }) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const { data: memberDetail, isLoading } = useGetMemberDetail();
  const { memberPrivList } = memberDetail || {};

  // 将 memberPrivList 转换为轮播数据格式
  const carouselData = memberPrivList?.map((item, index) => ({
    id: item.id || index,
    title: item.title || "VIP Feature",
    description: item.desc || "Enjoy exclusive VIP benefits",
    backgroundImage: item.img || "/images/vip/drawer-bg.png",
  })) || [];

  const nextSlide = () => {
    if (carouselData.length > 0) {
      setCurrentIndex((prev) => (prev + 1) % carouselData.length);
    }
  };

  const prevSlide = () => {
    if (carouselData.length > 0) {
      setCurrentIndex((prev) => (prev - 1 + carouselData.length) % carouselData.length);
    }
  };

  useEffect(() => {
    if (!memberPrivList) {
      return;
    }
    if (visible) {
      console.log('visible', visible, vipType)
      if (vipType) {
        const targetIndex = memberPrivList?.findIndex(item => item.code === vipType) ?? -1;
        if (targetIndex >= 0) {
          setCurrentIndex(targetIndex);
        } else {
          setCurrentIndex(0);
        }
      }
    }
  }, [visible, memberPrivList])
  

  const currentSlide = carouselData[currentIndex];

  // 加载状态
  if (isLoading) {
    return (
      <div className="content-stretch flex flex-col gap-4 items-start justify-start relative w-full px-6">
        {/* 轮播图片容器 - 骨架屏 */}
        <div className="backdrop-blur-md backdrop-filter content-stretch flex flex-col gap-1 h-[234px] items-start justify-start relative rounded-[16px] shrink-0 w-full">
          <div className="bg-[#2a2a2a] animate-pulse w-full h-[235px] shrink-0 relative rounded-[16px]" />
        </div>
        
        {/* 轮播内容信息 - 骨架屏 */}
        <div className="content-stretch flex flex-col gap-2 items-center justify-start relative shrink-0 w-full">
          <div className="h-6 bg-[#2a2a2a] animate-pulse rounded w-1/2" />
          <div className="h-4 bg-[#2a2a2a] animate-pulse rounded w-3/4" />
        </div>
      </div>
    );
  }

  return (
    <div className="content-stretch flex flex-col gap-4 items-start justify-start relative w-full px-6">
      {/* 轮播图片容器 */}
      <div className="content-stretch flex flex-col gap-1 h-[234px] items-start justify-start relative rounded-[16px] shrink-0 w-full">
        {/* 背景图片 */}
        <div 
          className="bg-center bg-no-repeat bg-cover w-full h-[235px] shrink-0 relative transition-all duration-500 ease-in-out  rounded-lg backdrop-blur-[12px]  overflow-hidden"
        >
          <div 
            className="absolute inset-0 transition-all duration-500 ease-in-out bg-background-district"
          />
          <div
            className="w-full h-full relative"
          >
            <img src={currentSlide.backgroundImage} className="w-full h-full object-cover" />
          </div>
          
        </div>
        
        {/* 右箭头按钮 - 只有多个项目时才显示 */}
        {carouselData.length > 1 && (
          <div className="absolute top-1/2 translate-y-[-50%] -right-4">
            <IconButton
              iconfont="icon-arrow-right-border"
              variant="tertiaryDark"
              size="small"
              onClick={nextSlide}
            />
          </div>
        )}
        
        {/* 左箭头按钮 - 只有多个项目时才显示 */}
        {carouselData.length > 1 && (
          <div className="absolute top-1/2 translate-y-[-50%] -left-4 z-10">
            <IconButton
              iconfont="icon-arrow-left-border"
              variant="tertiaryDark"
              size="small"
              onClick={prevSlide}
            />
          </div>
        )}
      </div>
      
      {/* 轮播内容信息 */}
      <div className="content-stretch flex flex-col gap-2 items-center justify-start relative shrink-0 w-full">
        <div className="content-stretch flex gap-1 items-start justify-center relative shrink-0 w-full">
          <div className="txt-title-m overflow-ellipsis overflow-hidden relative shrink-0 transition-all duration-500 ease-in-out">
            {currentSlide.title}
          </div>
        </div>
        <div className="txt-body-m relative text-txt-secondary-normal shrink-0 text-center w-full transition-all duration-500 ease-in-out">
          {currentSlide.description}
        </div>
      </div>
    </div>
  );
}
 
export default CarouselBanner;