<script setup lang="ts">
import type { KbxAsyncState, KbxProblem, KbxScreenDefinition, KbxSummaryItem, KbxTemplateContext, KbxWorkQueueCounter } from '@kbx/contracts'
import KbxExceptionSummary from './KbxExceptionSummary.vue'
import KbxScreenFrame from './KbxScreenFrame.vue'
import KbxSummaryBar from './KbxSummaryBar.vue'
import KbxTemplateContextBar from './KbxTemplateContextBar.vue'
import KbxTemplateStateBoundary from './KbxTemplateStateBoundary.vue'
import KbxProblemFeedback from './KbxProblemFeedback.vue'
import KbxSectionHeader from './KbxSectionHeader.vue'

withDefaults(defineProps<{
  screen:KbxScreenDefinition
  selectionCount?:number
  can?:(permission:string)=>boolean
  breadcrumb?:string
  context?:KbxTemplateContext|null
  contentState?:KbxAsyncState
  refreshing?:boolean
  summaryItems?:KbxSummaryItem[]
  exceptionCounters?:KbxWorkQueueCounter[]
  activeExceptionKey?:string|null
  problem?:KbxProblem|null
  problemActionAllowlist?:readonly string[]
  emptyTitle?:string
  emptyDetail?:string
  emptyActionLabel?:string
  errorTitle?:string
  errorDetail?:string
  retryLabel?:string
  errorRetryable?:boolean
  queueTitle?:string
  queueDescription?:string
  queueCount?:number
  queueCountUnit?:string
}>(), { context:null, contentState:'ready', refreshing:false, summaryItems:()=>[], exceptionCounters:()=>[], activeExceptionKey:null, problem:null, problemActionAllowlist:()=>[], emptyTitle:'', emptyDetail:'', emptyActionLabel:'', errorTitle:'', errorDetail:'', retryLabel:'다시 조회', errorRetryable:true, queueTitle:'작업 Queue', queueDescription:'', queueCountUnit:'건' })
const emit=defineEmits<{ command:[string]; exceptionFilter:[string|null]; problemAction:[string]; retryProblem:[]; dismissProblem:[]; emptyAction:[] }>()
</script>

<template>
  <KbxScreenFrame expected-type="queue" template-code="T06" :screen="screen" :selection-count="selectionCount" :can="can" :breadcrumb="breadcrumb" :suppress-default-utility="Boolean($slots.utility)" @command="emit('command',$event)">
    <template #utility><slot name="utility" /></template><template #notice><KbxProblemFeedback v-if="problem" :problem="problem" :allowed-action-ids="problemActionAllowlist" @action="emit('problemAction',$event)" @retry="emit('retryProblem')" @dismiss="emit('dismissProblem')" /><slot name="notice" /></template>
    <div v-if="$slots.search" class="kbx-queue-page__search" data-kbx-surface="search"><slot name="search" /></div>
    <section v-if="$slots.summary || summaryItems.length" class="kbx-queue-page__summary" data-kbx-surface="work-summary"><slot name="summary"><KbxSummaryBar :items="summaryItems" /></slot></section>
    <section v-if="$slots.exceptions || exceptionCounters.length" class="kbx-queue-page__exceptions" data-kbx-surface="exception-summary"><slot name="exceptions"><KbxExceptionSummary :counters="exceptionCounters" :active-key="activeExceptionKey" @select="emit('exceptionFilter',$event)" /></slot></section>
    <div v-if="$slots.context || context" data-kbx-surface="context"><slot name="context"><KbxTemplateContextBar :context="context" /></slot></div>
    <section v-if="$slots.contextual" class="kbx-queue-page__contextual" data-kbx-surface="bulk-action"><slot name="contextual" /></section>
    <main class="kbx-queue-page__content" data-kbx-surface="queue/content"><slot name="queue-heading"><KbxSectionHeader :title="queueTitle" :description="queueDescription" :count="queueCount" :count-unit="queueCountUnit"><template #actions><slot name="queue-actions" /></template></KbxSectionHeader></slot><div class="kbx-queue-page__content-body"><KbxTemplateStateBoundary :state="contentState" :refreshing="refreshing" idle-action-label="조회 F3" :empty-title="emptyTitle" :empty-detail="emptyDetail" :empty-action-label="emptyActionLabel" :error-title="errorTitle" :error-detail="errorDetail" :retry-label="retryLabel" :error-retryable="errorRetryable" @idle-action="emit('command','search')" @empty-action="emit('emptyAction')" @retry="emit('command','search')"><slot name="content" /></KbxTemplateStateBoundary></div></main>
    <footer v-if="$slots.footer" class="kbx-queue-page__footer" data-kbx-surface="footer"><slot name="footer" /></footer>
    <div v-if="$slots.detail" data-kbx-surface="detail"><slot name="detail" /></div>
  </KbxScreenFrame>
</template>

<style scoped>
.kbx-queue-page__summary,.kbx-queue-page__exceptions{border:var(--kbx-border-width) solid var(--kbx-color-border);background:var(--kbx-color-surface);padding:var(--kbx-space-2);box-shadow:var(--kbx-shadow-shell)}.kbx-queue-page__summary{border-left:var(--kbx-accent-border-width) solid var(--kbx-color-module-accent)}.kbx-queue-page__exceptions{border-left:var(--kbx-accent-border-width) solid var(--kbx-color-warning)}.kbx-queue-page__summary :deep(.kbx-summary-bar){border-top:0}.kbx-queue-page__content{min-height:var(--kbx-content-min-height);flex:1;display:flex;flex-direction:column;border:var(--kbx-border-width) solid var(--kbx-color-border);background:var(--kbx-color-surface);box-shadow:var(--kbx-shadow-shell)}.kbx-queue-page__content :deep(.kbx-section-header){padding:0 var(--kbx-space-2);background:var(--kbx-color-section-heading)}.kbx-queue-page__content-body{min-height:0;flex:1}.kbx-queue-page__contextual{position:sticky;top:var(--kbx-command-bar-height);z-index:6}.kbx-queue-page__footer{min-height:var(--kbx-control-sm);border-top:var(--kbx-border-width) solid var(--kbx-color-border)}
</style>
