makemd/dashboard/src/pages/Settings/SubscriptionManage.tsx

import React, { useState, useMemo } from 'react';
import { 
  Card, Row, Col, Switch, Tag, Typography, Space, Button, Modal, 
  Progress, Divider, Alert, Tabs, Table, message, Statistic, 
  Timeline, Badge, Tooltip, Radio, Empty, Steps, theme, ConfigProvider
} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import {
  CrownOutlined,
  RobotOutlined,
  ShopOutlined,
  GlobalOutlined,
  LineChartOutlined,
  ApiOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
  ThunderboltOutlined,
  StarOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
  InfoCircleOutlined,
  GiftOutlined,
  SafetyOutlined,
  RocketOutlined,
  TeamOutlined,
  ClockCircleOutlined,
  DollarOutlined,
  CheckSquareOutlined,
  CloseSquareOutlined,
  RightOutlined,
} from '@ant-design/icons';
import { useUser, FEATURES, ROLE_CONFIG } from '@/contexts/UserContext';

const { Title, Text, Paragraph } = Typography;

interface FeatureConfig {
  key: string;
  name: string;
  description: string;
  icon: React.ReactNode;
  requiredPlan: string[];
  benefits: string[];
  limitations?: string[];
  popularity?: number;
  category: 'core' | 'advanced' | 'enterprise';
}

const FEATURE_CONFIGS: FeatureConfig[] = [
  {
    key: FEATURES.AI_OPERATIONS,
    name: 'AI运营中心',
    description: '智能运营助手，自动化执行日常运营任务',
    icon: <RobotOutlined style={{ fontSize: 24 }} />,
    requiredPlan: ['basic', 'pro', 'enterprise'],
    benefits: [
      '自动选品推荐',
      '智能定价策略',
      '自动上下架',
      'AI决策日志追踪',
      '策略市场访问',
    ],
    limitations: [
      '免费版: 每日仅3次AI调用',
      '基础版: 每日100次AI调用',
      '专业版: 无限AI调用',
    ],
    popularity: 95,
    category: 'core',
  },
  {
    key: FEATURES.AUTO_PRICING,
    name: '自动定价',
    description: '基于市场数据和竞争分析的智能定价系统',
    icon: <ThunderboltOutlined style={{ fontSize: 24 }} />,
    requiredPlan: ['pro', 'enterprise'],
    benefits: [
      '实时竞品价格监控',
      '动态定价策略',
      '利润率自动优化',
      '价格预警通知',
    ],
    limitations: [
      '基础版: 仅查看定价建议',
      '专业版: 自动执行定价',
    ],
    popularity: 88,
    category: 'advanced',
  },
  {
    key: FEATURES.MULTI_SHOP,
    name: '多店铺管理',
    description: '统一管理多个电商平台的店铺',
    icon: <ShopOutlined style={{ fontSize: 24 }} />,
    requiredPlan: ['basic', 'pro', 'enterprise'],
    benefits: [
      '跨平台商品同步',
      '统一库存管理',
      '多店铺数据报表',
      '批量操作支持',
    ],
    limitations: [
      '免费版: 仅支持1个店铺',
      '基础版: 最多3个店铺',
      '专业版: 最多10个店铺',
      '企业版: 无限店铺',
    ],
    popularity: 92,
    category: 'core',
  },
  {
    key: FEATURES.B2B_TRADE,
    name: 'B2B贸易',
    description: '企业级批发贸易管理功能',
    icon: <ShopOutlined style={{ fontSize: 24 }} />,
    requiredPlan: ['basic', 'pro', 'enterprise'],
    benefits: [
      '供应商管理',
      '批量订单处理',
      'B2B专属定价',
      '合同管理',
    ],
    popularity: 75,
    category: 'core',
  },
  {
    key: FEATURES.INDEPENDENT_SITE,
    name: '独立站',
    description: '创建和管理独立电商网站',
    icon: <GlobalOutlined style={{ fontSize: 24 }} />,
    requiredPlan: ['pro', 'enterprise'],
    benefits: [
      '自定义品牌站点',
      '独立域名绑定',
      'SEO优化工具',
      '独立支付集成',
    ],
    popularity: 65,
    category: 'advanced',
  },
  {
    key: FEATURES.ADVANCED_ANALYTICS,
    name: '高级数据分析',
    description: '深度数据分析和可视化报表',
    icon: <LineChartOutlined style={{ fontSize: 24 }} />,
    requiredPlan: ['pro', 'enterprise'],
    benefits: [
      '自定义报表',
      '数据导出',
      '趋势预测',
      '竞品分析报告',
    ],
    limitations: [
      '基础版: 仅基础报表',
      '专业版: 完整分析功能',
    ],
    popularity: 80,
    category: 'advanced',
  },
  {
    key: FEATURES.API_ACCESS,
    name: 'API访问',
    description: '开放API接口，支持系统集成',
    icon: <ApiOutlined style={{ fontSize: 24 }} />,
    requiredPlan: ['enterprise'],
    benefits: [
      'RESTful API',
      'Webhook支持',
      'SDK下载',
      '技术文档',
    ],
    popularity: 55,
    category: 'enterprise',
  },
];

