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

const props=withDefaults(defineProps<{
  screen:KbxScreenDefinition
  selectionCount?:number
  can?:(permission:string)=>boolean
  breadcrumb?:string
  dirty?:boolean
  showKeyboardGuide?:boolean
  context?:KbxTemplateContext|null
  contentState?:KbxAsyncState
  refreshing?:boolean
  errorRetryable?:boolean
  errors?:KbxValidationError[]
  summaryItems?:KbxSummaryItem[]
  problem?:KbxProblem|null
  problemActionAllowlist?:readonly string[]
  gridTitle?:string
  gridDescription?:string
  rowCount?:number
  rowCountUnit?:string
}>(), { showKeyboardGuide:true, context:null, contentState:'ready', refreshing:false, errorRetryable:true, errors:()=>[], summaryItems:()=>[], problem:null, problemActionAllowlist:()=>[], gridTitle:'빠른 입력', gridDescription:'', rowCountUnit:'건' })
const emit=defineEmits<{ command:[string]; problemAction:[string]; retryProblem:[]; dismissProblem:[] }>()
</script>

<template>
  <KbxScreenFrame expected-type="fast-entry" template-code="T04" :screen="screen" :selection-count="selectionCount" :can="can" :breadcrumb="breadcrumb" :dirty="dirty" :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>
    <section v-if="showKeyboardGuide" class="kbx-fast-entry__guide" aria-label="빠른 입력 키보드 안내" data-kbx-surface="keyboard-guide"><slot name="guide"><span><kbd>Enter</kbd> 입력 확정/다음</span><span><kbd>F2</kbd> 코드 조회</span><span><kbd>Ctrl+V</kbd> Excel 붙여넣기</span><span><kbd>Ctrl+D</kbd> Fill Down</span><span>오류는 Grid에서 바로 이동</span></slot></section>
    <div v-if="$slots.context || context" data-kbx-surface="context"><slot name="context"><KbxTemplateContextBar :context="context" /></slot></div>
    <div v-if="$slots.contextual" class="kbx-fast-entry__contextual" data-kbx-surface="bulk-action"><slot name="contextual" /></div>
    <main class="kbx-fast-entry__content" data-kbx-surface="editable-grid">
      <slot name="grid-heading"><KbxSectionHeader :title="gridTitle" :description="gridDescription" :count="rowCount" :count-unit="rowCountUnit"><template #actions><slot name="grid-actions" /></template></KbxSectionHeader></slot>
      <div class="kbx-fast-entry__grid-body"><KbxTemplateStateBoundary :state="contentState" :refreshing="refreshing" :error-retryable="errorRetryable" @retry="emit('command','reload')"><slot name="content" /></KbxTemplateStateBoundary></div>
    </main>
    <section v-if="$slots.validation || errors.length" class="kbx-fast-entry__validation" data-kbx-surface="validation"><slot name="validation"><KbxValidationSummary :errors="errors" /></slot></section>
    <footer v-if="$slots.summary || summaryItems.length" class="kbx-fast-entry__summary" data-kbx-surface="summary"><slot name="summary"><KbxSummaryBar :items="summaryItems" align="end" /></slot></footer>
  </KbxScreenFrame>
</template>

<style scoped>
.kbx-fast-entry__guide{min-height:var(--kbx-control-sm);display:flex;align-items:center;gap:var(--kbx-space-3);padding:0 var(--kbx-space-2);border:var(--kbx-border-width) solid var(--kbx-color-border);border-left:var(--kbx-accent-border-width) solid var(--kbx-color-module-accent);background:var(--kbx-color-section-heading);font-size:var(--kbx-font-xs);color:var(--kbx-color-text-muted);flex-wrap:wrap}.kbx-fast-entry__guide kbd{font:inherit;font-weight:600;color:var(--kbx-color-text)}.kbx-fast-entry__contextual{position:sticky;top:var(--kbx-command-bar-height);z-index:6}.kbx-fast-entry__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);border-top:calc(var(--kbx-border-width) * 2) solid var(--kbx-color-module-accent);background:var(--kbx-color-surface);box-shadow:var(--kbx-shadow-shell)}.kbx-fast-entry__content :deep(.kbx-section-header){padding:0 var(--kbx-space-2);background:var(--kbx-color-section-heading)}.kbx-fast-entry__grid-body{min-height:0;flex:1}.kbx-fast-entry__validation{border-top:var(--kbx-border-width) solid var(--kbx-color-border);padding-top:var(--kbx-space-2)}.kbx-fast-entry__summary{position:sticky;bottom:0;z-index:5;min-height:var(--kbx-control-sm);border-top:var(--kbx-border-width) solid var(--kbx-color-border);display:flex;align-items:center;background:var(--kbx-color-surface)}.kbx-fast-entry__summary :deep(.kbx-summary-bar){width:100%;border-top:0}
</style>
