<script setup lang="ts">
import type { DatasetFile } from '@/types'

defineProps<{
  files: DatasetFile[]
  selectedFileId: string
  splitCounts: { train: number; validation: number; test: number }
}>()

const emit = defineEmits<{ select: [file: DatasetFile] }>()

function fileKey(file: DatasetFile) {
  return String(file.id || file.name)
}

function splitLabel(split?: DatasetFile['split']) {
  if (!split) return '数据文件'
  return { train: '训练集', validation: '验证集', test: '测试集' }[split]
}

function splitTagType(split?: DatasetFile['split']) {
  if (!split) return 'info'
  return ({ train: 'primary', validation: 'warning', test: 'success' } as const)[split]
}
</script>

<template>
  <section class="split-summary" aria-label="数据切分统计">
    <div class="split-stat train"><span>训练集</span><strong>{{ splitCounts.train.toLocaleString() }}</strong></div>
    <div class="split-stat validation"><span>验证集</span><strong>{{ splitCounts.validation.toLocaleString() }}</strong></div>
    <div class="split-stat test"><span>测试集</span><strong>{{ splitCounts.test.toLocaleString() }}</strong></div>
  </section>

  <nav v-if="files.length > 1" class="split-file-tabs" aria-label="数据切分文件">
    <button
      v-for="file in files"
      :key="fileKey(file)"
      type="button"
      class="split-file-tab"
      :class="{ active: fileKey(file) === selectedFileId }"
      @click="emit('select', file)"
    >
      <el-tag :type="splitTagType(file.split)" size="small">{{ splitLabel(file.split) }}</el-tag>
      <strong>{{ (file.record_count || 0).toLocaleString() }} 条</strong>
      <span>{{ file.name }}</span>
    </button>
  </nav>
</template>

<style scoped lang="scss">
.split-summary,
.split-file-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.split-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border: 1px solid #e5eaf2;
  border-radius: 10px;
  background: #fbfcfe;
  color: #667085;
}

.split-stat strong { font-size: 18px; }
.split-stat.train strong { color: #4f46e5; }
.split-stat.validation strong { color: #d97706; }
.split-stat.test strong { color: #059669; }

.split-file-tab {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #e5eaf2;
  border-radius: 10px;
  background: #fff;
  color: #344054;
  cursor: pointer;
  text-align: left;
}

.split-file-tab:hover,
.split-file-tab.active {
  border-color: #818cf8;
  background: #f7f7ff;
}

.split-file-tab span:last-child {
  overflow: hidden;
  color: #8a94a6;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
