<template>
  <Teleport to="body">
    <div v-if="entry" class="fixed inset-0 z-50">
      <button
        type="button"
        class="absolute inset-0 bg-slate-950/35 backdrop-blur-sm"
        aria-label="Audit-Details schließen"
        @click="$emit('close')"
      />

      <aside class="absolute right-0 top-0 flex h-full w-full max-w-2xl flex-col overflow-hidden bg-white shadow-2xl">
        <header class="border-b border-slate-100 px-6 py-5">
          <div class="flex items-start justify-between gap-4">
            <div class="min-w-0">
              <p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-500">Audit Detail</p>
              <h2 class="mt-2 text-2xl font-bold leading-8 text-slate-950">{{ entry.actionLabel }}</h2>
              <p class="mt-2 text-sm leading-6 text-slate-500">{{ entry.summary }}</p>
            </div>
            <button
              type="button"
              class="grid h-10 w-10 shrink-0 place-items-center rounded-2xl text-slate-500 transition hover:bg-slate-100 hover:text-slate-900"
              aria-label="Schließen"
              @click="$emit('close')"
            >
              <X class="h-5 w-5" />
            </button>
          </div>
        </header>

        <div class="flex-1 overflow-y-auto px-6 py-5">
          <div class="grid gap-3 sm:grid-cols-2">
            <div class="rounded-2xl border border-slate-100 bg-slate-50 px-4 py-3">
              <p class="text-[10px] font-bold uppercase tracking-[0.16em] text-slate-400">Zeitpunkt</p>
              <p class="mt-1 font-semibold text-slate-900">{{ entry.createdLabel }}</p>
              <p class="text-xs text-slate-500">{{ entry.ageLabel }}</p>
            </div>
            <div class="rounded-2xl border border-slate-100 bg-slate-50 px-4 py-3">
              <p class="text-[10px] font-bold uppercase tracking-[0.16em] text-slate-400">Admin</p>
              <p class="mt-1 break-words font-semibold text-slate-900">{{ entry.adminTwitchUserId }}</p>
            </div>
            <div class="rounded-2xl border border-slate-100 bg-slate-50 px-4 py-3">
              <p class="text-[10px] font-bold uppercase tracking-[0.16em] text-slate-400">Objekt</p>
              <p class="mt-1 break-words font-semibold text-slate-900">{{ entry.entityLabel }}</p>
            </div>
            <div class="rounded-2xl border border-slate-100 bg-slate-50 px-4 py-3">
              <p class="text-[10px] font-bold uppercase tracking-[0.16em] text-slate-400">Rohaktion</p>
              <code class="mt-1 inline-block rounded-md bg-white px-2 py-1 text-xs font-semibold text-slate-700">{{ entry.actionType }}</code>
            </div>
          </div>

          <RouterLink
            v-if="entry.relatedLink"
            :to="entry.relatedLink.to"
            class="mt-4 inline-flex h-10 items-center gap-2 rounded-2xl border border-sky-200 bg-sky-50 px-4 text-sm font-semibold text-sky-700 transition hover:bg-sky-100"
            @click="$emit('close')"
          >
            <ExternalLink class="h-4 w-4" />
            {{ entry.relatedLink.label }}
          </RouterLink>

          <section class="mt-6 space-y-3">
            <div class="flex items-center gap-2">
              <ShieldCheck class="h-4 w-4 text-slate-500" />
              <h3 class="text-sm font-bold uppercase tracking-[0.14em] text-slate-500">Request-Kontext</h3>
            </div>
            <dl class="grid gap-3">
              <div v-for="item in entry.requestContextItems" :key="item.key" class="rounded-2xl border border-slate-100 px-4 py-3">
                <dt class="text-[10px] font-bold uppercase tracking-[0.16em] text-slate-400">{{ item.key }}</dt>
                <dd class="mt-1 break-words text-sm font-semibold text-slate-800">{{ item.value }}</dd>
              </div>
            </dl>
          </section>

          <section v-if="entry.changeItems.length > 0" class="mt-6 space-y-3">
            <div class="flex items-center gap-2">
              <GitCompareArrows class="h-4 w-4 text-amber-600" />
              <h3 class="text-sm font-bold uppercase tracking-[0.14em] text-slate-500">Änderungsdiff</h3>
            </div>
            <dl class="grid gap-3">
              <div v-for="change in entry.changeItems" :key="`${change.field}-${change.to}`" class="rounded-2xl border border-amber-100 bg-amber-50/70 px-4 py-3">
                <dt class="flex flex-wrap items-center gap-2 text-sm font-bold text-slate-800">
                  {{ change.label }}
                  <span v-if="change.sensitive" class="rounded-full bg-amber-100 px-2 py-0.5 text-[10px] uppercase tracking-[0.12em] text-amber-700">
                    sensibel
                  </span>
                </dt>
                <dd class="mt-3 grid gap-2 sm:grid-cols-2">
                  <span class="min-w-0 rounded-xl bg-white/80 px-3 py-2 text-sm 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-xl bg-emerald-50 px-3 py-2 text-sm 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>
          </section>

          <section class="mt-6 space-y-3">
            <div class="flex items-center gap-2">
              <ListTree class="h-4 w-4 text-slate-500" />
              <h3 class="text-sm font-bold uppercase tracking-[0.14em] text-slate-500">Metadaten</h3>
            </div>
            <dl v-if="entry.metadataItems.length > 0" class="grid gap-3 sm:grid-cols-2">
              <div v-for="item in entry.metadataItems" :key="item.key" class="min-w-0 rounded-2xl border border-slate-100 px-4 py-3">
                <dt class="text-[10px] font-bold uppercase tracking-[0.16em] text-slate-400">{{ item.key }}</dt>
                <dd class="mt-1 break-words text-sm text-slate-700">{{ item.value }}</dd>
              </div>
            </dl>
            <p v-else class="rounded-2xl border border-dashed border-slate-200 px-4 py-5 text-sm text-slate-500">
              Keine Metadaten erfasst.
            </p>
          </section>

          <section class="mt-6 space-y-3">
            <div class="flex items-center gap-2">
              <Braces class="h-4 w-4 text-slate-500" />
              <h3 class="text-sm font-bold uppercase tracking-[0.14em] text-slate-500">Rohdaten</h3>
            </div>
            <pre class="max-h-72 overflow-auto rounded-2xl border border-slate-200 bg-slate-950 p-4 text-xs leading-5 text-slate-100">{{ entry.rawMetadataJson }}</pre>
          </section>
        </div>
      </aside>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted } from 'vue'
import { Braces, ExternalLink, GitCompareArrows, ListTree, ShieldCheck, X } from '@lucide/vue'

import { useBodyScrollLock } from '../../composables/useBodyScrollLock'
import type { AuditLogRow } from './useAdminAuditManager'

const props = defineProps<{
  entry: AuditLogRow | null
}>()

const emit = defineEmits<{
  close: []
}>()

function closeOnEscape(event: KeyboardEvent) {
  if (event.key === 'Escape' && props.entry) emit('close')
}

useBodyScrollLock(() => Boolean(props.entry))

onMounted(() => window.addEventListener('keydown', closeOnEscape))
onBeforeUnmount(() => {
  window.removeEventListener('keydown', closeOnEscape)
})
</script>
