<template>
  <UCard v-if="expiringItems.length > 0">
    <template #header>
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-2">
          <UIcon name="i-heroicons-exclamation-triangle" class="w-5 h-5 text-orange-500" />
          <h3 class="text-lg font-semibold">Items Expiring Soon</h3>
        </div>
        <UBadge color="orange" variant="soft">
          {{ expiringItems.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 hover:bg-gray-50 transition-colors"
        :class="getItemBgClass(item)"
      >
        <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="getExpiryColor(item)" size="xs">
              {{ getExpiryText(item) }}
            </UBadge>
            <span class="text-gray-600">
              {{ item.quantity }} {{ item.unit?.abbreviation }}
            </span>
          </div>
        </div>
        
        <UButton
          size="xs"
          color="gray"
          variant="ghost"
          icon="i-heroicons-arrow-right"
          @click="$emit('view-item', item)"
        />
      </div>

      <UButton
        v-if="expiringItems.length > maxDisplay"
        color="gray"
        variant="soft"
        size="sm"
        class="w-full"
        @click="expanded = !expanded"
      >
        {{ expanded ? 'Show Less' : `Show ${expiringItems.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]
}>()

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

// Filter and sort items by expiry
const expiringItems = computed(() => {
  const now = new Date()
  const thirtyDaysFromNow = new Date()
  thirtyDaysFromNow.setDate(now.getDate() + 30)

  return props.items
    .filter(item => {
      if (!item.expiry_date) return false
      const expiryDate = new Date(item.expiry_date)
      return expiryDate <= thirtyDaysFromNow
    })
    .sort((a, b) => {
      const dateA = new Date(a.expiry_date)
      const dateB = new Date(b.expiry_date)
      return dateA.getTime() - dateB.getTime()
    })
})

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

// Helper functions
const getDaysUntilExpiry = (item: any) => {
  if (!item.expiry_date) return null
  const today = new Date()
  const expiry = new Date(item.expiry_date)
  return Math.ceil((expiry.getTime() - today.getTime()) / (1000 * 60 * 60 * 24))
}

const getExpiryColor = (item: any) => {
  const days = getDaysUntilExpiry(item)
  if (days === null) return 'gray'
  if (days < 0) return 'red'
  if (days <= 3) return 'orange'
  if (days <= 7) return 'yellow'
  return 'green'
}

const getExpiryText = (item: any) => {
  const days = getDaysUntilExpiry(item)
  if (days === null) return 'No expiry'
  if (days < 0) return `Expired ${Math.abs(days)}d ago`
  if (days === 0) return 'Expires today'
  if (days === 1) return 'Expires tomorrow'
  if (days <= 7) return `${days} days left`
  return `${days} days left`
}

const getItemBgClass = (item: any) => {
  const days = getDaysUntilExpiry(item)
  if (days === null) return ''
  if (days < 0) return 'bg-red-50'
  if (days <= 3) return 'bg-orange-50'
  return ''
}
</script>
