<script setup lang="ts">
import { ref, computed } from 'vue'
import { rustItems, itemCategories } from '@/data/rust-items'
import Icon from '@/components/ds/core/Icon.vue'
import IconButton from '@/components/ds/core/IconButton.vue'
import DsInput from '@/components/ds/forms/Input.vue'

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>
  <Teleport to="body">
    <div class="lip-overlay" @click.self="emit('close')">
      <div class="lip-modal">
        <!-- Header -->
        <div class="lip-head">
          <span class="lip-head__title">Add item</span>
          <IconButton icon="x" size="sm" label="Close" @click="emit('close')" />
        </div>

        <!-- Search + category filter -->
        <div class="lip-filters">
          <DsInput
            v-model="searchQuery"
            icon="search"
            placeholder="Search items…"
            size="sm"
          />
          <div class="lip-cats">
            <button
              class="lip-cat"
              :class="{ 'lip-cat--active': selectedCategory === 'all' }"
              @click="selectedCategory = 'all'"
            >
              All
            </button>
            <button
              v-for="cat in itemCategories"
              :key="cat"
              class="lip-cat"
              :class="{ 'lip-cat--active': selectedCategory === cat }"
              @click="selectedCategory = cat"
            >
              {{ cat }}
            </button>
          </div>
        </div>

        <!-- Item grid -->
        <div class="lip-grid-wrap">
          <div v-if="filteredItems.length > 0" class="lip-grid">
            <button
              v-for="item in filteredItems"
              :key="item.shortname"
              class="lip-item"
              @click="emit('select', item.shortname)"
            >
              <span class="lip-item__name">{{ item.name }}</span>
              <span class="lip-item__short">{{ item.shortname }}</span>
            </button>
          </div>
          <div v-else class="lip-empty">
            <Icon name="search" :size="20" class="lip-empty__icon" />
            <span>No items found</span>
          </div>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<style scoped>
.lip-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.lip-modal {
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 640px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header */
.lip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border-subtle);
  flex: none;
}
.lip-head__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

/* Filters */
.lip-filters {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: none;
}
.lip-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.lip-cat {
  background: var(--surface-inset);
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--ring-default);
  padding: 3px 10px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  text-transform: capitalize;
  transition: var(--transition-colors);
}
.lip-cat:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}
.lip-cat--active {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: none;
}
.lip-cat--active:hover {
  background: var(--accent-hover);
}

/* Grid */
.lip-grid-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}
.lip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
}
.lip-item {
  background: var(--surface-inset);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--ring-default);
  padding: 9px 12px;
  text-align: left;
  cursor: pointer;
  transition: var(--transition-colors);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lip-item:hover {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}
.lip-item__name {
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: 500;
}
.lip-item:hover .lip-item__name {
  color: var(--accent-text);
}
.lip-item__short {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Empty */
.lip-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 0;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
.lip-empty__icon {
  color: var(--text-muted);
}
</style>
