frontend/src/views/SessionView.vue

<template>
  <div class="session-wrap">
    <!-- 顶部导航 -->
    <div class="top-bar">
      <el-button text @click="router.push('/')">
        <el-icon><ArrowLeft /></el-icon> 返回首页
      </el-button>
      <span class="session-id">会话 {{ sessionId.slice(0, 8) }}…</span>
    </div>

    <!-- 步骤条 -->
    <div class="steps-container">
      <el-steps :active="activeStep" finish-status="success" align-center>
        <el-step title="需求确认" :icon="ChatLineRound" />
        <el-step title="PM 分析" :icon="EditPen" />
        <el-step title="QA 用例" :icon="List" />
        <el-step title="Dev 代码" :icon="Monitor" />
        <el-step title="测试执行" :icon="Cpu" />
      </el-steps>
    </div>

    <div class="content-area">
      <!-- ===================== STEP 0: 需求澄清 ===================== -->
      <template v-if="activeStep === 0">
        <el-card class="step-card" shadow="never">
          <template #header>
            <div class="card-header">
              <el-icon color="#409eff"><ChatLineRound /></el-icon>
              <span>需求澄清</span>
              <el-tag :type="statusTagType" size="small">{{ statusLabel }}</el-tag>
            </div>
          </template>

          <!-- 需求原文 -->
          <div class="req-block">
            <div class="block-label">📋 原始需求</div>
            <div class="req-text">{{ rawRequirement }}</div>
          </div>

          <!-- 对话历史 -->
          <div v-if="clarifyHistory.length" class="chat-history">
            <div
              v-for="(msg, i) in clarifyHistory"
              :key="i"
              :class="['chat-msg', msg.role]"
            >
              <div class="chat-bubble">{{ msg.content }}</div>
              <div class="chat-role">{{ msg.role === 'assistant' ? '🤖 AI' : '👤 您' }}</div>
            </div>
          </div>

          <!-- AI 追问区域 -->
          <template v-if="status === 'clarifying'">
            <el-divider />
            <div class="block-label" style="margin-bottom:12px">💬 请回答 AI 的问题：</div>
            <el-input
              v-model="clarifyInput"
              type="textarea"
              :rows="3"
              placeholder="请输入您的补充说明…"
              :disabled="loading"
            />
            <div class="btn-row">
              <el-button type="primary" :loading="loading" @click="handleClarify">
                发送
              </el-button>
            </div>
          </template>

          <!-- 需求已确认，可进入下一步 -->
          <template v-if="status === 'pm_ready' || status === 'pm_done' || status === 'qa_done' || status === 'dev_done'">
            <el-alert
              title="需求已确认，可以开始 PM 需求分析"
              type="success"
              show-icon
              :closable="false"
              style="margin-top:16px"
            />
            <div class="btn-row" style="margin-top:16px">
              <el-button type="primary" :loading="loading" @click="handlePmRun">
                开始 PM 分析 →
              </el-button>
            </div>
          </template>
        </el-card>
      </template>

      <!-- ===================== STEP 1: PM 分析 ===================== -->
      <template v-if="activeStep === 1">
        <el-card class="step-card" shadow="never">
          <template #header>
            <div class="card-header">
              <el-icon color="#e6a23c"><EditPen /></el-icon>
              <span>PM 需求分析</span>
              <el-tag :type="statusTagType" size="small">{{ statusLabel }}</el-tag>
            </div>
          </template>

          <div v-if="streaming" class="thinking-card">
            <div class="thinking-header">
              <span class="thinking-dots"><span></span><span></span><span></span></span>
              <span class="thinking-title">PM Agent 正在分析需求…</span>
              <span class="thinking-count">{{ streamText.length }} 字符</span>
            </div>
            <div class="stream-sections-body" ref="pmStreamBodyRef">
              <section v-if="pmStreamParsed.functional_requirements.items.length || pmStreamParsed.currentSection === 'functional_requirements'"
                class="stream-section" :class="{ 'stream-section--active': pmStreamParsed.currentSection === 'functional_requirements' }">
                <div class="stream-section-title">🔧 功能需求</div>
                <ul class="stream-list">
                  <li v-for="(item, i) in pmStreamParsed.functional_requirements.items" :key="i">
                    {{ item.value }}<span v-if="item.active" class="cursor">|</span>
                  </li>
                </ul>
              </section>
              <section v-if="pmStreamParsed.non_functional_requirements.items.length || pmStreamParsed.currentSection === 'non_functional_requirements'"
                class="stream-section" :class="{ 'stream-section--active': pmStreamParsed.currentSection === 'non_functional_requirements' }">
                <div class="stream-section-title">⚙️ 非功能需求</div>
                <ul class="stream-list">
                  <li v-for="(item, i) in pmStreamParsed.non_functional_requirements.items" :key="i">
                    {{ item.value }}<span v-if="item.active" class="cursor">|</span>
                  </li>
                </ul>
              </section>
              <section v-if="pmStreamParsed.acceptance_criteria.items.length || pmStreamParsed.currentSection === 'acceptance_criteria'"
                class="stream-section" :class="{ 'stream-section--active': pmStreamParsed.currentSection === 'acceptance_criteria' }">
                <div class="stream-section-title">✅ 验收标准</div>
                <ul class="stream-list">
                  <li v-for="(item, i) in pmStreamParsed.acceptance_criteria.items" :key="i">
                    {{ item.value }}<span v-if="item.active" class="cursor">|</span>
                  </li>
                </ul>
              </section>
              <section v-if="pmStreamParsed.edge_cases.items.length || pmStreamParsed.currentSection === 'edge_cases'"
                class="stream-section" :class="{ 'stream-section--active': pmStreamParsed.currentSection === 'edge_cases' }">
                <div class="stream-section-title">🚧 边界条件</div>
                <ul class="stream-list">
                  <li v-for="(item, i) in pmStreamParsed.edge_cases.items" :key="i">
                    {{ item.value }}<span v-if="item.active" class="cursor">|</span>
                  </li>
                </ul>
              </section>
              <section v-if="pmStreamParsed.summary.value || pmStreamParsed.currentSection === 'summary'"
                class="stream-section" :class="{ 'stream-section--active': pmStreamParsed.currentSection === 'summary' }">
                <div class="stream-section-title">📌 需求总结</div>
                <p class="stream-text-content">{{ pmStreamParsed.summary.value }}<span v-if="pmStreamParsed.summary.active" class="cursor">|</span></p>
              </section>
              <div v-if="!pmStreamParsed.currentSection" class="stream-waiting">
                <span class="thinking-dots"><span></span><span></span><span></span></span>
                <span>等待 AI 开始输出…</span>
              </div>
            </div>
          </div>

          <div v-else-if="loading" class="loading-area">
            <el-icon class="spinning"><Loading /></el-icon>
            <span>PM Agent 正在分析需求，请稍候…</span>
          </div>

          <template v-else-if="requirementAnalysis">
            <!-- 需求总结 -->
            <section v-if="requirementAnalysis.summary" class="result-section">
              <div class="section-title">📌 需求总结</div>
              <p class="section-text">{{ requirementAnalysis.summary }}</p>
            </section>

            <!-- 功能需求 -->
            <section v-if="requirementAnalysis.functional_requirements?.length" class="result-section">
              <div class="section-title">🔧 功能需求</div>
              <ul class="feature-list">
                <li v-for="(f, i) in requirementAnalysis.functional_requirements" :key="i">{{ f }}</li>
              </ul>
            </section>

            <!-- 验收标准 -->
            <section v-if="requirementAnalysis.acceptance_criteria?.length" class="result-section">
              <div class="section-title">✅ 验收标准</div>
              <ul class="feature-list">
                <li v-for="(a, i) in requirementAnalysis.acceptance_criteria" :key="i">{{ a }}</li>
              </ul>
            </section>

            <!-- 非功能需求 -->
            <section v-if="requirementAnalysis.non_functional_requirements?.length" class="result-section">
              <div class="section-title">⚙️ 非功能需求</div>
              <ul class="feature-list">
                <li v-for="(r, i) in requirementAnalysis.non_functional_requirements" :key="i">{{ r }}</li>
              </ul>
            </section>

            <!-- 边界条件 -->
            <section v-if="requirementAnalysis.edge_cases?.length" class="result-section">
              <div class="section-title">🚧 边界条件</div>
              <ul class="feature-list">
                <li v-for="(e, i) in requirementAnalysis.edge_cases" :key="i">{{ e }}</li>
              </ul>
            </section>

            <!-- 反馈行 -->
            <el-divider />
            <div class="feedback-area">
              <div class="block-label">💡 对以上分析有疑问？请提出修改意见：</div>
              <el-input
                v-model="pmFeedback"
                type="textarea"
                :rows="2"
                placeholder="例如：请补充异常情况处理，需要加上限流说明…"
                :disabled="refining"
              />
              <div class="btn-row">
                <el-button :loading="refining" :disabled="!pmFeedback.trim()" @click="handlePmRefine">
                  重新生成
                </el-button>
                <el-button type="primary" :disabled="!!pmFeedback.trim()" @click="handleQaRun">
                  进入 QA 用例生成 →
                </el-button>
              </div>
            </div>
          </template>
        </el-card>
      </template>

      <!-- ===================== STEP 2: QA 测试用例 ===================== -->
      <template v-if="activeStep === 2">
        <el-card class="step-card" shadow="never">
          <template #header>
            <div class="card-header">
              <el-icon color="#67c23a"><List /></el-icon>
              <span>QA 测试用例</span>
              <el-tag :type="statusTagType" size="small">{{ statusLabel }}</el-tag>
            </div>
          </template>

          <div v-if="streaming" class="thinking-card">
            <div class="thinking-header">
              <span class="thinking-dots"><span></span><span></span><span></span></span>
              <span class="thinking-title">QA Agent 正在生成测试用例…</span>
              <span class="thinking-count">{{ qaStreamParsed.testCases.names.length }} 个用例已生成</span>
            </div>
            <div class="stream-sections-body" ref="qaStreamBodyRef">
              <section class="stream-section" :class="{ 'stream-section--active': qaStreamParsed.currentSection === 'test_cases' }">
                <div class="stream-section-title">🧪 测试用例</div>
                <div class="qa-stream-cases">
                  <div v-for="(name, i) in qaStreamParsed.testCases.names" :key="i" class="qa-stream-case-item">
                    <span class="qa-case-badge">TC{{ String(i + 1).padStart(3, '0') }}</span>
                    {{ name }}
                  </div>
                  <div v-if="qaStreamParsed.testCases.active" class="qa-stream-case-writing">
                    <span class="thinking-dots"><span></span><span></span><span></span></span>
                    <span>正在生成下一个用例…</span>
                  </div>
                  <div v-if="!qaStreamParsed.testCases.names.length && !qaStreamParsed.testCases.active" class="stream-waiting">
                    <span class="thinking-dots"><span></span><span></span><span></span></span>
                    <span>等待生成…</span>
                  </div>
                </div>
              </section>
              <section v-if="qaStreamParsed.testStrategy.value"
                class="stream-section" :class="{ 'stream-section--active': qaStreamParsed.currentSection === 'test_strategy' }">
                <div class="stream-section-title">📋 测试策略</div>
                <p class="stream-text-content">{{ qaStreamParsed.testStrategy.value }}<span v-if="qaStreamParsed.testStrategy.active" class="cursor">|</span></p>
              </section>
              <section v-if="qaStreamParsed.coveragePlan.value"
                class="stream-section" :class="{ 'stream-section--active': qaStreamParsed.currentSection === 'coverage_plan' }">
                <div class="stream-section-title">📊 覆盖计划</div>
                <p class="stream-text-content">{{ qaStreamParsed.coveragePlan.value }}<span v-if="qaStreamParsed.coveragePlan.active" class="cursor">|</span></p>
              </section>
            </div>
          </div>

          <div v-else-if="loading" class="loading-area">
            <el-icon class="spinning"><Loading /></el-icon>
            <span>QA Agent 正在生成测试用例，请稍候…</span>
          </div>

          <template v-else-if="testCases?.length">
            <!-- 按类型分组 -->
            <div v-for="(group, type) in groupedTestCases" :key="type" class="test-group">
              <div class="test-group-title">
                {{ typeEmoji[type] || '🧪' }} {{ type }}（{{ group.length }} 个）
              </div>
              <el-table :data="group" border size="small" class="test-table">
                <el-table-column prop="test_id" label="ID" width="70" />
                <el-table-column prop="test_name" label="用例名称" min-width="160" />
                <el-table-column prop="precondition" label="前置条件" min-width="160" />
                <el-table-column label="步骤" min-width="260">
                  <template #default="{ row }">
                    <ol class="step-list">
                      <li v-for="(s, i) in row.steps" :key="i">{{ s }}</li>
                    </ol>
                  </template>
                </el-table-column>
                <el-table-column prop="expected_result" label="预期结果" min-width="200" />
              </el-table>

            </div>

            <!-- 测试策略 / 覆盖计划 -->
            <template v-if="testStrategy || coveragePlan">
              <el-divider />
              <div class="qa-meta-row">
                <div v-if="testStrategy" class="qa-meta-block">
                  <div class="block-label">📋 测试策略</div>
                  <p class="qa-meta-text">{{ testStrategy }}</p>
                </div>
                <div v-if="coveragePlan" class="qa-meta-block">
                  <div class="block-label">📊 覆盖计划</div>
                  <p class="qa-meta-text">{{ coveragePlan }}</p>
                </div>
              </div>
            </template>

            <!-- 反馈行 -->
            <el-divider />
            <div class="feedback-area">
              <div class="block-label">💡 对测试用例有修改意见？</div>
              <el-input
                v-model="qaFeedback"
                type="textarea"
                :rows="2"
                placeholder="例如：请增加并发测试场景，添加输入长度边界测试…"
                :disabled="refining"
              />
              <div class="btn-row">
                <el-button :loading="refining" :disabled="!qaFeedback.trim()" @click="handleQaRefine">
                  重新生成
                </el-button>
                <el-button type="primary" :disabled="!!qaFeedback.trim()" @click="handleDevRun">
                  进入 Dev 代码生成 →
                </el-button>
              </div>
            </div>
          </template>
        </el-card>
      </template>

      <!-- ===================== STEP 3: Dev 代码生成 ===================== -->
      <template v-if="activeStep === 3">
        <el-card class="step-card" shadow="never">
          <template #header>
            <div class="card-header">
              <el-icon color="#909399"><Monitor /></el-icon>
              <span>Dev 代码生成</span>
              <el-tag :type="statusTagType" size="small">{{ statusLabel }}</el-tag>
            </div>
          </template>

          <div v-if="streaming" class="dev-stream-card">
            <div class="thinking-header">
              <span class="thinking-dots"><span></span><span></span><span></span></span>
              <span class="thinking-title">Dev Agent 正在生成代码…</span>
              <span class="thinking-count">{{ streamText.length }} 字符（代码量较大，请耐心等待）</span>
            </div>
            <el-tabs v-model="devStreamTab" type="card" class="code-tabs dev-stream-tabs">
            
              <el-tab-pane label="🐍 业务代码" name="java_code">
                <div class="code-block-wrap" style="padding-top:36px">
                  <div class="code-lang-badge">Python</div>
                  <pre class="code-block dev-stream-code" ref="devCodeRef">{{ devStreamParsed.java_code }}<span v-if="devStreamParsed.currentField === 'java_code'" class="cursor dev-cursor">|</span></pre>
                </div>
              </el-tab-pane>
              <el-tab-pane label="🧪 单元测试" name="unit_tests">
                <div class="code-block-wrap" style="padding-top:36px">
                  <div class="code-lang-badge">Python</div>
                  <pre class="code-block dev-stream-code" ref="devTestsRef">{{ devStreamParsed.unit_tests }}<span v-if="devStreamParsed.currentField === 'unit_tests'" class="cursor dev-cursor">|</span></pre>
                </div>
              </el-tab-pane>
                <el-tab-pane label="📄 实现思路" name="implementation_notes">
                <div class="dev-stream-notes" ref="devNotesRef">
                  {{ devStreamParsed.implementation_notes }}<span v-if="devStreamParsed.currentField === 'implementation_notes'" class="cursor">|</span>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>

          <div v-else-if="loading" class="loading-area">
            <el-icon class="spinning"><Loading /></el-icon>
            <span>Dev Agent 正在生成代码，请稍候…（通常需要 30–60 秒）</span>
          </div>

          <template v-else-if="codeGeneration">
              <!-- 开发建议 -->
            <section v-if="codeGeneration.implementation_notes" class="result-section">
              <div class="section-title">📝 实现思路</div>
              <ol class="feature-list">
                <li v-for="(line, i) in parseNotes(codeGeneration.implementation_notes)" :key="i">{{ line }}</li>
              </ol>
            </section>


            <!-- 代码 Tabs -->
            <el-tabs v-model="activeCodeTab" type="card" class="code-tabs">
              <el-tab-pane label="业务代码" name="business">
                <div class="code-block-wrap">
                  <div class="code-lang-badge">Python</div>
                  <el-button class="copy-btn" size="small" text @click="copyCode(codeGeneration.java_code)">
                    <el-icon><CopyDocument /></el-icon> 复制
                  </el-button>
                  <pre class="code-block"><code>{{ codeGeneration.java_code }}</code></pre>
                </div>
              </el-tab-pane>
              <el-tab-pane label="单元测试" name="test">
                <div class="code-block-wrap">
                  <div class="code-lang-badge">Python</div>
                  <el-button class="copy-btn" size="small" text @click="copyCode(codeGeneration.unit_tests)">
                    <el-icon><CopyDocument /></el-icon> 复制
                  </el-button>
                  <pre class="code-block"><code>{{ codeGeneration.unit_tests }}</code></pre>
                </div>
              </el-tab-pane>
            </el-tabs>


            <!-- 完成操作 -->
            <div class="btn-row" style="margin-top:24px">
              <el-button type="primary" size="large" :loading="loadingStep === 4" @click="handleTestRun">
                ▶ 执行单元测试
              </el-button>
            </div>
          </template>
        </el-card>
      </template>

      <!-- ===================== STEP 4: 测试执行 ===================== -->
      <template v-if="activeStep === 4">
        <el-card class="step-card" shadow="never">
          <template #header>
            <div class="card-header">
              <el-icon color="#67c23a"><Cpu /></el-icon>
              <span>单元测试执行</span>
              <el-tag :type="statusTagType" size="small">{{ statusLabel }}</el-tag>
            </div>
          </template>

          <div v-if="loading" class="loading-area">
            <el-icon class="spinning"><Loading /></el-icon>
            <span>正在执行单元测试，请稍候…</span>
          </div>

          <template v-else>
            <!-- 无结果时提示 -->
            <div v-if="!testExecution" class="loading-area" style="padding:60px 0">
              <span style="color:#909399">准备就绪，点击执行按钮运行测试</span>
            </div>

            <!-- 有测试结果 -->
            <template v-else>
              <el-alert
                :title="testExecution.success ? `✅ 全部测试通过！共 ${testExecution.total} 个` : `❌ ${testExecution.failed + testExecution.errors} 个测试失败`"
                :type="testExecution.success ? 'success' : 'error'"
                show-icon
                :closable="false"
                style="margin-bottom:16px"
              />
              <div class="stat-row">
                <div class="stat-card">
                  <div class="stat-num" style="color:#67c23a">{{ testExecution.passed }}</div>
                  <div class="stat-label">通过</div>
                </div>
                <div class="stat-card">
                  <div class="stat-num" style="color:#f56c6c">{{ testExecution.failed }}</div>
                  <div class="stat-label">失败</div>
                </div>
                <div class="stat-card">
                  <div class="stat-num" style="color:#e6a23c">{{ testExecution.errors }}</div>
                  <div class="stat-label">错误</div>
                </div>
                <div class="stat-card">
                  <div class="stat-num">{{ testExecution.total }}</div>
                  <div class="stat-label">合计</div>
                </div>
              </div>
              <section class="result-section">
                <div class="section-title">🖥 pytest 输出</div>
                <div class="code-block-wrap">
                  <el-button class="copy-btn" size="small" text @click="copyCode(testExecution.output)">
                    <el-icon><CopyDocument /></el-icon> 复制
                  </el-button>
                  <pre class="code-block" style="max-height:400px;overflow:auto">{{ testExecution.output }}</pre>
                </div>
              </section>
            </template>

            <div class="btn-row" style="margin-top:16px">
              <el-button @click="doTestRun" :loading="loading">🔄 重新运行</el-button>
              <el-button
                v-if="testExecution && !testExecution.success"
                type="warning"
                :loading="refining"
                @click="handleTestFix"
              >🔧 AI 自动修复</el-button>
              <el-button type="success" @click="router.push('/')">✅ 完成，返回首页</el-button>
            </div>
          </template>
        </el-card>
      </template>

      <!-- 错误提示 -->
      <div v-if="errorMsg" style="margin-top:16px">
        <el-alert :title="errorMsg" type="error" show-icon :closable="true" @close="errorMsg=''" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  ArrowLeft, ChatLineRound, EditPen, List, Monitor, Cpu,
  Loading, CopyDocument,
} from '@element-plus/icons-vue'
import { sessionApi } from '@/api/session'

