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

defineProps<{
  reviewFilter: string
  categoryFilter: number | null
  totalPending: number
  visibleCount: number
  reviewStats: Array<{ label: string; value: number }>
  categoryOptions: Array<{ id: number; label: string; count: number }>
}>()

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

<template>
  <div class="border-b border-violet-100 bg-white/75 p-6">
    <div class="flex flex-col gap-5 xl:flex-row xl:items-end 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-xl font-bold text-slate-900">Offene Nominierungen</h2>
        <p class="mt-2 max-w-2xl text-sm leading-6 text-slate-500">
          Kompakte Liste für viele Freitext-Fälle. Wähle links einen Fall aus und entscheide rechts, ob daraus ein Kandidat wird.
        </p>
      </div>
      <div class="grid gap-2 sm:grid-cols-3 xl:min-w-[360px]">
        <div v-for="stat in reviewStats" :key="stat.label" class="rounded-2xl border border-violet-50 bg-violet-50/50 px-3 py-2">
          <p class="text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-500">{{ stat.label }}</p>
          <strong class="mt-1 block text-lg text-violet-800">{{ stat.value }}</strong>
        </div>
      </div>
    </div>

    <div class="mt-5 grid gap-3 md:grid-cols-[minmax(0,1fr)_220px]">
      <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 class="rounded-2xl border border-violet-100 bg-violet-50/60 px-4 py-3 text-sm text-slate-600">
        {{ visibleCount }} / {{ totalPending }} sichtbar
      </div>
    </div>
    <div class="mt-3 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>
