<template>
  <div
    class="fixed inset-0 bg-black/60 flex items-center justify-center z-50"
    @click.self="$emit('close')"
  >
    <div class="border border-border rounded-2xl w-[90%] max-w-2xl max-h-[80vh] flex flex-col shadow-2xl bg-gradient-to-b from-white to-[#f6f9fc]">
      <!-- Header -->
      <div class="flex items-center justify-between px-5 py-4 border-b border-border">
        <h3 class="text-base font-semibold text-[#3a5f88]">Icon auswaehlen</h3>
        <button
          class="w-7 h-7 rounded-lg border border-border bg-panel-2 text-text cursor-pointer hover:bg-[#e4ebf2] hover:border-[#b8c4d2]"
          @click="$emit('close')"
        >
          x
        </button>
      </div>

      <!-- Search -->
      <div class="px-5 py-3 border-b border-border">
        <input
          type="text"
          v-model="search"
          placeholder="Icon suchen..."
          ref="searchInput"
          class="w-full bg-panel-2 border border-border rounded-lg px-4 py-2.5 text-text text-sm placeholder:text-muted focus:outline-none focus:border-accent"
          @keydown.esc="$emit('close')"
        >
      </div>

      <!-- Current Selection -->
      <div v-if="modelValue" class="flex items-center gap-3 px-5 py-3 bg-panel-2 border-b border-border">
        <span class="text-xs text-muted">Aktuell:</span>
        <span class="material-symbols-outlined text-2xl text-accent">{{ String.fromCodePoint(modelValue) }}</span>
        <span class="flex-1 text-sm">{{ currentIconName }}</span>
        <button
          class="bg-[#f7dede] border border-red-200 text-[#b3261e] px-3 py-1.5 rounded-md text-xs cursor-pointer hover:bg-[#f2cfcf]"
          @click="selectIcon(0)"
        >
          Entfernen
        </button>
      </div>

      <!-- Icon Grid -->
      <div class="flex-1 overflow-y-auto p-4 grid grid-cols-[repeat(auto-fill,minmax(130px,1fr))] gap-2">
        <button
          v-for="icon in filteredIcons"
          :key="icon.name"
          class="flex flex-col items-center justify-center gap-2 p-3 bg-panel-2 border rounded-xl cursor-pointer transition-all hover:border-accent hover:-translate-y-0.5 min-h-[80px]"
          :class="icon.codepoint === modelValue ? 'border-accent-2 bg-accent-2/10' : 'border-border'"
          @click="selectIcon(icon.codepoint)"
          :title="icon.name"
        >
          <span class="material-symbols-outlined text-2xl text-text">{{ String.fromCodePoint(icon.codepoint) }}</span>
          <span class="text-[11px] text-muted text-center break-all leading-tight">{{ icon.name }}</span>
        </button>
      </div>

      <!-- No Results -->
      <div v-if="filteredIcons.length === 0" class="py-10 text-center text-muted">
        Keine Icons gefunden fuer "{{ search }}"
      </div>

      <!-- Hint when not searching -->
      <div v-if="!search && filteredIcons.length === 200" class="px-5 py-2 text-xs text-muted text-center border-t border-border">
        Zeige 200 von 4102 Icons - Suche verwenden um mehr zu finden
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { MATERIAL_ICONS, searchIcons, getIconByCodepoint } from '../icons';

const props = defineProps({
  modelValue: { type: Number, default: 0 }
});

const emit = defineEmits(['update:modelValue', 'close']);

const search = ref('');
const searchInput = ref(null);

const filteredIcons = computed(() => {
  const results = searchIcons(search.value);
  // Ohne Suche: max 200 Icons anzeigen (Performance)
  // Mit Suche: alle Ergebnisse anzeigen
  return search.value ? results : results.slice(0, 200);
});

const currentIconName = computed(() => {
  if (!props.modelValue) return '';
  const icon = getIconByCodepoint(props.modelValue);
  return icon ? icon.name : `0x${props.modelValue.toString(16)}`;
});

function selectIcon(codepoint) {
  emit('update:modelValue', codepoint);
  emit('close');
}

onMounted(() => {
  if (searchInput.value) {
    searchInput.value.focus();
  }
});
</script>
