<template>
  <div
    class="collapsible-block tool-block"
    :class="{
      expanded,
      processing: action.tool.status === 'preparing' || action.tool.status === 'running',
      completed: action.tool.status === 'completed'
    }"
  >
    <div class="collapsible-header" @click="$emit('toggle')">
      <div class="arrow"></div>
      <div class="status-icon">
        <span
          class="tool-icon icon icon-md"
          :class="getToolAnimationClass(action.tool)"
          :style="iconStyle(getToolIcon(action.tool))"
          aria-hidden="true"
        ></span>
      </div>
      <span class="status-text">{{ getToolStatusText(action.tool) }}</span>
      <span class="tool-desc">{{ getToolDescription(action.tool) }}</span>
    </div>
    <div class="collapsible-content">
      <div class="content-inner">
        <div v-if="action.tool.name === 'web_search' && action.tool.result">
          <div class="search-meta">
            <div><strong>搜索内容：</strong>{{ action.tool.result.query || action.tool.arguments.query }}</div>
            <div><strong>主题：</strong>{{ formatSearchTopic(action.tool.result.filters || {}) }}</div>
            <div><strong>时间范围：</strong>{{ formatSearchTime(action.tool.result.filters || {}) }}</div>
            <div><strong>结果数量：</strong>{{ action.tool.result.total_results }}</div>
          </div>
          <div v-if="action.tool.result.results && action.tool.result.results.length" class="search-result-list">
            <div v-for="item in action.tool.result.results" :key="item.url || item.index" class="search-result-item">
              <div class="search-result-title">{{ item.title || '无标题' }}</div>
              <div class="search-result-url">
                <a v-if="item.url" :href="item.url" target="_blank">{{ item.url }}</a><span v-else>无可用链接</span>
              </div>
            </div>
          </div>
          <div v-else class="search-empty">未返回详细的搜索结果。</div>
        </div>
        <div v-else-if="action.tool.name === 'run_python' && action.tool.result">
          <div class="code-block">
            <div class="code-label">代码：</div>
            <pre><code class="language-python">{{ action.tool.result.code || action.tool.arguments.code }}</code></pre>
          </div>
          <div v-if="action.tool.result.output" class="output-block">
            <div class="output-label">输出：</div>
            <pre>{{ action.tool.result.output }}</pre>
          </div>
        </div>
        <div v-else>
          <pre>{{ JSON.stringify(action.tool.result || action.tool.arguments, null, 2) }}</pre>
        </div>
      </div>
    </div>
    <div
      v-if="action.tool.status === 'preparing' || action.tool.status === 'running'"
      class="progress-indicator"
    ></div>
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: 'ToolAction' });

defineProps<{
  action: any;
  expanded: boolean;
  iconStyle: (key: string) => Record<string, string>;
  getToolAnimationClass: (tool: any) => Record<string, unknown>;
  getToolIcon: (tool: any) => string;
  getToolStatusText: (tool: any) => string;
  getToolDescription: (tool: any) => string;
  formatSearchTopic: (filters: Record<string, any>) => string;
  formatSearchTime: (filters: Record<string, any>) => string;
  streamingMessage: boolean;
}>();

defineEmits<{ (event: 'toggle'): void }>();
</script>
