<template>
  <Modal :open="!!candidate" title="Kandidat löschen?" @close="$emit('close')">
    <div class="space-y-4">
      <div class="flex items-start gap-4">
        <span class="grid h-12 w-12 shrink-0 place-items-center rounded-full bg-rose-50 text-rose-500">
          <TriangleAlert class="h-6 w-6" />
        </span>
        <p class="text-sm leading-7 text-slate-600">
          „<strong class="text-slate-800">{{ candidate?.displayName }}</strong>" wird endgültig aus diesem Award-Jahr entfernt.
          Alle verknüpften Daten werden beim Bestätigen mitgelöscht. Das lässt sich nicht rückgängig machen.
        </p>
      </div>

      <div v-if="loading" class="rounded-2xl border border-violet-100 bg-violet-50/50 px-4 py-3 text-sm text-slate-600">
        Löschvorschau wird geladen...
      </div>

      <div v-else-if="preview" class="rounded-2xl border border-rose-100 bg-rose-50/60 p-4">
        <p class="text-xs font-semibold uppercase tracking-[0.18em] text-rose-600">Mitbetroffene Daten</p>
        <div class="mt-3 grid gap-3 sm:grid-cols-2">
          <div class="rounded-2xl border border-rose-100 bg-white px-4 py-3">
            <p class="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">Nominierungen</p>
            <strong class="mt-1 block text-lg text-rose-700">{{ preview.nominationCount }}</strong>
          </div>
          <div class="rounded-2xl border border-rose-100 bg-white px-4 py-3">
            <p class="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">Clips</p>
            <strong class="mt-1 block text-lg text-rose-700">{{ preview.clipCount }}</strong>
          </div>
          <div class="rounded-2xl border border-rose-100 bg-white px-4 py-3">
            <p class="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">Votes</p>
            <strong class="mt-1 block text-lg text-rose-700">{{ preview.voteCount }}</strong>
          </div>
          <div class="rounded-2xl border border-rose-100 bg-white px-4 py-3">
            <p class="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">Ergebnisse</p>
            <strong class="mt-1 block text-lg text-rose-700">{{ preview.resultCount }}</strong>
          </div>
        </div>
      </div>

      <p v-else class="rounded-2xl border border-amber-100 bg-amber-50/70 px-4 py-3 text-sm text-amber-800">
        Die Löschvorschau konnte nicht geladen werden. Bitte prüfe die Fehlermeldung, bevor du fortfährst.
      </p>
    </div>
    <template #footer>
      <Button variant="ghost" @click="$emit('close')">Abbrechen</Button>
      <Button class="!bg-rose-600 hover:!bg-rose-500" :disabled="deleting || loading || !preview" @click="$emit('confirm')">
        {{ deleting ? 'Löscht …' : 'Endgültig löschen' }}
      </Button>
    </template>
  </Modal>
</template>

<script setup lang="ts">
import { TriangleAlert } from '@lucide/vue'

import type { AdminCandidateDeletePreview, AdminCandidateItem } from '../../types/awards'
import Button from '../ui/Button.vue'
import Modal from '../ui/Modal.vue'

defineProps<{
  candidate: AdminCandidateItem | null
  preview: AdminCandidateDeletePreview | null
  loading: boolean
  deleting: boolean
}>()

defineEmits<{
  close: []
  confirm: []
}>()
</script>