const PLAN_DETAILS = {
  free: {
    name: '免费版',
    price: 0,
    color: '#d9d9d9',
    gradient: 'linear-gradient(135deg, #d9d9d9 0%, #bfbfbf 100%)',
    features: ['基础商品管理', '订单管理', '基础报表'],
    limitations: ['1个店铺', '每日3次AI调用', '无API访问'],
    recommended: false,
    popular: false,
    icon: <ClockCircleOutlined />,
    description: '适合个人用户和小规模卖家',
  },
  basic: {
    name: '基础版',
    price: 99,
    color: '#1890ff',
    gradient: 'linear-gradient(135deg, #1890ff 0%, #096dd9 100%)',
    features: ['多店铺管理(3个)', 'AI运营(100次/日)', 'B2B贸易', '基础定价建议'],
    limitations: ['无独立站', '无API访问'],
    recommended: true,
    popular: true,
    icon: <RocketOutlined />,
    description: '适合成长中的电商卖家',
  },
  pro: {
    name: '专业版',
    price: 299,
    color: '#faad14',
    gradient: 'linear-gradient(135deg, #faad14 0%, #d48806 100%)',
    features: ['多店铺管理(10个)', '无限AI调用', '自动定价', '独立站', '高级分析'],
    limitations: ['无API访问'],
    recommended: false,
    popular: false,
    icon: <StarOutlined />,
    description: '适合专业电商运营团队',
  },
  enterprise: {
    name: '企业版',
    price: 999,
    color: '#722ed1',
    gradient: 'linear-gradient(135deg, #722ed1 0%, #531dab 100%)',
    features: ['无限店铺', '全部功能', 'API访问', '专属客服', '定制开发'],
    limitations: [],
    recommended: false,
    popular: false,
    icon: <CrownOutlined />,
    description: '适合大型企业和定制化需求',
  },
};

const USAGE_DATA = {
  aiCalls: { used: 45, total: 100, plan: 'basic' },
  shops: { used: 2, total: 3, plan: 'basic' },
  storage: { used: 75, total: 100, unit: 'GB', plan: 'basic' },
};

interface PlanComparisonData {
  key: string;
  name: string;
  icon: React.ReactNode;
  description: string;
  popularity: number;
  category: 'core' | 'advanced' | 'enterprise';
  free: boolean;
  basic: boolean;
  pro: boolean;
  enterprise: boolean;
  current: boolean;
}

