<template>
  <Card class="overflow-hidden">
    <div class="border-b border-slate-100 p-5">
      <div class="flex flex-wrap items-center justify-between gap-3">
        <div>
          <p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-500">Audit Log</p>
          <h2 class="mt-1 text-xl font-bold text-slate-900">Letzte Aktionen</h2>
        </div>
        <div class="grid h-10 w-10 place-items-center rounded-2xl bg-sky-100 text-sky-700">
          <FileClock class="h-5 w-5" />
        </div>
      </div>
    </div>

    <div class="max-h-[760px] divide-y divide-slate-100 overflow-y-auto" :aria-busy="loading">
      <article v-for="entry in entries" :key="entry.id" class="grid gap-4 px-5 py-4 sm:grid-cols-[16px_minmax(0,1fr)]">
        <span class="mt-2 h-3 w-3 rounded-full ring-4 ring-white" :class="entry.dotClass" />
        <div class="min-w-0">
          <div class="flex flex-wrap items-start justify-between gap-3">
            <div class="min-w-0">
              <div class="flex flex-wrap items-center gap-2">
                <span class="rounded-full border px-3 py-1 text-xs font-semibold" :class="entry.actionToneClass">
                  {{ entry.actionLabel }}
                </span>
                <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">{{ entry.actionGroup }}</span>
              </div>
              <h3 class="mt-3 text-base font-bold leading-6 text-slate-950">{{ entry.summary }}</h3>
            </div>
            <div class="flex shrink-0 items-start gap-3">
              <time class="text-right text-sm text-slate-500" :datetime="entry.createdAt">
                {{ entry.createdLabel }}
                <span class="block text-xs text-slate-400">{{ entry.ageLabel }}</span>
              </time>
              <Button
                variant="ghost"
                size="sm"
                class="gap-2 rounded-2xl border border-slate-200 bg-white px-3 text-slate-700 shadow-none hover:bg-slate-50"
                @click="$emit('openDetail', entry)"
              >
                <Eye class="h-4 w-4" />
                Details
              </Button>
            </div>
          </div>

          <div class="mt-3 grid gap-2 text-sm text-slate-500 md:grid-cols-3">
            <p>
              <span class="block text-[10px] font-bold uppercase tracking-[0.16em] text-slate-400">Admin</span>
              <span class="font-semibold text-slate-700">{{ entry.adminTwitchUserId }}</span>
            </p>
            <p>
              <span class="block text-[10px] font-bold uppercase tracking-[0.16em] text-slate-400">Objekt</span>
              <span class="font-semibold text-slate-700">{{ entry.entityLabel }}</span>
            </p>
            <p>
              <span class="block text-[10px] font-bold uppercase tracking-[0.16em] text-slate-400">Rohaktion</span>
              <code class="rounded-md bg-slate-100 px-1.5 py-0.5 text-xs font-semibold text-slate-700">{{ entry.actionType }}</code>
            </p>
          </div>

          <div v-if="entry.changeItems.length > 0" class="mt-3 rounded-2xl border border-amber-100 bg-amber-50/70 px-4 py-3">
            <p class="text-sm font-semibold text-amber-800">Änderungsdiff</p>
            <dl class="mt-3 grid gap-2">
              <div
                v-for="change in entry.changeItems"
                :key="`${change.field}-${change.to}`"
                class="grid gap-2 rounded-xl border border-white/80 bg-white/80 px-3 py-2 text-sm lg:grid-cols-[150px_minmax(0,1fr)]"
              >
                <dt class="font-bold text-slate-700">
                  {{ change.label }}
                  <span v-if="change.sensitive" class="ml-2 rounded-full bg-amber-100 px-2 py-0.5 text-[10px] uppercase tracking-[0.12em] text-amber-700">
                    sensibel
                  </span>
                </dt>
                <dd class="grid gap-2 sm:grid-cols-2">
                  <span class="min-w-0 rounded-lg bg-slate-50 px-2 py-1 text-slate-600">
                    <span class="block text-[10px] font-bold uppercase tracking-[0.14em] text-slate-400">Vorher</span>
                    <span class="break-words">{{ change.from || 'leer' }}</span>
                  </span>
                  <span class="min-w-0 rounded-lg bg-emerald-50 px-2 py-1 text-emerald-800">
                    <span class="block text-[10px] font-bold uppercase tracking-[0.14em] text-emerald-600">Nachher</span>
                    <span class="break-words">{{ change.to || 'leer' }}</span>
                  </span>
                </dd>
              </div>
            </dl>
          </div>

          <details v-if="entry.metadataItems.length > 0" class="mt-3 rounded-2xl border border-slate-100 bg-slate-50 px-4 py-3">
            <summary class="cursor-pointer text-sm font-semibold text-sky-700">Metadaten anzeigen</summary>
            <dl class="mt-3 grid gap-2 text-sm sm:grid-cols-2">
              <div v-for="item in entry.metadataItems" :key="item.key" class="min-w-0">
                <dt class="text-[10px] font-bold uppercase tracking-[0.16em] text-slate-400">{{ item.key }}</dt>
                <dd class="mt-0.5 break-words text-slate-700">{{ item.value }}</dd>
              </div>
            </dl>
          </details>
        </div>
      </article>

      <p v-if="entries.length === 0" class="px-5 py-14 text-center text-sm text-slate-500">
        {{ emptyText }}
      </p>
    </div>

    <div class="flex flex-wrap items-center justify-between gap-3 border-t border-slate-100 bg-white px-5 py-4">
      <p class="text-sm font-semibold text-slate-500">{{ pageSummaryLabel }}</p>
      <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="!hasMore || loadingMore || loading"
        @click="$emit('loadMore')"
      >
        <ChevronDown class="h-4 w-4" :class="{ 'animate-bounce': loadingMore }" />
        {{ hasMore ? (loadingMore ? 'Lädt ...' : 'Mehr laden') : 'Alles geladen' }}
      </Button>
    </div>
  </Card>
</template>

<script setup lang="ts">
import { ChevronDown, Eye, FileClock } from '@lucide/vue'

import type { AuditLogRow } from './useAdminAuditManager'
import Button from '../ui/Button.vue'
import Card from '../ui/Card.vue'

defineProps<{
  entries: AuditLogRow[]
  loading: boolean
  loadingMore: boolean
  hasMore: boolean
  pageSummaryLabel: string
  emptyText: string
}>()

defineEmits<{
  openDetail: [entry: AuditLogRow]
  loadMore: []
}>()
</script>
