import React from 'react';
import { message, Tooltip } from 'antd';
import { IconButton, Iconify } from '@/components/icon';
import { useThemeMode } from '@/store/settingStore';
import { ThemeMode } from '@/types/enum';

interface MyTooltipProps {
  title: React.ReactNode;
  children: React.ReactNode;
  // 自定义 placement 类型，包含所有有效的 placement 选项
  placement?:
  | 'top' | 'left' | 'right' | 'bottom'
  | 'topLeft' | 'topRight'
  | 'bottomLeft' | 'bottomRight'
  | 'leftTop' | 'leftBottom'
  | 'rightTop' | 'rightBottom';
  shouldWrapChildren?: boolean;
  [key: string]: unknown; // 修改为unknown代替any
}

const MyTooltip: React.FC<MyTooltipProps> = ({
  title,
  children,
  placement = 'topRight',
  shouldWrapChildren = false,
  ...props
}) => {
  // 获取当前主题模式
  const themeMode = useThemeMode();
  const isDarkMode = themeMode === ThemeMode.Dark;
  
  // 复制按钮点击处理函数
  const handleCopy = () => {
    // 处理 title 可能为 JSX 的情况，将其提取为字符串
    const textToCopy = typeof title === 'string' ? title : extractTextFromTitle(title);

    if (textToCopy) {
      navigator.clipboard.writeText(textToCopy)
        .then(() => {
          message.success('内容已复制到剪贴板');
        })
        .catch((err) => {
          message.error('复制失败');
          console.error('复制失败:', err);
        });
    } else {
      message.error('无法复制非文本内容');
    }
  };

  /**
   * 从React节点中提取文本内容的函数
   * 递归处理各种类型的节点并提取文本
   */
  const extractTextFromTitle = (node: React.ReactNode): string => {
    // 处理字符串类型
    if (typeof node === 'string') {
      return node;
    }

    // 处理数组类型
    if (Array.isArray(node)) {
      return node.map(child => extractTextFromTitle(child)).join('');
    }

    // 处理React元素
    if (React.isValidElement(node)) {
      if (node.type === 'br') {
        return '\n'; // 保留 <br /> 标签为换行符
      }
      
      // 使用类型断言安全地处理props和children
      const props = node.props as { children?: React.ReactNode };
      return extractTextFromTitle(props.children || '');
    }

    // 处理其他类型（如null、undefined等）
    return '';
  };

  // 设置毛玻璃效果样式
  const glassStyle = {
    backgroundColor: isDarkMode 
      ? 'rgba(15, 23, 42, 0.85)' // 深色模式背景色
      : 'rgba(255, 255, 255, 0.85)', // 浅色模式背景色
    backdropFilter: 'blur(8px)',
    boxShadow: isDarkMode 
      ? '0 4px 12px rgba(0, 0, 0, 0.3)' 
      : '0 4px 12px rgba(0, 0, 0, 0.1)',
    border: isDarkMode 
      ? '1px solid rgba(255, 255, 255, 0.1)' 
      : '1px solid rgba(0, 0, 0, 0.05)',
  };

  return (
    <Tooltip
      title={
        <div style={{ position: 'relative', paddingRight: '24px' }}>
          {/* 增加右侧 padding 确保按钮不遮挡内容 */}
          <div style={{ paddingRight: '10px', lineHeight: '1.6' }}>{title}</div>
          {/* 复制按钮 */}
          <IconButton
            style={{
              position: 'absolute',
              top: '-2px',
              right: '0px',
              color: isDarkMode ? '#4B9EF6' : '#1890ff',
              padding: 4,
            }}
            onClick={handleCopy}
          >
            <Iconify icon="eva:copy-fill" size={16} />
          </IconButton>
        </div>
      }
      placement={placement}
      classNames={{
        root: "customTooltip"
      }}
      styles={{
        root: {
          maxWidth: '1200px',
          width: 'auto',
        },
        body: {
          padding: '14px',
          borderRadius: '10px',
          whiteSpace: 'pre-wrap',
          color: isDarkMode ? '#E2E8F0' : '#1A202C', // 适应主题的文本颜色
          fontSize: '13px', // 略微增大字体
          lineHeight: '1.6',
          letterSpacing: '0.3px',
          ...glassStyle // 应用毛玻璃效果
        }
      }}
      {...props}
    >
      {shouldWrapChildren ? <span>{children}</span> : children}
    </Tooltip>
  );
};

export default MyTooltip;