const route = useRoute()
const router = useRouter()
const sessionId = route.params.id

// ---- 状态 ----
const status = ref('')
const rawRequirement = ref('')
const clarifyHistory = ref([])
const requirementAnalysis = ref(null)
const testCases = ref([])
const testStrategy = ref('')
const coveragePlan = ref('')
const codeGeneration = ref(null)
const testExecution = ref(null)

const loading = ref(false)
const refining = ref(false)
const streaming = ref(false)
const streamText = ref('')
const errorMsg = ref('')

const clarifyInput = ref('')
const pmFeedback = ref('')
const qaFeedback = ref('')
const devFeedback = ref('')
const activeCodeTab = ref('business')
const devStreamTab = ref('implementation_notes')
const loadingStep = ref(null) // 跨步骤操作时立即更新，避免显示错误的加载状态
const streamContainer = ref(null)
const pmStreamBodyRef = ref(null)
const qaStreamBodyRef = ref(null)
const devNotesRef = ref(null)     // Dev 实现思路容器
const devCodeRef = ref(null)      // Dev 业务代码容器
const devTestsRef = ref(null)     // Dev 单元测试容器

// ---- 计算属性 ----
const activeStep = computed(() => {
  if (loadingStep.value !== null) return loadingStep.value
  const map = {
    clarifying: 0,
    pm_ready: 0,
    pm_done: 1,
    qa_ready: 1,
    qa_done: 2,
    dev_ready: 2,
    dev_done: 3,
    test_done: 4,
  }
  return map[status.value] ?? 0
})

