<template>
  <div class="tool-card" :class="[`tool-card--${status}`]">
    <div class="tool-card__header">
      <el-icon :class="{ 'is-rotating': status === 'running' }">
        <Loading v-if="status === 'running'" />
        <CircleCheck v-else-if="status === 'done'" />
        <CircleClose v-else />
      </el-icon>
      <span class="tool-card__name">{{ label || name }}</span>
      <el-tag v-if="status === 'done'" size="small" type="info">完成</el-tag>
      <el-tag v-else-if="status === 'error'" size="small" type="danger">失败</el-tag>
    </div>

    <transition name="fade">
      <div v-if="status === 'done' && result" class="tool-card__result">
        <el-button text size="small" @click="showResult = !showResult">
          {{ showResult ? '收起' : '查看结果' }}
        </el-button>
      </div>
    </transition>

    <el-collapse-transition>
      <div v-if="showResult && result" class="tool-card__result-content">
        <pre class="tool-card__result-pre">{{ typeof result === 'string' ? result : JSON.stringify(result, null, 2) }}</pre>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Loading, CircleCheck, CircleClose } from '@element-plus/icons-vue';

defineProps<{
  name: string;
  label?: string;
  status: 'running' | 'done' | 'error';
  result?: any;
  tokens?: number | { input: number; output: number; total: number; apiCalls?: number };
}>();

const showResult = ref(false);
</script>

<style lang="scss" scoped>
.tool-card {
  width: min(100%, var(--chat-content-max-width, 760px));
  margin: 6px 0 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--tool-border-color) 18%, transparent);
  border-left-width: 3px;
  background: var(--el-bg-color);
  font-size: 13px;
  box-sizing: border-box;
  transition: all 0.24s ease;
}

.tool-card--running { --tool-border-color: var(--el-color-info); }
.tool-card--done { --tool-border-color: var(--el-color-info); }
.tool-card--error { --tool-border-color: var(--el-color-danger); }

.tool-card__header {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.tool-card__name {
  flex: 1;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--el-text-color-secondary);
}

.is-rotating {
  animation: rotating 1.5s linear infinite;
}

@keyframes rotating {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.tool-card__result { margin-top: 6px; }

.tool-card__result-content { margin-top: 6px; }

.tool-card__result-pre {
  margin: 0;
  padding: 8px 10px;
  background: var(--el-fill-color-lighter);
  border: 1px solid var(--el-border-color-extra-light);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  max-height: 160px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

:deep(.el-tag) {
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
}

:deep(.el-button.is-text) {
  padding: 0;
  font-size: 12px;
}

.fade-enter-active,
.fade-leave-active { transition: opacity 0.3s ease; }
.fade-enter-from,
.fade-leave-to { opacity: 0; }
</style>
