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

const ICON_SIZE = 24;
const ICON_COLOR = '#4CAF50';
const OFFSET_X = 8;
const OFFSET_Y = -12;

/**
 * 沙拉图标类
 */
export class SaladIcon {
  constructor(options = {}) {
    this.options = options;
    this.onClick = options.onClick || null;
    this.element = this.createElement();
    this._isVisible = false;
    this._clickHandler = null;
  }

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

    const shadow = container.attachShadow({ mode: 'open' });
    
    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.body.appendChild(container);
    
    return container;
  }

  /**
   * 绑定点击事件
   */
  bindClickEvent() {
    if (this._clickHandler) return;
    
    this._clickHandler = (e) => {
      e.stopPropagation();
      console.log('[SaladDict] Icon clicked');
      
      if (this.onClick) {
        this.onClick(e);
      }
    };
    
    this.element.addEventListener('click', this._clickHandler);
  }

  /**
   * 解绑点击事件
   */
  unbindClickEvent() {
    if (!this._clickHandler) return;
    
    this.element.removeEventListener('click', this._clickHandler);
    this._clickHandler = null;
  }

  /**
   * 显示图标
   */
  show(x, y) {
    if (this._isVisible) return;
    
    this.element.style.left = `${x + OFFSET_X}px`;
    this.element.style.top = `${y + OFFSET_Y}px`;
    this.element.style.display = 'block';
    this._isVisible = true;
    
    // 绑定点击事件
    this.bindClickEvent();
  }

  /**
   * 隐藏图标
   */
  hide() {
    if (!this._isVisible) return;
    
    this.element.style.display = 'none';
    this._isVisible = false;
    
    // 解绑点击事件
    this.unbindClickEvent();
  }

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

/**
 * 创建并显示沙拉图标
 */
export function createSaladIcon(x, y, options = {}) {
  const icon = new SaladIcon(options);
  icon.show(x, y);
  return icon;
}
