<script setup lang="ts">
import type { KbxAsyncState, KbxProblem, KbxQuickFilterItem, KbxScreenDefinition, KbxSummaryItem, KbxTemplateContext } from '@kbx/contracts'
import KbxQuickFilterBar from './KbxQuickFilterBar.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'

const props = withDefaults(defineProps<{
  screen: KbxScreenDefinition
  selectionCount?: number
  can?: (permission: string) => boolean
  breadcrumb?: string
  context?: KbxTemplateContext | null
  contentState?: KbxAsyncState
  refreshing?: boolean
  quickFilters?: KbxQuickFilterItem[]
  summaryItems?: KbxSummaryItem[]
  emptyActionLabel?: string
  errorRetryable?: boolean
  problem?: KbxProblem | null
  problemActionAllowlist?: readonly string[]
}>(), {
  context: null,
  contentState: 'ready',
  refreshing: false,
  quickFilters: () => [],
  summaryItems: () => [],
  emptyActionLabel: '',
  errorRetryable: true,
  problem: null,
  problemActionAllowlist: () => [],
})
const emit = defineEmits<{ command: [string]; quickFilter: [string]; emptyAction: []; problemAction:[string]; retryProblem:[]; dismissProblem:[] }>()
</script>

<template>
  <KbxScreenFrame expected-type="list" template-code="T01" :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-list-page__search" data-kbx-surface="search"><slot name="search" /></div>
    <div v-if="$slots['quick-filter'] || quickFilters.length" class="kbx-list-page__quick-filter" data-kbx-surface="quick-filter">
      <slot name="quick-filter"><KbxQuickFilterBar :items="quickFilters" @select="emit('quickFilter',$event)" /></slot>
    </div>
    <div v-if="$slots.context || props.context" data-kbx-surface="context"><slot name="context"><KbxTemplateContextBar :context="props.context" /></slot></div>
    <div v-if="$slots.contextual" class="kbx-list-page__contextual" data-kbx-surface="bulk-action"><slot name="contextual" /></div>
    <main class="kbx-list-page__content" data-kbx-surface="content"><KbxTemplateStateBoundary :state="contentState" :refreshing="refreshing" idle-action-label="조회 F3" :empty-action-label="emptyActionLabel" :error-retryable="errorRetryable" @idle-action="emit('command','search')" @empty-action="emit('emptyAction')" @retry="emit('command','search')"><slot name="content" /></KbxTemplateStateBoundary></main>
    <footer v-if="$slots.summary || summaryItems.length" class="kbx-list-page__summary" data-kbx-surface="summary"><slot name="summary"><KbxSummaryBar :items="summaryItems" /></slot></footer>
    <div v-if="$slots.detail" data-kbx-surface="detail-drawer"><slot name="detail" /></div>
  </KbxScreenFrame>
</template>

<style scoped>
.kbx-list-page__search :deep(.kbx-search-panel){box-shadow:inset var(--kbx-accent-border-width) 0 0 var(--kbx-color-module-accent)}.kbx-list-page__quick-filter{background:var(--kbx-color-surface)}.kbx-list-page__content{min-height:var(--kbx-content-min-height);flex:1;background:var(--kbx-color-surface)}.kbx-list-page__content :deep(.kbx-grid){box-shadow:var(--kbx-shadow-shell)}.kbx-list-page__summary{position:sticky;bottom:0;z-index:5;min-height:var(--kbx-control-sm);display:flex;align-items:center;border-top:var(--kbx-border-width) solid var(--kbx-color-border);background:var(--kbx-color-shell-chrome);color:var(--kbx-color-text-muted);font-size:var(--kbx-font-sm);box-shadow:0 calc(var(--kbx-border-width) * -1) calc(var(--kbx-border-width) * 2) rgba(16,24,40,.04)}.kbx-list-page__summary :deep(.kbx-summary-bar){width:100%;border-top:0}.kbx-list-page__contextual{position:sticky;top:var(--kbx-command-bar-height);z-index:6}
</style>
