import { Tag } from 'antd'
import {
  InfoCircleOutlined,
  BulbOutlined,
  WarningOutlined,
  CloseOutlined,
} from '@ant-design/icons'
import './BottomHintBar.css'

/**
 * 底部固定提示栏组件
 * 在页面底部显示当前悬停按钮的实时说明
 * @param {Object} props
 * @param {boolean} props.visible - 是否显示提示栏
 * @param {Object} props.hintInfo - 当前提示信息
 * @param {Function} props.onClose - 关闭回调
 * @param {string} props.theme - 主题：light, dark, gradient
 */
function BottomHintBar({ visible = false, hintInfo = null, onClose, theme = 'gradient' }) {
  if (!visible || !hintInfo) return null

  return (
    <div
      className={`bottom-hint-bar bottom-hint-bar-${theme}`}
      onMouseEnter={(e) => e.stopPropagation()}
    >
      <div className="hint-bar-container">
        {/* 左侧：图标和标题 */}
        <div className="hint-bar-left">
          <div className="hint-bar-icon">{hintInfo.icon}</div>
          <div className="hint-bar-title-section">
            <h4 className="hint-bar-title">{hintInfo.title}</h4>
            {hintInfo.badge && (
              <Tag color={hintInfo.badge.color} className="hint-bar-badge">
                {hintInfo.badge.text}
              </Tag>
            )}
          </div>
        </div>

        {/* 中间：主要信息 */}
        <div className="hint-bar-center">
          {/* 描述 */}
          {hintInfo.description && (
            <div className="hint-bar-description">
              <InfoCircleOutlined className="hint-info-icon" />
              <span>{hintInfo.description}</span>
            </div>
          )}

          {/* 快速提示 */}
          {hintInfo.quickTip && (
            <div className="hint-bar-quick-tip">
              <BulbOutlined className="hint-tip-icon" />
              <span>{hintInfo.quickTip}</span>
            </div>
          )}

          {/* 警告 */}
          {hintInfo.warning && (
            <div className="hint-bar-warning">
              <WarningOutlined className="hint-warning-icon" />
              <span>{hintInfo.warning}</span>
            </div>
          )}
        </div>

        {/* 右侧：快捷键和关闭 */}
        <div className="hint-bar-right">
          {hintInfo.shortcut && (
            <div className="hint-bar-shortcut">
              <span className="shortcut-label">快捷键</span>
              <kbd className="shortcut-kbd">{hintInfo.shortcut}</kbd>
            </div>
          )}
          {onClose && (
            <button className="hint-bar-close" onClick={onClose}>
              <CloseOutlined />
            </button>
          )}
        </div>
      </div>

      {/* 进度指示条 */}
      <div className="hint-bar-progress" />
    </div>
  )
}

export default BottomHintBar