<script setup lang="ts">
import type { KbxIntegrationStatusView } from '@kbx/contracts'
import KbxButton from './KbxButton.vue'

const props = defineProps<{ value: KbxIntegrationStatusView }>()
const emit = defineEmits<{ details: []; retry: [] }>()

const stateLabel: Record<KbxIntegrationStatusView['state'], string> = {
  queued: '전송 대기',
  delivering: '전송 중',
  retrying: '자동 재시도',
  delivered: '전송 완료',
  failed: '연계 실패',
  suspended: '연계 중지',
}
</script>

<template>
  <section class="kbx-integration-state" :data-state="value.state" role="status" aria-live="polite">
    <div class="kbx-integration-state__body">
      <strong>{{ value.label || stateLabel[value.state] }}</strong>
      <span>{{ stateLabel[value.state] }}</span>
      <small v-if="value.state === 'retrying' && value.nextRetryAt">다음 자동 재시도 {{ value.nextRetryAt }}</small>
      <small v-if="value.detail">{{ value.detail }}</small>
      <small v-if="value.correlationId">참조번호 {{ value.correlationId }}</small>
    </div>
    <div class="kbx-integration-state__actions">
      <KbxButton label="상세보기" variant="tertiary" @click="emit('details')" />
      <KbxButton v-if="value.retryAllowed && value.state === 'failed'" label="재처리" variant="secondary" @click="emit('retry')" />
    </div>
  </section>
</template>

<style scoped>
.kbx-integration-state { display:flex; align-items:center; justify-content:space-between; gap:var(--kbx-space-3); min-height:var(--kbx-control-lg); padding:var(--kbx-space-2) var(--kbx-space-3); border:thin solid var(--kbx-color-border); border-radius:var(--kbx-radius-sm); background:var(--kbx-color-surface); }
.kbx-integration-state__body { display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--kbx-space-2); }
.kbx-integration-state__body span,.kbx-integration-state__body small { color:var(--kbx-color-text-muted); }
.kbx-integration-state__actions { display:flex; gap:var(--kbx-space-2); }
.kbx-integration-state[data-state="retrying"] { border-color:var(--kbx-color-warning); }
.kbx-integration-state[data-state="failed"],.kbx-integration-state[data-state="suspended"] { border-color:var(--kbx-color-danger); }
.kbx-integration-state[data-state="delivered"] { border-color:var(--kbx-color-success); }
</style>
