<script setup lang="ts">
import { computed, ref } from 'vue'
import { KbxBarcodeCapture, KbxProblemFeedback, KbxWmsActionButton, KbxWmsMobilePage, playKbxWmsFeedback, useKbxNetworkState } from '@kbx/ui'
import { receivingScreen } from './receiving.definition'
import { createWmsExecutionNotConnectedProblem, wmsFrontendScenarioMode } from '../shared/wmsFrontendCapability'

const props=defineProps<{taskId:string}>()
const {online}=useKbxNetworkState()
const stage=ref<'asn'|'item'|'completed'>('asn')
const asnNo=ref('')
const received=ref(0)
const expectedQty=3
const expectedAsn='ASN-260811-001'
const expectedBarcode='8801234567001'
const message=ref('입고예정번호 또는 ASN을 스캔하세요.')
const problem=createWmsExecutionNotConnectedProblem('입고 검수')
const progress=computed(()=>stage.value==='completed'?'검수완료':stage.value==='asn'?'입고대기':`검수 ${received.value} / ${expectedQty}`)

function scan(value:string){
  if(!wmsFrontendScenarioMode)return
  if(stage.value==='asn'){
    if(value!==expectedAsn){message.value=`다른 입고예정입니다. ${expectedAsn}을 스캔하세요.`;playKbxWmsFeedback('error');return}
    asnNo.value=value;stage.value='item';message.value='상품 바코드를 스캔하세요.';playKbxWmsFeedback('success');return
  }
  if(stage.value==='item'){
    if(value!==expectedBarcode){message.value=`다른 상품입니다. 필요한 바코드는 ${expectedBarcode}입니다.`;playKbxWmsFeedback('error');return}
    if(received.value>=expectedQty){message.value='예정수량을 모두 확인했습니다. 검수를 완료하세요.';playKbxWmsFeedback('neutral');return}
    received.value+=1;message.value=received.value===expectedQty?'예정수량과 일치합니다. 검수를 완료하세요.':`${received.value} / ${expectedQty} 확인했습니다. 같은 상품을 계속 스캔하세요.`;playKbxWmsFeedback('success')
  }
}
function complete(){
  if(received.value!==expectedQty){message.value=`예정 ${expectedQty}개 중 ${received.value}개만 확인했습니다. 계속 스캔하세요.`;playKbxWmsFeedback('error');return}
  stage.value='completed';message.value='Demo 검수 흐름을 완료했습니다. 운영에서는 Server 결과 확인 후 완료됩니다.';playKbxWmsFeedback('success')
}
function reset(){stage.value='asn';asnNo.value='';received.value=0;message.value='입고예정번호 또는 ASN을 스캔하세요.'}
</script>
<template>
  <KbxWmsMobilePage :screen="receivingScreen" :progress="progress" :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>
      <section v-if="asnNo" class="card"><small>입고예정</small><strong>{{asnNo}}</strong></section>
      <section v-if="stage!=='asn'" class="card"><small>상품</small><strong>운동화 BLACK 270</strong><span>{{expectedBarcode}}</span><div class="qty">예정 {{expectedQty}} · 검수 {{received}} · 남음 {{Math.max(expectedQty-received,0)}}</div></section>
      <KbxBarcodeCapture v-if="stage!=='completed'" :enabled="online" :label="stage==='asn'?'ASN SCAN':'ITEM SCAN'" @scan="event=>scan(event.normalizedValue)" />
    </template>
    <template #actions>
      <template v-if="wmsFrontendScenarioMode">
        <KbxWmsActionButton v-if="stage==='item'" label="검수 완료" :disabled="!online || received!==expectedQty" @click="complete" />
        <KbxWmsActionButton v-else-if="stage==='completed'" label="다음 입고" @click="reset" />
      </template>
    </template>
  </KbxWmsMobilePage>
</template>
<style scoped>.msg{margin:0 0 var(--kbx-space-3);font-weight:650}.card{display:flex;flex-direction:column;gap:var(--kbx-space-1);border:var(--kbx-border-width) solid var(--kbx-color-border);border-radius:var(--kbx-radius-lg);padding:var(--kbx-space-4);margin-bottom:var(--kbx-space-3);background:var(--kbx-color-surface)}.card small,.card span{color:var(--kbx-color-text-muted)}.card strong{font-size:var(--kbx-font-xl)}.qty{font-size:var(--kbx-font-lg);font-weight:650}</style>
