vf_react/src/components/SubscriptionUpgradeModal.js

import React from 'react';
import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  Button,
  VStack,
  HStack,
  Text,
  Badge,
  Box,
  useColorModeValue,
  Icon,
  Divider
} from '@chakra-ui/react';
import { FaCrown, FaLock, FaStar, FaRocket } from 'react-icons/fa';

const SubscriptionUpgradeModal = ({ 
  isOpen, 
  onClose, 
  requiredLevel = 'pro', 
  featureName = '功能',
  currentLevel = 'free'
}) => {
  const bgColor = useColorModeValue('white', 'gray.800');
  const borderColor = useColorModeValue('gray.200', 'gray.600');
  const textColor = useColorModeValue('gray.600', 'gray.300');

  // 订阅级别信息
  const subscriptionLevels = {
    free: {
      name: '免费版',
      icon: FaLock,
      color: 'gray',
      features: ['基础事件浏览', '有限历史事件查看']
    },
    pro: {
      name: 'Pro版',
      icon: FaStar,
      color: 'blue',
      features: ['相关标的分析', '相关概念分析', '完整历史事件']
    },
    max: {
      name: 'Max版',
      icon: FaCrown,
      color: 'purple',
      features: ['传导链分析', '高级分析工具', '实时数据推送', '所有Pro版功能']
    }
  };

  const currentLevelInfo = subscriptionLevels[currentLevel] || subscriptionLevels.free;
  const requiredLevelInfo = subscriptionLevels[requiredLevel] || subscriptionLevels.pro;

  const handleUpgrade = () => {
    // 跳转到订阅页面
    window.location.href = 'https://valuefrontier.cn/home/pages/account/subscription';
  };

  return (
    <Modal isOpen={isOpen} onClose={onClose} size="lg" isCentered>
      <ModalOverlay />
      <ModalContent bg={bgColor}>
        <ModalHeader borderBottomWidth="1px" borderColor={borderColor}>
          <HStack spacing={3}>
            <Icon as={FaLock} color="red.500" boxSize={6} />
            <VStack align="start" spacing={0}>
              <Text fontSize="lg" fontWeight="bold">
                需要{requiredLevelInfo.name}订阅
              </Text>
              <Text fontSize="sm" color={textColor}>
                当前功能需要更高权限
              </Text>
            </VStack>
          </HStack>
        </ModalHeader>
        <ModalCloseButton />
        
        <ModalBody py={6}>
          <VStack spacing={6} align="stretch">
            {/* 功能说明 */}
            <Box>
              <Text fontWeight="semibold" mb={2}>
                您正在尝试访问：
              </Text>
              <Box 
                p={3} 
                bg={useColorModeValue('blue.50', 'blue.900')}
                borderRadius="md"
                borderLeft="4px solid"
                borderColor="blue.500"
              >
                <Text fontSize="md" fontWeight="medium">
                  {featureName}
                </Text>
              </Box>
            </Box>

            <Divider />

            {/* 当前订阅状态 */}
            <Box>
              <HStack justify="space-between" mb={3}>
                <Text fontWeight="semibold">当前订阅</Text>
                <Badge colorScheme={currentLevelInfo.color}>
                  {currentLevelInfo.name}
                </Badge>
              </HStack>
              <VStack align="start" spacing={1}>
                {currentLevelInfo.features.map((feature, index) => (
                  <HStack key={index} spacing={2}>
                    <Icon as={currentLevelInfo.icon} color={`${currentLevelInfo.color}.500`} boxSize={3} />
                    <Text fontSize="sm" color={textColor}>{feature}</Text>
                  </HStack>
                ))}
              </VStack>
            </Box>

            {/* 所需订阅状态 */}
            <Box>
              <HStack justify="space-between" mb={3}>
                <Text fontWeight="semibold">所需订阅</Text>
                <Badge colorScheme={requiredLevelInfo.color} variant="solid">
                  {requiredLevelInfo.name}
                </Badge>
              </HStack>
              <VStack align="start" spacing={1}>
                {requiredLevelInfo.features.map((feature, index) => (
                  <HStack key={index} spacing={2}>
                    <Icon as={requiredLevelInfo.icon} color={`${requiredLevelInfo.color}.500`} boxSize={3} />
                    <Text fontSize="sm" color={textColor}>{feature}</Text>
                  </HStack>
                ))}
              </VStack>
            </Box>

            {/* 升级提示 */}
            <Box 
              p={3} 
              bg={useColorModeValue('yellow.50', 'yellow.900')}
              borderRadius="md"
            >
              <HStack spacing={2}>
                <Icon as={FaRocket} color="yellow.600" />
                <Text fontSize="sm" color={useColorModeValue('yellow.800', 'yellow.200')}>
                  升级到{requiredLevelInfo.name}即可解锁此功能
                </Text>
              </HStack>
            </Box>
          </VStack>
        </ModalBody>
        
        <ModalFooter borderTopWidth="1px" borderColor={borderColor}>
          <HStack spacing={3}>
            <Button variant="outline" onClick={onClose}>
              稍后再说
            </Button>
            <Button 
              colorScheme={requiredLevelInfo.color}
              leftIcon={<Icon as={FaCrown} />}
              onClick={handleUpgrade}
            >
              立即升级
            </Button>
          </HStack>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
};

export default SubscriptionUpgradeModal;