import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
  Box,
  Button,
  Flex,
  Text,
  Badge,
  VStack,
  HStack,
  useToast,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalCloseButton,
  useDisclosure,
  Image,
  Progress,
  Divider,
  Input,
  Icon,
  Container,
  useBreakpointValue,
  Checkbox,
  Link as ChakraLink,
} from '@chakra-ui/react';
import {
  FaWeixin,
  FaGem,
  FaCheck,
  FaQrcode,
  FaClock,
  FaRedo,
  FaCrown,
  FaStar,
  FaTimes,
  FaChevronDown,
  FaChevronUp,
  FaExternalLinkAlt,
} from 'react-icons/fa';
import { AlipayCircleOutlined } from '@ant-design/icons';

import { logger } from '../../utils/logger';
import { useAuth } from '../../contexts/AuthContext';
import { useSubscriptionEvents } from '../../hooks/useSubscriptionEvents';
import { subscriptionConfig, themeColors } from '../../views/Pages/Account/subscription-content';
import { getApiBase } from '../../utils/apiConfig';

// 会员协议 URL 配置
const AGREEMENT_URLS = {
  pro: 'https://valuefrontier.cn/htmls/pro-member-agreement.html',
  max: 'https://valuefrontier.cn/htmls/max-member-agreement.html',
};

// 计费周期选择器组件 - 移动端垂直布局（年付在上），桌面端水平布局
interface CycleSelectorProps {
  options: any[];
  selectedCycle: string;
  onSelectCycle: (cycle: string) => void;
}

function CycleSelector({ options, selectedCycle, onSelectCycle }: CycleSelectorProps) {
  // 使用 useBreakpointValue 动态获取是否是移动端
  const isMobile = useBreakpointValue({ base: true, md: false });

  // 移动端倒序显示（年付在上），桌面端正常顺序
  const displayOptions = isMobile ? [...options].reverse() : options;

  return (
    <Flex
      direction={{ base: 'column', md: 'row' }}
      gap={3}
      p={2}
      bg="rgba(255, 255, 255, 0.03)"
      borderRadius="xl"
      border="1px solid"
      borderColor="rgba(255, 255, 255, 0.1)"
      backdropFilter="blur(10px)"
      justify="center"
      align="center"
      w={{ base: 'full', md: 'auto' }}
      maxW={{ base: '320px', md: 'none' }}
      mx="auto"
    >
      {displayOptions.map((option: any) => (
        <Box key={option.cycleKey} position="relative" w={{ base: 'full', md: 'auto' }}>
          {option.discountPercent > 0 && (
            <Badge
              position="absolute"
              top={{ base: '50%', md: '-10px' }}
              right={{ base: '10px', md: '-10px' }}
              transform={{ base: 'translateY(-50%)', md: 'none' }}
              colorScheme="red"
              fontSize="xs"
              px={2}
              py={1}
              borderRadius="full"
              fontWeight="bold"
              zIndex={1}
            >
              省{option.discountPercent}%
            </Badge>
          )}

          <Button
            size="lg"
            w={{ base: 'full', md: 'auto' }}
            px={6}
            py={6}
            borderRadius="lg"
            bg={selectedCycle === option.cycleKey ? 'linear-gradient(135deg, #D4AF37, #B8941F)' : 'transparent'}
            color={selectedCycle === option.cycleKey ? '#000' : '#fff'}
            border="1px solid"
            borderColor={selectedCycle === option.cycleKey ? 'rgba(212, 175, 55, 0.3)' : 'rgba(255, 255, 255, 0.1)'}
            onClick={() => onSelectCycle(option.cycleKey)}
            _hover={{
              transform: 'translateY(-2px)',
              borderColor: 'rgba(212, 175, 55, 0.5)',
              shadow: selectedCycle === option.cycleKey
                ? '0 0 20px rgba(212, 175, 55, 0.3)'
                : '0 4px 12px rgba(0, 0, 0, 0.5)',
            }}
            transition="all 0.3s"
            fontWeight="bold"
            justifyContent={{ base: 'flex-start', md: 'center' }}
            pl={{ base: 6, md: 6 }}
          >
            {option.label}
          </Button>
        </Box>
      ))}
    </Flex>
  );
}

