<template>
  <div v-if="items.length" class="todo-card">
    <div class="todo-card__header" @click="collapsed = !collapsed">
      <span class="todo-card__title">任务规划</span>
      <span class="todo-card__summary">
        {{ summary?.completed || 0 }}/{{ summary?.total || items.length }} 完成
      </span>
      <div class="todo-card__progress-bar">
        <div
          class="todo-card__progress-fill"
          :style="{ width: progressPercent + '%' }"
        />
      </div>
      <el-icon class="todo-card__toggle">
        <ArrowUp v-if="!collapsed" />
        <ArrowDown v-else />
      </el-icon>
    </div>

    <el-collapse-transition>
      <div v-if="!collapsed" class="todo-card__list">
        <transition-group name="todo-item">
          <div
            v-for="item in items"
            :key="item.id"
            class="todo-card__item"
            :class="[`todo-card__item--${item.status}`]"
          >
            <span class="todo-card__status-icon">
              <template v-if="item.status === 'completed'">&#x2705;</template>
              <template v-else-if="item.status === 'in_progress'">
                <span class="todo-card__spinner" />
              </template>
              <template v-else-if="item.status === 'cancelled'">&#x274C;</template>
              <template v-else>&#x2B1C;</template>
            </span>
            <span
              class="todo-card__content"
              :class="{
                'is-done': item.status === 'completed',
                'is-cancelled': item.status === 'cancelled',
                'is-active': item.status === 'in_progress',
              }"
            >
              {{ item.content }}
            </span>
            <el-tag
              v-if="item.status === 'in_progress'"
              size="small"
              type="primary"
              effect="light"
            >
              进行中
            </el-tag>
          </div>
        </transition-group>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue';
import type { TodoItem, TodoSummary } from '../types/index';

const props = defineProps<{
  items: TodoItem[];
  summary?: TodoSummary | null;
}>();

const collapsed = ref(false);

const progressPercent = computed(() => {
  const total = props.summary?.total || props.items.length;
  const completed = props.summary?.completed || 0;
  return total > 0 ? Math.round((completed / total) * 100) : 0;
});
</script>

<style lang="scss" scoped>
.todo-card {
  width: min(100%, var(--chat-content-max-width, 760px));
  margin: 8px 0 10px;
  border-radius: 12px;
  border: 1px solid var(--el-border-color-lighter);
  background: linear-gradient(180deg, var(--el-bg-color) 0%, var(--el-fill-color-lighter) 100%);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  box-sizing: border-box;
}

.todo-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  min-height: 42px;

  &:hover {
    background: rgba(255, 255, 255, 0.5);
  }
}

.todo-card__title {
  font-weight: 600;
  white-space: nowrap;
}

.todo-card__summary {
  font-size: 11px;
  color: var(--el-color-success-dark-2);
  background: var(--el-color-success-light-9);
  border: 1px solid var(--el-color-success-light-7);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

.todo-card__progress-bar {
  flex: 1;
  height: 6px;
  min-width: 48px;
  background: color-mix(in srgb, var(--el-color-success) 10%, var(--el-fill-color));
  border-radius: 999px;
  overflow: hidden;
}

.todo-card__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--el-color-success-light-3) 0%, var(--el-color-success) 100%);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.todo-card__toggle {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  flex-shrink: 0;
}

.todo-card__list {
  padding: 0 12px 10px;
}

.todo-card__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 13px;
  transition: all 0.3s ease;
  border-radius: 10px;
}

.todo-card__item--in_progress {
  background: rgba(64, 158, 255, 0.1);
  border: 1px solid rgba(64, 158, 255, 0.16);
}

.todo-card__item--completed {
  background: rgba(103, 194, 58, 0.06);
}

.todo-card__item--cancelled {
  background: rgba(245, 108, 108, 0.06);
}

.todo-card__status-icon {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  font-size: 14px;
}

.todo-card__content {
  flex: 1;
  min-width: 0;
  line-height: 1.5;
}

.todo-card__content.is-done {
  text-decoration: line-through;
  color: var(--el-text-color-placeholder);
}

.todo-card__content.is-cancelled {
  text-decoration: line-through;
  color: var(--el-text-color-placeholder);
}

.todo-card__content.is-active {
  font-weight: 600;
  color: var(--el-color-primary);
}

.todo-card__spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--el-color-primary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.todo-item-enter-active,
.todo-item-leave-active {
  transition: all 0.3s ease;
}

.todo-item-enter-from,
.todo-item-leave-to {
  opacity: 0;
  transform: translateX(-10px);
}
</style>
