<template>
  <div class="s3">
    <div class="s3__messages">
      <MessageShell role="user" name="用户" meta="10:40">
        <UserBubble content="@team 帮我设计一个电商订单模块" />
      </MessageShell>

      <MessageShell role="assistant" name="AI Agent" meta="10:40">
        <AssistantText :message="planIntroMessage" />
        <TeamPlanCard
          :phases="phases"
          lead-name="tech_lead"
          lead-avatar="T"
          lead-color="#3b82f6"
        />
      </MessageShell>

      <MessageShell role="assistant" name="tech_lead" meta="10:41" avatar="T" color="#3b82f6">
        <AssistantText :message="expertMessage" />
      </MessageShell>
    </div>
  </div>
</template>

<script setup lang="ts">
import { MessageShell, UserBubble, AssistantText, TeamPlanCard } from '@/components/chat/messages'
import type { IChatMessage, ITeamPlanPhase } from '@/api/types'

const planIntroMessage: IChatMessage = {
  id: 's3-plan-intro',
  role: 'assistant',
  content: '已组建开发专家团队，正在分解任务：',
  timestamp: new Date().toISOString(),
  status: 'completed',
}

const phases: ITeamPlanPhase[] = [
  {
    id: 'p1',
    name: '需求拆解与表设计',
    assigned_expert: 'tech_lead',
    status: 'completed',
    depends_on: [],
  },
  {
    id: 'p2',
    name: '后端 API 实现',
    assigned_expert: 'backend_engineer',
    status: 'in_progress',
    depends_on: ['p1'],
  },
  {
    id: 'p3',
    name: '前端订单页面',
    assigned_expert: 'frontend_engineer',
    status: 'pending',
    depends_on: ['p2'],
  },
  {
    id: 'p4',
    name: '接口测试与 Code Review',
    assigned_expert: 'qa_engineer',
    status: 'pending',
    depends_on: ['p3'],
  },
]

const expertMessage: IChatMessage = {
  id: 's3-expert',
  role: 'assistant',
  content: '我建议订单表至少包含：`order_id`、`user_id`、`status`、`total_amount`、`created_at`。同时引入状态机管理订单生命周期，避免直接修改状态字段。',
  timestamp: new Date().toISOString(),
  status: 'completed',
}
</script>

<style scoped>
.s3 {
  max-width: var(--max-chat-width);
  margin: 0 auto;
  padding: 48px var(--space-4) 24px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.s3__messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
</style>
