// src/components/Subscription/SubscriptionContent.js
import {
  Box,
  Button,
  Flex,
  Grid,
  Icon,
  Text,
  Badge,
  VStack,
  HStack,
  useColorModeValue,
  useToast,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalCloseButton,
  useDisclosure,
  Image,
  Progress,
  Divider,
  Table,
  Thead,
  Tbody,
  Tr,
  Th,
  Td,
  Heading,
  Collapse,
  Input,
  InputGroup,
  InputRightElement,
} from '@chakra-ui/react';
import React, { useState, useEffect } from 'react';
import { logger } from '../../utils/logger';
import { useAuth } from '../../contexts/AuthContext';
import { useSubscriptionEvents } from '../../hooks/useSubscriptionEvents';

// Icons
import {
  FaWeixin,
  FaGem,
  FaCheck,
  FaQrcode,
  FaClock,
  FaRedo,
  FaCrown,
  FaStar,
  FaTimes,
  FaInfinity,
  FaChevronDown,
  FaChevronUp,
} from 'react-icons/fa';

export default function SubscriptionContent() {
  // Auth context
  const { user } = useAuth();

  // 🎯 初始化订阅埋点Hook（传入当前订阅信息）
  const subscriptionEvents = useSubscriptionEvents({
    currentSubscription: {
      plan: user?.subscription_plan || 'free',
      status: user?.subscription_status || 'none'
    }
  });

  // Chakra color mode
  const textColor = useColorModeValue('gray.700', 'white');
  const borderColor = useColorModeValue('gray.200', 'gray.600');
  const bgCard = useColorModeValue('white', 'gray.800');
  const bgAccent = useColorModeValue('blue.50', 'blue.900');
  const secondaryText = useColorModeValue('gray.600', 'gray.400');

  const toast = useToast();
  const { isOpen: isPaymentModalOpen, onOpen: onPaymentModalOpen, onClose: onPaymentModalClose } = useDisclosure();

  // State
  const [subscriptionPlans, setSubscriptionPlans] = useState([]);
  const [selectedPlan, setSelectedPlan] = useState(null);
  const [selectedCycle, setSelectedCycle] = useState('monthly');
  const [paymentOrder, setPaymentOrder] = useState(null);
  const [loading, setLoading] = useState(false);
  const [paymentCountdown, setPaymentCountdown] = useState(0);
  const [checkingPayment, setCheckingPayment] = useState(false);
  const [autoCheckInterval, setAutoCheckInterval] = useState(null);
  const [forceUpdating, setForceUpdating] = useState(false);
  const [openFaqIndex, setOpenFaqIndex] = useState(null);

  // 优惠码相关state
  const [promoCode, setPromoCode] = useState('');
  const [promoCodeApplied, setPromoCodeApplied] = useState(false);
  const [promoCodeError, setPromoCodeError] = useState('');
  const [validatingPromo, setValidatingPromo] = useState(false);
  const [priceInfo, setPriceInfo] = useState(null); // 价格信息（包含升级计算）

  // 加载订阅套餐数据
  useEffect(() => {
    fetchSubscriptionPlans();
    // 不再需要 fetchCurrentUser(),直接使用 AuthContext 的 user
  }, []);

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

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

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

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

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

  // 计算价格（包含升级和优惠码）
  const calculatePrice = async (plan, cycle, promoCodeValue = null) => {
    try {
      // 确保优惠码值正确：只接受非空字符串，其他情况传null
      const validPromoCode = promoCodeValue && typeof promoCodeValue === 'string' && promoCodeValue.trim()
        ? promoCodeValue.trim()
        : null;

      logger.debug('SubscriptionContent', '计算价格', {
        plan: plan.name,
        cycle,
        promoCodeValue,
        validPromoCode
      });

      const response = await fetch('/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) => {
    if (!user) {
      toast({
        title: '请先登录',
        status: 'warning',
        duration: 3000,
        isClosable: true,
      });
      return;
    }

    if (!plan || !plan.name) {
      toast({
        title: '套餐信息错误',
        status: 'error',
        duration: 3000,
        isClosable: true,
      });
      return;
    }

    // 🎯 追踪定价方案选择
    subscriptionEvents.trackPricingPlanSelected(
      plan.name,
      selectedCycle,
      selectedCycle === 'monthly' ? plan.monthly_price : plan.yearly_price
    );

    setSelectedPlan(plan);

    // 计算价格（包含升级判断）
    await calculatePrice(plan, selectedCycle, promoCodeApplied ? promoCode : null);

    onPaymentModalOpen();
  };

  const handleCreateOrder = async () => {
    if (!selectedPlan) return;

    setLoading(true);
    try {
      const price = priceInfo?.final_amount || (selectedCycle === 'monthly' ? selectedPlan.monthly_price : selectedPlan.yearly_price);

      // 🎯 追踪支付发起
      subscriptionEvents.trackPaymentInitiated({
        planName: selectedPlan.name,
        paymentMethod: 'wechat_pay',
        amount: price,
        billingCycle: selectedCycle,
        orderId: null // Will be set after order creation
      });

      const response = await fetch('/api/payment/create-order', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        credentials: 'include',
        body: JSON.stringify({
          plan_name: selectedPlan.name,
          billing_cycle: selectedCycle,
          promo_code: promoCodeApplied ? promoCode : null
        })
      });

      if (response.ok) {
        const data = await response.json();
        if (data.success) {
          setPaymentOrder(data.data);
          setPaymentCountdown(30 * 60);

          startAutoPaymentCheck(data.data.id);

          toast({
            title: '订单创建成功',
            description: '请使用微信扫描二维码完成支付',
            status: 'success',
            duration: 3000,
            isClosable: true,
          });
        } else {
          throw new Error(data.message || '创建订单失败');
        }
      } else {
        throw new Error('网络错误');
      }
    } catch (error) {
      // 🎯 追踪支付失败
      subscriptionEvents.trackPaymentFailed({
        planName: selectedPlan.name,
        paymentMethod: 'wechat_pay',
        amount: selectedCycle === 'monthly' ? selectedPlan.monthly_price : selectedPlan.yearly_price
      }, error.message);

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

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

  const startAutoPaymentCheck = (orderId) => {
    logger.info('SubscriptionContent', '开始自动检查支付状态', { orderId });

    const checkInterval = setInterval(async () => {
      try {
        const response = await fetch(`/api/payment/order/${orderId}/status`, {
          credentials: 'include'
        });

        if (response.ok) {
          const data = await response.json();
          logger.debug('SubscriptionContent', '支付状态检查结果', {
            orderId,
            paymentSuccess: data.payment_success,
            data
          });

          if (data.success && data.payment_success) {
            clearInterval(checkInterval);
            setAutoCheckInterval(null);

            logger.info('SubscriptionContent', '自动检测到支付成功', { orderId });

            // 🎯 追踪支付成功
            subscriptionEvents.trackPaymentSuccessful({
              planName: selectedPlan?.name,
              paymentMethod: 'wechat_pay',
              amount: paymentOrder?.amount,
              billingCycle: selectedCycle,
              orderId: orderId,
              transactionId: data.transaction_id
            });

            // 🎯 追踪订阅创建
            subscriptionEvents.trackSubscriptionCreated({
              plan: selectedPlan?.name,
              billingCycle: selectedCycle,
              amount: paymentOrder?.amount,
              startDate: new Date().toISOString(),
              endDate: null // Will be calculated by backend
            });

            toast({
              title: '支付成功！',
              description: '订阅已激活，正在跳转...',
              status: 'success',
              duration: 3000,
              isClosable: true,
            });

            setTimeout(() => {
              onPaymentModalClose();
              window.location.reload();
            }, 2000);
          }
        }
      } catch (error) {
        logger.error('SubscriptionContent', 'startAutoPaymentCheck', error, { orderId });
      }
    }, 10000);

    setAutoCheckInterval(checkInterval);
  };

  const stopAutoPaymentCheck = () => {
    if (autoCheckInterval) {
      clearInterval(autoCheckInterval);
      setAutoCheckInterval(null);
      logger.debug('SubscriptionContent', '停止自动检查支付状态');
    }
  };

  const handleRefreshUserStatus = () => {
    // 刷新页面以重新加载用户数据
    window.location.reload();
  };

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

    setForceUpdating(true);
    try {
      const response = await fetch(`/api/payment/order/${paymentOrder.id}/force-update`, {
        method: 'POST',
        credentials: 'include'
      });

      if (response.ok) {
        const data = await response.json();
        logger.info('SubscriptionContent', '强制更新支付状态结果', {
          orderId: paymentOrder.id,
          paymentSuccess: data.payment_success,
          data
        });

        if (data.success && data.payment_success) {
          stopAutoPaymentCheck();

          toast({
            title: '状态更新成功！',
            description: '订阅已激活，正在刷新页面...',
            status: 'success',
            duration: 3000,
            isClosable: true,
          });

          setTimeout(() => {
            onPaymentModalClose();
            window.location.reload();
          }, 2000);
        } else {
          toast({
            title: '无法更新状态',
            description: data.error || '支付状态未更新',
            status: 'warning',
            duration: 5000,
            isClosable: true,
          });
        }
      } else {
        throw new Error('网络错误');
      }
    } catch (error) {
      logger.error('SubscriptionContent', 'handleForceUpdatePayment', error, {
        orderId: paymentOrder?.id
      });
      toast({
        title: '强制更新失败',
        description: error.message,
        status: 'error',
        duration: 3000,
        isClosable: true,
      });
    } finally {
      setForceUpdating(false);
    }
  };

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

    setCheckingPayment(true);
    try {
      const response = await fetch(`/api/payment/order/${paymentOrder.id}/status`, {
        credentials: 'include'
      });

      if (response.ok) {
        const data = await response.json();
        logger.info('SubscriptionContent', '手动检查支付状态结果', {
          orderId: paymentOrder.id,
          paymentSuccess: data.payment_success,
          data: data.data
        });

        if (data.success) {
          if (data.payment_success) {
            stopAutoPaymentCheck();

            logger.info('SubscriptionContent', '手动检测到支付成功', {
              orderId: paymentOrder.id
            });
            toast({
              title: '支付成功！',
              description: '订阅已激活，正在跳转...',
              status: 'success',
              duration: 3000,
              isClosable: true,
            });

            setTimeout(() => {
              onPaymentModalClose();
              window.location.reload();
            }, 2000);

          } else {
            toast({
              title: '支付状态检查',
              description: data.message || '还未检测到支付，请继续等待',
              status: 'info',
              duration: 5000,
              isClosable: true,
            });
          }
        } else {
          throw new Error(data.error || '查询失败');
        }
      } else {
        throw new Error('网络错误');
      }
    } catch (error) {
      logger.error('SubscriptionContent', 'handleCheckPaymentStatus', error, {
        orderId: paymentOrder?.id
      });
      toast({
        title: '查询失败',
        description: error.message,
        status: 'error',
        duration: 3000,
        isClosable: true,
      });
    } finally {
      setCheckingPayment(false);
    }
  };

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

  const getCurrentPrice = (plan) => {
    if (!plan) return 0;
    return selectedCycle === 'monthly' ? plan.monthly_price : plan.yearly_price;
  };

  const getSavingsText = (plan) => {
    if (!plan || selectedCycle !== 'yearly') return null;
    const yearlyTotal = plan.monthly_price * 12;
    const savings = yearlyTotal - plan.yearly_price;
    const percentage = Math.round((savings / yearlyTotal) * 100);
    return `年付节省 ${percentage}%`;
  };

  // 获取按钮文字（根据用户当前订阅判断是升级还是新订阅）
  const getButtonText = (plan, user) => {
    if (!user || user.subscription_type === 'free') {
      return `选择 ${plan.display_name}`;
    }

    // 判断是否为升级
    const planLevels = { 'free': 0, 'pro': 1, 'max': 2 };
    const currentLevel = planLevels[user.subscription_type] || 0;
    const targetLevel = planLevels[plan.name] || 0;

    if (targetLevel > currentLevel) {
      return `升级至 ${plan.display_name}`;
    } else if (targetLevel < currentLevel) {
      return `切换至 ${plan.display_name}`;
    } else {
      // 同级别，可能是切换周期
      return `切换至 ${plan.display_name}`;
    }
  };

  // 统一的功能列表定义 - 基于商业定价(10月15日)文档
  const allFeatures = [
    // 新闻催化分析模块
    { name: '新闻信息流', free: true, pro: true, max: true },
    { name: '历史事件对比', free: 'TOP3', pro: true, max: true },
    { name: '事件传导链分析(AI)', free: '有限体验', pro: true, max: true },
    { name: '事件-相关标的分析', free: false, pro: true, max: true },
    { name: '相关概念展示', free: false, pro: true, max: true },
    { name: '板块深度分析(AI)', free: false, pro: false, max: true },

    // 个股中心模块
    { name: 'AI复盘功能', free: true, pro: true, max: true },
    { name: '企业概览', free: '限制预览', pro: true, max: true },
    { name: '个股深度分析(AI)', free: '10家/月', pro: '50家/月', max: true },
    { name: '高效数据筛选工具', free: false, pro: true, max: true },

    // 概念中心模块
    { name: '概念中心(548大概念)', free: 'TOP5', pro: true, max: true },
    { name: '历史时间轴查询', free: false, pro: '100天', max: true },
    { name: '概念高频更新', free: false, pro: false, max: true },

    // 涨停分析模块
    { name: '涨停板块数据分析', free: true, pro: true, max: true },
    { name: '个股涨停分析', free: true, pro: true, max: true },
  ];

  return (
    <VStack spacing={6} align="stretch" w="100%" py={{base: 4, md: 6}}>
      {/* 当前订阅状态 */}
      {user && (
        <Box
          p={6}
          borderRadius="xl"
          bg={bgCard}
          border="1px solid"
          borderColor={borderColor}
          shadow="sm"
        >
          <Flex align="center" justify="space-between" flexWrap="wrap" gap={3}>
            {/* 左侧：当前订阅状态标签 */}
            <HStack spacing={3}>
              <Text fontSize="md" fontWeight="bold" color={textColor}>
                当前订阅:
              </Text>
                <Badge
                  colorScheme={
                    user.subscription_type === 'max' ? 'purple' :
                    user.subscription_type === 'pro' ? 'blue' : 'gray'
                  }
                  variant="subtle"
                  px={3}
                  py={1}
                  borderRadius="full"
                  fontSize="sm"
                >
                  {user.subscription_type === 'free' ? '基础版' :
                   user.subscription_type === 'pro' ? 'Pro 专业版' : 'Max 旗舰版'}
                </Badge>
              <Badge
                colorScheme={user.subscription_status === 'active' ? 'green' : 'red'}
                variant="subtle"
                px={3}
                py={1}
                borderRadius="full"
                fontSize="sm"
              >
                {user.subscription_status === 'active' ? '已激活' : '未激活'}
              </Badge>
            </HStack>

            {/* 右侧：到期时间和图标 */}
            <HStack spacing={4}>
              {user.subscription_end_date && (
                <Text fontSize="sm" color={secondaryText}>
                  到期时间: {new Date(user.subscription_end_date).toLocaleDateString('zh-CN')}
                </Text>
              )}
              {user.subscription_status === 'active' && user.subscription_type !== 'free' && (
                <Icon
                  as={user.subscription_type === 'max' ? FaCrown : FaGem}
                  color={user.subscription_type === 'max' ? 'purple.400' : 'blue.400'}
                  boxSize={6}
                />
              )}
            </HStack>
          </Flex>
        </Box>
      )}

      {/* 计费周期选择 */}
      <Flex justify="center">
        <HStack
          spacing={0}
          bg={bgAccent}
          borderRadius="lg"
          p={1}
          border="1px solid"
          borderColor={borderColor}
        >
          <Button
            variant={selectedCycle === 'monthly' ? 'solid' : 'ghost'}
            colorScheme={selectedCycle === 'monthly' ? 'blue' : 'gray'}
            size="md"
            onClick={() => setSelectedCycle('monthly')}
            borderRadius="md"
          >
            按月付费
          </Button>
          <Button
            variant={selectedCycle === 'yearly' ? 'solid' : 'ghost'}
            colorScheme={selectedCycle === 'yearly' ? 'blue' : 'gray'}
            size="md"
            onClick={() => setSelectedCycle('yearly')}
            borderRadius="md"
          >
            按年付费
            <Badge ml={2} colorScheme="red" fontSize="xs">省20%</Badge>
          </Button>
        </HStack>
      </Flex>

      {/* 订阅套餐 */}
      <Grid
        templateColumns={{ base: '1fr', md: 'repeat(2, 1fr)', lg: 'repeat(3, 1fr)' }}
        gap={6}
      >
        {subscriptionPlans.length === 0 ? (
          <Box gridColumn={{ base: '1', md: '1 / -1', lg: '1 / -1' }} textAlign="center" py={8}>
            <Text color={secondaryText}>正在加载订阅套餐...</Text>
          </Box>
        ) : (
          <>
            {/* 免费版套餐 */}
            <Box
              position="relative"
              borderRadius="2xl"
              overflow="hidden"
              border="2px solid"
              borderColor="gray.300"
              bg={bgCard}
              transition="all 0.3s ease"
              _hover={{
                transform: 'translateY(-4px)',
                shadow: 'xl',
              }}
            >
              <VStack
                spacing={4}
                align="stretch"
                p={6}
              >
                {/* 套餐头部 - 图标与标题同行 */}
                <VStack spacing={2} align="stretch">
                  <Flex justify="space-between" align="center">
                    <HStack spacing={3}>
                      <Icon
                        as={FaStar}
                        boxSize={8}
                        color="gray.400"
                      />
                      <Text fontSize="xl" fontWeight="bold" color={textColor}>
                        基础版
                      </Text>
                    </HStack>
                    <Badge
                      colorScheme="gray"
                      variant="outline"
                      px={4}
                      py={1}
                      borderRadius="full"
                      fontSize="md"
                      fontWeight="bold"
                    >
                      免费
                    </Badge>
                  </Flex>
                  <Text fontSize="xs" color={secondaryText} pl={11}>
                    免费体验核心功能,7项实用工具
                  </Text>
                </VStack>

                <Divider />

                {/* 功能列表 */}
                <VStack spacing={3} align="stretch" minH="200px">
                  {allFeatures.map((feature, index) => {
                    const hasFreeAccess = feature.free === true || typeof feature.free === 'string';
                    const freeLimit = typeof feature.free === 'string' ? feature.free : null;

                    return (
                      <HStack key={index} spacing={3} align="start">
                        <Icon
                          as={hasFreeAccess ? FaCheck : FaTimes}
                          color={hasFreeAccess ? 'blue.500' : 'gray.300'}
                          boxSize={4}
                          mt={0.5}
                        />
                        <Text
                          fontSize="sm"
                          color={hasFreeAccess ? textColor : secondaryText}
                          flex={1}
                        >
                          {feature.name}
                          {freeLimit && (
                            <Text as="span" fontSize="xs" color="blue.500" ml={1}>
                              ({freeLimit})
                            </Text>
                          )}
                        </Text>
                      </HStack>
                    );
                  })}
                </VStack>

                {/* 订阅按钮 */}
                <Button
                  size="lg"
                  colorScheme="gray"
                  variant="solid"
                  isDisabled={true}
                  _hover={{
                    transform: 'scale(1.02)',
                  }}
                  transition="all 0.2s"
                >
                  {user?.subscription_type === 'free' &&
                   user?.subscription_status === 'active'
                    ? '✓ 当前套餐'
                    : '免费使用'
                  }
                </Button>
              </VStack>
            </Box>

            {/* 付费套餐 */}
            {subscriptionPlans.filter(plan => plan && plan.name).map((plan) => (
          <Box
            key={plan.id}
            position="relative"
            borderRadius="2xl"
            overflow="hidden"
            border="2px solid"
            borderColor={plan.name === 'max' ? 'purple.400' : 'blue.300'}
            bg={bgCard}
            transition="all 0.3s ease"
            _hover={{
              transform: 'translateY(-4px)',
              shadow: 'xl',
            }}
          >
            {/* 推荐标签 */}
            {plan.name === 'max' && (
              <Box
                position="absolute"
                top={0}
                left={0}
                right={0}
                bg="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
                py={1}
                textAlign="center"
                zIndex={1}
              >
                <Text color="white" fontSize="xs" fontWeight="bold">
                  🔥 最受欢迎
                </Text>
              </Box>
            )}

            <VStack
              spacing={4}
              align="stretch"
              p={6}
            >
              {/* 套餐头部 - 图标与标题同行 */}
              <VStack spacing={2} align="stretch">
                <Flex justify="space-between" align="center">
                  <HStack spacing={3}>
                    <Icon
                      as={plan.name === 'pro' ? FaGem : FaCrown}
                      boxSize={8}
                      color={plan.name === 'pro' ? 'blue.400' : 'purple.400'}
                    />
                    <Text fontSize="xl" fontWeight="bold" color={textColor}>
                      {plan.display_name}
                    </Text>
                  </HStack>
                  <HStack spacing={0} align="baseline">
                    <Text fontSize="md" color={secondaryText}>¥</Text>
                    <Text fontSize="2xl" fontWeight="extrabold" color={plan.name === 'pro' ? 'blue.500' : 'purple.500'}>
                      {getCurrentPrice(plan).toFixed(0)}
                    </Text>
                    <Text fontSize="sm" color={secondaryText}>
                      /{selectedCycle === 'monthly' ? '月' : '年'}
                    </Text>
                  </HStack>
                </Flex>
                <Flex justify="space-between" align="center">
                  <Text fontSize="xs" color={secondaryText} pl={11}>
                    {plan.description}
                  </Text>
                  {getSavingsText(plan) && (
                    <Badge colorScheme="green" fontSize="xs" px={2} py={1}>
                      {getSavingsText(plan)}
                    </Badge>
                  )}
                </Flex>
              </VStack>

              <Divider />

              {/* 功能列表 */}
              <VStack spacing={3} align="stretch" minH="200px">
                {allFeatures.map((feature, index) => {
                  const featureValue = feature[plan.name];
                  const isSupported = featureValue === true || typeof featureValue === 'string';
                  const limitText = typeof featureValue === 'string' ? featureValue : null;

                  return (
                    <HStack key={index} spacing={3} align="start">
                      <Icon
                        as={isSupported ? FaCheck : FaTimes}
                        color={isSupported ? 'blue.500' : 'gray.300'}
                        boxSize={4}
                        mt={0.5}
                      />
                      <Text
                        fontSize="sm"
                        color={isSupported ? textColor : secondaryText}
                        flex={1}
                      >
                        {feature.name}
                        {limitText && (
                          <Text as="span" fontSize="xs" color={plan.name === 'pro' ? 'blue.500' : 'purple.500'} ml={1}>
                            ({limitText})
                          </Text>
                        )}
                      </Text>
                    </HStack>
                  );
                })}
              </VStack>

              {/* 订阅按钮 */}
              <Button
                size="lg"
                colorScheme={plan.name === 'max' ? 'purple' : 'blue'}
                variant="solid"
                onClick={() => handleSubscribe(plan)}
                isDisabled={
                  user?.subscription_type === plan.name &&
                  user?.subscription_status === 'active' &&
                  user?.billing_cycle === selectedCycle
                }
                _hover={{
                  transform: 'scale(1.02)',
                }}
                transition="all 0.2s"
              >
                {user?.subscription_type === plan.name &&
                 user?.subscription_status === 'active' &&
                 user?.billing_cycle === selectedCycle
                  ? '✓ 当前套餐'
                  : getButtonText(plan, user)
                }
              </Button>
            </VStack>
          </Box>
            ))}
          </>
        )}
      </Grid>

      {/* FAQ 常见问题 */}
      <Box
        mt={12}
        p={6}
        borderRadius="xl"
        bg={bgCard}
        border="1px solid"
        borderColor={borderColor}
        shadow="sm"
      >
        <Heading size="lg" mb={6} textAlign="center" color={textColor}>
          常见问题
        </Heading>
        <VStack spacing={4} align="stretch">
          {/* FAQ 1 */}
          <Box
            border="1px solid"
            borderColor={borderColor}
            borderRadius="lg"
            overflow="hidden"
          >
            <Flex
              p={4}
              cursor="pointer"
              onClick={() => setOpenFaqIndex(openFaqIndex === 0 ? null : 0)}
              bg={openFaqIndex === 0 ? bgAccent : 'transparent'}
              _hover={{ bg: bgAccent }}
              transition="all 0.2s"
              justify="space-between"
              align="center"
            >
              <Text fontWeight="semibold" color={textColor}>
                如何取消订阅？
              </Text>
              <Icon
                as={openFaqIndex === 0 ? FaChevronUp : FaChevronDown}
                color={textColor}
              />
            </Flex>
            <Collapse in={openFaqIndex === 0}>
              <Box p={4} pt={0} color={secondaryText}>
                <Text>
                  您可以随时在账户设置中取消订阅。取消后，您的订阅将在当前计费周期结束时到期，期间您仍可继续使用付费功能。取消后不会立即扣款，也不会自动续费。
                </Text>
              </Box>
            </Collapse>
          </Box>

          {/* FAQ 2 */}
          <Box
            border="1px solid"
            borderColor={borderColor}
            borderRadius="lg"
            overflow="hidden"
          >
            <Flex
              p={4}
              cursor="pointer"
              onClick={() => setOpenFaqIndex(openFaqIndex === 1 ? null : 1)}
              bg={openFaqIndex === 1 ? bgAccent : 'transparent'}
              _hover={{ bg: bgAccent }}
              transition="all 0.2s"
              justify="space-between"
              align="center"
            >
              <Text fontWeight="semibold" color={textColor}>
                支持哪些支付方式？
              </Text>
              <Icon
                as={openFaqIndex === 1 ? FaChevronUp : FaChevronDown}
                color={textColor}
              />
            </Flex>
            <Collapse in={openFaqIndex === 1}>
              <Box p={4} pt={0} color={secondaryText}>
                <Text>
                  我们目前支持微信支付。扫描支付二维码后，系统会自动检测支付状态并激活您的订阅。支付过程安全可靠，所有交易都经过加密处理。
                </Text>
              </Box>
            </Collapse>
          </Box>

          {/* FAQ 3 */}
          <Box
            border="1px solid"
            borderColor={borderColor}
            borderRadius="lg"
            overflow="hidden"
          >
            <Flex
              p={4}
              cursor="pointer"
              onClick={() => setOpenFaqIndex(openFaqIndex === 2 ? null : 2)}
              bg={openFaqIndex === 2 ? bgAccent : 'transparent'}
              _hover={{ bg: bgAccent }}
              transition="all 0.2s"
              justify="space-between"
              align="center"
            >
              <Text fontWeight="semibold" color={textColor}>
                可以在月付和年付之间切换吗？
              </Text>
              <Icon
                as={openFaqIndex === 2 ? FaChevronUp : FaChevronDown}
                color={textColor}
              />
            </Flex>
            <Collapse in={openFaqIndex === 2}>
              <Box p={4} pt={0} color={secondaryText}>
                <Text>
                  可以。您可以随时更改计费周期。如果从月付切换到年付，系统会计算剩余价值并应用到新的订阅中。年付用户可享受20%的折扣优惠。
                </Text>
              </Box>
            </Collapse>
          </Box>

          {/* FAQ 4 */}
          <Box
            border="1px solid"
            borderColor={borderColor}
            borderRadius="lg"
            overflow="hidden"
          >
            <Flex
              p={4}
              cursor="pointer"
              onClick={() => setOpenFaqIndex(openFaqIndex === 3 ? null : 3)}
              bg={openFaqIndex === 3 ? bgAccent : 'transparent'}
              _hover={{ bg: bgAccent }}
              transition="all 0.2s"
              justify="space-between"
              align="center"
            >
              <Text fontWeight="semibold" color={textColor}>
                是否提供退款？
              </Text>
              <Icon
                as={openFaqIndex === 3 ? FaChevronUp : FaChevronDown}
                color={textColor}
              />
            </Flex>
            <Collapse in={openFaqIndex === 3}>
              <Box p={4} pt={0} color={secondaryText}>
                <Text>
                  我们提供7天无理由退款保证。如果您在订阅后7天内对服务不满意，可以申请全额退款。超过7天后，我们将根据实际使用情况进行评估。
                </Text>
              </Box>
            </Collapse>
          </Box>

          {/* FAQ 5 */}
          <Box
            border="1px solid"
            borderColor={borderColor}
            borderRadius="lg"
            overflow="hidden"
          >
            <Flex
              p={4}
              cursor="pointer"
              onClick={() => setOpenFaqIndex(openFaqIndex === 4 ? null : 4)}
              bg={openFaqIndex === 4 ? bgAccent : 'transparent'}
              _hover={{ bg: bgAccent }}
              transition="all 0.2s"
              justify="space-between"
              align="center"
            >
              <Text fontWeight="semibold" color={textColor}>
                Pro版和Max版有什么区别？
              </Text>
              <Icon
                as={openFaqIndex === 4 ? FaChevronUp : FaChevronDown}
                color={textColor}
              />
            </Flex>
            <Collapse in={openFaqIndex === 4}>
              <Box p={4} pt={0} color={secondaryText}>
                <Text>
                  Pro版适合个人专业用户，提供高级图表、历史数据分析等功能。Max版则是为团队和企业设计，额外提供实时数据推送、API访问、无限制的数据存储和团队协作功能，并享有优先技术支持。
                </Text>
              </Box>
            </Collapse>
          </Box>
        </VStack>
      </Box>

      {/* 支付模态框 */}
      {isPaymentModalOpen && (
        <Modal
          isOpen={isPaymentModalOpen}
          onClose={() => {
            stopAutoPaymentCheck();
            setPaymentOrder(null);
            setPaymentCountdown(0);
            // 清空优惠码状态
            setPromoCode('');
            setPromoCodeApplied(false);
            setPromoCodeError('');
            setPriceInfo(null);
            onPaymentModalClose();
          }}
          size="lg"
          closeOnOverlayClick={false}
        >
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>
            <HStack>
              <Icon as={FaWeixin} color="green.500" />
              <Text>微信支付</Text>
            </HStack>
          </ModalHeader>
          <ModalCloseButton />
          <ModalBody pb={6}>
            {!paymentOrder ? (
              /* 订单确认 */
              <VStack spacing={4} align="stretch">
                {selectedPlan ? (
                  <Box p={4} bg={bgAccent} borderRadius="lg">
                    <Text fontSize="lg" fontWeight="bold" mb={3}>
                      订单确认
                    </Text>
                    <VStack spacing={2} align="stretch">
                      <Flex justify="space-between">
                        <Text color={secondaryText}>套餐:</Text>
                        <Text fontWeight="bold">{selectedPlan.display_name}</Text>
                      </Flex>
                      <Flex justify="space-between">
                        <Text color={secondaryText}>计费周期:</Text>
                        <Text>{selectedCycle === 'monthly' ? '按月付费' : '按年付费'}</Text>
                      </Flex>

                      {/* 价格明细 */}
                      <Divider my={2} />

                      {priceInfo && priceInfo.is_upgrade && (
                        <Box bg="blue.50" p={3} borderRadius="md" mb={2}>
                          <HStack spacing={2} mb={2}>
                            <Icon as={FaCheck} color="blue.500" boxSize={4} />
                            <Text fontSize="sm" fontWeight="bold" color="blue.700">
                              {priceInfo.upgrade_type === 'plan_upgrade' ? '套餐升级' :
                               priceInfo.upgrade_type === 'cycle_change' ? '周期变更' : '套餐和周期调整'}
                            </Text>
                          </HStack>
                          <VStack spacing={1} align="stretch" fontSize="xs">
                            <Flex justify="space-between" color="gray.600">
                              <Text>当前订阅: {priceInfo.current_plan === 'pro' ? 'Pro版' : 'Max版'} ({priceInfo.current_cycle === 'monthly' ? '月付' : '年付'})</Text>
                            </Flex>
                            <Flex justify="space-between" color="gray.600">
                              <Text>剩余价值:</Text>
                              <Text>¥{priceInfo.remaining_value.toFixed(2)}</Text>
                            </Flex>
                          </VStack>
                        </Box>
                      )}

                      <Flex justify="space-between">
                        <Text color={secondaryText}>
                          {priceInfo && priceInfo.is_upgrade ? '新套餐价格:' : '套餐价格:'}
                        </Text>
                        <Text fontWeight="medium">
                          ¥{priceInfo ? priceInfo.new_plan_price.toFixed(2) : getCurrentPrice(selectedPlan).toFixed(2)}
                        </Text>
                      </Flex>

                      {priceInfo && priceInfo.is_upgrade && priceInfo.remaining_value > 0 && (
                        <Flex justify="space-between" color="blue.600">
                          <Text>已付剩余抵扣:</Text>
                          <Text>-¥{priceInfo.remaining_value.toFixed(2)}</Text>
                        </Flex>
                      )}

                      {priceInfo && priceInfo.discount_amount > 0 && (
                        <Flex justify="space-between" color="green.600">
                          <Text>优惠码折扣:</Text>
                          <Text>-¥{priceInfo.discount_amount.toFixed(2)}</Text>
                        </Flex>
                      )}

                      <Divider />
                      <Flex justify="space-between" align="baseline">
                        <Text fontSize="lg" fontWeight="bold">实付金额:</Text>
                        <Text fontSize="2xl" fontWeight="bold" color="blue.500">
                          ¥{priceInfo ? priceInfo.final_amount.toFixed(2) : getCurrentPrice(selectedPlan).toFixed(2)}
                        </Text>
                      </Flex>
                      {getSavingsText(selectedPlan) && !priceInfo?.is_upgrade && (
                        <Badge colorScheme="green" alignSelf="flex-end" fontSize="xs">
                          {getSavingsText(selectedPlan)}
                        </Badge>
                      )}
                    </VStack>
                  </Box>
                ) : (
                  <Box p={4} bg="red.50" borderRadius="lg">
                    <Text color="red.600">请先选择一个订阅套餐</Text>
                  </Box>
                )}

                {/* 优惠码输入 */}
                {selectedPlan && (
                  <Box>
                    <HStack spacing={2}>
                      <Input
                        placeholder="输入优惠码（可选）"
                        value={promoCode}
                        onChange={(e) => {
                          setPromoCode(e.target.value.toUpperCase());
                          setPromoCodeError('');
                        }}
                        size="md"
                        isDisabled={promoCodeApplied}
                      />
                      <Button
                        colorScheme="purple"
                        onClick={handleValidatePromoCode}
                        isLoading={validatingPromo}
                        isDisabled={!promoCode || promoCodeApplied}
                        minW="80px"
                      >
                        应用
                      </Button>
                    </HStack>
                    {promoCodeError && (
                      <Text color="red.500" fontSize="sm" mt={2}>
                        {promoCodeError}
                      </Text>
                    )}
                    {promoCodeApplied && priceInfo && (
                      <HStack mt={2} p={2} bg="green.50" borderRadius="md">
                        <Icon as={FaCheck} color="green.500" />
                        <Text color="green.700" fontSize="sm" fontWeight="medium" flex={1}>
                          优惠码已应用！节省 ¥{priceInfo.discount_amount.toFixed(2)}
                        </Text>
                        <Icon
                          as={FaTimes}
                          color="gray.500"
                          cursor="pointer"
                          onClick={handleRemovePromoCode}
                          _hover={{ color: 'red.500' }}
                        />
                      </HStack>
                    )}
                  </Box>
                )}

                <Button
                  colorScheme="green"
                  size="lg"
                  leftIcon={<Icon as={FaWeixin} />}
                  onClick={handleCreateOrder}
                  isLoading={loading}
                  loadingText="创建订单中..."
                  isDisabled={!selectedPlan}
                >
                  创建微信支付订单
                </Button>
              </VStack>
            ) : (
              /* 支付二维码 */
              <VStack spacing={4} align="stretch">
                <Text textAlign="center" fontSize="lg" fontWeight="bold">
                  请使用微信扫码支付
                </Text>

                {/* 倒计时 */}
                <Box p={3} bg="orange.50" borderRadius="lg">
                  <HStack justify="center" spacing={2} mb={2}>
                    <Icon as={FaClock} color="orange.500" />
                    <Text color="orange.700" fontSize="sm">
                      二维码有效时间: {formatTime(paymentCountdown)}
                    </Text>
                  </HStack>
                  <Progress
                    value={(paymentCountdown / (30 * 60)) * 100}
                    colorScheme="orange"
                    size="sm"
                    borderRadius="full"
                  />
                </Box>

                {/* 二维码 */}
                <Box textAlign="center">
                  {paymentOrder.qr_code_url ? (
                    <Image
                      src={paymentOrder.qr_code_url}
                      alt="微信支付二维码"
                      mx="auto"
                      maxW="200px"
                      border="1px solid"
                      borderColor={borderColor}
                      borderRadius="lg"
                    />
                  ) : (
                    <Flex
                      w="200px"
                      h="200px"
                      mx="auto"
                      bg="gray.100"
                      alignItems="center"
                      justifyContent="center"
                      border="1px solid"
                      borderColor={borderColor}
                      borderRadius="lg"
                    >
                      <Icon as={FaQrcode} color="gray.400" boxSize={12} />
                    </Flex>
                  )}
                </Box>

                {/* 订单信息 */}
                <Box p={4} bg={bgAccent} borderRadius="lg">
                  <Text fontSize="xs" color={secondaryText} mb={2}>
                    订单号: {paymentOrder.order_no}
                  </Text>
                  <Flex justify="space-between" align="baseline">
                    <Text color={secondaryText}>支付金额:</Text>
                    <Text fontSize="xl" fontWeight="bold" color="green.500">
                      ¥{paymentOrder.amount}
                    </Text>
                  </Flex>
                </Box>

                {/* 操作按钮 */}
                <VStack spacing={3}>
                  <HStack spacing={3} w="100%">
                    <Button
                      flex={1}
                      variant="outline"
                      leftIcon={<Icon as={FaRedo} />}
                      onClick={handleCheckPaymentStatus}
                      isLoading={checkingPayment}
                      loadingText="检查中..."
                    >
                      检查支付状态
                    </Button>
                  </HStack>

                  <Button
                    w="100%"
                    colorScheme="orange"
                    variant="solid"
                    size="sm"
                    onClick={handleForceUpdatePayment}
                    isLoading={forceUpdating}
                    loadingText="强制更新中..."
                  >
                    强制更新支付状态
                  </Button>

                  <Text fontSize="xs" color={secondaryText} textAlign="center">
                    支付完成但页面未更新?点击上方"强制更新"按钮
                  </Text>
                </VStack>

                {/* 支付状态提示 */}
                {autoCheckInterval && (
                  <Box p={3} bg="blue.50" borderRadius="lg" borderWidth="1px" borderColor="blue.200">
                    <Text fontSize="sm" color="blue.700" textAlign="center">
                      🔄 正在自动检查支付状态...
                    </Text>
                  </Box>
                )}

                {/* 支付说明 */}
                <VStack align="stretch" spacing={1} fontSize="xs" color={secondaryText}>
                  <Text>• 使用微信"扫一扫"功能扫描上方二维码</Text>
                  <Text>• 支付完成后系统将自动检测并激活订阅</Text>
                  <Text>• 系统每10秒自动检查一次支付状态</Text>
                  <Text>• 如遇问题请联系客服支持</Text>
                </VStack>
              </VStack>
            )}
          </ModalBody>
        </ModalContent>
        </Modal>
      )}
    </VStack>
  );
}