<script setup lang="ts">
import { computed, ref } from 'vue'
import { Search, ShieldAlert, UserCog } from '@lucide/vue'

import AdminPageHeader from '../../components/admin/AdminPageHeader.vue'
import Card from '../../components/ui/Card.vue'
import { useAwardsStore } from '../../stores/awards'

const store = useAwardsStore()
const query = ref('')
const auditEntries = computed(() => store.admin.auditEntries)
const riskFlags = computed(() => store.admin.riskFlags)
const filteredAuditEntries = computed(() => {
  const search = query.value.trim().toLowerCase()
  if (!search) return auditEntries.value
  return auditEntries.value.filter((entry) =>
    [entry.adminTwitchUserId, entry.actionType, entry.entityType, entry.entityId, entry.summary]
      .join(' ')
      .toLowerCase()
      .includes(search),
  )
})
const filteredRiskUsers = computed(() => {
  const search = query.value.trim().toLowerCase()
  const users = riskFlags.value.map((flag) => ({
    id: flag.id,
    twitchUserId: flag.twitchUserId ?? 'unbekannt',
    source: flag.source,
    type: flag.type,
    severity: flag.severity,
    ip: flag.createdFromIp,
    createdAt: flag.createdAt,
  }))
  if (!search) return users
  return users.filter((user) => [user.twitchUserId, user.source, user.type, user.ip].join(' ').toLowerCase().includes(search))
})
const adminCounts = computed(() => {
  const counts = new Map<string, number>()
  for (const entry of auditEntries.value) counts.set(entry.adminTwitchUserId, (counts.get(entry.adminTwitchUserId) ?? 0) + 1)
  return [...counts.entries()].map(([admin, count]) => ({ admin, count }))
})
const logStats = computed(() => [
  { label: 'Audit-Einträge', value: auditEntries.value.length },
  { label: 'Admins aktiv', value: adminCounts.value.length },
  { label: 'Risk-User', value: new Set(riskFlags.value.map((flag) => flag.twitchUserId).filter(Boolean)).size },
])
</script>

<template>
  <div class="space-y-6">
    <AdminPageHeader
      eyebrow="User & Logs"
      title="User-Spuren und Admin-Aktionen"
      description="Eine kompakte Kontrollansicht für Audit-Einträge, auffällige User und Admin-Aktivität. Für Detailentscheidungen bleibt Risiko & Audit der Hauptbereich."
      :icon="UserCog"
    />

    <Card class="p-5">
      <div class="grid gap-3 lg:grid-cols-[minmax(0,1fr)_420px]">
        <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 v-model="query" class="h-12 w-full rounded-2xl border border-violet-200 bg-white pl-11 pr-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="Nach Admin, Aktion, User, IP oder Objekt suchen" />
        </label>
        <div class="grid grid-cols-3 gap-2">
          <div v-for="stat in logStats" :key="stat.label" class="rounded-2xl border border-violet-50 bg-violet-50/50 px-3 py-2">
            <p class="truncate text-[10px] font-semibold uppercase tracking-[0.12em] text-slate-500">{{ stat.label }}</p>
            <strong class="text-lg text-violet-800">{{ stat.value }}</strong>
          </div>
        </div>
      </div>
    </Card>

    <section class="grid gap-6 xl:grid-cols-[0.86fr_1.14fr]">
      <Card class="p-6">
        <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Admins</p>
        <h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">Aktivität</h2>
        <div class="mt-5 space-y-3">
          <div v-for="item in adminCounts" :key="item.admin" class="flex items-center justify-between rounded-2xl border border-violet-100 bg-white/90 px-4 py-3">
            <span class="font-semibold text-slate-900">{{ item.admin }}</span>
            <span class="rounded-full bg-violet-50 px-3 py-1 text-sm font-semibold text-violet-700">{{ item.count }}</span>
          </div>
          <p v-if="adminCounts.length === 0" class="rounded-2xl border border-dashed border-violet-100 px-4 py-8 text-center text-sm text-slate-500">
            Noch keine Admin-Aktivität vorhanden.
          </p>
        </div>
      </Card>

      <Card class="overflow-hidden">
        <div class="border-b border-violet-100 p-5">
          <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Audit Log</p>
          <h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">Letzte Aktionen</h2>
        </div>
        <div class="max-h-[520px] divide-y divide-violet-50 overflow-y-auto">
          <div v-for="entry in filteredAuditEntries" :key="entry.id" class="px-5 py-4">
            <div class="flex flex-wrap items-start justify-between gap-3">
              <div>
                <p class="font-semibold text-slate-900">{{ entry.summary }}</p>
                <p class="mt-1 text-sm text-slate-500">{{ entry.adminTwitchUserId }} · {{ entry.actionType }} · {{ entry.entityType }} {{ entry.entityId }}</p>
              </div>
              <span class="text-sm text-slate-500">{{ new Date(entry.createdAt).toLocaleString('de-DE') }}</span>
            </div>
          </div>
          <p v-if="filteredAuditEntries.length === 0" class="px-5 py-10 text-center text-sm text-slate-500">Keine Log-Einträge gefunden.</p>
        </div>
      </Card>
    </section>

    <Card class="overflow-hidden">
      <div class="border-b border-violet-100 p-5">
        <div class="flex items-center gap-3">
          <div class="grid h-10 w-10 place-items-center rounded-2xl bg-rose-50 text-rose-600">
            <ShieldAlert class="h-5 w-5" />
          </div>
          <div>
            <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Auffällige User</p>
            <h2 class="font-[Cormorant_Garamond] text-3xl text-violet-800">Aus Risk-Flags abgeleitet</h2>
          </div>
        </div>
      </div>
      <div class="divide-y divide-violet-50">
        <div v-for="user in filteredRiskUsers" :key="user.id" class="grid gap-3 px-5 py-4 lg:grid-cols-[minmax(0,1fr)_180px_140px] lg:items-center">
          <div>
            <p class="font-semibold text-slate-900">{{ user.twitchUserId }}</p>
            <p class="mt-1 text-sm text-slate-500">{{ user.type }} · {{ user.ip }}</p>
          </div>
          <span class="text-sm text-slate-500">{{ new Date(user.createdAt).toLocaleString('de-DE') }}</span>
          <span class="rounded-full border border-rose-100 bg-rose-50 px-3 py-1 text-center text-xs font-semibold uppercase tracking-[0.14em] text-rose-700">{{ user.severity }}</span>
        </div>
        <p v-if="filteredRiskUsers.length === 0" class="px-5 py-10 text-center text-sm text-slate-500">
          Keine auffälligen User für den aktuellen Filter.
        </p>
      </div>
    </Card>
  </div>
</template>
