<template>
  <Card class="p-5">
    <div class="space-y-5">
      <div>
        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-500">Überblick</p>
        <h2 class="mt-1 text-xl font-bold text-slate-900">Schwerpunkte</h2>
      </div>

      <div class="grid gap-2">
        <div v-for="card in focusCards" :key="card.label" class="rounded-2xl border border-slate-100 bg-slate-50 px-4 py-3">
          <p class="text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-500">{{ card.label }}</p>
          <strong class="mt-1 block truncate text-base text-slate-950">{{ card.value }}</strong>
          <p class="mt-1 text-xs leading-5 text-slate-500">{{ card.note }}</p>
        </div>
      </div>

      <section class="space-y-3">
        <div class="flex items-center justify-between gap-3">
          <p class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Admins</p>
          <button
            type="button"
            class="text-xs font-semibold text-sky-600 hover:text-sky-800"
            @click="$emit('update:selectedAdmin', 'all')"
          >
            Alle
          </button>
        </div>
        <div class="max-h-48 space-y-2 overflow-y-auto pr-1">
          <button
            v-for="item in adminCounts"
            :key="item.key"
            type="button"
            class="flex w-full items-center justify-between gap-3 rounded-2xl border px-3 py-2 text-left text-sm transition"
            :class="selectedAdmin === item.key ? 'border-sky-200 bg-sky-50 text-sky-900' : 'border-slate-200 bg-white text-slate-700 hover:bg-slate-50'"
            @click="$emit('update:selectedAdmin', item.key)"
          >
            <span class="min-w-0 truncate font-semibold">{{ item.label }}</span>
            <span class="rounded-full bg-white px-2 py-0.5 text-xs font-bold text-sky-700">{{ item.count }}</span>
          </button>
          <p v-if="adminCounts.length === 0" class="rounded-2xl border border-dashed border-slate-200 px-3 py-5 text-center text-sm text-slate-500">
            Noch keine Admin-Aktivität.
          </p>
        </div>
      </section>

      <section class="space-y-3">
        <div class="flex items-center justify-between gap-3">
          <p class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Aktionen</p>
          <button
            type="button"
            class="text-xs font-semibold text-sky-600 hover:text-sky-800"
            @click="$emit('update:selectedAction', 'all')"
          >
            Alle
          </button>
        </div>
        <div class="max-h-56 space-y-2 overflow-y-auto pr-1">
          <button
            v-for="item in actionCounts"
            :key="item.key"
            type="button"
            class="flex w-full items-center justify-between gap-3 rounded-2xl border px-3 py-2 text-left text-sm transition"
            :class="selectedAction === item.key ? 'border-sky-200 bg-sky-50 text-sky-900' : 'border-slate-200 bg-white text-slate-700 hover:bg-slate-50'"
            @click="$emit('update:selectedAction', item.key)"
          >
            <span class="min-w-0 truncate font-semibold">{{ item.label }}</span>
            <span class="rounded-full bg-white px-2 py-0.5 text-xs font-bold text-sky-700">{{ item.count }}</span>
          </button>
          <p v-if="actionCounts.length === 0" class="rounded-2xl border border-dashed border-slate-200 px-3 py-5 text-center text-sm text-slate-500">
            Noch keine Aktionstypen.
          </p>
        </div>
      </section>

      <section class="space-y-3">
        <div class="flex items-center justify-between gap-3">
          <p class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Objekte</p>
          <button
            type="button"
            class="text-xs font-semibold text-sky-600 hover:text-sky-800"
            @click="$emit('update:selectedEntity', 'all')"
          >
            Alle
          </button>
        </div>
        <div class="max-h-48 space-y-2 overflow-y-auto pr-1">
          <button
            v-for="item in entityCounts"
            :key="item.key"
            type="button"
            class="flex w-full items-center justify-between gap-3 rounded-2xl border px-3 py-2 text-left text-sm transition"
            :class="selectedEntity === item.key ? 'border-sky-200 bg-sky-50 text-sky-900' : 'border-slate-200 bg-white text-slate-700 hover:bg-slate-50'"
            @click="$emit('update:selectedEntity', item.key)"
          >
            <span class="min-w-0 truncate font-semibold">{{ item.label }}</span>
            <span class="rounded-full bg-white px-2 py-0.5 text-xs font-bold text-sky-700">{{ item.count }}</span>
          </button>
          <p v-if="entityCounts.length === 0" class="rounded-2xl border border-dashed border-slate-200 px-3 py-5 text-center text-sm text-slate-500">
            Noch keine Objekttypen.
          </p>
        </div>
      </section>
    </div>
  </Card>
</template>

<script setup lang="ts">
import type { AuditCountItem, AuditFocusCard } from './useAdminAuditManager'
import Card from '../ui/Card.vue'

defineProps<{
  focusCards: AuditFocusCard[]
  adminCounts: AuditCountItem[]
  actionCounts: AuditCountItem[]
  entityCounts: AuditCountItem[]
  selectedAdmin: string
  selectedAction: string
  selectedEntity: string
}>()

defineEmits<{
  'update:selectedAdmin': [value: string]
  'update:selectedAction': [value: string]
  'update:selectedEntity': [value: string]
}>()
</script>
