<script setup>
import StatusBadge from '../components/StatusBadge.vue'
import WritebackSteps from '../components/WritebackSteps.vue'
import { drafts } from '../data'
</script>

<template>
  <section class="drafts-layout">
    <div class="panel">
      <div class="panel-heading horizontal">
        <div>
          <p class="eyebrow">草稿</p>
          <h2>未写回变更</h2>
        </div>
        <span class="read-only-chip">智能体视图写回</span>
      </div>

      <div class="draft-list">
        <article v-for="draft in drafts" :key="draft.file" class="draft-card">
          <div class="draft-header">
            <div>
              <strong>{{ draft.file }}</strong>
              <p>变更字段：{{ draft.changedFields.length ? draft.changedFields.join('、') : '无' }}</p>
            </div>
            <StatusBadge :label="draft.validation" status="unknown" :source="draft.source" :confidence="draft.confidence" />
          </div>
          <WritebackSteps :active-steps="draft.steps" />
          <dl class="detail-grid">
            <span>TOML 校验</span><strong>{{ draft.validation }}</strong>
            <span>最近备份</span><strong>{{ draft.backup }}</strong>
            <span>来源</span><strong>{{ draft.source }} / {{ draft.confidence }}</strong>
          </dl>
        </article>
      </div>
    </div>

    <aside class="panel draft-side">
      <div class="panel-heading">
        <p class="eyebrow">入口</p>
        <h2>到智能体视图编辑草稿</h2>
      </div>
      <div class="empty-state">
        <strong>没有真实草稿队列</strong>
        <p>当前不做批量队列，也不自动保存草稿。请在智能体视图中选择单个文件，按“草稿、已校验、已备份、已写回”流程操作。</p>
      </div>
    </aside>
  </section>
</template>
