<template>
  <UCard v-if="lowStockItems.length > 0">
    <template #header>
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-2">
          <UIcon name="i-heroicons-arrow-trending-down" class="w-5 h-5 text-orange-500" />
          <h3 class="text-lg font-semibold">Low Stock Items</h3>
        </div>
        <UBadge color="orange" variant="soft">
          {{ lowStockItems.length }}
        </UBadge>
      </div>
    </template>

    <div class="space-y-2">
      <div
        v-for="item in displayedItems"
        :key="item.id"
        class="flex items-center justify-between p-3 rounded-lg bg-orange-50 hover:bg-orange-100 transition-colors"
      >
        <div class="flex-1 min-w-0">
          <p class="font-medium text-gray-900 truncate">{{ item.name }}</p>
          <div class="flex items-center gap-2 text-sm">
            <UBadge color="orange" size="xs">
              {{ item.quantity }}/{{ item.low_stock_threshold }} {{ item.unit?.abbreviation }}
            </UBadge>
            <span class="text-gray-600">
              {{ getUrgencyText(item) }}
            </span>
          </div>
        </div>
        
        <div class="flex gap-1">
          <UButton
            size="xs"
            color="green"
            variant="soft"
            icon="i-heroicons-arrow-trending-up"
            @click="$emit('restock-item', item)"
          >
            Restock
          </UButton>
          <UButton
            size="xs"
            color="gray"
            variant="ghost"
            icon="i-heroicons-pencil"
            @click="$emit('view-item', item)"
          />
        </div>
      </div>

      <UButton
        v-if="lowStockItems.length > maxDisplay"
        color="gray"
        variant="soft"
        size="sm"
        class="w-full"
        @click="expanded = !expanded"
      >
        {{ expanded ? 'Show Less' : `Show ${lowStockItems.length - maxDisplay} More` }}
      </UButton>
    </div>
  </UCard>
</template>

<script setup lang="ts">
const props = defineProps<{
  items: any[]
  maxDisplay?: number
}>()

const emit = defineEmits<{
  'view-item': [item: any]
  'restock-item': [item: any]
}>()

const expanded = ref(false)
const maxDisplay = props.maxDisplay || 5

// Filter and sort items by low stock urgency
const lowStockItems = computed(() => {
  return props.items
    .filter(item => {
      if (!item.low_stock_threshold) return false
      return Number(item.quantity) <= Number(item.low_stock_threshold)
    })
    .sort((a, b) => {
      // Sort by urgency: items closest to 0 first
      const urgencyA = Number(a.quantity) / Number(a.low_stock_threshold)
      const urgencyB = Number(b.quantity) / Number(b.low_stock_threshold)
      return urgencyA - urgencyB
    })
})

const displayedItems = computed(() => {
  if (expanded.value) {
    return lowStockItems.value
  }
  return lowStockItems.value.slice(0, maxDisplay)
})

// Helper function
const getUrgencyText = (item: any) => {
  const ratio = Number(item.quantity) / Number(item.low_stock_threshold)
  if (ratio <= 0.25) return 'Critical'
  if (ratio <= 0.5) return 'Very low'
  return 'Low'
}
</script>
