<script setup lang="ts">
import type { KbxWorkItem, KbxWorkItemAction, KbxWorkQueueCounter } from '@kbx/contracts'
import KbxExceptionSummary from './KbxExceptionSummary.vue'
import KbxExceptionDetailDrawer from './KbxExceptionDetailDrawer.vue'

defineProps<{
  counters: KbxWorkQueueCounter[]
  activeKey?: string | null
  selectedItem?: KbxWorkItem | null
  can?: (permission: string) => boolean
}>()
const emit = defineEmits<{
  filter: [string | null]
  closeDetail: []
  action: [KbxWorkItemAction]
}>()
</script>

<template>
  <section class="kbx-exception-center">
    <KbxExceptionSummary :counters="counters" :active-key="activeKey" @select="emit('filter', $event)" />
    <div class="kbx-exception-center__queue"><slot /></div>
    <KbxExceptionDetailDrawer :item="selectedItem ?? null" :can="can" @close="emit('closeDetail')" @action="emit('action', $event)" />
  </section>
</template>

<style scoped>
.kbx-exception-center { display:flex; flex-direction:column; gap:8px; min-height:0; height:100%; }
.kbx-exception-center__queue { min-height:0; flex:1; }
</style>
