<script setup lang="ts">
import { AlertTriangle, CheckCircle2, ChevronLeft, ChevronRight, Clock3, ListChecks, Trash2, X } from '@lucide/vue'

import type { AdminRiskFlag } from '../../types/awards'
import Button from '../ui/Button.vue'
import { riskAgeLabel, riskSeverityClass } from './useAdminRiskManager'

defineProps<{
  riskFlags: AdminRiskFlag[]
  totalOpen: number
  selectedRiskFlagId: number | null
  page: number
  pageLabel: string
  hasPrevious: boolean
  hasMore: boolean
  selectedBulkRiskFlagIds: number[]
  bulkReviewNote: string
  bulkSaving: boolean
  canBulkResolve: boolean
}>()

const emit = defineEmits<{
  select: [riskFlagId: number]
  page: [page: number]
  toggleBulk: [riskFlagId: number]
  selectVisibleLow: []
  clearBulk: []
  'update:bulkReviewNote': [value: string]
  bulkDecide: [status: 'resolved' | 'dismissed']
}>()
</script>

<template>
  <section class="space-y-3">
    <div class="flex items-center justify-between gap-3">
      <div>
        <h2 class="text-lg font-bold text-slate-900">Offene Queue</h2>
        <p class="text-sm text-slate-500">Nach Severity und Alter prüfen.</p>
      </div>
      <span class="rounded-2xl border border-violet-100 bg-violet-50 px-3 py-1.5 text-sm font-semibold text-violet-800">
        {{ pageLabel }}
      </span>
    </div>

    <div class="rounded-2xl border border-violet-100 bg-white/85 p-3">
      <div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
        <div>
          <p class="text-xs font-semibold uppercase tracking-[0.16em] text-slate-400">Bulk Low Severity</p>
          <p class="mt-1 text-sm text-slate-600">
            {{ selectedBulkRiskFlagIds.length }} ausgewählt · nur offene Low-Hinweise
          </p>
        </div>
        <div class="flex flex-1 flex-col gap-2 sm:flex-row lg:max-w-2xl">
          <input
            :value="bulkReviewNote"
            class="min-h-10 flex-1 rounded-xl border border-violet-100 bg-white px-3 text-sm outline-none transition focus:border-violet-300 focus:ring-4 focus:ring-violet-100"
            placeholder="Bulk-Notiz für niedrige Severity"
            @input="emit('update:bulkReviewNote', ($event.target as HTMLInputElement).value)"
          >
          <div class="flex flex-wrap gap-2">
            <Button size="sm" variant="ghost" class="gap-2 border border-violet-100" @click="emit('selectVisibleLow')">
              <ListChecks class="h-4 w-4" />
              Seite
            </Button>
            <Button size="sm" variant="ghost" class="gap-2 border border-violet-100" @click="emit('clearBulk')">
              <X class="h-4 w-4" />
              Leeren
            </Button>
            <Button size="sm" variant="secondary" class="gap-2" :disabled="!canBulkResolve || bulkSaving" @click="emit('bulkDecide', 'dismissed')">
              <Trash2 class="h-4 w-4" />
              Verwerfen
            </Button>
            <Button size="sm" class="gap-2" :disabled="!canBulkResolve || bulkSaving" @click="emit('bulkDecide', 'resolved')">
              <CheckCircle2 class="h-4 w-4" />
              Erledigt
            </Button>
          </div>
        </div>
      </div>
    </div>

    <div class="space-y-2 xl:max-h-[680px] xl:overflow-y-auto xl:pr-2">
      <article
        v-for="flag in riskFlags"
        :key="flag.id"
        class="w-full rounded-2xl border p-4 transition"
        :class="selectedRiskFlagId === flag.id ? 'border-violet-200 bg-violet-50/80 shadow-[0_12px_30px_rgba(168,145,214,0.12)]' : 'border-violet-100 bg-white/85 hover:border-violet-200 hover:bg-violet-50/50'"
      >
        <div class="flex items-start gap-3">
          <label
            class="mt-1 flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-violet-100 bg-white"
            :class="flag.severity.toLowerCase() === 'low' ? 'cursor-pointer' : 'opacity-35'"
            :title="flag.severity.toLowerCase() === 'low' ? 'Für Bulk auswählen' : 'Bulk ist nur für Low-Severity aktiv'"
            @click.stop
          >
            <input
              type="checkbox"
              class="h-4 w-4 accent-violet-600"
              :disabled="flag.severity.toLowerCase() !== 'low'"
              :checked="selectedBulkRiskFlagIds.includes(flag.id)"
              @change="emit('toggleBulk', flag.id)"
            >
          </label>
          <div class="min-w-0">
            <button type="button" class="block w-full text-left" @click="emit('select', flag.id)">
              <div class="flex flex-wrap items-center gap-2">
                <span class="inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-xs font-semibold" :class="riskSeverityClass(flag.severity)">
                  <AlertTriangle class="h-3.5 w-3.5" />
                  {{ flag.severity }}
                </span>
                <span class="inline-flex items-center gap-1 rounded-full bg-slate-50 px-2.5 py-1 text-xs font-semibold text-slate-600">
                  <Clock3 class="h-3.5 w-3.5" />
                  {{ riskAgeLabel(flag) }}
                </span>
              </div>
              <h3 class="mt-3 line-clamp-2 text-base font-semibold text-slate-900">{{ flag.summary }}</h3>
              <p class="mt-2 truncate text-sm text-slate-500">
                {{ flag.source }} · {{ flag.type }} · {{ flag.twitchUserId || 'unbekannter User' }}
              </p>
            </button>
          </div>
          <span class="shrink-0 rounded-xl bg-white px-2.5 py-1 text-xs font-semibold text-slate-500">
            ID {{ flag.id }}
          </span>
        </div>
      </article>

      <p v-if="totalOpen === 0" class="rounded-[22px] border border-dashed border-violet-100 px-5 py-6 text-sm text-slate-500">
        Keine offenen Risikohinweise vorhanden.
      </p>
      <p v-else-if="riskFlags.length === 0" class="rounded-[22px] border border-dashed border-violet-100 px-5 py-6 text-sm text-slate-500">
        Keine offenen Hinweise passen zum aktuellen Filter.
      </p>
    </div>

    <div class="flex items-center justify-between gap-3 rounded-2xl border border-violet-100 bg-white/75 px-3 py-2">
      <Button
        variant="ghost"
        size="sm"
        class="gap-2 border border-violet-100"
        :disabled="!hasPrevious"
        @click="emit('page', page - 1)"
      >
        <ChevronLeft class="h-4 w-4" />
        Zurück
      </Button>
      <span class="text-sm font-semibold text-slate-500">{{ pageLabel }}</span>
      <Button
        variant="ghost"
        size="sm"
        class="gap-2 border border-violet-100"
        :disabled="!hasMore"
        @click="emit('page', page + 1)"
      >
        Weiter
        <ChevronRight class="h-4 w-4" />
      </Button>
    </div>
  </section>
</template>