const statusLabel = computed(() => {
  const map = {
    clarifying: '需求追问中',
    pm_ready: '可开始分析',
    pm_done: 'PM 完成',
    qa_ready: '可生成用例',
    qa_done: 'QA 完成',
    dev_ready: '可生成代码',
    dev_done: '代码就绪',
    test_done: '测试完成',
  }
  return map[status.value] || status.value
})

const statusTagType = computed(() => {
  const map = {
    clarifying: 'warning',
    pm_ready: 'info',
    pm_done: '',
    qa_ready: 'info',
    qa_done: '',
    dev_ready: 'info',
    dev_done: '',
    test_done: 'success',
  }
  return map[status.value] ?? ''
})

const typeEmoji = { '功能测试': '🧩', '性能测试': '⚡', '安全测试': '🔒' }

const groupedTestCases = computed(() => {
  const groups = {}
  for (const tc of testCases.value) {
    const t = tc.test_type || '其他'
    if (!groups[t]) groups[t] = []
    groups[t].push(tc)
  }
  return groups
})

const passRate = computed(() => {
  const total = codeGeneration.value?.unit_tests_count
  const passed = codeGeneration.value?.passed_tests_count
  if (!total) return '—'
  return `${Math.round((passed / total) * 100)}%`
})

// 增量解析 Dev Agent 流式 JSON
const devStreamParsed = computed(() => {
  const text = streamText.value
  const result = { java_code: '', unit_tests: '', implementation_notes: '', currentField: null }
  if (!text) return result

  const fields = ['implementation_notes', 'java_code', 'unit_tests', 'unit_tests_count', 'passed_tests_count']
  for (const field of fields) {
    const key = `"${field}"`
    const idx = text.indexOf(key)
    if (idx === -1) continue

    let start = idx + key.length
    // 跳过展展、蛇形、引号
    while (start < text.length && (text[start] === ' ' || text[start] === ':')) start++
    if (start >= text.length || text[start] !== '"') continue
    start++ // 跳过开头引号

    let value = ''
    let i = start
    let closed = false
    while (i < text.length) {
      if (text[i] === '\\' && i + 1 < text.length) {
        const esc = text[i + 1]
        if (esc === 'n')      value += '\n'
        else if (esc === 't') value += '\t'
        else if (esc === 'r') value += ''
        else                  value += esc
        i += 2
      } else if (text[i] === '"') {
        closed = true
        break
      } else {
        value += text[i]
        i++
      }
    }
    if (field in result) result[field] = value
    if (!closed) result.currentField = field
  }
  return result
})

