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

import Button from '../ui/Button.vue'
import Modal from '../ui/Modal.vue'

interface SeasonDeleteTarget {
  id: number
  year: number
  name: string
  isCurrent: boolean
}

const props = defineProps<{
  seasonToDelete: SeasonDeleteTarget | null
  deleting: boolean
  onClose: () => void
  onConfirmDelete: () => Promise<void> | void
}>()
</script>

<template>
  <Modal :open="!!props.seasonToDelete" title="Award-Jahr löschen" @close="props.onClose">
    <div v-if="props.seasonToDelete" class="space-y-4">
      <div class="flex gap-4 rounded-[24px] border border-rose-100 bg-rose-50 p-4 text-rose-800">
        <AlertTriangle class="mt-0.5 h-5 w-5 shrink-0" />
        <div>
          <p class="font-semibold">Diese Aktion löscht das komplette Award-Jahr {{ props.seasonToDelete.year }}.</p>
          <p class="mt-2 text-sm leading-6">
            Dazu gehören Kategorien, Kandidaten, Nominierungen, Votes, Gewinner, Clips und zugehörige Risiko-Hinweise dieser Season.
            Das lässt sich nicht rückgängig machen.
          </p>
        </div>
      </div>
      <div class="rounded-[22px] border border-violet-100 bg-white/80 p-4">
        <p class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Ausgewählt</p>
        <p class="mt-2 font-semibold text-slate-900">{{ props.seasonToDelete.name }}</p>
      </div>
      <p v-if="props.seasonToDelete.isCurrent" class="rounded-2xl border border-amber-100 bg-amber-50 px-4 py-3 text-sm text-amber-800">
        Dieses Jahr ist öffentlich aktiv und kann nicht gelöscht werden.
      </p>
    </div>
    <template #footer>
      <Button variant="ghost" @click="props.onClose">Abbrechen</Button>
      <Button class="!bg-rose-600 hover:!bg-rose-500" :disabled="props.deleting || !props.seasonToDelete || props.seasonToDelete.isCurrent" @click="props.onConfirmDelete">
        {{ props.deleting ? 'Löscht ...' : 'Endgültig löschen' }}
      </Button>
    </template>
  </Modal>
</template>
