<script setup lang="ts">
import { CATEGORY_LABELS } from '~/types/purchase'
import type { Purchase, PurchaseInsert, EquipmentCategory } from '~/types/purchase'

definePageMeta({ middleware: 'auth' })

const route = useRoute()
const { getPurchase, updatePurchase, deletePurchase } = usePurchases()

const purchase = ref<Purchase | null>(null)
const showEdit = ref(false)

purchase.value = await getPurchase(route.params.id as string)

if (!purchase.value) {
  await navigateTo('/purchases')
}

async function handleUpdate(data: PurchaseInsert) {
  if (!purchase.value) return
  const updated = await updatePurchase(purchase.value.id, data)
  if (updated) {
    purchase.value = updated
    showEdit.value = false
  }
}

async function handleDelete() {
  if (!purchase.value || !confirm('이 장비를 삭제하시겠습니까?')) return
  await deletePurchase(purchase.value.id)
  await navigateTo('/purchases')
}

function formatPrice(price: number) {
  return price.toLocaleString('ko-KR') + '원'
}
</script>

<template>
  <div v-if="purchase" class="p-6 space-y-6 max-w-2xl">
    <!-- Header -->
    <div class="flex items-center gap-4">
      <NuxtLink to="/purchases">
        <UButton icon="i-lucide-arrow-left" color="neutral" variant="ghost" />
      </NuxtLink>
      <div class="flex-1">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ purchase.name }}</h1>
        <p class="text-gray-500 dark:text-gray-400">
          {{ CATEGORY_LABELS[purchase.category as EquipmentCategory] }}
        </p>
      </div>
      <div class="flex gap-2">
        <UButton icon="i-lucide-pencil" label="수정" color="neutral" variant="outline" @click="showEdit = true" />
        <UButton icon="i-lucide-trash-2" label="삭제" color="error" variant="outline" @click="handleDelete" />
      </div>
    </div>

    <!-- Details -->
    <UCard>
      <dl class="grid grid-cols-2 gap-4">
        <div>
          <dt class="text-sm text-gray-500 dark:text-gray-400">브랜드</dt>
          <dd class="mt-1 font-medium text-gray-900 dark:text-white">{{ purchase.brand || '-' }}</dd>
        </div>
        <div>
          <dt class="text-sm text-gray-500 dark:text-gray-400">구매가격</dt>
          <dd class="mt-1 font-bold text-xl text-primary-600">{{ formatPrice(purchase.price) }}</dd>
        </div>
        <div>
          <dt class="text-sm text-gray-500 dark:text-gray-400">구매일</dt>
          <dd class="mt-1 font-medium text-gray-900 dark:text-white">{{ purchase.purchase_date }}</dd>
        </div>
        <div>
          <dt class="text-sm text-gray-500 dark:text-gray-400">구매처</dt>
          <dd class="mt-1 font-medium text-gray-900 dark:text-white">{{ purchase.store || '-' }}</dd>
        </div>
        <div>
          <dt class="text-sm text-gray-500 dark:text-gray-400">보증기간 만료</dt>
          <dd class="mt-1 font-medium text-gray-900 dark:text-white">{{ purchase.warranty_until || '-' }}</dd>
        </div>
        <div>
          <dt class="text-sm text-gray-500 dark:text-gray-400">등록일</dt>
          <dd class="mt-1 font-medium text-gray-900 dark:text-white">
            {{ new Date(purchase.created_at).toLocaleDateString('ko-KR') }}
          </dd>
        </div>
        <div class="col-span-2">
          <dt class="text-sm text-gray-500 dark:text-gray-400">메모</dt>
          <dd class="mt-1 font-medium text-gray-900 dark:text-white whitespace-pre-wrap">
            {{ purchase.notes || '-' }}
          </dd>
        </div>
      </dl>
    </UCard>

    <!-- Edit Modal -->
    <PurchasesPurchaseModal
      v-model:open="showEdit"
      :initial="purchase"
      @submit="handleUpdate"
    />
  </div>
</template>
