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

const props = defineProps<{
  current: number
  required: number
  busy?: boolean
}>()
const emit = defineEmits<{ close: []; submit: [number] }>()
const quantity = ref(props.current)
</script>

<template>
  <div class="backdrop" @click.self="$emit('close')">
    <section class="sheet" role="dialog" aria-modal="true" aria-labelledby="quantity-title">
      <h2 id="quantity-title">피킹 수량 입력</h2>
      <p>상품 바코드를 최소 1회 확인한 뒤 사용합니다.</p>
      <label>
        피킹 수량
        <input v-model.number="quantity" type="number" inputmode="decimal" :min="1" :max="required">
      </label>
      <div class="hint">필요수량 {{ required }}</div>
      <div class="actions">
        <KbxWmsActionButton label="취소" variant="secondary" @click="$emit('close')" />
        <KbxWmsActionButton
          label="수량 적용"
          :busy="busy"
          :disabled="quantity <= 0 || quantity > required"
          @click="$emit('submit', quantity)"
        />
      </div>
    </section>
  </div>
</template>

<style scoped>
.backdrop { position:fixed; inset:0; background:var(--kbx-color-overlay); display:flex; align-items:flex-end; z-index:31; }
.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; }
h2 { margin:0 0 4px; font-size:20px; }
p { margin:0 0 16px; color:var(--kbx-color-text-muted); }
label { display:block; font-weight:600; }
input { width:100%; min-height:52px; margin-top:6px; padding:0 12px; box-sizing:border-box; font:inherit; font-size:22px; text-align:right; border:1px solid var(--kbx-color-border-strong); border-radius:6px; }
.hint { margin-top:6px; text-align:right; color:var(--kbx-color-text-muted); font-size:13px; }
.actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:18px; }
</style>