export default function SubscriptionContentNew() {
  const { user } = useAuth();
  const subscriptionEvents = useSubscriptionEvents({
    currentSubscription: {
      plan: user?.subscription_plan || 'free',
      status: user?.subscription_status || 'inactive',
    },
  });

  const [selectedCycle, setSelectedCycle] = useState('monthly');
  const [selectedPlan, setSelectedPlan] = useState(null);
  const [subscriptionPlans, setSubscriptionPlans] = useState([]);
  const [priceInfo, setPriceInfo] = useState(null);
  const [loading, setLoading] = useState(false);
  const [promoCode, setPromoCode] = useState('');
  const [promoCodeApplied, setPromoCodeApplied] = useState(false);
  const [promoCodeError, setPromoCodeError] = useState('');
  const [validatingPromo, setValidatingPromo] = useState(false);

  const [paymentOrder, setPaymentOrder] = useState(null);
  const [paymentCountdown, setPaymentCountdown] = useState(300);
  const [autoCheckInterval, setAutoCheckInterval] = useState(null);
  const [forceUpdating, setForceUpdating] = useState(false);
  const [paymentMethod, setPaymentMethod] = useState<'wechat' | 'alipay'>('wechat'); // 支付方式

  const [openFaqIndex, setOpenFaqIndex] = useState(null);

  // 会员协议确认状态
  const [agreementChecked, setAgreementChecked] = useState(false);

  const { isOpen, onOpen, onClose } = useDisclosure();
  const toast = useToast();

  // 倒计时更新
  useEffect(() => {
    let timer: any;
    if (paymentCountdown > 0) {
      timer = setInterval(() => {
        setPaymentCountdown((prev) => {
          if (prev <= 1) {
            handlePaymentExpire();
            return 0;
          }
          return prev - 1;
        });
      }, 1000);
    }
    return () => clearInterval(timer);
  }, [paymentCountdown]);

  // 组件卸载时清理定时器
  useEffect(() => {
    return () => {
      stopAutoPaymentCheck();
    };
  }, []);

  // 组件加载时获取套餐数据
  useEffect(() => {
    fetchSubscriptionPlans();
  }, []);

  // 检查是否从支付宝支付返回（手机端支付完成后会跳转回来）
  useEffect(() => {
    const checkAlipayReturn = async () => {
      // 检查 URL 参数是否包含支付宝返回标记
      const urlParams = new URLSearchParams(window.location.search);
      const paymentReturn = urlParams.get('payment_return');
      // 支付宝返回的参数是 out_trade_no，后端重定向时会转成 order_no
      const orderNo = urlParams.get('order_no') || urlParams.get('out_trade_no');

      if (paymentReturn === 'alipay' && orderNo) {
        // 从支付宝返回，检查支付状态
        toast({
          title: '正在确认支付结果...',
          status: 'info',
          duration: 2000,
          isClosable: true,
        });

        try {
          // 优先使用 sessionStorage 中的 orderId，否则使用 order_no 查询
          const orderId = sessionStorage.getItem('alipay_order_id');
          const statusUrl = orderId
            ? `${getApiBase()}/api/payment/alipay/order/${orderId}/status`
            : `${getApiBase()}/api/payment/alipay/order-by-no/${orderNo}/status`;

          const response = await fetch(statusUrl, {
            credentials: 'include',
          });

          if (response.ok) {
            const data = await response.json();
            if (data.success && (data.data?.status === 'paid' || data.payment_success)) {
              toast({
                title: '支付成功！',
                description: '您的订阅已激活',
                status: 'success',
                duration: 5000,
                isClosable: true,
              });

              // 清理 sessionStorage
              sessionStorage.removeItem('alipay_order_id');
              sessionStorage.removeItem('alipay_order_no');

              // 清除 URL 参数并刷新页面
              window.history.replaceState({}, document.title, window.location.pathname);
              setTimeout(() => window.location.reload(), 2000);
            } else {
              toast({
                title: '支付状态待确认',
                description: '如已完成支付，请稍候或刷新页面',
                status: 'warning',
                duration: 5000,
                isClosable: true,
              });
              // 清除 URL 参数
              window.history.replaceState({}, document.title, window.location.pathname);
            }
          } else {
            // 清除 URL 参数
            window.history.replaceState({}, document.title, window.location.pathname);
          }
        } catch (error) {
          logger.error('SubscriptionContentNew', 'checkAlipayReturn', error);
          // 清除 URL 参数
          window.history.replaceState({}, document.title, window.location.pathname);
        }
      }
    };

    checkAlipayReturn();
  }, [toast]);

  const fetchSubscriptionPlans = async () => {
    try {
      logger.debug('SubscriptionContentNew', '正在获取订阅套餐');
      const response = await fetch(`${getApiBase()}/api/subscription/plans`);

      if (response.ok) {
        const data = await response.json();

        if (data.success && Array.isArray(data.data)) {
          const validPlans = data.data.filter(
            (plan: any) =>
              plan &&
              plan.name &&
              typeof plan.monthly_price === 'number' &&
              typeof plan.yearly_price === 'number'
          );
          logger.debug('SubscriptionContentNew', '套餐加载成功', {
            status: response.status,
            validPlansCount: validPlans.length,
          });
          setSubscriptionPlans(validPlans);
        } else {
          logger.warn('SubscriptionContentNew', '套餐数据格式异常', { data });
          setSubscriptionPlans([]);
        }
      } else {
        logger.error('SubscriptionContentNew', 'fetchSubscriptionPlans', new Error(`HTTP ${response.status}`));
        setSubscriptionPlans([]);
      }
    } catch (error) {
      logger.error('SubscriptionContentNew', 'fetchSubscriptionPlans', error);
      setSubscriptionPlans([]);
    }
  };

  const handlePaymentExpire = () => {
    stopAutoPaymentCheck();
    toast({
      title: '支付二维码已过期',
      description: '请重新创建订单',
      status: 'warning',
      duration: 3000,
      isClosable: true,
    });
  };

  const stopAutoPaymentCheck = () => {
    if (autoCheckInterval) {
      clearInterval(autoCheckInterval);
      setAutoCheckInterval(null);
    }
  };

  const formatTime = (seconds: number) => {
    const minutes = Math.floor(seconds / 60);
    const remainingSeconds = seconds % 60;
    return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
  };

  // 计算价格
  const calculatePrice = async (plan: any, cycle: string, promoCodeValue: any = null) => {
    try {
      const validPromoCode = promoCodeValue && typeof promoCodeValue === 'string' && promoCodeValue.trim()
        ? promoCodeValue.trim()
        : null;

      const response = await fetch(`${getApiBase()}/api/subscription/calculate-price`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        credentials: 'include',
        body: JSON.stringify({
          to_plan: plan.name,
          to_cycle: cycle,
          promo_code: validPromoCode,
        }),
      });

      if (response.ok) {
        const data = await response.json();
        if (data.success) {
          setPriceInfo(data.data);
          return data.data;
        }
      }
      return null;
    } catch (error) {
      logger.error('SubscriptionContent', 'calculatePrice', error);
      return null;
    }
  };

  // 验证优惠码
  const handleValidatePromoCode = async () => {
    const trimmedCode = promoCode.trim();
    if (!trimmedCode) {
      setPromoCodeError('请输入优惠码');
      return;
    }
    if (!selectedPlan) {
      setPromoCodeError('请先选择套餐');
      return;
    }

    setValidatingPromo(true);
    setPromoCodeError('');

    try {
      const result = await calculatePrice(selectedPlan, selectedCycle, trimmedCode);
      if (result && !result.promo_error) {
        setPromoCodeApplied(true);
        toast({
          title: '优惠码已应用',
          description: `节省 ¥${result.discount_amount.toFixed(2)}`,
          status: 'success',
          duration: 3000,
          isClosable: true,
        });
      } else {
        setPromoCodeError(result?.promo_error || '优惠码无效');
        setPromoCodeApplied(false);
      }
    } catch (error) {
      setPromoCodeError('验证失败,请重试');
      setPromoCodeApplied(false);
    } finally {
      setValidatingPromo(false);
    }
  };

  const handleRemovePromoCode = async () => {
    setPromoCode('');
    setPromoCodeApplied(false);
    setPromoCodeError('');
    if (selectedPlan) {
      await calculatePrice(selectedPlan, selectedCycle, null);
    }
  };

  const handleSubscribe = async (plan: any) => {
    if (!user) {
      toast({
        title: '请先登录',
        description: '登录后即可订阅',
        status: 'warning',
        duration: 3000,
        isClosable: true,
      });
      return;
    }

    subscriptionEvents.trackPricingPlanSelected(
      plan.name,
      selectedCycle,
      getCurrentPrice(plan)
    );

    setSelectedPlan(plan);

    // 切换套餐时重置协议勾选状态
    setAgreementChecked(false);

    await calculatePrice(plan, selectedCycle, promoCodeApplied ? promoCode : null);
    onOpen();
  };

  const handleCreatePaymentOrder = async () => {
    if (!selectedPlan || !user) return;

    setLoading(true);
    try {
      const price = priceInfo?.final_amount || getCurrentPrice(selectedPlan);

      // 检查是否为免费升级（剩余价值足够抵扣新套餐价格）
      if (price === 0 && priceInfo?.is_upgrade) {
        const response = await fetch(`${getApiBase()}/api/subscription/free-upgrade`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          credentials: 'include',
          body: JSON.stringify({
            plan_name: selectedPlan.name,
            billing_cycle: selectedCycle,
          }),
        });

        const data = await response.json();
        if (data.success) {
          subscriptionEvents.trackPaymentSuccessful({
            planName: selectedPlan.name,
            paymentMethod: 'free_upgrade',
            amount: 0,
            orderId: 'free_upgrade',
            transactionId: 'free_upgrade',
          });

          toast({
            title: '升级成功！',
            description: data.message,
            status: 'success',
            duration: 5000,
            isClosable: true,
          });

          onClose();
          setTimeout(() => window.location.reload(), 2000);
          return;
        } else {
          throw new Error(data.error || '免费升级失败');
        }
      }

      const paymentMethodName = paymentMethod === 'alipay' ? 'alipay' : 'wechat_pay';

      subscriptionEvents.trackPaymentInitiated({
        planName: selectedPlan.name,
        paymentMethod: paymentMethodName,
        amount: price,
        billingCycle: selectedCycle,
      });

      // 根据支付方式选择不同的 API
      const apiUrl = paymentMethod === 'alipay'
        ? `${getApiBase()}/api/payment/alipay/create-order`
        : `${getApiBase()}/api/payment/create-order`;

      // 检测是否为移动端设备（多重检测，确保 Safari 兼容性）
      const userAgent = navigator.userAgent;

      // 方式1：User Agent 检测
      const uaCheck = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);

      // 方式2：触摸屏检测（Safari 兼容）
      const touchCheck = 'ontouchstart' in window || navigator.maxTouchPoints > 0;

      // 方式3：屏幕宽度检测
      const screenCheck = window.innerWidth <= 768;

      // 方式4：Safari 移动端特定检测（iOS Safari 有 standalone 属性）
      const isSafariMobile = /Safari/i.test(userAgent) && /Apple/i.test(navigator.vendor) && touchCheck;

      // 综合判断：UA 匹配 或 (触摸屏 + 小屏幕) 或 Safari 移动端
      const isMobileDevice = uaCheck || (touchCheck && screenCheck) || isSafariMobile;

      // 调试日志
      console.log('[支付] User-Agent:', userAgent);
      console.log('[支付] 移动端检测 - UA:', uaCheck, 'Touch:', touchCheck, 'Screen:', screenCheck, 'SafariMobile:', isSafariMobile);
      console.log('[支付] 最终判断为移动端:', isMobileDevice);
      console.log('[支付] 支付方式:', paymentMethod);

      const response = await fetch(apiUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        credentials: 'include',
        body: JSON.stringify({
          plan_name: selectedPlan.name,
          billing_cycle: selectedCycle,
          promo_code: promoCodeApplied ? promoCode : null,
          is_mobile: isMobileDevice, // 传递设备类型，用于支付宝选择 page/wap 支付
        }),
      });

      if (response.ok) {
        const data = await response.json();
        if (data.success) {
          if (paymentMethod === 'alipay') {
            // 支付宝：跳转到支付页面
            if (data.data.pay_url) {
              // 使用与上面相同的移动端检测结果（已在上面计算过）
              console.log('[支付宝] 订单创建成功');
              console.log('[支付宝] pay_url:', data.data.pay_url.substring(0, 100) + '...');
              console.log('[支付宝] 是否移动端跳转:', isMobileDevice);

              if (isMobileDevice) {
                // 手机端：尝试自动跳转到支付宝
                // 保存订单信息到 sessionStorage，支付完成后返回时可以用来检查状态
                sessionStorage.setItem('alipay_order_id', data.data.id);
                sessionStorage.setItem('alipay_order_no', data.data.order_no);

                // 检测是否在微信内置浏览器中
                const isWechatBrowser = /MicroMessenger/i.test(navigator.userAgent);

                // 设置订单状态（用于支付完成后返回时显示）
                setPaymentOrder({
                  ...data.data,
                  payment_method: 'alipay',
                  is_mobile: true,
                  is_wechat_browser: isWechatBrowser,
                });
                setPaymentCountdown(30 * 60);
                startAutoPaymentCheck(data.data.id, 'alipay');

                if (isWechatBrowser) {
                  // 微信内置浏览器：无法直接跳转支付宝，需要引导用户在外部浏览器打开
                  toast({
                    title: '订单创建成功',
                    description: '微信内无法直接打开支付宝，请点击按钮复制链接后在浏览器中打开',
                    status: 'warning',
                    duration: 5000,
                    isClosable: true,
                  });
                } else {
                  // 非微信浏览器（Safari、Chrome 等）：直接跳转
                  toast({
                    title: '正在跳转支付宝',
                    description: '如未自动跳转，请点击下方按钮',
                    status: 'success',
                    duration: 3000,
                    isClosable: true,
                  });

                  // 延迟 300ms 后自动跳转，让 toast 显示出来
                  setTimeout(() => {
                    window.location.href = data.data.pay_url;
                  }, 300);
                }
              } else {
                // PC端：新窗口打开
                setPaymentOrder(data.data);
                setPaymentCountdown(30 * 60);
                startAutoPaymentCheck(data.data.id, 'alipay');

                toast({
                  title: '订单创建成功',
                  description: '正在跳转到支付宝支付页面...',
                  status: 'success',
                  duration: 3000,
                  isClosable: true,
                });

                // 延迟跳转，让用户看到提示
                setTimeout(() => {
                  window.open(data.data.pay_url, '_blank');
                }, 500);
              }
            } else {
              throw new Error('支付链接获取失败');
            }
          } else {
            // 微信：显示二维码
            setPaymentOrder(data.data);
            setPaymentCountdown(30 * 60);
            startAutoPaymentCheck(data.data.id, 'wechat');

            toast({
              title: '订单创建成功',
              description: '请使用微信扫描二维码完成支付',
              status: 'success',
              duration: 3000,
              isClosable: true,
            });
          }
        } else {
          throw new Error(data.error || data.message || '创建订单失败');
        }
      } else {
        const errorData = await response.json().catch(() => ({}));
        throw new Error(errorData.error || '网络请求失败');
      }
    } catch (error: any) {
      subscriptionEvents.trackPaymentFailed(
        {
          planName: selectedPlan.name,
          paymentMethod: paymentMethod === 'alipay' ? 'alipay' : 'wechat_pay',
          amount: getCurrentPrice(selectedPlan),
        },
        error.message
      );

      toast({
        title: '创建订单失败',
        description: error.message,
        status: 'error',
        duration: 3000,
        isClosable: true,
      });
    } finally {
      setLoading(false);
    }
  };

  const startAutoPaymentCheck = (orderId: string, method: 'wechat' | 'alipay' = 'wechat') => {
    // 根据支付方式选择不同的状态查询 API
    const statusApiUrl = method === 'alipay'
      ? `${getApiBase()}/api/payment/alipay/order/${orderId}/status`
      : `${getApiBase()}/api/payment/order/${orderId}/status`;

    const checkInterval = setInterval(async () => {
      try {
        const response = await fetch(statusApiUrl, {
          credentials: 'include',
        });

        if (response.ok) {
          const data = await response.json();
          if (data.success && (data.data.status === 'paid' || data.payment_success)) {
            clearInterval(checkInterval);
            setAutoCheckInterval(null);

            subscriptionEvents.trackPaymentSuccessful({
              planName: selectedPlan?.name,
              paymentMethod: method === 'alipay' ? 'alipay' : 'wechat_pay',
              amount: paymentOrder?.amount,
              orderId: orderId,
              transactionId: data.data.transaction_id || data.data.alipay_trade_no,
            });

            toast({
              title: '支付成功！',
              description: '您的订阅已激活',
              status: 'success',
              duration: 5000,
              isClosable: true,
            });

            onClose();
            setTimeout(() => window.location.reload(), 2000);
          }
        }
      } catch (error) {
        logger.error('SubscriptionContent', 'checkPaymentStatus', error);
      }
    }, 3000);

    setAutoCheckInterval(checkInterval as any);
  };

  const handleForceUpdate = async () => {
    if (!paymentOrder) return;

    setForceUpdating(true);
    try {
      // 根据订单的支付方式选择不同的查询 API
      const orderPaymentMethod = (paymentOrder as any).payment_method || paymentMethod;
      const statusApiUrl = orderPaymentMethod === 'alipay'
        ? `${getApiBase()}/api/payment/alipay/order/${(paymentOrder as any).id}/status`
        : `${getApiBase()}/api/payment/order/${(paymentOrder as any).id}/status`;

      const response = await fetch(statusApiUrl, {
        credentials: 'include',
      });

      if (response.ok) {
        const data = await response.json();
        if (data.success && (data.data.status === 'paid' || data.payment_success)) {
          toast({
            title: '支付成功！',
            description: '您的订阅已激活',
            status: 'success',
            duration: 5000,
            isClosable: true,
          });

          onClose();
          setTimeout(() => window.location.reload(), 2000);
        } else {
          toast({
            title: '未检测到支付',
            description: '请确认已完成支付后重试',
            status: 'info',
            duration: 3000,
            isClosable: true,
          });
        }
      }
    } catch (error: any) {
      toast({
        title: '查询失败',
        description: error.message,
        status: 'error',
        duration: 3000,
        isClosable: true,
      });
    } finally {
      setForceUpdating(false);
    }
  };

  // 重新打开支付宝支付页面
  const handleReopenAlipay = () => {
    if (paymentOrder && (paymentOrder as any).pay_url) {
      window.open((paymentOrder as any).pay_url, '_blank');
    }
  };

  // 合并数据库数据和前端配置
  const getMergedPlans = () => {
    // 如果数据库还没有加载数据，使用静态配置
    if (subscriptionPlans.length === 0) {
      return subscriptionConfig.plans;
    }

    // 合并数据库价格和前端UI配置
    return subscriptionConfig.plans.map((configPlan: any) => {
      const dbPlan = subscriptionPlans.find((p: any) => p.name === configPlan.name);

      if (!dbPlan) {
        return configPlan; // 如果数据库中没有，使用前端配置
      }

      // 解析数据库中的 pricing_options JSON
      let pricingOptions = configPlan.pricingOptions;
      if (dbPlan.pricing_options) {
        try {
          const parsedOptions = typeof dbPlan.pricing_options === 'string'
            ? JSON.parse(dbPlan.pricing_options)
            : dbPlan.pricing_options;

          if (Array.isArray(parsedOptions) && parsedOptions.length > 0) {
            pricingOptions = parsedOptions.map((opt: any) => ({
              cycleKey: opt.cycle_key,
              label: opt.label,
              months: opt.months,
              price: parseFloat(opt.price),
              originalPrice: opt.original_price ? parseFloat(opt.original_price) : null,
              discountPercent: opt.discount_percent || 0,
            }));
          }
        } catch (error) {
          logger.error('SubscriptionContentNew', '解析pricing_options失败', error);
        }
      }

      // 合并数据，数据库价格优先
      return {
        ...configPlan,
        monthly_price: dbPlan.monthly_price,
        yearly_price: dbPlan.yearly_price,
        pricingOptions: pricingOptions,
        displayName: dbPlan.display_name || configPlan.displayName,
        description: dbPlan.description || configPlan.description,
      };
    });
  };

  const getCurrentPrice = (plan: any) => {
    if (!plan || plan.name === 'free') return 0;

    const option = plan.pricingOptions?.find(
      (opt: any) => opt.cycleKey === selectedCycle
    );
    return option ? option.price : plan.pricingOptions?.[0]?.price || 0;
  };

  const getCurrentPriceOption = (plan: any) => {
    if (!plan || plan.name === 'free') return null;
    return plan.pricingOptions?.find((opt: any) => opt.cycleKey === selectedCycle);
  };

  const getIconComponent = (iconName: string) => {
    const icons: any = {
      star: FaStar,
      gem: FaGem,
      crown: FaCrown,
    };
    return icons[iconName] || FaStar;
  };

  // 获取按钮文字
  const getButtonText = (plan: any) => {
    const currentPlanName = user?.subscription_type;
    const isActive = user?.subscription_status === 'active';

    if (!isActive || !currentPlanName || currentPlanName === 'free') {
      return `选择${plan.displayName}`;
    }

    if (currentPlanName === plan.name) {
      // 同级续费
      return `续费${plan.displayName}`;
    }

    // 升级或降级
    if (currentPlanName === 'pro' && plan.name === 'max') {
      return `升级为${plan.displayName}`;
    }

    if (currentPlanName === 'max' && plan.name === 'pro') {
      return `到期后切换到${plan.displayName}`;
    }

    return `选择${plan.displayName}`;
  };

  // 判断按钮是否可点击
  const isButtonDisabled = (plan: any) => {
    return false; // 所有套餐都可以选择，包括当前套餐（续费）
  };

  return (
    <Box
      minH="100vh"
      bg="#0a0a0a"
      pt={{ base: 8, md: 16 }}
      pb={{ base: 16, md: 24 }}
      position="relative"
      overflow="hidden"
    >
      {/* 背景光晕 */}
      <Box
        position="absolute"
        top="20%"
        left="10%"
        w="400px"
        h="400px"
        bg="rgba(212, 175, 55, 0.15)"
        borderRadius="full"
        filter="blur(100px)"
        pointerEvents="none"
        zIndex={0}
      />
      <Box
        position="absolute"
        bottom="10%"
        right="10%"
        w="500px"
        h="500px"
        bg="rgba(212, 175, 55, 0.1)"
        borderRadius="full"
        filter="blur(120px)"
        pointerEvents="none"
        zIndex={0}
      />

      <Container maxW="1400px" px={{ base: 4, md: 6 }} position="relative" zIndex={1}>
        {/* 标题区域 */}
        <VStack spacing={4} mb={12} textAlign="center">
          <motion.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            <Text
              fontSize="sm"
              color="rgba(212, 175, 55, 0.8)"
              fontWeight="medium"
              letterSpacing="wider"
              textTransform="uppercase"
            >
              订阅方案
            </Text>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.1 }}
          >
            <Text
              fontSize={{ base: '3xl', md: '5xl', lg: '6xl' }}
              fontWeight="bold"
              bgGradient="radial-gradient(circle at center, #FFFFFF 0%, rgba(255,255,255,0.6) 100%)"
              bgClip="text"
              lineHeight="1.2"
            >
              立即开启智能决策
            </Text>
          </motion.div>
        </VStack>

        {/* 当前订阅状态 */}
        {user && user.subscription_type && user.subscription_type !== 'free' && user.subscription_status === 'active' && (
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.5, delay: 0.2 }}
          >
            <Box
              mb={12}
              p={6}
              borderRadius="2xl"
              bg="rgba(212, 175, 55, 0.05)"
              border="2px solid"
              borderColor="rgba(212, 175, 55, 0.3)"
              backdropFilter="blur(20px)"
              maxW="600px"
              mx="auto"
              position="relative"
              overflow="hidden"
              _before={{
                content: '""',
                position: 'absolute',
                top: 0,
                left: 0,
                right: 0,
                height: '4px',
                bgGradient: 'linear-gradient(90deg, rgba(212, 175, 55, 0.5), rgba(212, 175, 55, 1), rgba(212, 175, 55, 0.5))',
              }}
            >
              <VStack spacing={4} align="stretch">
                <HStack justify="space-between" align="center">
                  <HStack spacing={3}>
                    <Icon
                      as={user.subscription_type === 'max' ? FaCrown : FaGem}
                      color="#D4AF37"
                      boxSize={6}
                    />
                    <VStack align="start" spacing={0}>
                      <Text color="white" fontSize="lg" fontWeight="bold">
                        当前订阅: {user.subscription_type === 'max' ? 'Max 旗舰版' : 'Pro 专业版'}
                      </Text>
                      {user.billing_cycle && (
                        <Text color="rgba(255, 255, 255, 0.6)" fontSize="xs">
                          {user.billing_cycle === 'monthly' ? '月付' :
                           user.billing_cycle === 'quarterly' ? '季付' :
                           user.billing_cycle === 'semiannual' ? '半年付' :
                           user.billing_cycle === 'yearly' ? '年付' : user.billing_cycle}
                        </Text>
                      )}
                    </VStack>
                  </HStack>
                  <Badge
                    px={3}
                    py={1}
                    borderRadius="full"
                    bg="rgba(76, 175, 80, 0.2)"
                    border="1px solid rgba(76, 175, 80, 0.4)"
                    color="green.300"
                    fontSize="xs"
                    fontWeight="medium"
                  >
                    使用中
                  </Badge>
                </HStack>

                <Divider borderColor="rgba(212, 175, 55, 0.2)" />

                <Flex justify="space-between" align="center">
                  <HStack spacing={2}>
                    <Icon as={FaClock} color="rgba(212, 175, 55, 0.8)" boxSize={4} />
                    <Text color="rgba(255, 255, 255, 0.7)" fontSize="sm">
                      到期时间
                    </Text>
                  </HStack>
                  <Text color="#D4AF37" fontSize="md" fontWeight="bold">
                    {user.subscription_end_date
                      ? new Date(user.subscription_end_date).toLocaleDateString('zh-CN', {
                          year: 'numeric',
                          month: 'long',
                          day: 'numeric'
                        })
                      : '永久有效'
                    }
                  </Text>
                </Flex>

                {user.subscription_end_date && (() => {
                  const endDate = new Date(user.subscription_end_date);
                  const today = new Date();
                  const daysLeft = Math.ceil((endDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));

                  if (daysLeft > 0 && daysLeft <= 30) {
                    return (
                      <Box
                        p={2}
                        borderRadius="md"
                        bg="rgba(255, 165, 0, 0.1)"
                        border="1px solid rgba(255, 165, 0, 0.3)"
                      >
                        <Text color="orange.300" fontSize="xs" textAlign="center">
                          ⚠️ 还有 {daysLeft} 天到期，记得及时续费哦
                        </Text>
                      </Box>
                    );
                  }
                  return null;
                })()}
              </VStack>
            </Box>
          </motion.div>
        )}

        {/* 计费周期选择器 */}
        <VStack spacing={6} mb={16}>
          <Text fontSize="md" color="rgba(255, 255, 255, 0.7)">
            选择计费周期 · 时长越长优惠越大
          </Text>

          <CycleSelector
            options={getMergedPlans()[1]?.pricingOptions || []}
            selectedCycle={selectedCycle}
            onSelectCycle={setSelectedCycle}
          />

          {(() => {
            const currentOption = getMergedPlans()[1]?.pricingOptions?.find(
              (opt: any) => opt.cycleKey === selectedCycle
            );
            if (currentOption && currentOption.discountPercent > 0) {
              return (
                <HStack spacing={2}>
                  <Icon as={FaStar} color="#D4AF37" boxSize={4} />
                  <Text fontSize="sm" color="#D4AF37" fontWeight="medium">
                    当前选择可节省 {currentOption.discountPercent}% 的费用
                  </Text>
                </HStack>
              );
            }
            return null;
          })()}
        </VStack>

        {/* 套餐卡片 - 借鉴 index.pug 设计 */}
        <Flex
          justify="center"
          gap={4}
          mb={16}
          flexWrap={{ base: 'wrap', lg: 'nowrap' }}
          maxW="1200px"
          mx="auto"
        >
          {getMergedPlans().slice(1).map((plan: any, index: number) => {
            const IconComponent = getIconComponent(plan.icon);
            const currentPriceOption = getCurrentPriceOption(plan);
            const isCurrentPlan =
              user?.subscription_type === plan.name &&
              user?.subscription_status === 'active';

            const isPremium = plan.name === 'max';

            return (
              <motion.div
                key={plan.name}
                initial={{ opacity: 0, y: 50 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: index * 0.1, duration: 0.6 }}
                style={{ flex: 1, maxWidth: '500px', width: '100%' }}
              >
                <Box
                  position="relative"
                  h="100%"
                  borderRadius="20px"
                  overflow="hidden"
                  bg={isPremium ? 'rgba(10, 10, 10, 0.5)' : 'rgba(10, 10, 10, 0.3)'}
                  border={isPremium ? '1px solid rgba(212, 175, 55, 0.3)' : '1px solid rgba(255, 255, 255, 0.1)'}
                  boxShadow={isPremium ? '0 20px 60px rgba(212, 175, 55, 0.2)' : '0 20px 60px rgba(0, 0, 0, 0.3)'}
                  transition="all 0.4s cubic-bezier(0.4, 0, 0.2, 1)"
                  _hover={{
                    transform: 'translateY(-8px)',
                    borderColor: isPremium ? 'rgba(212, 175, 55, 0.5)' : 'rgba(255, 255, 255, 0.2)',
                    boxShadow: isPremium
                      ? '0 30px 80px rgba(212, 175, 55, 0.3)'
                      : '0 30px 80px rgba(0, 0, 0, 0.5)',
                  }}
                  _before={
                    isPremium
                      ? {
                          content: '""',
                          position: 'absolute',
                          top: '50%',
                          left: '50%',
                          transform: 'translate(-50%, -50%)',
                          width: '120%',
                          height: '120%',
                          background: 'radial-gradient(circle at center, rgba(212, 175, 55, 0.1) 0%, transparent 70%)',
                          pointerEvents: 'none',
                          zIndex: 0,
                        }
                      : {}
                  }
                  _after={{
                    content: '""',
                    position: 'absolute',
                    inset: 0,
                    borderRadius: '20px',
                    border: '1px solid',
                    borderColor: 'rgba(255, 255, 255, 0.1)',
                    pointerEvents: 'none',
                  }}
                >
                  {/* 套餐标题 */}
                  <Box
                    position="relative"
                    zIndex={2}
                    py={3}
                    px={8.5}
                    fontSize="lg"
                    fontWeight="bold"
                    bgGradient={
                      isPremium
                        ? 'linear-gradient(to right, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.2))'
                        : 'linear-gradient(to right, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))'
                    }
                    borderTopRadius="20px"
                    color={isPremium ? '#D4AF37' : 'white'}
                  >
                    {plan.displayName}
                  </Box>

                  <VStack
                    spacing={0}
                    align="stretch"
                    position="relative"
                    zIndex={3}
                    flex={1}
                    mt={-1}
                    p={3.5}
                    pb={8}
                    backdropFilter={isPremium ? 'blur(32px)' : 'blur(20px)'}
                    bg={isPremium ? 'rgba(255, 255, 255, 0.07)' : 'rgba(255, 255, 255, 0.01)'}
                    borderRadius="20px"
                    _after={{
                      content: '""',
                      position: 'absolute',
                      inset: 0,
                      borderRadius: '20px',
                      border: '1px solid',
                      borderColor: 'rgba(255, 255, 255, 0.1)',
                      pointerEvents: 'none',
                    }}
                  >
                    {/* 价格卡片 */}
                    <Box
                      position="relative"
                      mb={6}
                      p={6}
                      borderRadius="16px"
                      bg={isPremium ? 'rgba(212, 175, 55, 0.1)' : 'rgba(255, 255, 255, 0.03)'}
                      backdropFilter="blur(20px)"
                      boxShadow="0 8px 32px rgba(0, 0, 0, 0.4)"
                      _after={{
                        content: '""',
                        position: 'absolute',
                        inset: 0,
                        borderRadius: '16px',
                        border: '1px solid',
                        borderColor: isPremium ? 'rgba(212, 175, 55, 0.2)' : 'rgba(255, 255, 255, 0.1)',
                        pointerEvents: 'none',
                      }}
                    >
                      <Flex align="baseline" justify="center" mb={5}>
                        <Text
                          fontSize="5xl"
                          fontWeight="bold"
                          bgGradient="radial-gradient(circle at center, #FFFFFF 0%, rgba(255,255,255,0.6) 100%)"
                          bgClip="text"
                          lineHeight="1"
                          letterSpacing="-0.02em"
                        >
                          ¥{getCurrentPrice(plan)}
                        </Text>
                        <Text fontSize="lg" color="rgba(255, 255, 255, 0.6)" ml={2}>
                          / {currentPriceOption?.label || '月'}
                        </Text>
                      </Flex>

                      <Button
                        w="full"
                        size="lg"
                        h="56px"
                        bg={
                          isPremium
                            ? 'linear-gradient(135deg, #D4AF37 0%, #B8941F 100%)'
                            : 'rgba(255, 255, 255, 0.05)'
                        }
                        color={
                          isPremium
                            ? '#000'
                            : '#fff'
                        }
                        border={
                          isPremium
                            ? 'none'
                            : '1px solid rgba(255, 255, 255, 0.1)'
                        }
                        fontWeight="bold"
                        fontSize="md"
                        borderRadius="lg"
                        onClick={() => handleSubscribe(plan)}
                        isDisabled={isButtonDisabled(plan)}
                        cursor="pointer"
                        _hover={{
                          transform: 'translateY(-2px)',
                          shadow: isPremium
                            ? '0 8px 30px rgba(212, 175, 55, 0.4)'
                            : '0 8px 20px rgba(255, 255, 255, 0.1)',
                          bg: isPremium
                            ? 'linear-gradient(135deg, #E5C047 0%, #C9A52F 100%)'
                            : 'rgba(255, 255, 255, 0.08)',
                        }}
                        _active={{
                          transform: 'translateY(0)',
                        }}
                        transition="all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
                      >
                        {getButtonText(plan)}
                      </Button>
                    </Box>

                    {/* 功能列表 */}
                    <VStack spacing={4} align="stretch" px={2}>
                      {plan.features.map((feature: any, idx: number) => (
                        <Flex key={idx} align="start" gap={3}>
                          <Flex
                            justify="center"
                            align="center"
                            flexShrink={0}
                            w={5}
                            h={5}
                            mt={0.5}
                            bg={feature.enabled ? (isPremium ? '#D4AF37' : '#00ff88') : 'transparent'}
                            borderRadius="full"
                            boxShadow={
                              feature.enabled
                                ? isPremium
                                  ? '0 0 0 1px rgba(212,175,55,0.30) inset, 0 0 10px rgba(212,175,55,0.50) inset'
                                  : '0 0 0 1px rgba(255,255,255,0.20) inset, 0 0 10px rgba(255,255,255,0.50) inset'
                                : 'none'
                            }
                          >
                            <Icon
                              as={feature.enabled ? FaCheck : FaTimes}
                              color={feature.enabled ? '#000' : 'rgba(255, 255, 255, 0.3)'}
                              boxSize={3}
                            />
                          </Flex>
                          <Text
                            fontSize="sm"
                            color={feature.enabled ? 'rgba(255, 255, 255, 0.85)' : 'rgba(255, 255, 255, 0.35)'}
                            flex={1}
                            fontWeight={feature.enabled && isPremium && idx === 0 ? 'semibold' : 'normal'}
                            lineHeight="1.6"
                          >
                            {feature.name}
                            {feature.limit && (
                              <Text as="span" fontSize="xs" color={isPremium ? '#E5C047' : '#00ff88'} ml={1.5} fontWeight="medium">
                                ({feature.limit})
                              </Text>
                            )}
                          </Text>
                        </Flex>
                      ))}
                    </VStack>
                  </VStack>
                </Box>
              </motion.div>
            );
          })}
        </Flex>

        {/* FAQ 区域 */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.6 }}
        >
          <Box
            p={8}
            borderRadius="2xl"
            bg="rgba(30, 30, 30, 0.5)"
            backdropFilter="blur(20px)"
            border="1px solid"
            borderColor="rgba(255, 255, 255, 0.1)"
            maxW="900px"
            mx="auto"
          >
            <Text fontSize="2xl" fontWeight="bold" color="white" mb={6} textAlign="center">
              常见问题
            </Text>

            <VStack spacing={4} align="stretch">
              {subscriptionConfig.faqs.map((faq: any, index: number) => (
                <Box
                  key={index}
                  borderRadius="lg"
                  bg="rgba(255, 255, 255, 0.03)"
                  border="1px solid"
                  borderColor="rgba(255, 255, 255, 0.1)"
                  overflow="hidden"
                  transition="all 0.3s"
                  _hover={{
                    bg: 'rgba(255, 255, 255, 0.05)',
                    borderColor: 'rgba(212, 175, 55, 0.3)',
                  }}
                >
                  <Flex
                    p={5}
                    justify="space-between"
                    align="center"
                    cursor="pointer"
                    onClick={() => setOpenFaqIndex(openFaqIndex === index ? null : index)}
                  >
                    <Text fontSize="md" fontWeight="medium" color="white">
                      {faq.question}
                    </Text>
                    <Icon
                      as={openFaqIndex === index ? FaChevronUp : FaChevronDown}
                      color="#D4AF37"
                      boxSize={5}
                    />
                  </Flex>

                  <AnimatePresence>
                    {openFaqIndex === index && (
                      <motion.div
                        initial={{ height: 0, opacity: 0 }}
                        animate={{ height: 'auto', opacity: 1 }}
                        exit={{ height: 0, opacity: 0 }}
                        transition={{ duration: 0.3 }}
                      >
                        <Box p={5} pt={0} color="rgba(255, 255, 255, 0.7)" fontSize="sm">
                          {faq.answer.split('\n').map((line: string, idx: number) => (
                            <Text key={idx} mb={line.startsWith('•') ? 1 : 2}>
                              {line}
                            </Text>
                          ))}
                        </Box>
                      </motion.div>
                    )}
                  </AnimatePresence>
                </Box>
              ))}
            </VStack>
          </Box>
        </motion.div>
      </Container>

      {/* 支付模态框 */}
      <Modal isOpen={isOpen} onClose={onClose} size="lg" isCentered>
        <ModalOverlay bg="rgba(0, 0, 0, 0.8)" backdropFilter="blur(10px)" />
        <ModalContent bg="#1e1e1e" borderRadius="2xl" border="1px solid rgba(255, 255, 255, 0.1)">
          <ModalHeader color="white">
            {paymentMethod === 'alipay' ? '支付宝支付' : '微信支付'}
          </ModalHeader>
          <ModalCloseButton color="white" />
          <ModalBody pb={6}>
            {!paymentOrder ? (
              <VStack spacing={6} align="stretch">
                {/* 支付方式选择 */}
                <Box>
                  <Text color="rgba(255, 255, 255, 0.7)" fontSize="sm" mb={3}>
                    选择支付方式
                  </Text>
                  <HStack spacing={3}>
                    <Button
                      flex={1}
                      h="60px"
                      bg={paymentMethod === 'wechat' ? 'rgba(7, 193, 96, 0.15)' : 'rgba(255, 255, 255, 0.05)'}
                      border="2px solid"
                      borderColor={paymentMethod === 'wechat' ? '#07C160' : 'rgba(255, 255, 255, 0.1)'}
                      borderRadius="xl"
                      onClick={() => setPaymentMethod('wechat')}
                      _hover={{
                        borderColor: paymentMethod === 'wechat' ? '#07C160' : 'rgba(255, 255, 255, 0.3)',
                        bg: paymentMethod === 'wechat' ? 'rgba(7, 193, 96, 0.2)' : 'rgba(255, 255, 255, 0.08)',
                      }}
                      transition="all 0.2s"
                    >
                      <HStack spacing={3}>
                        <Icon as={FaWeixin} color="#07C160" boxSize={6} />
                        <Text color="white" fontWeight="medium">微信支付</Text>
                      </HStack>
                    </Button>
                    <Button
                      flex={1}
                      h="60px"
                      bg={paymentMethod === 'alipay' ? 'rgba(22, 119, 255, 0.15)' : 'rgba(255, 255, 255, 0.05)'}
                      border="2px solid"
                      borderColor={paymentMethod === 'alipay' ? '#1677FF' : 'rgba(255, 255, 255, 0.1)'}
                      borderRadius="xl"
                      onClick={() => setPaymentMethod('alipay')}
                      _hover={{
                        borderColor: paymentMethod === 'alipay' ? '#1677FF' : 'rgba(255, 255, 255, 0.3)',
                        bg: paymentMethod === 'alipay' ? 'rgba(22, 119, 255, 0.2)' : 'rgba(255, 255, 255, 0.08)',
                      }}
                      transition="all 0.2s"
                    >
                      <HStack spacing={3}>
                        <Box as={AlipayCircleOutlined} fontSize="24px" color="#1677FF" />
                        <Text color="white" fontWeight="medium">支付宝</Text>
                      </HStack>
                    </Button>
                  </HStack>
                </Box>

                {/* 订阅类型提示 */}
                {selectedPlan && priceInfo && (
                  <>
                    {priceInfo.is_upgrade && (
                      <Box
                        p={3}
                        bg="rgba(76, 175, 80, 0.1)"
                        borderRadius="lg"
                        border="1px solid rgba(76, 175, 80, 0.3)"
                      >
                        <HStack spacing={2}>
                          <Icon as={FaCheck} color="green.400" />
                          <Text color="green.400" fontSize="sm" fontWeight="medium">
                            {priceInfo.final_amount === 0
                              ? `恭喜！您的当前订阅剩余价值足够直接升级到${selectedPlan.displayName}，无需支付额外费用！`
                              : `升级到${selectedPlan.displayName}，立即生效！按差价补缴费用`}
                          </Text>
                        </HStack>
                      </Box>
                    )}
                    {priceInfo.is_downgrade && (
                      <Box
                        p={3}
                        bg="rgba(255, 165, 0, 0.1)"
                        borderRadius="lg"
                        border="1px solid rgba(255, 165, 0, 0.3)"
                      >
                        <HStack spacing={2}>
                          <Icon as={FaClock} color="orange.400" />
                          <Text color="orange.400" fontSize="sm" fontWeight="medium">
                            当前{priceInfo.current_plan?.toUpperCase()}订阅到期后自动切换到{selectedPlan.displayName}
                          </Text>
                        </HStack>
                      </Box>
                    )}
                    {priceInfo.is_renewal && (
                      <Box
                        p={3}
                        bg="rgba(33, 150, 243, 0.1)"
                        borderRadius="lg"
                        border="1px solid rgba(33, 150, 243, 0.3)"
                      >
                        <HStack spacing={2}>
                          <Icon as={FaRedo} color="blue.400" />
                          <Text color="blue.400" fontSize="sm" fontWeight="medium">
                            续费{selectedPlan.displayName}，在当前到期日基础上延长时长
                          </Text>
                        </HStack>
                      </Box>
                    )}
                  </>
                )}

                {/* 价格明细 */}
                {selectedPlan && priceInfo && (
                  <Box
                    p={4}
                    bg="rgba(255, 255, 255, 0.05)"
                    borderRadius="lg"
                    border="1px solid rgba(255, 255, 255, 0.1)"
                  >
                    <VStack spacing={3} align="stretch">
                      <Flex justify="space-between" align="center">
                        <Text color="rgba(255, 255, 255, 0.7)" fontSize="sm">
                          {selectedPlan.displayName} · {selectedCycle === 'monthly' ? '月付' : selectedCycle === 'quarterly' ? '季付' : selectedCycle === 'semiannual' ? '半年付' : '年付'}
                        </Text>
                        <Text color="white" fontWeight="medium">
                          ¥{priceInfo.original_price?.toFixed(2) || getCurrentPrice(selectedPlan).toFixed(2)}
                        </Text>
                      </Flex>

                      {/* 升级抵扣价值 */}
                      {priceInfo.is_upgrade && priceInfo.remaining_value > 0 && (
                        <Flex justify="space-between" align="center">
                          <Text color="rgba(255, 255, 255, 0.7)" fontSize="sm">
                            当前订阅剩余价值抵扣
                          </Text>
                          <Text color="green.400" fontWeight="medium">
                            -¥{priceInfo.remaining_value.toFixed(2)}
                          </Text>
                        </Flex>
                      )}

                      {/* 优惠码折扣 */}
                      {promoCodeApplied && priceInfo.discount_amount > 0 && (
                        <Flex justify="space-between" align="center">
                          <HStack spacing={2}>
                            <Icon as={FaCheck} color="green.400" boxSize={3} />
                            <Text color="rgba(255, 255, 255, 0.7)" fontSize="sm">
                              优惠码折扣
                            </Text>
                          </HStack>
                          <Text color="green.400" fontWeight="medium">
                            -¥{priceInfo.discount_amount.toFixed(2)}
                          </Text>
                        </Flex>
                      )}

                      <Divider borderColor="rgba(255, 255, 255, 0.1)" />

                      <Flex justify="space-between" align="baseline">
                        <Text fontSize="lg" fontWeight="bold" color="white">实付金额:</Text>
                        <Text fontSize="2xl" fontWeight="bold" color="#D4AF37">
                          ¥{priceInfo.final_amount.toFixed(2)}
                        </Text>
                      </Flex>
                    </VStack>
                  </Box>
                )}

                {/* 优惠码输入 */}
                {selectedPlan && (
                  <Box>
                    <HStack spacing={2}>
                      <Input
                        placeholder="输入优惠码（可选）"
                        value={promoCode}
                        onChange={(e) => {
                          setPromoCode(e.target.value.toUpperCase());
                          setPromoCodeError('');
                        }}
                        size="md"
                        isDisabled={promoCodeApplied}
                        bg="rgba(255, 255, 255, 0.05)"
                        border="1px solid rgba(255, 255, 255, 0.1)"
                        color="white"
                        _placeholder={{ color: 'rgba(255, 255, 255, 0.4)' }}
                        _hover={{ borderColor: 'rgba(212, 175, 55, 0.3)' }}
                        _focus={{ borderColor: '#D4AF37', boxShadow: '0 0 0 1px #D4AF37' }}
                      />
                      <Button
                        bgGradient="linear-gradient(135deg, rgba(138, 43, 226, 0.8), rgba(123, 31, 162, 0.8))"
                        color="white"
                        onClick={handleValidatePromoCode}
                        isLoading={validatingPromo}
                        isDisabled={!promoCode || promoCodeApplied}
                        minW="80px"
                        _hover={{
                          bgGradient: 'linear-gradient(135deg, rgba(138, 43, 226, 1), rgba(123, 31, 162, 1))',
                        }}
                      >
                        应用
                      </Button>
                    </HStack>
                    {promoCodeError && (
                      <Text color="red.400" fontSize="sm" mt={2}>
                        {promoCodeError}
                      </Text>
                    )}
                    {promoCodeApplied && priceInfo && (
                      <HStack
                        mt={2}
                        p={2}
                        bg="rgba(72, 187, 120, 0.1)"
                        borderRadius="md"
                        border="1px solid rgba(72, 187, 120, 0.3)"
                      >
                        <Icon as={FaCheck} color="green.400" />
                        <Text color="green.400" fontSize="sm" fontWeight="medium" flex={1}>
                          优惠码已应用！节省 ¥{priceInfo.discount_amount.toFixed(2)}
                        </Text>
                        <Icon
                          as={FaTimes}
                          color="rgba(255, 255, 255, 0.5)"
                          cursor="pointer"
                          onClick={handleRemovePromoCode}
                          _hover={{ color: 'red.400' }}
                        />
                      </HStack>
                    )}
                  </Box>
                )}

                {/* 会员协议确认 */}
                <Checkbox
                  isChecked={agreementChecked}
                  onChange={(e) => setAgreementChecked(e.target.checked)}
                  colorScheme="green"
                  size="md"
                >
                  <Text fontSize="sm" color="rgba(255, 255, 255, 0.7)">
                    我已阅读并同意
                    <ChakraLink
                      href={(() => {
                        const planName = (selectedPlan as { name?: string } | null)?.name?.toLowerCase();
                        return planName === 'pro' || planName === 'max' ? AGREEMENT_URLS[planName] : AGREEMENT_URLS.pro;
                      })()}
                      isExternal
                      color="#3182CE"
                      textDecoration="underline"
                      mx={1}
                      onClick={(e) => e.stopPropagation()}
                    >
                      《{(selectedPlan as { name?: string } | null)?.name?.toLowerCase() === 'max' ? 'MAX' : 'PRO'}会员服务协议》
                    </ChakraLink>
                  </Text>
                </Checkbox>

                <Button
                  w="full"
                  size="lg"
                  bgGradient={paymentMethod === 'alipay'
                    ? 'linear-gradient(135deg, #1677FF, #0958d9)'
                    : 'linear-gradient(135deg, #07C160, #059048)'}
                  color="white"
                  fontWeight="bold"
                  onClick={() => {
                    if (!agreementChecked) {
                      toast({
                        title: '请先阅读并同意会员服务协议',
                        status: 'warning',
                        duration: 3000,
                        isClosable: true,
                        position: 'top',
                      });
                      return;
                    }
                    handleCreatePaymentOrder();
                  }}
                  isLoading={loading}
                  isDisabled={!selectedPlan}
                  leftIcon={paymentMethod === 'alipay'
                    ? <Box as={AlipayCircleOutlined} fontSize="20px" />
                    : <Icon as={FaWeixin} boxSize={5} />}
                  _hover={{
                    bgGradient: paymentMethod === 'alipay'
                      ? 'linear-gradient(135deg, #4096ff, #1677FF)'
                      : 'linear-gradient(135deg, #10d76e, #07C160)',
                    transform: 'translateY(-2px)',
                    boxShadow: paymentMethod === 'alipay'
                      ? '0 8px 25px rgba(22, 119, 255, 0.4)'
                      : '0 8px 25px rgba(7, 193, 96, 0.4)',
                  }}
                  transition="all 0.3s"
                >
                  {priceInfo?.is_upgrade && priceInfo?.final_amount === 0
                    ? '立即免费升级'
                    : paymentMethod === 'alipay'
                      ? '支付宝支付'
                      : '微信扫码支付'}
                </Button>
              </VStack>
            ) : (
              <VStack spacing={4}>
                {/* 根据支付方式显示不同提示 */}
                {(paymentOrder as any).payment_method === 'alipay' ? (
                  <>
                    <Box
                      p={4}
                      bg="rgba(22, 119, 255, 0.1)"
                      borderRadius="lg"
                      border="1px solid rgba(22, 119, 255, 0.3)"
                      w="full"
                      textAlign="center"
                    >
                      <HStack justify="center" spacing={2} mb={2}>
                        <Box as={AlipayCircleOutlined} fontSize="24px" color="#1677FF" />
                        <Text color="#1677FF" fontSize="lg" fontWeight="bold">
                          支付宝支付
                        </Text>
                      </HStack>
                      {(paymentOrder as any).is_mobile ? (
                        <>
                          {(paymentOrder as any).is_wechat_browser ? (
                            <>
                              <Text color="orange.300" fontSize="sm" mb={2}>
                                检测到您在微信中打开，请点击右上角「...」选择「在浏览器中打开」后再支付
                              </Text>
                              <Text color="rgba(255, 255, 255, 0.5)" fontSize="xs" mb={3}>
                                或点击下方按钮尝试跳转
                              </Text>
                            </>
                          ) : (
                            <Text color="rgba(255, 255, 255, 0.7)" fontSize="sm" mb={3}>
                              点击下方按钮打开支付宝完成支付
                            </Text>
                          )}
                          <Button
                            w="full"
                            size="lg"
                            bgGradient="linear-gradient(135deg, #1677FF, #0958d9)"
                            color="white"
                            fontWeight="bold"
                            leftIcon={<Box as={AlipayCircleOutlined} fontSize="20px" />}
                            onClick={() => {
                              window.location.href = (paymentOrder as any).pay_url;
                            }}
                            _hover={{
                              bgGradient: 'linear-gradient(135deg, #4096ff, #1677FF)',
                            }}
                          >
                            打开支付宝付款
                          </Button>
                        </>
                      ) : (
                        <>
                          <Text color="rgba(255, 255, 255, 0.7)" fontSize="sm">
                            请在新打开的页面中完成支付
                          </Text>
                          <Text color="rgba(255, 255, 255, 0.5)" fontSize="xs" mt={1}>
                            支付完成后点击下方按钮确认
                          </Text>
                        </>
                      )}
                    </Box>
                  </>
                ) : (
                  <Text color="rgba(255, 255, 255, 0.7)" fontSize="lg" fontWeight="bold">
                    请使用微信扫描二维码完成支付
                  </Text>
                )}

                {/* 倒计时 */}
                <Box
                  p={3}
                  bg="rgba(255, 165, 0, 0.1)"
                  borderRadius="lg"
                  border="1px solid rgba(255, 165, 0, 0.3)"
                  w="full"
                >
                  <HStack justify="center" spacing={2} mb={2}>
                    <Icon as={FaClock} color="orange.400" />
                    <Text color="orange.300" fontSize="sm">
                      订单有效时间: {formatTime(paymentCountdown)}
                    </Text>
                  </HStack>
                  <Progress
                    value={(paymentCountdown / (30 * 60)) * 100}
                    colorScheme="orange"
                    size="sm"
                    borderRadius="full"
                  />
                </Box>

                {/* 微信二维码（仅微信支付显示） */}
                {(paymentOrder as any).payment_method !== 'alipay' && (
                  <Box textAlign="center">
                    {(paymentOrder as any).qr_code_url ? (
                      <Image
                        src={(paymentOrder as any).qr_code_url}
                        alt="微信支付二维码"
                        mx="auto"
                        maxW="200px"
                        border="2px solid"
                        borderColor="rgba(255, 255, 255, 0.2)"
                        borderRadius="lg"
                        bg="white"
                        p={2}
                      />
                    ) : (
                      <Flex
                        w="200px"
                        h="200px"
                        mx="auto"
                        bg="rgba(255, 255, 255, 0.05)"
                        alignItems="center"
                        justifyContent="center"
                        border="2px solid"
                        borderColor="rgba(255, 255, 255, 0.2)"
                        borderRadius="lg"
                      >
                        <Icon as={FaQrcode} color="rgba(255, 255, 255, 0.3)" boxSize={12} />
                      </Flex>
                    )}
                  </Box>
                )}

                {/* 订单信息 */}
                <Box
                  p={4}
                  bg="rgba(255, 255, 255, 0.05)"
                  borderRadius="lg"
                  border="1px solid rgba(255, 255, 255, 0.1)"
                  w="full"
                >
                  <Text fontSize="xs" color="rgba(255, 255, 255, 0.5)" mb={2}>
                    订单号: {(paymentOrder as any).order_no}
                  </Text>
                  <Flex justify="space-between" align="baseline">
                    <Text color="rgba(255, 255, 255, 0.7)">支付金额:</Text>
                    <Text fontSize="xl" fontWeight="bold" color="#D4AF37">
                      ¥{(paymentOrder as any).amount}
                    </Text>
                  </Flex>
                </Box>

                {/* 操作按钮 */}
                <VStack spacing={3} w="full">
                  {/* 支付宝：重新打开支付页面按钮 */}
                  {(paymentOrder as any).payment_method === 'alipay' && (paymentOrder as any).pay_url && (
                    <Button
                      w="full"
                      size="lg"
                      bgGradient="linear-gradient(135deg, #1677FF, #0958d9)"
                      color="white"
                      fontWeight="bold"
                      leftIcon={<Icon as={FaExternalLinkAlt} />}
                      onClick={handleReopenAlipay}
                      _hover={{
                        bgGradient: 'linear-gradient(135deg, #4096ff, #1677FF)',
                        transform: 'translateY(-2px)',
                        boxShadow: '0 8px 25px rgba(22, 119, 255, 0.4)',
                      }}
                      transition="all 0.3s"
                    >
                      重新打开支付页面
                    </Button>
                  )}

                  <Button
                    w="full"
                    size="lg"
                    bgGradient="linear-gradient(135deg, #D4AF37, #B8941F)"
                    color="#000"
                    fontWeight="bold"
                    leftIcon={<Icon as={FaRedo} />}
                    onClick={handleForceUpdate}
                    isLoading={forceUpdating}
                    _hover={{
                      bgGradient: 'linear-gradient(135deg, #F4E3A7, #D4AF37)',
                    }}
                  >
                    已完成支付
                  </Button>
                </VStack>
              </VStack>
            )}
          </ModalBody>
        </ModalContent>
      </Modal>
    </Box>
  );
}