<template>
  <div>
    <div class="flex items-center justify-between mb-6">
      <h1 class="text-3xl font-bold text-gray-900">Inventory</h1>
      
      <div class="flex gap-2">
        <UButton 
          to="/scan" 
          color="primary" 
          size="lg"
          icon="i-heroicons-qr-code"
        >
          Scan Item
        </UButton>
        
        <UButton 
          color="white" 
          size="lg"
          icon="i-heroicons-plus"
          @click="showAddForm = true"
        >
          Add Manually
        </UButton>
      </div>
    </div>

    <!-- Add Item Form (Overlay) -->
    <div v-if="showAddForm" class="fixed inset-0 z-50 flex items-start justify-center pt-20 px-4 bg-black/50">
      <div class="w-full max-w-lg">
        <AddItemForm 
          @close="showAddForm = false"
          @added="handleItemAdded"
        />
      </div>
    </div>

    <!-- Edit Item Modal -->
    <EditItemModal 
      :item="editingItem"
      @close="editingItem = null"
      @updated="handleItemUpdated"
    />

    <!-- Inventory List -->
    <InventoryList
      ref="inventoryListRef"
      :refresh="refreshKey"
      @add-item="showAddForm = true"
      @edit-item="editingItem = $event"
    />
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'default'
})

const showAddForm = ref(false)
const editingItem = ref<any>(null)
const refreshKey = ref(0)
const inventoryListRef = ref()

const handleItemAdded = (item: any) => {
  showAddForm.value = false
  // Reload the inventory list
  inventoryListRef.value?.reload()
}

const handleItemUpdated = (item: any) => {
  editingItem.value = null
  inventoryListRef.value?.reload()
}
</script>
