<script setup lang="ts">
import type { KbxAsyncState, KbxAuditEntry, KbxConflictSnapshot, KbxProblem, KbxScreenDefinition, KbxTemplateContext, KbxValidationError, KbxWorkflowDefinition } from '@kbx/contracts'
import KbxScreenFrame from './KbxScreenFrame.vue'
import KbxValidationSummary from './KbxValidationSummary.vue'
import KbxRecordLifecycle from './KbxRecordLifecycle.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; status?:string; dirty?:boolean; version?:number; errors?:KbxValidationError[]; workflow?:KbxWorkflowDefinition; conflict?:KbxConflictSnapshot|null; problem?:KbxProblem|null; problemActionAllowlist?:readonly string[]; auditEntries?:KbxAuditEntry[]; can?:(permission:string)=>boolean; breadcrumb?:string; context?:KbxTemplateContext|null; contentState?:KbxAsyncState; refreshing?:boolean; errorRetryable?:boolean; listTitle?:string; listCount?:number; listCountUnit?:string; detailTitle?:string; detailDescription?:string }>(), { status:'', dirty:false, errors:()=>[], conflict:null, problem:null, problemActionAllowlist:()=>[], auditEntries:()=>[], context:null, contentState:'ready', refreshing:false, errorRetryable:true, listTitle:'목록', listCountUnit:'건', detailTitle:'상세', detailDescription:'' })
const emit = defineEmits<{ command:[string]; transition:[string]; reloadConflict:[]; dismissConflict:[]; problemAction:[string]; retryProblem:[]; dismissProblem:[] }>()
</script>

<template>
  <KbxScreenFrame expected-type="master" template-code="T02" :screen="screen" :status="status" :dirty="dirty" :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="errors.length" data-kbx-surface="validation"><KbxValidationSummary :errors="errors" /></div>
    <KbxRecordLifecycle v-if="workflow || conflict || auditEntries.length || version!=null" data-kbx-surface="record-lifecycle" :status="status" :version="version" :workflow="workflow" :conflict="conflict" :audit-entries="auditEntries" :can="can" @transition="emit('transition',$event)" @reload-conflict="emit('reloadConflict')" @dismiss-conflict="emit('dismissConflict')" />
    <div v-if="$slots.context || context" data-kbx-surface="context"><slot name="context"><KbxTemplateContextBar :context="context" /></slot></div>
    <KbxTemplateStateBoundary :state="contentState" :refreshing="refreshing" :idle-action-label="$slots.list?'조회 F3':''" :error-retryable="errorRetryable" @idle-action="emit('command','search')" @retry="emit('command','search')">
      <div class="kbx-master-page__body" :class="{ 'without-list': !$slots.list }">
        <aside v-if="$slots.list" class="kbx-master-page__list" data-kbx-surface="master-list"><slot name="list-header"><KbxSectionHeader :title="listTitle" :count="listCount" :count-unit="listCountUnit"><template #actions><slot name="list-actions" /></template></KbxSectionHeader></slot><div class="kbx-master-page__list-body"><slot name="list" /></div></aside>
        <main class="kbx-master-page__detail" data-kbx-surface="detail">
          <slot name="detail-header"><KbxSectionHeader :title="detailTitle" :description="detailDescription"><template #actions><slot name="detail-actions" /></template></KbxSectionHeader></slot>
          <div class="kbx-master-page__detail-body"><slot name="detail" /></div>
          <section v-if="$slots.tabs" class="kbx-master-page__tabs" data-kbx-surface="tabs"><slot name="tabs" /></section>
        </main>
      </div>
    </KbxTemplateStateBoundary>
    <footer v-if="$slots.footer" class="kbx-master-page__footer" data-kbx-surface="footer"><slot name="footer" /></footer>
    <div v-if="$slots.drawer" data-kbx-surface="drawer"><slot name="drawer" /></div>
  </KbxScreenFrame>
</template>

<style scoped>
.kbx-master-page__body{display:grid;grid-template-columns:minmax(var(--kbx-master-list-min-width),32%) minmax(0,1fr);gap:var(--kbx-space-2);min-height:0;flex:1}.kbx-master-page__body.without-list{grid-template-columns:minmax(0,1fr)}.kbx-master-page__list,.kbx-master-page__detail{min-height:0;border:var(--kbx-border-width) solid var(--kbx-color-border);background:var(--kbx-color-surface);box-shadow:var(--kbx-shadow-shell)}.kbx-master-page__list{overflow:hidden;border-top-color:var(--kbx-color-module-accent);display:flex;flex-direction:column}.kbx-master-page__list :deep(.kbx-section-header){padding:0 var(--kbx-space-2);background:var(--kbx-color-section-heading)}.kbx-master-page__list-body{min-height:0;flex:1;display:flex;flex-direction:column}.kbx-master-page__detail{padding:0;overflow:auto;display:flex;flex-direction:column;gap:0;border-top:calc(var(--kbx-border-width) * 2) solid var(--kbx-color-module-accent)}.kbx-master-page__detail :deep(.kbx-section-header){padding:0 var(--kbx-space-3);background:var(--kbx-color-section-heading)}.kbx-master-page__detail-body{padding:var(--kbx-space-3) var(--kbx-space-4);display:flex;flex-direction:column;gap:var(--kbx-space-3)}.kbx-master-page__tabs{margin:0 var(--kbx-space-4);border-top:var(--kbx-border-width) solid var(--kbx-color-border);padding-top:var(--kbx-space-2)}.kbx-master-page__footer{min-height:var(--kbx-control-sm);border-top:var(--kbx-border-width) solid var(--kbx-color-border)}@media(max-width:68.75rem){.kbx-master-page__body{grid-template-columns:var(--kbx-master-list-compact-width) minmax(0,1fr)}}
</style>
