<script setup lang="ts">
import { computed, inject } from 'vue'
import type { KbxAsyncState, KbxScreenDefinition } from '@kbx/contracts'
import KbxNetworkIndicator from './KbxNetworkIndicator.vue'
import KbxDataState from '../components/KbxDataState.vue'
import KbxTemplateStateBoundary from '../components/KbxTemplateStateBoundary.vue'
import { KbxScreenUtilityHostKey } from '../utility/host'
import { KbxPermissionHostKey } from '../permission/host'

const props=defineProps<{
  screen: KbxScreenDefinition
  progress?: string
  taskContext?: string
  instruction?: string
  online: boolean
  pendingCommands?: number
  syncing?: boolean
  contentState?: KbxAsyncState
  refreshing?: boolean
  retryLabel?: string
  errorRetryable?: boolean
  emptyActionLabel?: string
  can?: (permission:string)=>boolean
  actionsVisible?: boolean
}>()
const actionsVisible=computed(()=>props.actionsVisible!==false)
const emit=defineEmits<{ retry:[]; emptyAction:[] }>()
const utilityHost=inject(KbxScreenUtilityHostKey,null)
const permissionHost=inject(KbxPermissionHostKey,null)
const helpAvailable=computed(()=>utilityHost?.available(props.screen).includes('help')??false)
const templateMismatch=computed(()=>props.screen.type!=='wms-mobile'||props.screen.templateCode!=='T09')
function canPermission(permission:string){return props.can?props.can(permission):(permissionHost?.has(permission)??true)}
const permissionDenied=computed(()=>Boolean(props.screen.permissions?.some(permission=>!canPermission(permission))))
</script>

<template>
  <main class="kbx-wms-page" :data-screen-id="screen.id" data-screen-type="wms-mobile" :data-access="permissionDenied?'denied':'allowed'">
    <header class="kbx-wms-header" data-kbx-surface="mobile-header">
      <div><h1>{{screen.title}}</h1><strong v-if="progress" class="kbx-wms-progress">{{progress}}</strong></div>
      <div class="kbx-wms-header__tools" data-kbx-surface="network-state"><button v-if="helpAvailable" type="button" class="kbx-wms-help" @click="utilityHost?.open(screen,'help')">도움말</button><KbxNetworkIndicator :online="online" :pending-commands="pendingCommands ?? 0" :syncing="syncing ?? false" /></div>
    </header>
    <KbxDataState v-if="templateMismatch" class="kbx-wms-contract-error" state="error" title="현장 화면 구성이 올바르지 않습니다." detail="WMS Mobile 전용 화면 정의가 아니므로 작업 입력을 차단했습니다." />
    <KbxDataState v-else-if="permissionDenied" class="kbx-wms-contract-error" state="error" title="이 현장 업무를 사용할 권한이 없습니다." detail="현재 권한으로 작업 입력을 할 수 없습니다. 관리자에게 권한을 확인하세요." />
    <template v-else>
    <section v-if="taskContext || $slots.context" class="kbx-wms-context" aria-label="현재 작업" data-kbx-surface="task-context"><slot name="context">{{taskContext}}</slot></section>
    <section v-if="$slots.notice" class="kbx-wms-notice" aria-live="polite" data-kbx-surface="notice"><slot name="notice" /></section>
    <section class="kbx-wms-content" data-kbx-surface="instruction/content">
      <h2 v-if="instruction" class="kbx-wms-instruction">{{instruction}}</h2>
      <KbxTemplateStateBoundary :state="contentState" :refreshing="refreshing" :retry-label="retryLabel || '다시 시도'" :error-retryable="errorRetryable !== false" :empty-action-label="emptyActionLabel" @retry="emit('retry')" @empty-action="emit('emptyAction')"><slot /></KbxTemplateStateBoundary>
    </section>
    <footer v-if="$slots.actions && actionsVisible" class="kbx-wms-actions" aria-label="현재 작업 행동" data-kbx-surface="sticky-actions"><slot name="actions" /></footer>
    </template>
  </main>
</template>

<style scoped>
.kbx-wms-page{min-height:100dvh;max-width:var(--kbx-wms-mobile-max-width);margin:0 auto;background:var(--kbx-color-surface);display:flex;flex-direction:column;color:var(--kbx-color-text)}.kbx-wms-header{min-height:var(--kbx-wms-header-min-height);padding:var(--kbx-space-3) var(--kbx-space-4);border-bottom:var(--kbx-border-width) solid var(--kbx-color-border);display:flex;align-items:center;justify-content:space-between;gap:var(--kbx-space-3);position:sticky;top:0;background:var(--kbx-color-surface);z-index:5}.kbx-wms-header h1{margin:0;font-size:var(--kbx-font-2xl);line-height:1.3}.kbx-wms-progress{display:block;margin-top:var(--kbx-space-1);font-size:var(--kbx-font-md);font-weight:600}.kbx-wms-context{min-height:var(--kbx-control-height);display:flex;align-items:center;padding:0 var(--kbx-space-4);border-bottom:var(--kbx-border-width) solid var(--kbx-color-border);background:var(--kbx-color-surface-muted);font-size:var(--kbx-font-sm);font-weight:500}.kbx-wms-notice{padding:var(--kbx-space-2) var(--kbx-space-4) 0}.kbx-wms-content{flex:1;padding:var(--kbx-space-4)}.kbx-wms-instruction{margin:0 0 var(--kbx-space-3);font-size:var(--kbx-font-lg);font-weight:600}.kbx-wms-actions{position:sticky;bottom:0;padding:var(--kbx-space-3) var(--kbx-space-4) max(var(--kbx-space-3),env(safe-area-inset-bottom));border-top:var(--kbx-border-width) solid var(--kbx-color-border);background:var(--kbx-color-surface)}
.kbx-wms-contract-error{margin:var(--kbx-space-4)}.kbx-wms-header__tools{display:flex;align-items:center;gap:var(--kbx-space-2)}.kbx-wms-help{min-height:var(--kbx-control-sm);padding:0 var(--kbx-space-2);border:var(--kbx-border-width) solid var(--kbx-color-border);border-radius:var(--kbx-radius-sm);background:var(--kbx-color-surface);font-size:var(--kbx-font-sm)}
</style>
