<template>
  <StepPanelShell title="样本回流" :snapshot="snapshot">
    <template #actions><el-button v-if="snapshot.status === 'failed'" type="danger" plain @click="$emit('retry')">重试回流</el-button></template>
    <section class="node-section">
      <h3>样本漏斗</h3>
      <div class="funnel-row"><div v-for="item in funnelItems" :key="item.label"><strong>{{ item.value }}</strong><span>{{ item.label }}</span></div></div>
    </section>
    <section class="node-section">
      <div class="section-heading"><h3>候选样本</h3><span>{{ samples.length }} 项</span></div>
      <el-table :data="samples" size="small" max-height="350" row-key="sample_id">
        <el-table-column prop="sample_id" label="样本" min-width="145" show-overflow-tooltip />
        <el-table-column prop="feedback_reason" label="入池原因" min-width="105" />
        <el-table-column prop="target_model_group" label="目标模型" min-width="150" />
        <el-table-column prop="source_model_version" label="来源版本" width="100" />
        <el-table-column label="状态" width="90"><template #default="scope"><el-tag :type="statusTag(scope.row.labeling_status)" size="small" effect="plain">{{ statusLabel(scope.row.labeling_status) }}</el-tag></template></el-table-column>
        <el-table-column label="决策" width="125"><template #default="scope"><el-button link type="success" :disabled="scope.row.labeling_status === 'queued'" @click="$emit('sample-decision', scope.row, 'accepted')">入池</el-button><el-button link type="danger" @click="$emit('sample-decision', scope.row, 'excluded')">排除</el-button></template></el-table-column>
      </el-table>
    </section>
    <section class="node-section"><h3>质量检查</h3><DetailGrid :items="qualityItems" /></section>
  </StepPanelShell>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { safeObject, statusLabel, statusTag, type Row, type StepSnapshot } from "../../../types/demo-run";
import DetailGrid from "../common/DetailGrid.vue";
import StepPanelShell from "../common/StepPanelShell.vue";
const props = defineProps<{ snapshot: StepSnapshot }>();
defineEmits<{ retry: []; "sample-decision": [sample: Row, decision: "accepted" | "excluded"] }>();
const visual = computed(() => safeObject(props.snapshot.visual_payload));
const samples = computed<Row[]>(() => Array.isArray(visual.value.samples) ? visual.value.samples : []);
const funnel = computed(() => safeObject(visual.value.funnel));
const quality = computed(() => safeObject(visual.value.quality_summary));
const funnelItems = computed(() => [
  { label: "AI结果", value: funnel.value.ai_results || 0 }, { label: "候选样本", value: funnel.value.candidate_samples || 0 },
  { label: "自动排除", value: funnel.value.auto_excluded || 0 }, { label: "待标注", value: funnel.value.labeling_queue || 0 },
  { label: "已入池", value: funnel.value.pooled || 0 }
]);
const qualityItems = computed(() => [
  { label: "证据完整", value: quality.value.evidence_complete || 0 }, { label: "脱敏通过", value: quality.value.privacy_passed || 0 },
  { label: "重复样本", value: quality.value.duplicate || 0 }, { label: "阻断样本", value: quality.value.blocked || 0 }
]);
</script>
