<script setup lang="ts">
import { Ban, Search } from '@lucide/vue'

defineProps<{
  reviewFilter: string
  categoryFilter: string | null
  totalPending: number
  visibleCount: number
  categoryOptions: Array<{ id: string; label: string; count: number }>
  activeMainCategory?: string | null
  showCategoryFilterChips?: boolean
  showBlacklistButton?: boolean
}>()

const emit = defineEmits<{
  'update:reviewFilter': [value: string]
  'update:categoryFilter': [value: string | null]
  'open-blacklist': []
}>()
</script>

<template>
  <div class="border-b border-violet-100 bg-white/75 p-6">
    <div class="space-y-5">
      <div class="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
        <div>
          <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Review Queue</p>
          <h2 class="mt-1 text-2xl font-bold text-slate-900">{{ activeMainCategory || 'Offene Nominierungen' }}</h2>
          <p class="mt-1 text-sm text-slate-500">Offene Nominierungen</p>
        </div>

        <button
          v-if="showBlacklistButton"
          type="button"
          class="inline-flex h-11 items-center justify-center gap-2 rounded-2xl border border-rose-200 bg-rose-50 px-4 text-sm font-semibold text-rose-700 transition hover:bg-rose-100"
          @click="emit('open-blacklist')"
        >
          <Ban class="h-4 w-4" />
          Blacklist verwalten
        </button>
      </div>

      <label class="relative block">
        <Search class="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-violet-400" />
        <input
          :value="reviewFilter"
          type="text"
          class="h-12 w-full rounded-2xl border border-violet-200 bg-white/90 pl-11 pr-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
          placeholder="Nach Kategorie, Kandidat oder Nutzer suchen"
          @input="emit('update:reviewFilter', ($event.target as HTMLInputElement).value)"
        />
      </label>
    </div>

    <div v-if="showCategoryFilterChips !== false" class="mt-4 flex flex-wrap gap-2">
      <button
        type="button"
        class="rounded-full border px-3 py-1.5 text-xs font-semibold transition"
        :class="categoryFilter === null ? 'border-violet-200 bg-violet-100 text-violet-800' : 'border-violet-100 bg-white text-slate-600 hover:bg-violet-50'"
        @click="emit('update:categoryFilter', null)"
      >
        Alle Kategorien
      </button>
      <button
        v-for="category in categoryOptions"
        :key="category.id"
        type="button"
        class="rounded-full border px-3 py-1.5 text-xs font-semibold transition"
        :class="categoryFilter === category.id ? 'border-violet-200 bg-violet-100 text-violet-800' : 'border-violet-100 bg-white text-slate-600 hover:bg-violet-50'"
        @click="emit('update:categoryFilter', category.id)"
      >
        {{ category.label }} · {{ category.count }}
      </button>
    </div>
  </div>
</template>
