<script setup lang="ts">
import { computed } from 'vue'
import { KbxButton, KbxDataState, KbxDrawer, KbxStatus, resolveKbxGridStatus } from '@kbx/ui'
import { kbxStatusCatalog } from '../../../../registry/statusCatalog'
import type { OrderDetailResponse } from './orderApi'
import type { OrderSearchRow } from './order-list.definition'

const props = defineProps<{
  open:boolean
  summary:OrderSearchRow | null
  detail:OrderDetailResponse | null
  loading?:boolean
  error?:string
}>()
const emit = defineEmits<{
  'update:open':[boolean]
  retry:[]
  fullDetail:[string]
}>()

const title = computed(() => props.summary?.orderNo ? `주문 ${props.summary.orderNo}` : '주문 상세')
const resolvedStatus = computed(() => resolveKbxGridStatus({definitions:kbxStatusCatalog.orderLifecycle}, props.detail?.status))


const maskedPhone = computed(() => {
  const value = props.detail?.phone ?? ''
  const digits = value.replace(/\D/g, '')
  if (digits.length < 7) return value
  return `${digits.slice(0,3)}-****-${digits.slice(-4)}`
})
</script>

<template>
  <KbxDrawer :open="open" :title="title" width="580px" @update:open="emit('update:open',$event)">
    <KbxDataState v-if="loading" state="loading" title="주문 상세를 불러오는 중입니다." />
    <KbxDataState v-else-if="error" state="error" title="주문 상세를 불러오지 못했습니다." :detail="error" action-label="다시 조회" @action="emit('retry')" />
    <div v-else-if="detail" class="order-detail" data-kbx-order-detail>
      <section class="order-detail__headline">
        <div><span>주문상태</span><KbxStatus :label="resolvedStatus.label" :semantic="resolvedStatus.semantic" :unknown="resolvedStatus.unknown" :raw-value="resolvedStatus.rawValue" /></div>
        <div><span>판매채널</span><strong>{{summary?.channelName || '-'}}</strong></div>
        <div><span>주문일</span><strong>{{detail.orderDate}}</strong></div>
      </section>

      <section>
        <h3>수취인</h3>
        <dl><dt>이름</dt><dd>{{detail.receiverName}}</dd><dt>연락처</dt><dd>{{maskedPhone}}</dd></dl>
      </section>

      <section>
        <h3>배송</h3>
        <p>{{detail.postalCode ? `[${detail.postalCode}] ` : ''}}{{detail.address1}} {{detail.address2}}</p>
      </section>

      <section>
        <h3>상품 <small>{{detail.lines.length}}종</small></h3>
        <div class="order-detail__lines">
          <article v-for="line in detail.lines" :key="line.id || line.clientId">
            <div><b>{{line.itemCode}}</b><span>{{line.itemName}}</span></div>
            <strong>{{Number(line.orderQty).toLocaleString('ko-KR')}} EA</strong>
          </article>
        </div>
      </section>
    </div>

    <template #footer>
      <div class="order-detail__footer">
        <KbxButton label="닫기" variant="secondary" @click="emit('update:open',false)" />
        <KbxButton v-if="detail" label="전체 상세" variant="primary" @click="emit('fullDetail',detail.orderId)" />
      </div>
    </template>
  </KbxDrawer>
</template>

<style scoped>
.order-detail{display:flex;flex-direction:column;gap:var(--kbx-space-4);font-size:var(--kbx-font-md)}
.order-detail section{border-bottom:var(--kbx-border-width) solid var(--kbx-color-border);padding-bottom:var(--kbx-space-3)}
.order-detail section:last-child{border-bottom:0}.order-detail h3{margin:0 0 var(--kbx-space-2);font-size:var(--kbx-font-lg)}
.order-detail h3 small{margin-left:var(--kbx-space-1);color:var(--kbx-color-text-muted);font-size:var(--kbx-font-xs);font-weight:400}
.order-detail__headline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--kbx-space-2)}
.order-detail__headline>div{display:grid;gap:var(--kbx-space-1)}.order-detail__headline span,dt{color:var(--kbx-color-text-muted);font-size:var(--kbx-font-xs)}
dl{display:grid;grid-template-columns:var(--kbx-label-width) minmax(0,1fr);gap:var(--kbx-space-2);margin:0}dd{margin:0}.order-detail p{margin:0;line-height:1.6}
.order-detail__lines{border:var(--kbx-border-width) solid var(--kbx-color-border)}.order-detail__lines article{min-height:var(--kbx-control-lg);display:flex;align-items:center;justify-content:space-between;gap:var(--kbx-space-3);padding:var(--kbx-space-2);border-bottom:var(--kbx-border-width) solid var(--kbx-color-border)}.order-detail__lines article:last-child{border-bottom:0}.order-detail__lines article>div{display:grid;min-width:0}.order-detail__lines span{color:var(--kbx-color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.order-detail__footer{display:flex;justify-content:flex-end;gap:var(--kbx-space-2)}
@media(max-width:42rem){.order-detail__headline{grid-template-columns:1fr}}
</style>
