/**
 * @file 沙拉图标组件
 * @description 在选中文本旁显示浮动图标
 */

const ICON_SIZE = 24;
const ICON_COLOR = '#4CAF50'; // 绿色
const OFFSET_X = 8; // 图标相对于选中文本的水平偏移
const OFFSET_Y = -12; // 图标相对于选中文本的垂直偏移

/**
 * 沙拉图标类
 */
export class SaladIcon {
  constructor() {
    this.element = this.createElement();
  }

  /**
   * 创建图标元素
   * @returns {HTMLElement} 图标元素
   */
  createElement() {
    // 创建容器
    const container = document.createElement('div');
    container.style.cssText = `
      position: fixed;
      z-index: 2147483647;
      display: none;
    `;

    // 创建 Shadow DOM
    const shadow = container.attachShadow({ mode: 'open' });
    
    // Shadow DOM 内容
    shadow.innerHTML = `
      <style>
        .icon {
          width: ${ICON_SIZE}px;
          height: ${ICON_SIZE}px;
          background-color: ${ICON_COLOR};
          border-radius: 4px;
          cursor: pointer;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
          transition: transform 0.1s ease, box-shadow 0.1s ease;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .icon:hover {
          transform: scale(1.1);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }
        
        .icon:active {
          transform: scale(0.95);
        }
        
        .salad-symbol {
          color: white;
          font-size: 14px;
          font-weight: bold;
          user-select: none;
        }
      </style>
      <div class="icon">
        <span class="salad-symbol">S</span>
      </div>
    `;

    // 阻止点击事件冒泡（避免触发 document click 导致图标消失）
    container.addEventListener('click', (e) => {
      e.stopPropagation();
    });

    // 添加到页面
    document.body.appendChild(container);
    
    return container;
  }

  /**
   * 显示图标在指定位置
   * @param {number} x - X坐标
   * @param {number} y - Y坐标
   */
  show(x, y) {
    this.element.style.left = `${x + OFFSET_X}px`;
    this.element.style.top = `${y + OFFSET_Y}px`;
    this.element.style.display = 'block';
  }

  /**
   * 隐藏图标
   */
  hide() {
    this.element.style.display = 'none';
  }

  /**
   * 销毁组件
   */
  destroy() {
    this.hide();
    if (this.element.parentNode) {
      this.element.parentNode.removeChild(this.element);
    }
  }
}

/**
 * 创建并显示沙拉图标
 * @param {number} x - X坐标
 * @param {number} y - Y坐标
 * @returns {SaladIcon} 图标实例
 */
export function createSaladIcon(x, y) {
  const icon = new SaladIcon();
  icon.show(x, y);
  return icon;
}
