'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 { VipType } from '@/services/wallet';
import { useEffect, useState } from 'react';

const VipPage = () => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const back = searchParams.get('back');
  const setIsVipDrawerOpen = (P: any) => null;
  const [enableQuery, setEnableQuery] = useState(!back);

  useEffect(() => {
    if (back) {
      // 如果有 back 参数，等待 2 秒后再启用查询
      const timer = setTimeout(() => {
        setEnableQuery(true);
      }, 2000);
      return () => clearTimeout(timer);
    }
  }, [back]);

  const { data: memberDetail, isLoading } = useGetMemberDetail({ enabled: enableQuery });
  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 pt-12 pb-20 sm:px-6 lg:px-12">
      <div className="mx-auto max-w-[752px]">
        {/* Header */}
        <div className="mb-6 flex items-center gap-2">
          <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 mb-6 flex h-[180px] flex-col items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-r from-[#ff9696] via-[#aa90f9] to-[#8df3e2]">
          <h2 className="txt-display-m sm:txt-display-l mb-2 px-4 text-center text-white">
            CrushLevel VIP
          </h2>
          <SubscribeText enableQuery={enableQuery} />

          {/* Decorative Icon */}
          <div className="absolute top-0 -right-[16px] h-[173px] w-[173px]">
            <div
              className="h-full w-full bg-contain bg-center bg-no-repeat"
              style={{ backgroundImage: "url('/images/vip/icon-vip.svg')" }}
            />
          </div>
        </div>

        {/* Features Grid */}
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {!enableQuery || isLoading
            ? // 加载状态
              Array.from({ length: 6 }).map((_, index) => (
                <div key={index} className="flex flex-col gap-3">
                  <div className="bg-background-district relative overflow-hidden rounded-2xl">
                    <div className="pointer-events-none absolute inset-0 rounded-2xl" />
                    <div className="bg-surface-nest-normal h-40 w-full rounded-2xl" />
                  </div>
                  <div className="flex flex-col gap-2">
                    <div className="bg-surface-nest-normal h-5 w-3/4 rounded" />
                    <div className="bg-surface-nest-normal h-4 w-full rounded" />
                  </div>
                </div>
              ))
            : memberPrivList?.map((feature) => (
                <div key={feature.id} className="">
                  <div className="flex flex-col gap-3">
                    <div
                      className="relative overflow-hidden rounded-lg p-[1px]"
                      style={{
                        background: 'linear-gradient(90deg, #FF9696 0%, #AA90F9 50%, #8DF3E2 100%)',
                      }}
                    >
                      <div className="bg-background-default overflow-hidden rounded-lg">
                        <div className="pointer-events-none absolute inset-0 rounded-lg" />
                        <div
                          className="h-40 w-full bg-cover bg-center bg-no-repeat"
                          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 */}
        {enableQuery && !isLoading && !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;
