/**
 * 文件路径标签组件
 * 功能：显示可点击的文件路径标签
 * 使用场景：在用户消息中显示上下文文件
 */

/**
 * 获取文件路径标签的样式
 */
export function getFilePathTagStyles(): string {
  return `
    /* 文件路径标签 */
    .file-path-tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      margin-right: 6px;
      background: rgba(0, 122, 204, 0.15);
      border: 1px solid rgba(0, 122, 204, 0.3);
      border-radius: 4px;
      color: #4fc3f7;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: 'Consolas', 'Monaco', monospace;
    }

    .file-path-tag:hover {
      background: rgba(0, 122, 204, 0.25);
      border-color: rgba(0, 122, 204, 0.5);
    }

    .file-path-tag svg {
      width: 12px;
      height: 12px;
      opacity: 0.8;
    }
  `;
}

/**
 * 获取文件路径标签的脚本
 */
export function getFilePathTagScript(): string {
  return `
    // 处理文件路径标签点击
    function handleFilePathClick(filePath) {
      vscode.postMessage({
        command: 'openFile',
        filePath: filePath
      });
    }

    // 创建文件路径标签
    window.createFilePathTag = function(filePath) {
      const fileIcon = '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7z" fill="currentColor"/></svg>';
      const escapedPath = filePath.replace(/\\\\/g, '\\\\\\\\').replace(/'/g, "\\\\'");
      return '<span class="file-path-tag" onclick="handleFilePathClick(\\'' + escapedPath + '\\')">' + fileIcon + filePath + '</span>';
    };
  `;
}
