<script setup lang="ts">
import { ref } from 'vue'
import { KbxBarcodeCapture, KbxProblemFeedback, KbxWmsActionButton, KbxWmsMobilePage, playKbxWmsFeedback, useKbxNetworkState } from '@kbx/ui'
import { putawayScreen } from './putaway.definition'
import { createWmsExecutionNotConnectedProblem, wmsFrontendScenarioMode } from '../shared/wmsFrontendCapability'
const props=defineProps<{taskId:string}>()
const {online}=useKbxNetworkState()
const stage=ref<'item'|'location'|'done'>('item')
const item=ref('')
const suggested='A-01-03'
const expectedBarcode='8801234567001'
const message=ref('적치할 상품을 스캔하세요.')
const problem=createWmsExecutionNotConnectedProblem('입고 적치')
function scan(value:string){
  if(!wmsFrontendScenarioMode)return
  if(stage.value==='item'){
    if(value!==expectedBarcode){message.value=`다른 상품입니다. ${expectedBarcode}을 스캔하세요.`;playKbxWmsFeedback('error');return}
    item.value=value;stage.value='location';message.value=`추천 위치 ${suggested}를 스캔하세요.`;playKbxWmsFeedback('success');return
  }
  if(stage.value==='location'){
    if(value!==suggested){message.value=`잘못된 위치입니다. 현재 ${value}, 작업 위치 ${suggested}. ${suggested}로 이동하세요.`;playKbxWmsFeedback('error');return}
    stage.value='done';message.value='Demo 적치 흐름을 완료했습니다. 운영에서는 Server 결과 확인 후 완료됩니다.';playKbxWmsFeedback('success')
  }
}
function reset(){stage.value='item';item.value='';message.value='적치할 상품을 스캔하세요.'}
</script>
<template><KbxWmsMobilePage :screen="putawayScreen" :progress="stage==='done'?'적치완료':'적치중'" :task-context="`Task ${props.taskId}`" :online="online" :actions-visible="wmsFrontendScenarioMode"><template #notice><KbxProblemFeedback v-if="!wmsFrontendScenarioMode" :problem="problem" :dismissible="false" /></template><template v-if="wmsFrontendScenarioMode"><p class="msg" role="status" aria-live="polite">{{message}}</p><div v-if="item" class="box"><small>상품</small><strong>운동화 BLACK 270</strong><span>{{item}}</span></div><div v-if="stage!=='item'" class="box location"><small>추천 LOCATION</small><strong>{{suggested}}</strong></div><KbxBarcodeCapture v-if="stage!=='done'" :enabled="online" :label="stage==='item'?'ITEM SCAN':'LOCATION SCAN'" @scan="event=>scan(event.normalizedValue)" /></template><template #actions><KbxWmsActionButton v-if="wmsFrontendScenarioMode&&stage==='done'" label="다음 상품" @click="reset" /></template></KbxWmsMobilePage></template>
<style scoped>.msg{font-weight:650}.box{display:flex;flex-direction:column;gap:var(--kbx-space-1);padding:var(--kbx-space-4);border:var(--kbx-border-width) solid var(--kbx-color-border);border-radius:var(--kbx-radius-lg);margin-bottom:var(--kbx-space-3)}.box small,.box span{color:var(--kbx-color-text-muted)}.box strong{font-size:var(--kbx-font-xl)}.location strong{font-size:var(--kbx-font-2xl)}</style>