const SubscriptionManage: React.FC = () => {
  const { currentUser, hasFeature, isPaidUser, getPlanLabel } = useUser();
  const [previewFeature, setPreviewFeature] = useState<FeatureConfig | null>(null);
  const [simulatedPlan, setSimulatedPlan] = useState<string | null>(null);
  const [billingCycle, setBillingCycle] = useState<'monthly' | 'yearly'>('monthly');
  const [selectedTab, setSelectedTab] = useState('overview');

  const currentPlan = currentUser.subscription?.plan || 'free';

  const handleFeaturePreview = (feature: FeatureConfig) => {
    setPreviewFeature(feature);
  };

  const handleSimulatePlan = (plan: string) => {
    setSimulatedPlan(plan);
    message.success(`已切换到${PLAN_DETAILS[plan as keyof typeof PLAN_DETAILS].name}预览模式`);
  };

  const handleUpgrade = (plan: string) => {
    message.info(`升级到${PLAN_DETAILS[plan as keyof typeof PLAN_DETAILS].name}功能开发中`);
  };

  const isFeatureAvailable = (featureKey: string) => {
    if (simulatedPlan) {
      const feature = FEATURE_CONFIGS.find(f => f.key === featureKey);
      return feature?.requiredPlan.includes(simulatedPlan) ?? false;
    }
    return hasFeature(featureKey);
  };

  const getDiscount = () => {
    return billingCycle === 'yearly' ? 20 : 0;
  };

  const getAnnualPrice = (monthlyPrice: number) => {
    const annualPrice = monthlyPrice * 12;
    const discount = getDiscount();
    return Math.round(annualPrice * (1 - discount / 100));
  };

  const getDisplayPrice = (price: number) => {
    if (billingCycle === 'yearly') {
      return Math.round(price * (1 - getDiscount() / 100));
    }
    return price;
  };

  const planComparisonData = useMemo((): PlanComparisonData[] => {
    return FEATURE_CONFIGS.map(feature => ({
      key: feature.key,
      name: feature.name,
      icon: feature.icon,
      description: feature.description,
      popularity: feature.popularity || 0,
      category: feature.category,
      free: feature.requiredPlan.includes('free'),
      basic: feature.requiredPlan.includes('basic'),
      pro: feature.requiredPlan.includes('pro'),
      enterprise: feature.requiredPlan.includes('enterprise'),
      current: isFeatureAvailable(feature.key),
    }));
  }, [simulatedPlan]);

  const upgradePath = useMemo(() => {
    const planOrder = ['free', 'basic', 'pro', 'enterprise'];
    const currentIndex = planOrder.indexOf(currentPlan);
    return planOrder.slice(currentIndex + 1);
  }, [currentPlan]);

  const renderPlanCard = (planKey: string, plan: any) => (
    <Col xs={24} sm={12} lg={6} key={planKey}>
      <Card
        hoverable
        style={{
          height: '100%',
          borderColor: currentPlan === planKey ? '#1890ff' : undefined,
          borderWidth: currentPlan === planKey ? 2 : 1,
          borderRadius: '12px',
          transition: 'all 0.3s ease',
          background: planKey === simulatedPlan ? 'linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%)' : undefined,
        }}
        bodyStyle={{ padding: '24px' }}
        onClick={() => handleSimulatePlan(planKey)}
      >
        <div style={{ textAlign: 'center' }}>
          <div style={{ marginBottom: '12px' }}>
            <div style={{ 
              fontSize: '32px', 
              color: plan.color,
              marginBottom: '8px' 
            }}>
              {plan.icon}
            </div>
            <Tag 
              color={plan.color} 
              style={{ 
                fontSize: '14px', 
                padding: '4px 16px',
                borderRadius: '20px',
                fontWeight: 500
              }}
            >
              {plan.name}
            </Tag>
            {plan.recommended && (
              <Tag 
                color="gold" 
                style={{ 
                  marginLeft: '8px',
                  borderRadius: '20px',
                  fontWeight: 500
                }}
              >
                推荐
              </Tag>
            )}
            {currentPlan === planKey && (
              <Tag 
                color="green" 
                style={{ 
                  marginLeft: '8px',
                  borderRadius: '20px',
                  fontWeight: 500
                }}
              >
                当前套餐
              </Tag>
            )}
            {simulatedPlan === planKey && currentPlan !== planKey && (
              <Tag 
                color="blue" 
                style={{ 
                  marginLeft: '8px',
                  borderRadius: '20px',
                  fontWeight: 500
                }}
              >
                预览中
              </Tag>
            )}
          </div>
          
          <div style={{ margin: '16px 0' }}>
            {billingCycle === 'yearly' && planKey !== 'free' && (
              <div style={{ marginBottom: '8px' }}>
                <Text type="secondary" style={{ fontSize: '12px', textDecoration: 'line-through' }}>
                  ¥{plan.price * 12}/年
                </Text>
                <Tag color="red" style={{ marginLeft: '8px', fontSize: '12px' }}>
                  省{getDiscount()}%
                </Tag>
              </div>
            )}
            <Title level={3} style={{ margin: 0, color: plan.color }}>
              ¥{getDisplayPrice(plan.price)}
              <Text type="secondary" style={{ fontSize: '14px', fontWeight: 'normal' }}>
                /{billingCycle === 'yearly' ? '年' : '月'}
              </Text>
            </Title>
            {billingCycle === 'yearly' && planKey !== 'free' && (
              <Text type="secondary" style={{ fontSize: '12px' }}>
                平均 ¥{Math.round(getDisplayPrice(plan.price) / 12)}/月
              </Text>
            )}
          </div>
          
          <Paragraph 
            type="secondary" 
            style={{ 
              fontSize: '13px', 
              marginBottom: '16px',
              minHeight: '40px'
            }}
          >
            {plan.description}
          </Paragraph>
          
          <Divider style={{ margin: '12px 0' }} />
          
          <div style={{ textAlign: 'left', marginBottom: '16px' }}>
            {plan.features.slice(0, 4).map((f: string, i: number) => (
              <div key={i} style={{ marginBottom: '8px', fontSize: '13px' }}>
                <CheckCircleOutlined style={{ color: '#52c41a', marginRight: '8px', fontSize: '14px' }} />
                <Text>{f}</Text>
              </div>
            ))}
            {plan.features.length > 4 && (
              <Text type="secondary" style={{ fontSize: '12px' }}>
                +{plan.features.length - 4} 更多功能
              </Text>
            )}
          </div>
          
          {plan.limitations.length > 0 && (
            <div style={{ textAlign: 'left', marginBottom: '16px' }}>
              {plan.limitations.slice(0, 2).map((l: string, i: number) => (
                <div key={i} style={{ marginBottom: '6px', fontSize: '12px' }}>
                  <CloseCircleOutlined style={{ color: '#d9d9d9', marginRight: '8px', fontSize: '12px' }} />
                  <Text type="secondary">{l}</Text>
                </div>
              ))}
            </div>
          )}
          
          <Button 
            type={currentPlan === planKey ? 'default' : 'primary'}
            block
            size="large"
            style={{ 
              borderRadius: '8px',
              height: '44px',
              fontSize: '16px',
              fontWeight: 500
            }}
            disabled={currentPlan === planKey}
            onClick={() => currentPlan !== planKey && handleUpgrade(planKey)}
          >
            {currentPlan === planKey ? '当前套餐' : '立即升级'}
          </Button>
        </div>
      </Card>
    </Col>
  );

  const renderUsageOverview = () => (
    <Row gutter={[16, 16]}>
      <Col xs={24} md={12} lg={8}>
        <Card>
          <Statistic
            title={
              <Space>
                <RobotOutlined style={{ color: '#1890ff' }} />
                <span>AI调用次数</span>
              </Space>
            }
            value={USAGE_DATA.aiCalls.used}
            suffix={`/ ${USAGE_DATA.aiCalls.total}`}
            valueStyle={{ color: '#1890ff' }}
          />
          <Progress 
            percent={USAGE_DATA.aiCalls.used} 
            status={USAGE_DATA.aiCalls.used >= 80 ? 'exception' : 'normal'}
            strokeColor={USAGE_DATA.aiCalls.used >= 80 ? '#ff4d4f' : '#1890ff'}
          />
          <Text type="secondary" style={{ fontSize: '12px' }}>
            剩余 {USAGE_DATA.aiCalls.total - USAGE_DATA.aiCalls.used} 次
          </Text>
        </Card>
      </Col>
      <Col xs={24} md={12} lg={8}>
        <Card>
          <Statistic
            title={
              <Space>
                <ShopOutlined style={{ color: '#52c41a' }} />
                <span>店铺数量</span>
              </Space>
            }
            value={USAGE_DATA.shops.used}
            suffix={`/ ${USAGE_DATA.shops.total}`}
            valueStyle={{ color: '#52c41a' }}
          />
          <Progress 
            percent={Math.round((USAGE_DATA.shops.used / USAGE_DATA.shops.total) * 100)} 
            status="normal"
            strokeColor="#52c41a"
          />
          <Text type="secondary" style={{ fontSize: '12px' }}>
            剩余 {USAGE_DATA.shops.total - USAGE_DATA.shops.used} 个
          </Text>
        </Card>
      </Col>
      <Col xs={24} md={12} lg={8}>
        <Card>
          <Statistic
            title={
              <Space>
                <DollarOutlined style={{ color: '#faad14' }} />
                <span>存储空间</span>
              </Space>
            }
            value={USAGE_DATA.storage.used}
            suffix={`/ ${USAGE_DATA.storage.total} ${USAGE_DATA.storage.unit}`}
            valueStyle={{ color: '#faad14' }}
          />
          <Progress 
            percent={USAGE_DATA.storage.used} 
            status={USAGE_DATA.storage.used >= 80 ? 'exception' : 'normal'}
            strokeColor={USAGE_DATA.storage.used >= 80 ? '#ff4d4f' : '#faad14'}
          />
          <Text type="secondary" style={{ fontSize: '12px' }}>
            剩余 {USAGE_DATA.storage.total - USAGE_DATA.storage.used} {USAGE_DATA.storage.unit}
          </Text>
        </Card>
      </Col>
    </Row>
  );

  const renderFeatureComparison = () => {
    const columns: ColumnsType<PlanComparisonData> = [
      {
        title: '功能',
        dataIndex: 'name',
        key: 'name',
        width: 200,
        render: (name: string, record: PlanComparisonData) => (
          <Space direction="vertical" size={0}>
            <Space>
              {record.icon}
              <Text strong>{name}</Text>
            </Space>
            <Text type="secondary" style={{ fontSize: '12px' }}>
              {record.description}
            </Text>
            <div>
              <Tooltip title="用户使用热度">
                <Progress 
                  percent={record.popularity} 
                  size="small" 
                  showInfo={false}
                  strokeColor="#1890ff"
                />
              </Tooltip>
              <Text type="secondary" style={{ fontSize: '11px', marginLeft: '8px' }}>
                {record.popularity}% 热度
              </Text>
            </div>
          </Space>
        ),
      },
      {
        title: '免费版',
        key: 'free',
        align: 'center' as const,
        render: (_: any, record: PlanComparisonData) => 
          record.free ? 
            <CheckCircleOutlined style={{ color: '#52c41a', fontSize: '18px' }} /> : 
            <CloseCircleOutlined style={{ color: '#d9d9d9', fontSize: '18px' }} />,
      },
      {
        title: '基础版',
        key: 'basic',
        align: 'center' as const,
        render: (_: any, record: PlanComparisonData) => 
          record.basic ? 
            <CheckCircleOutlined style={{ color: '#52c41a', fontSize: '18px' }} /> : 
            <CloseCircleOutlined style={{ color: '#d9d9d9', fontSize: '18px' }} />,
      },
      {
        title: '专业版',
        key: 'pro',
        align: 'center' as const,
        render: (_: any, record: PlanComparisonData) => 
          record.pro ? 
            <CheckCircleOutlined style={{ color: '#52c41a', fontSize: '18px' }} /> : 
            <CloseCircleOutlined style={{ color: '#d9d9d9', fontSize: '18px' }} />,
      },
      {
        title: '企业版',
        key: 'enterprise',
        align: 'center' as const,
        render: (_: any, record: PlanComparisonData) => 
          record.enterprise ? 
            <CheckCircleOutlined style={{ color: '#52c41a', fontSize: '18px' }} /> : 
            <CloseCircleOutlined style={{ color: '#d9d9d9', fontSize: '18px' }} />,
      },
      {
        title: '当前状态',
        key: 'status',
        align: 'center' as const,
        render: (_: any, record: PlanComparisonData) => (
          <Tag color={record.current ? 'green' : 'default'} style={{ borderRadius: '12px' }}>
            {record.current ? '已开通' : '未开通'}
          </Tag>
        ),
      },
      {
        title: '操作',
        key: 'action',
        width: 100,
        align: 'center' as const,
        render: (_: any, record: PlanComparisonData) => (
          <Button 
            type="link" 
            size="small"
            onClick={() => handleFeaturePreview(FEATURE_CONFIGS.find(f => f.key === record.key)!)}
          >
            详情
          </Button>
        ),
      },
    ];

    return (
      <Table
        columns={columns}
        dataSource={planComparisonData}
        rowKey="key"
        pagination={false}
        size="middle"
        rowClassName={(record) => record.current ? 'highlight-row' : ''}
      />
    );
  };

  const renderUpgradePath = () => {
    const steps = upgradePath.map((planKey, index) => ({
      title: PLAN_DETAILS[planKey as keyof typeof PLAN_DETAILS].name,
      description: PLAN_DETAILS[planKey as keyof typeof PLAN_DETAILS].description,
      icon: PLAN_DETAILS[planKey as keyof typeof PLAN_DETAILS].icon,
    }));

    return (
      <Card title="升级路径">
        <Alert
          message="升级建议"
          description="根据您的使用情况，我们推荐您升级到更高级别的套餐以获得更多功能"
          type="info"
          showIcon
          style={{ marginBottom: '24px' }}
        />
        <Steps
          current={0}
          items={steps}
          style={{ marginBottom: '24px' }}
        />
        <Space direction="vertical" style={{ width: '100%' }}>
          {upgradePath.map((planKey, index) => {
            const plan = PLAN_DETAILS[planKey as keyof typeof PLAN_DETAILS];
            const additionalFeatures = FEATURE_CONFIGS.filter(f => 
              f.requiredPlan.includes(planKey) && !isFeatureAvailable(f.key)
            );
            return (
              <Card 
                key={planKey}
                size="small"
                style={{ 
                  borderLeft: `4px solid ${plan.color}`,
                  marginBottom: '12px'
                }}
              >
                <Row gutter={16} align="middle">
                  <Col flex="auto">
                    <Space direction="vertical" size={0}>
                      <Space>
                        <Text strong style={{ fontSize: '16px' }}>
                          {plan.name}
                        </Text>
                        <Tag color={plan.color} style={{ borderRadius: '12px' }}>
                          ¥{getDisplayPrice(plan.price)}/{billingCycle === 'yearly' ? '年' : '月'}
                        </Tag>
                      </Space>
                      <Text type="secondary" style={{ fontSize: '13px' }}>
                        {plan.description}
                      </Text>
                      <div>
                        <Text type="secondary" style={{ fontSize: '12px' }}>
                          新增功能:
                        </Text>
                        <Space wrap style={{ marginLeft: '8px' }}>
                          {additionalFeatures.slice(0, 3).map(f => (
                            <Tag key={f.key} color="blue" style={{ fontSize: '11px' }}>
                              {f.name}
                            </Tag>
                          ))}
                          {additionalFeatures.length > 3 && (
                            <Tag color="default" style={{ fontSize: '11px' }}>
                              +{additionalFeatures.length - 3}
                            </Tag>
                          )}
                        </Space>
                      </div>
                    </Space>
                  </Col>
                  <Col>
                    <Button 
                      type="primary" 
                      icon={<RightOutlined />}
                      onClick={() => handleUpgrade(planKey)}
                    >
                      升级
                    </Button>
                  </Col>
                </Row>
              </Card>
            );
          })}
        </Space>
      </Card>
    );
  };

  return (
    <div className="subscription-manage" style={{ padding: '24px', background: '#f5f5f5', minHeight: '100vh' }}>
      <ConfigProvider
        theme={{
          token: {
            colorPrimary: '#1890ff',
            borderRadius: 8,
          },
        }}
      >
        <div className="page-header" style={{ marginBottom: '24px' }}>
          <Row gutter={[16, 16]} align="middle">
            <Col xs={24} md={16}>
              <Space direction="vertical" size={4}>
                <Title level={2} style={{ margin: 0 }}>
                  <CrownOutlined style={{ marginRight: '8px', color: '#faad14' }} />
                  订阅管理中心
                </Title>
                <Paragraph type="secondary" style={{ margin: 0 }}>
                  管理您的订阅计划和付费功能，预览不同套餐的功能差异
                </Paragraph>
              </Space>
            </Col>
            <Col xs={24} md={8} style={{ textAlign: 'right' }}>
              <Space>
                <Radio.Group 
                  value={billingCycle} 
                  onChange={(e) => setBillingCycle(e.target.value)}
                  size="large"
                >
                  <Radio.Button value="monthly">月付</Radio.Button>
                  <Radio.Button value="yearly">
                    年付
                    {getDiscount() > 0 && (
                      <Tag color="red" style={{ marginLeft: '4px' }}>
                        省{getDiscount()}%
                      </Tag>
                    )}
                  </Radio.Button>
                </Radio.Group>
              </Space>
            </Col>
          </Row>
        </div>

        <Alert
          message="预览模式"
          description="点击下方套餐卡片可以预览不同套餐的功能权限，实际功能以当前订阅为准"
          type="info"
          showIcon
          icon={<InfoCircleOutlined />}
          closable
          style={{ marginBottom: '24px', borderRadius: '8px' }}
        />

        <Tabs 
          activeKey={selectedTab} 
          onChange={setSelectedTab}
          size="large"
          items={[
            {
              key: 'overview',
              label: (
                <span>
                  <DollarOutlined />
                  套餐概览
                </span>
              ),
              children: (
                <>
                  <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
                    {Object.entries(PLAN_DETAILS).map(([key, plan]) => 
                      renderPlanCard(key, plan)
                    )}
                  </Row>

                  <Card title="功能使用情况" style={{ marginBottom: '24px' }}>
                    {renderUsageOverview()}
                  </Card>

                  <Card title="当前订阅状态">
                    <Row gutter={24}>
                      <Col xs={24} md={8}>
                        <div style={{ textAlign: 'center', padding: '24px', background: '#fafafa', borderRadius: '8px' }}>
                          <Tag 
                            color={PLAN_DETAILS[currentPlan as keyof typeof PLAN_DETAILS]?.color || 'default'} 
                            style={{ 
                              fontSize: '16px', 
                              padding: '8px 24px',
                              borderRadius: '20px',
                              marginBottom: '12px'
                            }}
                          >
                            {getPlanLabel()}
                          </Tag>
                          <Title level={4} style={{ marginTop: '12px', marginBottom: '8px' }}>当前套餐</Title>
                          <Text type="secondary" style={{ fontSize: '13px' }}>
                            {currentUser.subscription?.expiresAt ? 
                              `到期时间: ${currentUser.subscription.expiresAt}` : 
                              '永久有效'}
                          </Text>
                        </div>
                      </Col>
                      <Col xs={24} md={8}>
                        <div style={{ textAlign: 'center', padding: '24px', background: '#fafafa', borderRadius: '8px' }}>
                          <Title level={2} style={{ color: '#52c41a', marginBottom: '8px' }}>
                            {currentUser.subscription?.features.length || 0}
                          </Title>
                          <Text type="secondary">已开通功能</Text>
                        </div>
                      </Col>
                      <Col xs={24} md={8}>
                        <div style={{ textAlign: 'center', padding: '24px', background: '#fafafa', borderRadius: '8px' }}>
                          <Title level={2} style={{ color: '#1890ff', marginBottom: '8px' }}>
                            {FEATURE_CONFIGS.filter(f => !hasFeature(f.key)).length}
                          </Title>
                          <Text type="secondary">可升级功能</Text>
                        </div>
                      </Col>
                    </Row>
                  </Card>
                </>
              ),
            },
            {
              key: 'comparison',
              label: (
                <span>
                  <LineChartOutlined />
                  功能对比
                </span>
              ),
              children: (
                <Card title="套餐功能对比表">
                  {renderFeatureComparison()}
                </Card>
              ),
            },
            {
              key: 'upgrade',
              label: (
                <span>
                  <RocketOutlined />
                  升级路径
                </span>
              ),
              children: renderUpgradePath(),
            },
          ]}
        />

        <Modal
          title={
            <Space>
              {previewFeature?.icon}
              <span>{previewFeature?.name}</span>
            </Space>
          }
          open={!!previewFeature}
          onCancel={() => setPreviewFeature(null)}
          footer={[
            <Button key="close" onClick={() => setPreviewFeature(null)}>
              关闭
            </Button>,
            !isFeatureAvailable(previewFeature?.key || '') && (
              <Button 
                key="upgrade" 
                type="primary"
                icon={<RocketOutlined />}
                onClick={() => {
                  setPreviewFeature(null);
                  setSelectedTab('upgrade');
                }}
              >
                查看升级方案
              </Button>
            ),
          ]}
          width={700}
        >
          {previewFeature && (
            <div>
              <Paragraph style={{ fontSize: '15px', marginBottom: '24px' }}>
                {previewFeature.description}
              </Paragraph>
              
              <Space direction="vertical" style={{ width: '100%', marginBottom: '24px' }}>
                <Title level={5}>功能权益</Title>
                {previewFeature.benefits.map((b: string, i: number) => (
                  <div key={i} style={{ marginBottom: '12px' }}>
                    <CheckCircleOutlined style={{ color: '#52c41a', marginRight: '12px', fontSize: '16px' }} />
                    <Text style={{ fontSize: '14px' }}>{b}</Text>
                  </div>
                ))}
              </Space>

              {previewFeature.limitations && (
                <Space direction="vertical" style={{ width: '100%', marginBottom: '24px' }}>
                  <Title level={5}>版本限制</Title>
                  {previewFeature.limitations.map((l: string, i: number) => (
                    <div key={i} style={{ marginBottom: '8px' }}>
                      <Text type="secondary" style={{ fontSize: '13px' }}>
                        • {l}
                      </Text>
                    </div>
                  ))}
                </Space>
              )}

              <Divider />

              <Space direction="vertical" style={{ width: '100%', marginBottom: '16px' }}>
                <Title level={5}>所需套餐</Title>
                <Space>
                  {previewFeature.requiredPlan.map((p: string) => (
                    <Tag 
                      key={p} 
                      color={PLAN_DETAILS[p as keyof typeof PLAN_DETAILS]?.color}
                      style={{ 
                        fontSize: '14px',
                        padding: '4px 12px',
                        borderRadius: '12px'
                      }}
                    >
                      {PLAN_DETAILS[p as keyof typeof PLAN_DETAILS]?.name}
                    </Tag>
                  ))}
                </Space>
              </Space>

              <div style={{ 
                padding: '16px', 
                background: isFeatureAvailable(previewFeature.key) ? '#f6ffed' : '#fff7e6',
                borderRadius: '8px',
                border: `1px solid ${isFeatureAvailable(previewFeature.key) ? '#b7eb8f' : '#ffd591'}`
              }}>
                <Space>
                  {isFeatureAvailable(previewFeature.key) ? (
                    <CheckCircleOutlined style={{ color: '#52c41a', fontSize: '20px' }} />
                  ) : (
                    <InfoCircleOutlined style={{ color: '#faad14', fontSize: '20px' }} />
                  )}
                  <Text 
                    strong 
                    style={{ 
                      color: isFeatureAvailable(previewFeature.key) ? '#52c41a' : '#faad14',
                      fontSize: '15px'
                    }}
                  >
                    {isFeatureAvailable(previewFeature.key) ? '✓ 您已拥有此功能' : '✗ 需要升级套餐'}
                  </Text>
                </Space>
              </div>

              {previewFeature.popularity && (
                <div style={{ marginTop: '16px' }}>
                  <Space>
                    <Text type="secondary">用户使用热度:</Text>
                    <Progress 
                      percent={previewFeature.popularity} 
                      size="small"
                      strokeColor="#1890ff"
                      format={(percent) => `${percent}%`}
                    />
                  </Space>
                </div>
              )}
            </div>
          )}
        </Modal>
      </ConfigProvider>
    </div>
  );
};

export default SubscriptionManage;