<template>
  <Card class="p-5">
    <div class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_auto]">
      <div class="grid gap-3 lg:grid-cols-[minmax(260px,1.5fr)_180px_150px_150px]">
        <label class="relative block">
          <Search class="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-sky-500" />
          <input
            :value="query"
            class="h-12 w-full rounded-2xl border border-slate-200 bg-white pl-11 pr-4 text-sm outline-none transition focus:border-sky-400 focus:ring-4 focus:ring-sky-100"
            placeholder="Admin, Aktion, Objekt, Summary oder Metadaten suchen"
            type="search"
            @input="$emit('update:query', ($event.target as HTMLInputElement).value)"
          />
        </label>

        <NativeSelect
          :model-value="entityFilter"
          :options="entityOptions"
          @update:model-value="$emit('update:entityFilter', String($event ?? 'all'))"
        />

        <label class="relative block">
          <CalendarDays class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
          <input
            :value="fromDate"
            class="h-12 w-full rounded-2xl border border-slate-200 bg-white pl-10 pr-3 text-sm text-slate-900 outline-none transition focus:border-sky-400 focus:ring-4 focus:ring-sky-100"
            type="date"
            @input="$emit('update:fromDate', ($event.target as HTMLInputElement).value)"
          />
        </label>

        <label class="relative block">
          <CalendarDays class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
          <input
            :value="toDate"
            class="h-12 w-full rounded-2xl border border-slate-200 bg-white pl-10 pr-3 text-sm text-slate-900 outline-none transition focus:border-sky-400 focus:ring-4 focus:ring-sky-100"
            type="date"
            @input="$emit('update:toDate', ($event.target as HTMLInputElement).value)"
          />
        </label>
      </div>

      <div class="flex flex-wrap items-start gap-2 xl:justify-end">
        <Button
          variant="ghost"
          size="sm"
          class="gap-2 rounded-2xl border border-sky-200 bg-sky-50 px-4 text-sky-700 shadow-none hover:bg-sky-100"
          :disabled="loading"
          @click="$emit('refresh')"
        >
          <RefreshCw class="h-4 w-4" :class="{ 'animate-spin': loading }" />
          {{ loading ? 'Lädt ...' : 'Aktualisieren' }}
        </Button>
        <Button
          variant="ghost"
          size="sm"
          class="gap-2 rounded-2xl border border-slate-200 bg-white px-4 text-slate-700 shadow-none hover:bg-slate-50"
          :disabled="!hasRows"
          @click="$emit('export')"
        >
          <Download class="h-4 w-4" />
          CSV
        </Button>
        <Button
          v-if="activeFilterCount > 0"
          variant="ghost"
          size="sm"
          class="gap-2 rounded-2xl border border-slate-200 bg-white px-4 text-slate-600 shadow-none hover:bg-slate-50"
          @click="$emit('clear')"
        >
          <X class="h-4 w-4" />
          Filter
        </Button>
      </div>
    </div>

    <div class="mt-4 grid gap-4 2xl:grid-cols-[minmax(0,1fr)_420px]">
      <div class="flex flex-wrap gap-2">
        <button
          v-for="preset in filterPresets"
          :key="preset.key"
          type="button"
          class="min-h-12 rounded-2xl border px-4 py-2 text-left text-sm transition"
          :class="appliedPresetKey === preset.key ? 'border-sky-300 bg-sky-50 text-sky-800' : 'border-slate-200 bg-white text-slate-700 hover:border-sky-200 hover:bg-sky-50'"
          @click="$emit('applyPreset', preset.key)"
        >
          <span class="block font-bold">{{ preset.label }}</span>
          <span class="block max-w-64 truncate text-xs opacity-75">{{ preset.description }}</span>
        </button>
      </div>

      <div class="grid grid-cols-2 gap-2 sm:grid-cols-4">
        <div v-for="stat in stats" :key="stat.label" class="rounded-2xl border border-slate-100 bg-slate-50 px-3 py-2">
          <p class="truncate text-[10px] font-semibold uppercase tracking-[0.12em] text-slate-500">{{ stat.label }}</p>
          <strong class="mt-1 block text-lg leading-6 text-slate-950">{{ stat.value }}</strong>
          <p class="truncate text-[11px] text-slate-400">{{ stat.note }}</p>
        </div>
      </div>
    </div>

    <div class="mt-3 flex flex-wrap items-center justify-between gap-2 text-xs font-semibold text-slate-400">
      <span>Geladen: {{ lastLoadedLabel }} · Quelle: /api/admin/audit-entries</span>
      <span v-if="exportMessage" class="rounded-full border border-emerald-200 bg-emerald-50 px-3 py-1 text-emerald-700">{{ exportMessage }}</span>
    </div>
  </Card>
</template>

<script setup lang="ts">
import { CalendarDays, Download, RefreshCw, Search, X } from '@lucide/vue'

import type { AuditEntityOption, AuditFilterPreset, AuditStat } from './useAdminAuditManager'
import Button from '../ui/Button.vue'
import Card from '../ui/Card.vue'
import NativeSelect from '../ui/NativeSelect.vue'

defineProps<{
  query: string
  entityFilter: string
  entityOptions: AuditEntityOption[]
  fromDate: string
  toDate: string
  stats: AuditStat[]
  filterPresets: AuditFilterPreset[]
  appliedPresetKey: string
  exportMessage: string
  lastLoadedLabel: string
  loading: boolean
  hasRows: boolean
  activeFilterCount: number
}>()

defineEmits<{
  'update:query': [value: string]
  'update:entityFilter': [value: string]
  'update:fromDate': [value: string]
  'update:toDate': [value: string]
  applyPreset: [value: string]
  refresh: []
  export: []
  clear: []
}>()
</script>
