<script setup lang="ts">
import { CheckCircle2, ExternalLink, Trash2 } from '@lucide/vue'
import { RouterLink } from 'vue-router'

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

defineProps<{
  riskFlag: AdminRiskFlag | null
  metadataItems: RiskMetadataItem[]
  decisionNote: string
  decisionNoteLength: number
  decisionReady: boolean
  saving: number | null
}>()

const emit = defineEmits<{
  'update:decisionNote': [value: string]
  decide: [riskFlagId: number, status: RiskResolutionStatus]
}>()
</script>

<template>
  <section
    v-if="riskFlag"
    class="rounded-[26px] border border-violet-100 bg-white/90 p-5 shadow-[0_14px_36px_rgba(168,145,214,0.08)]"
  >
    <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
      <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="riskSeverityClass(riskFlag.severity)">
            {{ riskFlag.severity }}
          </span>
          <span class="rounded-full bg-slate-50 px-3 py-1 text-xs font-semibold text-slate-600">
            {{ riskAgeLabel(riskFlag) }}
          </span>
          <span class="rounded-full bg-violet-50 px-3 py-1 text-xs font-semibold text-violet-700">
            {{ riskFlag.source }} · {{ riskFlag.type }}
          </span>
        </div>
        <h2 class="mt-3 text-xl font-bold text-slate-900">{{ riskFlag.summary }}</h2>
        <p class="mt-2 text-sm text-slate-500">
          {{ riskFlag.twitchUserId || 'unbekannter User' }} · {{ riskFlag.createdFromIp }} · {{ new Date(riskFlag.createdAt).toLocaleString('de-DE') }}
        </p>
      </div>
      <div class="rounded-2xl border border-violet-100 bg-violet-50/60 px-4 py-3 text-sm font-semibold text-violet-800">
        Risk Flag #{{ riskFlag.id }}
      </div>
    </div>

    <div class="mt-5 grid gap-3 md:grid-cols-2">
      <div class="rounded-2xl border border-violet-100 bg-violet-50/45 p-4">
        <p class="text-xs font-semibold text-slate-500">Metadaten</p>
        <dl v-if="metadataItems.length" class="mt-3 space-y-2">
          <div
            v-for="item in metadataItems"
            :key="item.key"
            class="rounded-xl bg-white/80 px-3 py-2"
          >
            <dt class="text-xs font-semibold 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="mt-3 rounded-xl border border-dashed border-violet-100 px-3 py-4 text-sm text-slate-500">
          Keine zusätzlichen Metadaten hinterlegt.
        </p>
      </div>

      <div class="space-y-3 rounded-2xl border border-violet-100 bg-white p-4">
        <div>
          <p class="text-xs font-semibold text-slate-500">Betroffene Bereiche</p>
          <div v-if="riskFlag.entityLinks.length" class="mt-3 flex flex-wrap gap-2">
            <RouterLink
              v-for="link in riskFlag.entityLinks"
              :key="`${link.entityType}-${link.entityId}-${link.to}`"
              :to="link.to"
              class="inline-flex items-center gap-2 rounded-xl border border-violet-100 bg-violet-50 px-3 py-2 text-sm font-semibold text-violet-800 transition hover:border-violet-200 hover:bg-violet-100"
            >
              <ExternalLink class="h-4 w-4" />
              {{ link.label }}
            </RouterLink>
          </div>
          <p v-else class="mt-3 rounded-xl border border-dashed border-violet-100 px-3 py-4 text-sm text-slate-500">
            Kein direkter Zielbereich hinterlegt.
          </p>
        </div>

        <label class="block space-y-2">
          <span class="text-xs font-semibold text-slate-500">Entscheidungsnotiz</span>
          <textarea
            :value="decisionNote"
            rows="7"
            class="w-full rounded-2xl border border-violet-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
            placeholder="Kurz festhalten, was geprüft wurde und warum du so entscheidest."
            @input="emit('update:decisionNote', ($event.target as HTMLTextAreaElement).value)"
          />
        </label>
        <p class="mt-2 text-xs" :class="decisionReady ? 'text-slate-500' : 'text-rose-600'">
          {{ decisionNoteLength }}/500 Zeichen · Mindestens 3 Zeichen für erledigt/verworfen.
        </p>
      </div>
    </div>

    <div class="mt-4 flex flex-wrap justify-end gap-3">
      <Button
        :disabled="saving === riskFlag.id || !decisionReady"
        variant="secondary"
        @click="emit('decide', riskFlag.id, 'dismissed')"
      >
        <Trash2 class="mr-2 h-4 w-4" />
        {{ saving === riskFlag.id ? 'Speichert ...' : 'Verwerfen' }}
      </Button>
      <Button
        :disabled="saving === riskFlag.id || !decisionReady"
        @click="emit('decide', riskFlag.id, 'resolved')"
      >
        <CheckCircle2 class="mr-2 h-4 w-4" />
        {{ saving === riskFlag.id ? 'Speichert ...' : 'Erledigt markieren' }}
      </Button>
    </div>
  </section>

  <section v-else class="rounded-[26px] border border-dashed border-violet-100 bg-white/70 p-8 text-sm text-slate-500">
    Keine offene Auswahl. Sobald ein Risiko-Hinweis auftaucht, erscheint hier die Detailprüfung.
  </section>
</template>
