<script setup lang="ts">
import { computed } from 'vue'
import type { KbxImportProgressEvent } from '@kbx/contracts'

const props = defineProps<{ progress: KbxImportProgressEvent | null }>()
const width = computed(() => `${Math.min(100, Math.max(0, props.progress?.progressPercent ?? 0))}%`)
</script>

<template>
  <section v-if="progress" class="kbx-job-progress" aria-live="polite">
    <header>
      <strong>{{ progress.message ?? '처리 중' }}</strong>
      <span>{{ progress.progressPercent }}%</span>
    </header>
    <div class="track"><div class="bar" :style="{ width }" /></div>
    <div class="counts">
      <span>처리 {{ progress.processedRows.toLocaleString() }} / {{ progress.totalRows.toLocaleString() }}</span>
      <span>정상 {{ progress.validRows.toLocaleString() }}</span>
      <span v-if="progress.invalidRows">오류 {{ progress.invalidRows.toLocaleString() }}</span>
      <span v-if="progress.warningRows">경고 {{ progress.warningRows.toLocaleString() }}</span>
    </div>
  </section>
</template>

<style scoped>
.kbx-job-progress { border:1px solid var(--kbx-color-border); background:var(--kbx-color-surface); padding:12px; }
.kbx-job-progress header, .counts { display:flex; justify-content:space-between; gap:12px; font-size:13px; }
.track { margin:10px 0; height:8px; background:var(--kbx-color-surface-muted); border-radius:4px; overflow:hidden; }
.bar { height:100%; background:var(--kbx-color-primary); transition:width .18s ease; }
.counts { justify-content:flex-start; color:var(--kbx-color-text-muted); flex-wrap:wrap; }
</style>
