/**
 * 上下文显示组件
 * 用于显示已选择的文件、文件夹、图片和文档
 */

/**
 * 获取上下文显示区域的 HTML 内容
 */
export function getContextDisplayContent(): string {
  return `
    <div class="context-display-area" id="contextDisplayArea" style="display: none;">
      <div class="context-items-container" id="contextItemsContainer">
        <!-- 动态添加的上下文项将显示在这里 -->
      </div>
    </div>
  `;
}

/**
 * 获取上下文显示区域的样式
 */
export function getContextDisplayStyles(): string {
  return `
    /* 上下文显示区域 */
    .context-display-area {
      margin-bottom: 8px;
      padding: 8px;
      background: rgba(128, 128, 128, 0.1);
      border-radius: 6px;
      border: 1px solid var(--vscode-input-border);
    }

    .context-items-container {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    /* 上下文项样式 */
    .context-item {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      background: var(--vscode-input-background);
      border: 1px solid var(--vscode-input-border);
      border-radius: 4px;
      font-size: 12px;
      color: var(--vscode-foreground);
      max-width: 300px;
      transition: all 0.2s ease;
    }

    .context-item.clickable {
      cursor: pointer;
    }

    .context-item.clickable:hover {
      background: var(--vscode-list-hoverBackground);
    }

    .context-item svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      opacity: 0.8;
    }

    .context-item-name {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .context-item-remove {
      width: 14px;
      height: 14px;
      cursor: pointer;
      opacity: 0.6;
      transition: opacity 0.2s ease;
      flex-shrink: 0;
    }

    .context-item-remove:hover {
      opacity: 1;
      color: #f56c6c;
    }

    /* 图片预览样式 */
    .context-item.image-item {
      position: relative;
    }

    .context-item-preview {
      width: 40px;
      height: 40px;
      object-fit: cover;
      border-radius: 3px;
      border: 1px solid var(--vscode-input-border);
    }
  `;
}

/**
 * 获取上下文显示区域的脚本
 */
export function getContextDisplayScript(): string {
  return `
    // 存储上下文项
    let contextItems = [];

    // 获取文件图标 SVG
    function getFileIcon() {
      return '<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>';
    }

    // 获取文件夹图标 SVG
    function getFolderIcon() {
      return '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M880 298.4H521L403.7 186.2c-1.5-1.4-3.5-2.2-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32z" fill="currentColor"/></svg>';
    }

    // 获取图片图标 SVG
    function getImageIcon() {
      return '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32z" fill="currentColor"/></svg>';
    }

    // 获取文档图标 SVG
    function getDocumentIcon() {
      return '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32z" fill="currentColor"/></svg>';
    }

    // 获取代码图标 SVG
    function getCodeIcon() {
      return '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32z m-40 728H184V184h656v656z m-484.7-122.1l39.6-39.5 113.1 113.1-39.6 39.5-113.1-113.1z m226.4-290.2l113.1 113.1-39.6 39.5-113.1-113.1 39.6-39.5z" fill="currentColor"/></svg>';
    }

    // 获取删除图标 SVG
    function getRemoveIcon() {
      return '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9c-4.4 5.2-.7 13.1 6.1 13.1h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" fill="currentColor"/></svg>';
    }

    // 提取文件名
    function getFileName(path) {
      return path.split(/[\\\\/]/).pop();
    }

    // 添加上下文项
    function addContextItem(type, path, displayPath) {
      const exists = contextItems.some(item => item.type === type && item.path === path);
      if (exists) return;

      const id = Date.now() + Math.random();
      contextItems.push({ id, type, path, displayPath: displayPath || '' });
      renderContextItems();
    }

    // 删除上下文项
    function removeContextItem(id) {
      contextItems = contextItems.filter(item => item.id !== id);
      renderContextItems();
    }

    // 渲染上下文项
    function renderContextItems() {
      const container = document.getElementById('contextItemsContainer');
      const displayArea = document.getElementById('contextDisplayArea');

      if (!container || !displayArea) return;

      if (contextItems.length === 0) {
        displayArea.style.display = 'none';
        return;
      }

      displayArea.style.display = 'block';
      container.innerHTML = contextItems.map(item => {
        let icon = '';
        switch(item.type) {
          case 'file': icon = getFileIcon(); break;
          case 'folder': icon = getFolderIcon(); break;
          case 'image': icon = getImageIcon(); break;
          case 'document': icon = getDocumentIcon(); break;
          case 'code': icon = getCodeIcon(); break;
        }

        const clickable = item.type !== 'folder' ? 'clickable' : '';
        const onclick = item.type !== 'folder' ? \`onclick="window.handleContextItemClick(\${item.id})"\` : '';

        return \`
          <div class="context-item \${clickable}" title="\${item.path || item.displayPath}" \${onclick}>
            \${icon}
            <span class="context-item-name">\${item.displayPath || getFileName(item.path)}</span>
            <span class="context-item-remove" onclick="event.stopPropagation(); removeContextItem(\${item.id})">
              \${getRemoveIcon()}
            </span>
          </div>
        \`;
      }).join('');
    }

    // 全局访问函数
    window.handleContextItemClick = function(id) {
      const item = contextItems.find(i => i.id === id);
      if (!item || item.type === 'folder') return;

      if (item.type === 'code') {
        const codeData = JSON.parse(item.path);
        vscode.postMessage({
          command: 'openFileWithSelection',
          filePath: codeData.fileName,
          startLine: codeData.startLine,
          endLine: codeData.endLine
        });
      } else {
        vscode.postMessage({
          command: 'openFile',
          filePath: item.path
        });
      }
    };

    // 处理后端返回的文件选择结果
    window.addEventListener('message', event => {
      const message = event.data;

      switch(message.command) {
        case 'contextFilesSelected':
          if (message.files && message.files.length > 0) {
            message.files.forEach(file => addContextItem('file', file));
          }
          break;
        case 'contextFoldersSelected':
          if (message.folders && message.folders.length > 0) {
            message.folders.forEach(folder => addContextItem('folder', folder));
          }
          break;
        case 'contextImagesSelected':
          if (message.images && message.images.length > 0) {
            message.images.forEach(image => addContextItem('image', image));
          }
          break;
        case 'contextDocumentsSelected':
          if (message.documents && message.documents.length > 0) {
            message.documents.forEach(doc => addContextItem('document', doc));
          }
          break;
        case 'addCodeContext':
          // 添加代码上下文
          const displayName = \`\${message.fileName.split(/[\\\\/]/).pop()}:\${message.startLine}-\${message.endLine}\`;
          const codeData = {
            fileName: message.fileName,
            startLine: message.startLine,
            endLine: message.endLine,
            code: message.code,
            languageId: message.languageId
          };
          addContextItem('code', JSON.stringify(codeData), displayName);
          break;
      }
    });

    // 获取所有上下文项（供发送消息时使用）
    window.getContextItems = function() {
      return contextItems;
    };

    // 清空上下文项（供清空对话时使用）
    window.clearContextItems = function() {
      contextItems = [];
      renderContextItems();
    };
  `;
}