<script setup lang="ts">
import type { KbxAuditEntry, KbxConflictSnapshot, KbxWorkflowDefinition } from '@kbx/contracts'
import KbxAuditTrail from './KbxAuditTrail.vue'
import KbxConflictResolver from './KbxConflictResolver.vue'
import KbxWorkflowBar from './KbxWorkflowBar.vue'

withDefaults(defineProps<{ status:string; version?:number; workflow?:KbxWorkflowDefinition; conflict?:KbxConflictSnapshot|null; auditEntries?:KbxAuditEntry[]; can?:(permission:string)=>boolean }>(), { version:undefined, conflict:null, auditEntries:()=>[] })
const emit=defineEmits<{ transition:[string]; reloadConflict:[]; dismissConflict:[] }>()
</script>
<template>
  <section class="kbx-record-lifecycle" aria-label="업무 상태 및 이력">
    <div v-if="version!=null" class="kbx-record-lifecycle__version">Version {{ version }}</div>
    <KbxConflictResolver v-if="conflict" :conflict="conflict" @reload="emit('reloadConflict')" @cancel="emit('dismissConflict')" />
    <KbxWorkflowBar v-if="workflow" :workflow="workflow" :current="status" :can="can" @transition="emit('transition',$event)" />
    <details v-if="auditEntries.length" class="kbx-record-lifecycle__audit">
      <summary>변경이력 {{ auditEntries.length }}건</summary>
      <KbxAuditTrail :entries="auditEntries" />
    </details>
  </section>
</template>
<style scoped>
.kbx-record-lifecycle{display:grid;gap:var(--kbx-space-2)}
.kbx-record-lifecycle__version{justify-self:end;font-size:var(--kbx-font-xs);color:var(--kbx-color-text-muted)}
.kbx-record-lifecycle__audit{border-top:var(--kbx-border-width) solid var(--kbx-color-border);padding-top:var(--kbx-space-2)}
.kbx-record-lifecycle__audit summary{cursor:pointer;font-weight:600;margin-bottom:var(--kbx-space-2)}
</style>