// ---- 流式解析工具函数 ----
function _parseStreamStr(text, fieldName) {
  const idx = text.indexOf(`"${fieldName}"`)
  if (idx === -1) return { value: '', active: false }
  let start = idx + fieldName.length + 2
  while (start < text.length && (text[start] === ' ' || text[start] === ':')) start++
  if (start >= text.length || text[start] !== '"') return { value: '', active: false }
  start++
  let value = '', i = start, closed = false
  while (i < text.length) {
    if (text[i] === '\\' && i + 1 < text.length) {
      const e = text[i + 1]
      value += e === 'n' ? '\n' : e === 't' ? '\t' : e
      i += 2
    } else if (text[i] === '"') { closed = true; break
    } else { value += text[i++] }
  }
  return { value, active: !closed }
}

function _parseStreamStrArray(text, fieldName) {
  const idx = text.indexOf(`"${fieldName}"`)
  if (idx === -1) return { items: [], active: false }
  let start = idx + fieldName.length + 2
  while (start < text.length && (text[start] === ' ' || text[start] === ':')) start++
  if (start >= text.length || text[start] !== '[') return { items: [], active: false }
  start++
  const items = []
  let i = start, arrayClosed = false
  while (i < text.length) {
    if (text[i] === ']') { arrayClosed = true; break }
    if (text[i] === '"') {
      i++
      let value = '', itemClosed = false
      while (i < text.length) {
        if (text[i] === '\\' && i + 1 < text.length) {
          const e = text[i + 1]
          value += e === 'n' ? '\n' : e === 't' ? '\t' : e
          i += 2
        } else if (text[i] === '"') { itemClosed = true; i++; break
        } else { value += text[i++] }
      }
      if (value.trim()) items.push({ value, active: !itemClosed })
    } else { i++ }
  }
  return { items, active: !arrayClosed }
}

