// src/components/Subscription/SubscriptionBadge.js
import React from 'react';
import { Box, Text, Tooltip, useColorModeValue } from '@chakra-ui/react';
import PropTypes from 'prop-types';

export default function SubscriptionBadge({ subscriptionInfo, onClick }) {
  // 根据订阅类型返回样式配置
  const getBadgeStyles = () => {
    if (subscriptionInfo.type === 'max') {
      return {
        bg: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        color: 'white',
        icon: '👑',
        label: 'Max',
        shadow: '0 4px 12px rgba(118, 75, 162, 0.4)',
        hoverShadow: '0 6px 16px rgba(118, 75, 162, 0.5)',
      };
    }
    if (subscriptionInfo.type === 'pro') {
      return {
        bg: 'linear-gradient(135deg, #667eea 0%, #3182CE 100%)',
        color: 'white',
        icon: '💎',
        label: 'Pro',
        shadow: '0 4px 12px rgba(49, 130, 206, 0.4)',
        hoverShadow: '0 6px 16px rgba(49, 130, 206, 0.5)',
      };
    }
    // 基础版
    return {
      bg: 'transparent',
      color: useColorModeValue('gray.600', 'gray.400'),
      icon: '',
      label: '基础版',
      border: '1.5px solid',
      borderColor: useColorModeValue('gray.300', 'gray.600'),
      shadow: 'none',
      hoverShadow: 'none',
    };
  };

  const styles = getBadgeStyles();

  // 智能动态 Tooltip 文本
  const getTooltipText = () => {
    const { type, days_left, is_active } = subscriptionInfo;

    // 基础版用户
    if (type === 'free') {
      return '💡 升级到 Pro 或 Max\n解锁高级功能';
    }

    // 已过期
    if (!is_active) {
      return `❌ ${type === 'pro' ? 'Pro' : 'Max'} 会员已过期\n点击续费恢复权益`;
    }

    // 紧急状态 (<7 天)
    if (days_left < 7) {
      return `⚠️ ${type === 'pro' ? 'Pro' : 'Max'} 会员 ${days_left} 天后到期!\n立即续费保持权益`;
    }

    // 提醒状态 (7-30 天)
    if (days_left < 30) {
      return `⏰ ${type === 'pro' ? 'Pro' : 'Max'} 会员即将到期\n还有 ${days_left} 天 · 点击续费`;
    }

    // 正常状态 (>30 天)
    return `${type === 'pro' ? '💎' : '👑'} ${type === 'pro' ? 'Pro' : 'Max'} 会员 · ${days_left} 天后到期\n点击查看详情`;
  };

  return (
    <Tooltip
      label={getTooltipText()}
      hasArrow
      placement="bottom"
      fontSize="sm"
      px={3}
      py={2}
      borderRadius="md"
      bg={useColorModeValue('gray.700', 'gray.300')}
      color={useColorModeValue('white', 'gray.800')}
      whiteSpace="pre-line"
      textAlign="center"
      maxW="250px"
    >
      <Box
        as="button"
        onClick={onClick}
        px={3}
        py={1.5}
        borderRadius="full"
        bg={styles.bg}
        color={styles.color}
        border={styles.border}
        borderColor={styles.borderColor}
        fontWeight="600"
        fontSize="sm"
        cursor="pointer"
        transition="all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
        boxShadow={styles.shadow}
        _hover={{
          transform: 'translateY(-2px)',
          boxShadow: styles.hoverShadow || styles.shadow,
        }}
        _active={{
          transform: 'translateY(0)',
        }}
      >
        {styles.icon && <span style={{ marginRight: '4px' }}>{styles.icon}</span>}
        {styles.label}
      </Box>
    </Tooltip>
  );
}

SubscriptionBadge.propTypes = {
  subscriptionInfo: PropTypes.shape({
    type: PropTypes.oneOf(['free', 'pro', 'max']).isRequired,
    days_left: PropTypes.number,
    is_active: PropTypes.bool,
  }).isRequired,
  onClick: PropTypes.func.isRequired,
};