<script setup>
/**
 * v1.1：区域 ④ —— 待办清单
 * 渲染 Hermes todo 工具输出的完整 JSON（结构：[{content, status, activeForm}]，
 * 也兼容 Hermes 内置 todo_tool 返回的 {todos: [...], summary: {...}} 包装）。
 *
 * status 取值：pending / in_progress / completed / cancelled。
 *
 * 视觉与交互完全对齐 ToolCalls：
 *   - header："待办清单（completed / total）" + 展开箭头
 *   - 节点 running 时强制展开；完成后自动收起；用户点击 header 可手动切换
 */
import { ref, computed, watch } from 'vue'

const props = defineProps({
  todos: { type: Array, default: () => [] },
  nodeRunning: { type: Boolean, default: false },
})

const expanded = ref(false)

const total = computed(() => props.todos.length)
const completed = computed(() => props.todos.filter(t => t.status === 'completed').length)

// 节点 running 时强制展开；变为非 running 时自动收起
watch(() => props.nodeRunning, (running) => {
  expanded.value = running
}, { immediate: true })

function statusLabel(s) {
  return { completed: '已完成', in_progress: '进行中', pending: '待办', cancelled: '已取消' }[s] || s
}
</script>

<template>
  <div v-if="total > 0" class="todo-panel" :class="{ live: nodeRunning }">
    <div class="todo-header" @click="expanded = !expanded">
      <span class="todo-tag">待办清单</span>
      <span class="todo-count">（{{ completed }} / {{ total }}）</span>
      <span class="todo-expand" :class="{ expanded }">▶</span>
    </div>
    <ul v-if="expanded" class="todo-list">
      <li v-for="(t, i) in todos" :key="i" :class="['todo-item', t.status]">
        <div class="body">
          <div class="content">{{ t.content || t.title || '(未命名)' }}</div>
          <div v-if="t.activeForm" class="active-form">{{ t.activeForm }}</div>
        </div>
        <span class="status-tag">{{ statusLabel(t.status) }}</span>
      </li>
    </ul>
  </div>
</template>

<style scoped>
/* v1.1：待办清单外框 —— 与 .tool-calls-wrap 完全一致的视觉语言 */
.todo-panel {
  margin: 6px 10px;
  border-radius: 6px;
  background: rgba(168, 85, 247, 0.05);
  border: 1px solid rgba(168, 85, 247, 0.2);
  overflow: hidden;
  font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', ui-monospace, monospace;
}
.todo-panel.live {
  border-color: rgba(168, 85, 247, 0.5);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.15);
}

/* header —— 与 .tool-calls-header 对齐 */
.todo-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  font-size: 11px;
  background: rgba(168, 85, 247, 0.08);
  cursor: pointer;
  user-select: none;
}

/* "待办清单" —— 与 .tool-calls-tag 一致：紫色加粗 */
.todo-tag {
  color: #c084fc;
  font-weight: 600;
}

/* "（X / X）" —— 与 .tool-calls-count 一致 */
.todo-count {
  color: #888;
  font-size: 10px;
}

/* 展开箭头 —— 与 .tool-calls-expand 一致 */
.todo-expand {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-tertiary, #666);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.todo-expand.expanded {
  transform: rotate(90deg);
}

.todo-list {
  list-style: none;
  padding: 4px 0;
  margin: 0;
}
.todo-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 4px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 11px;
}
.todo-item:last-child {
  border-bottom: none;
}
.todo-item.completed {
  opacity: 0.55;
}
.todo-item.completed .content {
  text-decoration: line-through;
}
.todo-item.in_progress {
  background: rgba(168, 85, 247, 0.08);
}
.body {
  flex: 1;
}
.content {
  color: var(--text-primary, #e0e0e0);
}
.active-form {
  color: var(--text-tertiary, #666);
  font-size: 10px;
  font-style: italic;
}
.status-tag {
  font-size: 9px;
  padding: 1px 5px;
  background: rgba(168, 85, 247, 0.15);
  border-radius: 2px;
  color: #c084fc;
  flex-shrink: 0;
}
</style>
