<script setup lang="ts">
import { ref, computed } from 'vue'
import { rustItems, itemCategories } from '@/data/rust-items'
import { Search, X } from 'lucide-vue-next'

const emit = defineEmits<{
  select: [shortname: string]
  close: []
}>()

const searchQuery = ref('')
const selectedCategory = ref<string>('all')

const filteredItems = computed(() => {
  let items = rustItems
  if (selectedCategory.value !== 'all') {
    items = items.filter(i => i.category === selectedCategory.value)
  }
  const q = searchQuery.value.toLowerCase()
  if (q) {
    items = items.filter(i => i.name.toLowerCase().includes(q) || i.shortname.toLowerCase().includes(q))
  }
  return items
})
</script>

<template>
  <div class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="emit('close')">
    <div class="bg-neutral-900 border border-neutral-800 rounded-xl w-full max-w-2xl max-h-[80vh] flex flex-col">
      <!-- Header -->
      <div class="p-4 border-b border-neutral-800 flex items-center justify-between">
        <h2 class="text-lg font-semibold text-neutral-100">Add Item</h2>
        <button @click="emit('close')" class="text-neutral-500 hover:text-neutral-300">
          <X class="w-5 h-5" />
        </button>
      </div>

      <!-- Search + Filter -->
      <div class="p-4 space-y-3 border-b border-neutral-800">
        <div class="relative">
          <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
          <input
            v-model="searchQuery"
            placeholder="Search items..."
            class="w-full bg-neutral-800 border border-neutral-700 rounded-lg pl-9 pr-3 py-2 text-sm text-neutral-200"
            autofocus
          />
        </div>
        <div class="flex flex-wrap gap-1">
          <button
            @click="selectedCategory = 'all'"
            class="px-2 py-1 rounded text-xs"
            :class="selectedCategory === 'all' ? 'bg-oxide-500 text-white' : 'bg-neutral-800 text-neutral-400 hover:text-neutral-200'"
          >
            All
          </button>
          <button
            v-for="cat in itemCategories"
            :key="cat"
            @click="selectedCategory = cat"
            class="px-2 py-1 rounded text-xs capitalize"
            :class="selectedCategory === cat ? 'bg-oxide-500 text-white' : 'bg-neutral-800 text-neutral-400 hover:text-neutral-200'"
          >
            {{ cat }}
          </button>
        </div>
      </div>

      <!-- Item Grid -->
      <div class="flex-1 overflow-y-auto p-4">
        <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
          <button
            v-for="item in filteredItems"
            :key="item.shortname"
            @click="emit('select', item.shortname)"
            class="text-left px-3 py-2 bg-neutral-800 rounded-lg hover:bg-neutral-700 transition-colors group"
          >
            <div class="text-sm text-neutral-200 group-hover:text-oxide-400">{{ item.name }}</div>
            <div class="text-xs text-neutral-500">{{ item.shortname }}</div>
          </button>
        </div>
        <div v-if="filteredItems.length === 0" class="text-center py-8 text-neutral-500">
          No items found
        </div>
      </div>
    </div>
  </div>
</template>
