pantry/app/components/inventory/AddItemForm.vue

<template>
  <UCard>
    <template #header>
      <div class="flex items-center justify-between">
        <h3 class="text-lg font-semibold">Add New Item</h3>
        <UButton 
          icon="i-heroicons-x-mark" 
          color="gray" 
          variant="ghost"
          @click="$emit('close')"
        />
      </div>
    </template>

    <form @submit.prevent="handleSubmit" class="space-y-4">
      <!-- Item Name -->
      <UFormGroup label="Item Name" required>
        <UInput 
          v-model="form.name"
          placeholder="e.g. Whole Milk, Pasta, Tomatoes"
          size="lg"
          autofocus
        />
      </UFormGroup>

      <!-- Quantity & Unit -->
      <div class="grid grid-cols-2 gap-3">
        <UFormGroup label="Quantity" required>
          <UInput 
            v-model.number="form.quantity"
            type="number"
            min="0.01"
            step="0.01"
            placeholder="1"
            size="lg"
          />
        </UFormGroup>

        <UFormGroup label="Unit" required>
          <USelect 
            v-model="form.unit_id"
            :options="unitOptions"
            option-attribute="label"
            value-attribute="value"
            placeholder="Select unit"
            size="lg"
          />
        </UFormGroup>
      </div>

      <!-- Expiry Date -->
      <UFormGroup label="Expiry Date" hint="Optional">
        <UInput 
          v-model="form.expiry_date"
          type="date"
          size="lg"
        />
      </UFormGroup>

      <!-- Notes -->
      <UFormGroup label="Notes" hint="Optional">
        <UTextarea
          v-model="form.notes"
          placeholder="Any additional notes..."
          :rows="2"
        />
      </UFormGroup>

      <!-- Tags -->
      <UFormGroup label="Tags" hint="Optional">
        <div class="space-y-2">
          <!-- Selected Tags -->
          <div v-if="selectedTags.length > 0" class="flex flex-wrap gap-1 mb-2">
            <UBadge 
              v-for="tag in selectedTags" 
              :key="tag.id"
              :style="{ backgroundColor: tag.color }"
              class="text-white cursor-pointer"
              @click="removeTag(tag.id)"
            >
              {{ tag.icon }} {{ tag.name }} ✕
            </UBadge>
          </div>

          <!-- Tag Selection by Category -->
          <div v-for="category in tagCategories" :key="category.name" class="space-y-1">
            <p class="text-xs font-medium text-gray-500 uppercase">{{ category.name }}</p>
            <div class="flex flex-wrap gap-1">
              <UButton
                v-for="tag in category.tags"
                :key="tag.id"
                size="xs"
                :color="isTagSelected(tag.id) ? 'primary' : 'gray'"
                :variant="isTagSelected(tag.id) ? 'solid' : 'outline'"
                @click="toggleTag(tag)"
              >
                {{ tag.icon }} {{ tag.name }}
              </UButton>
            </div>
          </div>
        </div>
      </UFormGroup>

      <!-- Submit -->
      <div class="flex gap-2 pt-2">
        <UButton 
          type="submit"
          color="primary"
          size="lg"
          class="flex-1"
          :loading="submitting"
          :disabled="!isValid"
        >
          Add Item
        </UButton>
        <UButton 
          color="gray"
          size="lg"
          variant="soft"
          @click="$emit('close')"
        >
          Cancel
        </UButton>
      </div>
    </form>
  </UCard>
</template>

<script setup lang="ts">
const { addInventoryItem, addItemTags } = useInventory()
const { getUnits } = useUnits()
const { getTags } = useTags()

const props = defineProps<{
  initialData?: {
    barcode?: string
    name?: string
    brand?: string
    image_url?: string
    quantity?: string
  }
}>()

const emit = defineEmits<{
  close: []
  added: [item: any]
}>()

// Form state
const form = reactive({
  name: '',
  quantity: 1,
  unit_id: '',
  expiry_date: '',
  notes: ''
})

