/**
 * 思考过程组件
 *
 * 功能说明:
 * - 显示 AI 的思考过程
 * - 支持展开/折叠功能
 * - 提供打字机效果的流式显示
 */

/**
 * 获取思考过程组件的 HTML 内容
 * @param thinking - 思考内容
 * @param isExpanded - 是否默认展开
 */
export function getThinkingProcessContent(
  thinking: string = "",
  isExpanded: boolean = false
): string {
  return `
    <div class="thinking-process-container ${isExpanded ? "expanded" : ""}">
      <div class="thinking-header">
        <div class="thinking-icon-wrapper">
          <svg class="thinking-icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <span class="thinking-title">思考过程</span>
      </div>
      <div class="thinking-content">
        <div class="thinking-text">${thinking || "正在思考中..."}</div>
      </div>
    </div>
  `;
}

/**
 * 获取思考过程组件的样式
 */
export function getThinkingProcessStyles(): string {
  return `
    .thinking-process-container {
      margin: 12px 0;
      border-radius: 6px;
      background: var(--vscode-editor-background);
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .thinking-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5px 5px;
      cursor: pointer;
      user-select: none;
      background: var(--vscode-input-background);
      transition: background 0.2s ease;
      width: 85px;
      border-radius: 20px;
      position: relative;
      overflow: hidden;
    }

    .thinking-header::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
      );
      animation: none;
    }

    .thinking-process-container.typing .thinking-header::before {
      animation: shine 2s ease-in-out infinite;
    }

    @keyframes shine {
      0% {
        left: -100%;
      }
      50%, 100% {
        left: 100%;
      }
    }

    .thinking-header:hover {
      background: var(--vscode-list-hoverBackground);
    }

    .thinking-icon-wrapper {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease;
    }

    .thinking-process-container.expanded .thinking-icon-wrapper {
      transform: rotate(90deg);
    }

    .thinking-icon {
      color: var(--vscode-descriptionForeground);
    }

    .thinking-title {
      flex: 1;
      font-size: 13px;
      font-weight: 500;
      color: var(--vscode-foreground);
    }

    .thinking-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease, padding 0.3s ease;
      padding: 0 12px;
    }

    .thinking-process-container.expanded .thinking-content {
      max-height: 500px;
      padding: 12px;
      overflow-y: auto;
    }

    .thinking-text {
      font-size: 12px;
      line-height: 1.6;
      color: var(--vscode-descriptionForeground);
      white-space: pre-wrap;
      word-wrap: break-word;
      padding-left: 12px;
      border-left: 2px solid var(--vscode-textBlockQuote-border);
      position: relative;
    }

    /* 打字机效果 */
    .thinking-text.typing::after {
      content: '▋';
      animation: blink 1s step-end infinite;
      margin-left: 2px;
    }

    @keyframes blink {
      0%, 50% {
        opacity: 1;
      }
      51%, 100% {
        opacity: 0;
      }
    }

    /* 滚动条样式 */
    .thinking-content::-webkit-scrollbar {
      width: 6px;
    }

    .thinking-content::-webkit-scrollbar-track {
      background: transparent;
    }

    .thinking-content::-webkit-scrollbar-thumb {
      background: var(--vscode-scrollbarSlider-background);
      border-radius: 3px;
    }

    .thinking-content::-webkit-scrollbar-thumb:hover {
      background: var(--vscode-scrollbarSlider-hoverBackground);
    }
  `;
}