"use client";
// import Link from "next/link";
// 轮播逻辑
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";

// 模拟你的每一页数据，方便维护
const vipList = [
  {
    level: 1,
    title: "V1 Privileges",
    exppoints: 1000,
    coupons: [
      {
        img: "https://cdn.alipearlhair.com/media/wysiwyg/wap/202301130956.png",
        text1: "Points Redeem",
        text2: "Giftcard",
        link: "javascript:void(0)",
      },
      {
        img: "https://cdn.alipearlhair.com/media/wysiwyg/wap/202301130957.png",
        text1: "Exclusive",
        text2: "$100 Coupon",
        link: "javascript:void(0)",
      },
      {
        img: "https://cdn.alipearlhair.com/media/wysiwyg/wap/202301130958.png",
        text1: "Birthday",
        text2: "Treat",
        link: "javascript:void(0)",
      },
    ],
  },
  {
    level: 2,
    title: "V2 Privileges",
    exppoints: 2000,
    coupons: [
      {
        img: "https://cdn.alipearlhair.com/media/wysiwyg/wap/202301130956.png",
        text1: "POINTS REDEEM",
        text2: "GIFTCARD",
        link: "javascript:void(0)",
      },
      {
        img: "https://cdn.alipearlhair.com/media/wysiwyg/wap/202301130957.png",
        text1: "EXCLUSIVE",
        text2: "$150 COUPON",
        link: "javascript:void(0)",
      },
      {
        img: "https://cdn.alipearlhair.com/media/wysiwyg/wap/202301130958.png",
        text1: "BIRTHDAY",
        text2: "TREAT",
        link: "javascript:void(0)",
      },
    ],
  },
  {
    level: 3,
    title: "V3 Privileges",
    exppoints: 10000,
    coupons: [
      {
        img: "https://cdn.alipearlhair.com/media/wysiwyg/wap/202301130956.png",
        text1: "POINTS REDEEM",
        text2: "GIFTCARD",
        link: "javascript:void(0)",
      },
      {
        img: "https://cdn.alipearlhair.com/media/wysiwyg/wap/202301130957.png",
        text1: "EXCLUSIVE",
        text2: "$200 COUPON",
        link: "javascript:void(0)",
      },
      {
        img: "https://cdn.alipearlhair.com/media/wysiwyg/wap/202301130958.png",
        text1: "BIRTHDAY",
        text2: "TREAT",
        link: "javascript:void(0)",
      },
    ],
  },
  {
    level: 4,
    title: "V4 Privileges",
    exppoints: 50000,
    coupons: [
      {
        img: "https://cdn.alipearlhair.com/media/wysiwyg/wap/202301130956.png",
        text1: "POINTS REDEEM",
        text2: "GIFTCARD",
        link: "/customer/account/pointsreceivelist",
      },
      {
        img: "https://cdn.alipearlhair.com/media/wysiwyg/wap/202301130957.png",
        text1: "EXCLUSIVE",
        text2: "$300 COUPON",
        link: "/customer/account/couponsreceivelist/v/4/",
      },
      {
        img: "https://cdn.alipearlhair.com/media/wysiwyg/wap/202301130958.png",
        text1: "BIRTHDAY",
        text2: "TREAT",
        link: "/customer/account/birthday",
      },
    ],
  },
];
export default function AccountVipPopup({
  visible,
  onClose,
}: {
  visible: boolean;
  onClose: () => void;
}) {
  // 如果不显示，直接 return null
  if (!visible) return null;

  return (
    // 全屏遮罩
    <div className="fixed inset-0 z-50 bg-black/50">
      {/* 弹框主体 - 从底部滑上来 */}
      <div className="absolute bottom-0 rounded-none left-0 right-0 w-full h-full bg-white  overflow-auto">
        <div className="flex flex-col">
          {/* 顶部导航 */}
          <header className="bg-black text-white py-4 px-4 flex items-center">
            <button onClick={onClose} className="">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="h-6 w-6"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M15 19l-7-7 7-7"
                />
              </svg>
            </button>
            <h1 className="mx-auto">Vip Center</h1>
          </header>
          <div className="vipcenter-privileges-modal-innerscroll-father">
            <div id="vipcenter-privileges-modal-innerscroll">
              <div
                className="   relative
    h-170
    mt-8
    px-6
    bg-[url('https://cdn.alipearlhair.com/media/wysiwyg/wap/_2.png')]
    bg-no-repeat
    bg-[length:100%_100%]"
              >
                <div className="absolute top-0.75 left-8 text-4.5 text-[#FFD1B9] font-semibold">
                  Vip <span className="levelcard">4</span>
                </div>
                <div className="flex flex-col justify-between items-center text-white">
                  <div className="w-18 h-18 mt-6">
                    <img
                      className="max-w-full border-0 align-top"
                      src="https://cdn.alipearlhair.com/media/wysiwyg/newap/202303131637.png "
                      alt=""
                    />
                  </div>
                  <p className="text-4.5 mt-3 font-semibold"></p>
                  <p className="text-text-sm mt-1.5 text-[#EFEFEF]">
                    18567768101@163.com
                  </p>
                  <p className="text-sm mt-1.5 text-[#EFEFEF]">
                    Above current level
                  </p>
                </div>
                <div className="box-border w-full mt-10.5 mb-9.75">
                  <div className="text-center text-sm text-white mb-3">
                    <span className="account-center-progress-text-pre">
                      Growth Value 100309/500001
                    </span>
                  </div>
                  <div className="relative h-1 bg-[#5F4040]">
                    <div className="w-4 h-4 rounded-full bg-black absolute top-[-0.1867rem] left-0 block"></div>
                    <div className="rounded-[1.2821vw] w-[35%] h-full bg-[rgba(255,255,255,1)]"></div>
                  </div>
                  {/* 轮播 */}
                  <div className="swiper-container-center vip-swiper">
                    <Swiper
                      modules={[Navigation]}
                      navigation // 开启左右箭头
                      slidesPerView={1}
                      spaceBetween={0}
                      className="swiper-container-horizontal"
                    >
                      {vipList.map((item, idx) => (
                        <SwiperSlide
                          key={idx}
                          className="swiper-slide-color"
                          style={{ width: "343px" }}
                          data-exppoints={item.exppoints}
                          data-level={item.level}
                        >
                          {/* 标题 */}
                          <h3 className="text-lg font-medium mb-4">
                            {item.title}
                          </h3>

                          {/* 权益卡片容器 */}
                          <div className="vipcenter-privileges-coupnts flex gap-3 flex-wrap">
                            {item.coupons.map((coupon, cIdx) => (
                              <a
                                key={cIdx}
                                href={coupon.link}
                                className="vipcenter-privileges-coupnt-a vipcenter-privileges-coupnt-ponit"
                              >
                                <button className="vipcenter-privileges-coupnt flex flex-col items-center p-2 border rounded">
                                  <img
                                    src={coupon.img}
                                    alt=""
                                    className="w-10 h-10 object-contain mb-1"
                                  />
                                  <p className="text-sm">{coupon.text1}</p>
                                  <p className="text-sm">{coupon.text2}</p>
                                </button>
                              </a>
                            ))}
                          </div>
                        </SwiperSlide>
                      ))}
                    </Swiper>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