function _parseStreamTestCases(text) {
  const idx = text.indexOf('"test_cases"')
  if (idx === -1) return { names: [], active: false }
  let start = idx + 12
  while (start < text.length && (text[start] === ' ' || text[start] === ':')) start++
  if (start >= text.length || text[start] !== '[') return { names: [], active: false }

  // 用括号深度跟踪真正的 test_cases 数组结束位置，跳过内部 steps[] 等嵌套方括号
  let depth = 0, inStr = false, arrayClosed = false
  for (let i = start; i < text.length; i++) {
    const ch = text[i]
    if (inStr) {
      if (ch === '\\') i++          // 跳过转义字符
      else if (ch === '"') inStr = false
    } else {
      if (ch === '"')  inStr = true
      else if (ch === '[') depth++
      else if (ch === ']') { depth--; if (depth === 0) { arrayClosed = true; break } }
    }
  }

  const arrayText = text.slice(start)
  const names = []
  const re = /"test_name"\s*:\s*"((?:[^"\\]|\\.)*)"/g
  let m
  while ((m = re.exec(arrayText)) !== null) {
    names.push(m[1].replace(/\\n/g, ' ').replace(/\\"/g, '"'))
  }
  return { names, active: !arrayClosed }
}

// PM 流式解析
const pmStreamParsed = computed(() => {
  const t = streamText.value
  const fr  = _parseStreamStrArray(t, 'functional_requirements')
  const nfr = _parseStreamStrArray(t, 'non_functional_requirements')
  const ac  = _parseStreamStrArray(t, 'acceptance_criteria')
  const ec  = _parseStreamStrArray(t, 'edge_cases')
  const sum = _parseStreamStr(t, 'summary')
  let currentSection = null
  for (const [key, val] of [['functional_requirements', fr], ['non_functional_requirements', nfr], ['acceptance_criteria', ac], ['edge_cases', ec]]) {
    if (val.active || val.items.some(i => i.active)) { currentSection = key; break }
  }
  if (!currentSection && sum.active) currentSection = 'summary'
  return { functional_requirements: fr, non_functional_requirements: nfr, acceptance_criteria: ac, edge_cases: ec, summary: sum, currentSection }
})

// QA 流式解析
const qaStreamParsed = computed(() => {
  const t = streamText.value
  const testCases   = _parseStreamTestCases(t)
  const testStrategy  = _parseStreamStr(t, 'test_strategy')
  const coveragePlan  = _parseStreamStr(t, 'coverage_plan')
  let currentSection = null
  if (testCases.active) currentSection = 'test_cases'
  else if (testStrategy.active) currentSection = 'test_strategy'
  else if (coveragePlan.active) currentSection = 'coverage_plan'
  else if (testCases.names.length) currentSection = 'test_cases'
  return { testCases, testStrategy, coveragePlan, currentSection }
})

// 当当前字段切换时自动跳转 Tab
watch(
  () => devStreamParsed.value.currentField,
  (field) => {
    if (field === 'implementation_notes' || field === 'java_code' || field === 'unit_tests') {
      devStreamTab.value = field
    }
  }
)

// 每次收到 chunk时滚动当前活动容器到底部
watch(streamText, () => {
  if (!streaming.value) return
  nextTick(() => {
    // PM / QA 结构化预览區
    if (pmStreamBodyRef.value) pmStreamBodyRef.value.scrollTop = pmStreamBodyRef.value.scrollHeight
    if (qaStreamBodyRef.value) qaStreamBodyRef.value.scrollTop = qaStreamBodyRef.value.scrollHeight
    // Dev 各个容器
    const tabRefMap = {
      implementation_notes: devNotesRef.value,
      java_code: devCodeRef.value,
      unit_tests: devTestsRef.value,
    }
    const el = tabRefMap[devStreamTab.value]
    if (el) el.scrollTop = el.scrollHeight
  })
})

// ---- 工具 ----
function priorityTag(p) {
  const map = { 高: 'danger', P0: 'danger', P1: 'warning', 中: 'warning', 低: 'info', P2: 'info' }
  return map[p] ?? ''
}

function parseNotes(text) {
  if (!text) return []
  // 按换行分割，去掉行首的 "1. " "2. " 等序号，过滤空行
  return text
    .split(/\n/)
    .map(l => l.replace(/^\d+\.\s*/, '').trim())
    .filter(l => l.length > 0)
}

function applySessionResponse(res) {
  status.value = res.status
  if (res.data?.requirement_analysis) requirementAnalysis.value = res.data.requirement_analysis
  if (res.data?.test_cases) {
    const tc = res.data.test_cases
    if (tc.test_cases?.length) testCases.value = tc.test_cases
    if (tc.test_strategy)  testStrategy.value  = tc.test_strategy
    if (tc.coverage_plan)  coveragePlan.value  = tc.coverage_plan
  }
  if (res.data?.code_generation) codeGeneration.value = res.data.code_generation
  if (res.data?.test_execution) testExecution.value = res.data.test_execution
}

async function withLoading(fn, isRefine = false) {
  if (isRefine) refining.value = true
  else loading.value = true
  errorMsg.value = ''
  try {
    const res = await fn()
    applySessionResponse(res)
    return res
  } catch (e) {
    errorMsg.value = e.message
    ElMessage.error(e.message)
  } finally {
    loading.value = false
    refining.value = false
  }
}

async function copyCode(code) {
  await navigator.clipboard.writeText(code)
  ElMessage.success('已复制到剪贴板')
}

// ---- 生命周期 ----
onMounted(async () => {
  // 加载初始会话状态
  loading.value = true
  try {
    const res = await sessionApi.getSession(sessionId)
    status.value = res.status
    rawRequirement.value = res.data?.raw_requirement || ''
    clarifyHistory.value = res.data?.clarify_history || []
    if (res.data?.requirement_analysis) requirementAnalysis.value = res.data.requirement_analysis
    if (res.data?.test_cases) {
      const tc = res.data.test_cases
      if (tc.test_cases?.length) testCases.value = tc.test_cases
      if (tc.test_strategy)  testStrategy.value  = tc.test_strategy
      if (tc.coverage_plan)  coveragePlan.value  = tc.coverage_plan
    }
    if (res.data?.code_generation) codeGeneration.value = res.data.code_generation
    if (res.data?.test_execution) testExecution.value = res.data.test_execution
  } catch (e) {
    errorMsg.value = e.message
  } finally {
    loading.value = false
  }
})

// ---- 操作处理 ----
async function handleClarify() {
  if (!clarifyInput.value.trim()) return
  const msg = clarifyInput.value.trim()
  clarifyInput.value = ''
  clarifyHistory.value.push({ role: 'user', content: msg })

  await withLoading(async () => {
    const res = await sessionApi.clarify(sessionId, msg)
    if (res.question) {
      clarifyHistory.value.push({ role: 'assistant', content: res.question })
    }
    return res
  })
}

// ---- 流式 SSE 请求工具 ----
async function withStreaming(fetchFn, step) {
  streamText.value = ''
  streaming.value = true
  loadingStep.value = step
  devStreamTab.value = 'implementation_notes'  // 每次重新生成从第一个 tab 开始
  errorMsg.value = ''
  try {
    const response = await fetchFn()
    if (!response.ok) {
      const err = await response.json().catch(() => ({ detail: '请求失败' }))
      throw new Error(err.detail || '请求失败')
    }
    const reader = response.body.getReader()
    const decoder = new TextDecoder()
    let buffer = ''

    while (true) {
      const { done, value } = await reader.read()
      if (done) break
      buffer += decoder.decode(value, { stream: true })

      // 按 \n\n 分割完整 SSE 事件
      const parts = buffer.split('\n\n')
      buffer = parts.pop()  // 保留最后不完整的新事件

      for (const part of parts) {
        const line = part.trim()
        if (!line.startsWith('data: ')) continue
        const data = JSON.parse(line.slice(6))
        if (data.type === 'chunk') {
          streamText.value += data.text
          // 滚动由 watch(streamText) 统一处理
        } else if (data.type === 'done') {
          applySessionResponse(data)
        } else if (data.type === 'error') {
          throw new Error(data.message)
        }
      }
    }
  } catch (e) {
    errorMsg.value = e.message
    ElMessage.error(e.message)
  } finally {
    streaming.value = false
    loadingStep.value = null
  }
}

async function handlePmRun() {
  await withStreaming(() => sessionApi.pmStream(sessionId), 1)
}

async function handleQaRun() {
  await withStreaming(() => sessionApi.qaStream(sessionId), 2)
}

async function handleDevRun() {
  await withStreaming(() => sessionApi.devStream(sessionId), 3)
}

async function handlePmRefine() {
  if (!pmFeedback.value.trim()) return
  const fb = pmFeedback.value.trim()
  pmFeedback.value = ''
  await withStreaming(() => sessionApi.pmRefineStream(sessionId, fb), 1)
}

async function handleQaRefine() {
  if (!qaFeedback.value.trim()) return
  const fb = qaFeedback.value.trim()
  qaFeedback.value = ''
  await withStreaming(() => sessionApi.qaRefineStream(sessionId, fb), 2)
}

async function handleDevRefine() {
  if (!devFeedback.value.trim()) return
  const fb = devFeedback.value.trim()
  devFeedback.value = ''
  await withLoading(() => sessionApi.devRefine(sessionId, fb), true)
}

async function handleTestRun() {
  loadingStep.value = 4
  await withLoading(() => sessionApi.testRun(sessionId))
  loadingStep.value = null
}

async function doTestRun() {
  await withLoading(() => sessionApi.testRun(sessionId))
}

async function handleTestFix() {
  loadingStep.value = 3   // 立即导航到 Dev 页
  testExecution.value = null
  await withStreaming(() => sessionApi.testFixStream(sessionId), 3)
}
</script>

<style scoped>
.session-wrap {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 60px;
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: #fff;
  border-bottom: 1px solid #ebeef5;
  position: sticky;
  top: 0;
  z-index: 100;
}

.session-id {
  font-size: 12px;
  color: #909399;
}

.steps-container {
  background: #fff;
  padding: 24px 40px 16px;
  border-bottom: 1px solid #ebeef5;
}

.content-area {
  max-width: 900px;
  margin: 32px auto;
  padding: 0 20px;
}

.step-card {
  border-radius: 12px;
  border: 1px solid #ebeef5;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
}

/* AI 思考中卡片（PM / QA）*/
.thinking-card {
  border: 1px solid #e0eaff;
  border-radius: 12px;
  overflow: hidden;
  background: #f6f8ff;
}

/* Dev Agent 流式代码卡片 */
.dev-stream-card {
  border: 1px solid #e0eaff;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.dev-stream-card .thinking-header {
  border-radius: 0;
}

.dev-stream-tabs {
  padding: 0 12px 12px;
}

.dev-stream-notes {
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.8;
  color: #4a5568;
  white-space: pre-wrap;
  min-height: 80px;
  max-height: 260px;
  overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', sans-serif;
}

/* 代码块里的打字光标 */
.dev-cursor {
  color: #67c23a;
  font-weight: 100;
}

/* 流式输出时的代码 pre：固定高度 + 纵向滚动，供 scrollTop 控制 */
.dev-stream-code {
  max-height: 480px;
  overflow-y: auto;
  overflow-x: auto;
}

.thinking-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: linear-gradient(90deg, #eef2ff 0%, #f6f8ff 100%);
  border-bottom: 1px solid #e0eaff;
  font-size: 13px;
}

.thinking-title {
  font-weight: 600;
  color: #4f6ef7;
  flex: 1;
}

.thinking-count {
  font-size: 11px;
  color: #a0aec0;
  font-variant-numeric: tabular-nums;
}

/* 三点动画 */
.thinking-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.thinking-dots span {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4f6ef7;
  animation: dot-bounce 1.2s infinite ease-in-out;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

.thinking-body {
  padding: 16px 18px;
  font-size: 13px;
  line-height: 1.8;
  color: #4a5568;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 380px;
  overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', sans-serif;
}

/* PM / QA 结构化流式预览 */
.stream-sections-body {
  max-height: 420px;
  overflow-y: auto;
  padding: 6px 4px;
}
.stream-section {
  margin: 0 8px 10px;
  padding: 10px 14px;
  border-radius: 8px;
  border-left: 3px solid transparent;
  background: #f8f9ff;
  transition: border-color 0.2s, background 0.2s;
}
.stream-section--active {
  border-left-color: #4f6ef7;
  background: #eef1ff;
}
.stream-section-title {
  font-size: 12px;
  font-weight: 600;
  color: #4f6ef7;
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}
.stream-list {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}
.stream-list li {
  font-size: 13px;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 2px;
  word-break: break-word;
}
.stream-text-content {
  font-size: 13px;
  line-height: 1.8;
  color: #374151;
  margin: 0;
  word-break: break-word;
  white-space: pre-wrap;
}
.stream-waiting {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  color: #9ca3af;
  font-size: 13px;
}
/* QA 测试用例条目 */
.qa-stream-cases {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qa-stream-case-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #374151;
  padding: 3px 0;
}
.qa-case-badge {
  display: inline-block;
  background: #dbeafe;
  color: #1d4ed8;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.qa-stream-case-writing {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #9ca3af;
  font-size: 13px;
  padding: 3px 0;
}

/* 光标闪烁 */
.cursor {
  display: inline-block;
  width: 2px;
  color: #4f6ef7;
  animation: blink 0.8s step-end infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* 加载态 */
.loading-area {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 40px 0;
  justify-content: center;
  color: #909399;
  font-size: 14px;
}

.spinning {
  animation: spin 1s linear infinite;
  font-size: 24px;
  color: #409eff;
}
@keyframes spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }

/* 需求块 */
.req-block {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.block-label {
  font-size: 13px;
  font-weight: 600;
  color: #606266;
  margin-bottom: 8px;
}

.req-text {
  font-size: 14px;
  color: #303133;
  white-space: pre-wrap;
  line-height: 1.7;
}

/* 对话历史 */
.chat-history {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
}

.chat-msg {
  display: flex;
  flex-direction: column;
  max-width: 80%;
}

.chat-msg.assistant {
  align-self: flex-start;
  align-items: flex-start;
}

.chat-msg.user {
  align-self: flex-end;
  align-items: flex-end;
}

.chat-bubble {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.chat-msg.assistant .chat-bubble {
  background: #ecf5ff;
  color: #303133;
  border-bottom-left-radius: 4px;
}

.chat-msg.user .chat-bubble {
  background: #409eff;
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chat-role {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

/* 结果区块 */
.result-section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
}

.section-text {
  font-size: 14px;
  color: #606266;
  line-height: 1.7;
  margin: 0;
}

.feature-list {
  padding-left: 20px;
  margin: 0;
  font-size: 14px;
  color: #606266;
  line-height: 2;
}

/* 测试用例 */
.test-group {
  margin-bottom: 24px;
}

.test-group-title {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 12px;
}

.test-table :deep(.cell) {
  white-space: pre-wrap;
  line-height: 1.6;
}

.step-list {
  padding-left: 16px;
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
}

/* 统计卡片 */
.stat-row {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  flex: 1;
  background: #f8f9fa;
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}

.stat-num {
  font-size: 28px;
  font-weight: 700;
  color: #409eff;
}

.stat-label {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

/* 代码块 */
.code-tabs {
  margin-top: 16px;
}

.code-block-wrap {
  position: relative;
  background: #1e1e2e;
  border-radius: 8px;
  padding: 40px 16px 16px;
  overflow: auto;
}

.code-lang-badge {
  position: absolute;
  top: 10px;
  left: 16px;
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.copy-btn {
  position: absolute;
  top: 6px;
  right: 12px;
  color: #888 !important;
}

.code-block {
  margin: 0;
  font-family: 'Fira Code', 'JetBrains Mono', Consolas, monospace;
  font-size: 13px;
  line-height: 1.7;
  color: #cdd6f4;
  white-space: pre;
  overflow-x: auto;
}

/* 反馈区 */
.qa-meta-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin: 4px 0 8px;
}
.qa-meta-block {
  flex: 1;
  min-width: 220px;
}
.qa-meta-text {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: #374151;
  white-space: pre-wrap;
  word-break: break-word;
}

.feedback-area {
  margin-top: 8px;
}

.btn-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
</style>