<script setup lang="ts">
import { ArrowRight, Check, Warning } from '@element-plus/icons-vue';

import { lifecycleSteps, readinessChecklist, recentRuns } from '@/data/studioMock';
</script>

<template>
  <section class="studio-page dashboard-page">
    <header class="studio-hero">
      <div>
        <p class="studio-kicker">项目 / Common Agent Studio</p>
        <h1>从知识接入到 Agent 发布的一体化工作台</h1>
        <p>
          使用新的聚合 ViewModel 驱动原型：知识资产、Workflow、MCP、Skill、Agent 调试与观测都围绕一次发布旅程组织。
        </p>
      </div>
      <div class="hero-actions">
        <el-button type="primary">新建 Workflow</el-button>
        <el-button>导入 MCP</el-button>
      </div>
    </header>

    <div class="lifecycle-strip">
      <article v-for="(step, index) in lifecycleSteps" :key="step.name" class="lifecycle-step" :class="`is-${step.status}`">
        <div class="step-index">{{ index + 1 }}</div>
        <div>
          <strong>{{ step.name }}</strong>
          <span>{{ step.description }}</span>
        </div>
        <el-icon v-if="index < lifecycleSteps.length - 1"><ArrowRight /></el-icon>
      </article>
    </div>

    <div class="dashboard-grid">
      <section class="studio-panel readiness-panel">
        <div class="panel-heading">
          <div>
            <h2>发布就绪检查</h2>
            <span>ViewModel: StudioDashboardView</span>
          </div>
          <el-tag type="warning">Draft</el-tag>
        </div>
        <ul class="check-list">
          <li v-for="item in readinessChecklist" :key="item.label" :class="{ done: item.done }">
            <el-icon>
              <Check v-if="item.done" />
              <span v-else class="pending-dot" />
            </el-icon>
            <span>{{ item.label }}</span>
          </li>
        </ul>
      </section>

      <section class="studio-panel metrics-panel">
        <div class="panel-heading">
          <h2>运行概览</h2>
          <span>环境: Dev</span>
        </div>
        <div class="metric-row">
          <div><strong>27</strong><span>今日运行</span></div>
          <div><strong>96.4%</strong><span>成功率</span></div>
          <div><strong>1.28s</strong><span>P50 延迟</span></div>
          <div><strong>¥4.82</strong><span>预估成本</span></div>
        </div>
      </section>

      <section class="studio-panel recent-panel">
        <div class="panel-heading">
          <h2>最近运行</h2>
          <span>Run Trace</span>
        </div>
        <div class="run-table">
          <div class="run-row run-head">
            <span>名称</span><span>类型</span><span>状态</span><span>延迟</span><span>成本</span>
          </div>
          <div v-for="run in recentRuns" :key="run.id" class="run-row">
            <strong>{{ run.name }}</strong>
            <span>{{ run.type }}</span>
            <span class="status-cell">
              <span class="status-pill" :class="run.status === '成功' ? 'is-success' : 'is-warning'">
                {{ run.status }}
              </span>
            </span>
            <span>{{ run.latency }}</span>
            <span>{{ run.cost }}</span>
          </div>
        </div>
      </section>

      <section class="studio-panel warning-panel">
        <el-icon><Warning /></el-icon>
        <div>
          <h2>生产发布前仍需确认路由兜底</h2>
          <p>AGENT_PLAN 任务当前只有草稿路由，建议补齐 fallback 模型和最大延迟阈值。</p>
        </div>
      </section>
    </div>
  </section>
</template>