const submitting = ref(false)
const selectedTags = ref<any[]>([])

// Load units and tags
const units = ref<any[]>([])
const tags = ref<any[]>([])

onMounted(async () => {
  const [unitsResult, tagsResult] = await Promise.all([
    getUnits(),
    getTags()
  ])

  units.value = unitsResult.data || []
  tags.value = tagsResult.data || []

  // Set default unit (Piece)
  const defaultUnit = units.value.find(u => u.abbreviation === 'pc')
  if (defaultUnit) {
    form.unit_id = defaultUnit.id
  }

  // Pre-fill from initial data (scan-to-add flow)
  if (props.initialData) {
    if (props.initialData.name) {
      form.name = props.initialData.name
    }
    
    // Add brand to notes if available
    if (props.initialData.brand) {
      form.notes = `Brand: ${props.initialData.brand}`
      
      if (props.initialData.barcode) {
        form.notes += `\nBarcode: ${props.initialData.barcode}`
      }
    } else if (props.initialData.barcode) {
      form.notes = `Barcode: ${props.initialData.barcode}`
    }

    // Parse quantity if available (e.g., "750g")
    if (props.initialData.quantity) {
      const quantityMatch = props.initialData.quantity.match(/^([\d.]+)\s*([a-zA-Z]+)$/)
      if (quantityMatch) {
        form.quantity = parseFloat(quantityMatch[1])
        // Try to match unit
        const unitAbbr = quantityMatch[2].toLowerCase()
        const matchedUnit = units.value.find(u => 
          u.abbreviation.toLowerCase() === unitAbbr
        )
        if (matchedUnit) {
          form.unit_id = matchedUnit.id
        }
      }
    }
  }
})

// Unit options for select
const unitOptions = computed(() => {
  const grouped: Record<string, any[]> = {}
  
  for (const unit of units.value) {
    const type = unit.unit_type
    if (!grouped[type]) grouped[type] = []
    grouped[type].push({
      label: `${unit.name} (${unit.abbreviation})`,
      value: unit.id
    })
  }

  return Object.entries(grouped).flatMap(([type, options]) => [
    { label: `— ${type.charAt(0).toUpperCase() + type.slice(1)} —`, value: '', disabled: true },
    ...options
  ])
})

// Tag categories for display
const tagCategories = computed(() => {
  const categories: Record<string, any[]> = {}
  
  for (const tag of tags.value) {
    const cat = tag.category
    if (!categories[cat]) categories[cat] = []
    categories[cat].push(tag)
  }

  return Object.entries(categories).map(([name, tags]) => ({
    name,
    tags
  }))
})

// Tag selection helpers
const isTagSelected = (tagId: string) => {
  return selectedTags.value.some(t => t.id === tagId)
}

const toggleTag = (tag: any) => {
  if (isTagSelected(tag.id)) {
    removeTag(tag.id)
  } else {
    selectedTags.value.push(tag)
  }
}

const removeTag = (tagId: string) => {
  selectedTags.value = selectedTags.value.filter(t => t.id !== tagId)
}

// Validation
const isValid = computed(() => {
  return form.name.trim().length > 0 && form.quantity > 0 && form.unit_id
})

// Submit
const handleSubmit = async () => {
  if (!isValid.value) return

  submitting.value = true

  const { data, error } = await addInventoryItem({
    name: form.name.trim(),
    quantity: form.quantity,
    unit_id: form.unit_id,
    expiry_date: form.expiry_date || null,
    notes: form.notes.trim() || null
  })

  if (error) {
    alert('Failed to add item: ' + error.message)
    submitting.value = false
    return
  }

  // Add tags if any selected
  if (data && selectedTags.value.length > 0) {
    const tagIds = selectedTags.value.map(t => t.id)
    await addItemTags(data.id, tagIds)
  }

  emit('added', data)
  submitting.value = false
}
</script>