"use client"
import { Button, IconButton } from "@/components/ui/button"
import { useRouter, useSearchParams } from "next/navigation"
import { useGetMemberDetail } from "@/hooks/useWallet"
import SubscribeText from "./components/SubscribeText"
import { useSetAtom } from "jotai"
import { isVipDrawerOpenAtom } from "@/atoms/im"
import { VipType } from "@/services/wallet"

const VipPage = () => {
  const router = useRouter()
  const searchParams = useSearchParams()
  const back = searchParams.get("back")
  const setIsVipDrawerOpen = useSetAtom(isVipDrawerOpenAtom)

  const { data: memberDetail, isLoading } = useGetMemberDetail();
  const { memberPrivList, userMemberInfo } = memberDetail || {};

  const hasSubscribe = userMemberInfo && userMemberInfo.expTime && new Date(userMemberInfo.expTime) > new Date();

  const handleBack = () => {
    if (back) {
      window.history.go(-3);
      return;
    }
    router.back();
  }

  return (
    <div className="px-3 sm:px-6 lg:px-12 pt-12 pb-20">
      <div className="max-w-[752px] mx-auto">
        {/* Header */}
        <div className="flex items-center gap-2 mb-6">
          <IconButton 
            variant="ghost" 
            size="small"
            iconfont="icon-arrow-left"
            onClick={handleBack}
          />
          <h1 className="txt-title-l text-white">CrushLevel VIP</h1>
        </div>

        {/* Hero Section */}
        <div className="relative bg-gradient-to-r from-[#ff9696] via-[#aa90f9] to-[#8df3e2] rounded-2xl h-[180px] flex flex-col items-center justify-center mb-6 overflow-hidden">
          <h2 className="txt-display-m sm:txt-display-l text-white mb-2 text-center px-4">CrushLevel VIP</h2>
          <SubscribeText />
          
          {/* Decorative Icon */}
          <div className="absolute -right-[16px] top-0 w-[173px] h-[173px]">
            <div className="w-full h-full bg-center bg-no-repeat bg-contain" 
                 style={{ backgroundImage: "url('/images/vip/icon-vip.svg')" }} />
          </div>
        </div>

        {/* Features Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {isLoading ? (
            // 加载状态
            Array.from({ length: 6 }).map((_, index) => (
              <div key={index} className="flex flex-col gap-3">
                <div className="relative bg-background-district rounded-2xl overflow-hidden">
                  <div className="absolute inset-0 rounded-2xl pointer-events-none" />
                  <div className="h-40 w-full bg-surface-nest-normal rounded-2xl" />
                </div>
                <div className="flex flex-col gap-2">
                  <div className="h-5 bg-surface-nest-normal rounded w-3/4" />
                  <div className="h-4 bg-surface-nest-normal rounded w-full" />
                </div>
              </div>
            ))
          ) : (
            memberPrivList?.map((feature) => (
              <div key={feature.id} className="">
                <div className="flex flex-col gap-3">
                  <div
                    className="relative rounded-lg overflow-hidden p-[1px]"
                    style={{
                      background: "linear-gradient(90deg, #FF9696 0%, #AA90F9 50%, #8DF3E2 100%)"
                    }}
                  >
                    <div className="bg-background-default rounded-lg overflow-hidden">
                      <div className="absolute inset-0 rounded-lg pointer-events-none" />
                      <div 
                        className="h-40 w-full bg-center bg-no-repeat bg-cover" 
                        style={{ backgroundImage: `url('${feature.img}')` }} 
                      />
                    </div>
                  </div>
                  <div className="flex flex-col gap-2">
                    <h3 className="txt-title-s">{feature.title}</h3>
                    <p className="txt-body-m text-txt-secondary-normal">{feature.desc}</p>
                  </div>
                </div>
              </div>
            ))
          )}
        </div>

        {/* Subscribe Button */}
        {!hasSubscribe && <div className="flex justify-center py-4">
          <Button 
            size="large" 
            variant="vip"
            onClick={() => setIsVipDrawerOpen({ open: true, vipType: VipType.ADD_CRUSH_COIN })}
          >
            <i className="iconfont icon-icon-vip !text-[24px] leading-none"/>
            Subscribe
          </Button>
        </div>}
      </div>
    </div>
  );
}

export default VipPage;