import { Button, Tooltip } from 'antd'
import { QuestionCircleOutlined } from '@ant-design/icons'
import './ButtonWithTip.css'

/**
 * 带有增强提示的按钮组件
 * @param {Object} props
 * @param {string} props.label - 按钮文本
 * @param {ReactNode} props.icon - 按钮图标
 * @param {string} props.type - 按钮类型
 * @param {boolean} props.danger - 危险按钮
 * @param {boolean} props.disabled - 禁用状态
 * @param {Function} props.onClick - 点击回调
 * @param {Object} props.tip - 提示配置
 * @param {string} props.tip.title - 提示标题
 * @param {string} props.tip.description - 详细描述
 * @param {string} props.tip.shortcut - 快捷键提示
 * @param {Array} props.tip.notes - 注意事项列表
 * @param {string} props.tip.placement - 提示位置
 * @param {boolean} props.showTipIcon - 是否显示提示图标
 * @param {string} props.size - 按钮大小
 */
function ButtonWithTip({
  label,
  icon,
  type = 'default',
  danger = false,
  disabled = false,
  onClick,
  tip,
  showTipIcon = true,
  size = 'middle',
  ...restProps
}) {
  // 如果没有提示配置，直接返回普通按钮
  if (!tip) {
    return (
      <Button
        type={type}
        icon={icon}
        danger={danger}
        disabled={disabled}
        onClick={onClick}
        size={size}
        {...restProps}
      >
        {label}
      </Button>
    )
  }

  // 构建提示内容
  const tooltipContent = (
    <div className="button-tip-content">
      {tip.title && <div className="button-tip-title">{tip.title}</div>}
      {tip.description && <div className="button-tip-description">{tip.description}</div>}
      {tip.shortcut && (
        <div className="button-tip-shortcut">
          <span className="tip-label">快捷键：</span>
          <kbd className="tip-kbd">{tip.shortcut}</kbd>
        </div>
      )}
      {tip.notes && tip.notes.length > 0 && (
        <div className="button-tip-notes">
          <div className="tip-notes-title">注意事项：</div>
          <ul className="tip-notes-list">
            {tip.notes.map((note, index) => (
              <li key={index}>{note}</li>
            ))}
          </ul>
        </div>
      )}
    </div>
  )

  return (
    <Tooltip
      title={tooltipContent}
      placement={tip.placement || 'top'}
      classNames={{ root: 'button-tip-overlay' }}
      mouseEnterDelay={0.3}
      arrow={{ pointAtCenter: true }}
    >
      <div className="button-with-tip-wrapper">
        <Button
          type={type}
          icon={icon}
          danger={danger}
          disabled={disabled}
          onClick={onClick}
          size={size}
          className="button-with-tip"
          {...restProps}
        >
          {label}
        </Button>
        {showTipIcon && !disabled && (
          <QuestionCircleOutlined className="button-tip-indicator" />
        )}
      </div>
    </Tooltip>
  )
}

export default ButtonWithTip