<script setup lang="ts">
import { ref } from 'vue'
import type { KbxWmsExceptionType } from '@kbx/contracts'
import { KbxWmsActionButton } from '@kbx/ui'

defineProps<{ busy?: boolean }>()
const emit = defineEmits<{
  close: []
  submit: [KbxWmsExceptionType, string]
}>()

const type = ref<KbxWmsExceptionType>('no-stock')
const memo = ref('')

const options: { value: KbxWmsExceptionType; label: string }[] = [
  { value: 'no-stock', label: '실물 없음' },
  { value: 'short-quantity', label: '수량 부족' },
  { value: 'wrong-location', label: '위치 오류' },
  { value: 'damaged-item', label: '상품 이상' },
  { value: 'barcode-issue', label: '바코드 문제' },
  { value: 'other', label: '기타' },
]
</script>

<template>
  <div class="backdrop" @click.self="$emit('close')">
    <section class="sheet" role="dialog" aria-modal="true" aria-labelledby="exception-title">
      <h2 id="exception-title">피킹 문제 신고</h2>
      <p>가장 가까운 사유 하나만 선택하세요.</p>
      <label v-for="option in options" :key="option.value" class="reason">
        <input v-model="type" type="radio" :value="option.value">
        <span>{{ option.label }}</span>
      </label>
      <label class="memo">메모 <small>선택 입력</small>
        <textarea v-model="memo" rows="3" maxlength="300" />
      </label>
      <div class="actions">
        <KbxWmsActionButton label="취소" variant="secondary" @click="$emit('close')" />
        <KbxWmsActionButton label="문제 등록" :busy="busy" @click="$emit('submit', type, memo)" />
      </div>
    </section>
  </div>
</template>

<style scoped>
.backdrop { position:fixed; inset:0; background:var(--kbx-color-overlay); display:flex; align-items:flex-end; z-index:30; }
.sheet { width:min(520px,100%); margin:0 auto; background:var(--kbx-color-surface); padding:20px 16px max(16px, env(safe-area-inset-bottom)); border-radius:12px 12px 0 0; max-height:85dvh; overflow:auto; }
h2 { margin:0 0 4px; font-size:20px; }
p { margin:0 0 14px; color:var(--kbx-color-text-muted); }
.reason { min-height:48px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--kbx-color-border); }
.reason input { width:20px; height:20px; }
.memo { display:block; margin-top:16px; font-weight:600; }
.memo small { font-weight:400; color:var(--kbx-color-text-muted); }
textarea { width:100%; margin-top:6px; border:1px solid var(--kbx-color-border); border-radius:6px; padding:10px; font:inherit; box-sizing:border-box; }
.actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; }
</style>
