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

import type { AdminNominationReviewItem } from '../../types/awards'

defineProps<{
  reviewedNominations: AdminNominationReviewItem[]
  reviewedTotal: number
  reviewSaving?: number | null
}>()

const emit = defineEmits<{
  'undo-rejected': [nominationId: number]
}>()
</script>

<template>
  <div class="rounded-[26px] border border-violet-100 bg-violet-50/50 p-5">
    <div class="flex items-center justify-between gap-3">
      <div>
        <p class="text-xs font-semibold uppercase tracking-[0.22em] text-violet-500">Letzte Entscheidungen</p>
        <h3 class="mt-1 text-lg font-bold text-slate-900">Review-Historie</h3>
      </div>
      <span class="rounded-full border border-violet-100 bg-white px-3 py-1 text-xs font-semibold text-slate-600">
        {{ reviewedTotal }} entschieden
      </span>
    </div>
    <div class="mt-4 space-y-3">
      <div v-for="nomination in reviewedNominations" :key="`reviewed-${nomination.id}`" class="rounded-2xl border border-violet-100 bg-white/90 p-4">
        <div class="flex flex-wrap items-start justify-between gap-3">
          <div>
            <p class="font-semibold text-slate-900">{{ nomination.candidateText || nomination.streamUrl || 'Name im Review festgelegt' }}</p>
            <p class="mt-1 text-sm text-slate-500">
              {{ nomination.categoryName }} · {{ nomination.submittedByTwitchId }}
              <span v-if="nomination.candidateDisplayName"> · Kandidat: {{ nomination.candidateDisplayName }}</span>
            </p>
          </div>
          <div class="flex items-center gap-2">
            <span class="rounded-full px-3 py-1 text-xs font-semibold" :class="nomination.status === 'approved' ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700'">
              {{ nomination.status === 'approved' ? 'übernommen' : 'verworfen' }}
            </span>
            <button
              v-if="nomination.status === 'rejected'"
              type="button"
              class="inline-flex h-9 items-center justify-center gap-2 rounded-full border border-violet-200 bg-violet-50 px-3 text-xs font-semibold text-violet-700 transition hover:bg-violet-100 disabled:cursor-not-allowed disabled:opacity-60"
              :disabled="reviewSaving === nomination.id"
              @click="emit('undo-rejected', nomination.id)"
            >
              <RotateCcw class="h-3.5 w-3.5" />
              {{ reviewSaving === nomination.id ? 'Öffnet ...' : 'Undo' }}
            </button>
          </div>
        </div>
        <p v-if="nomination.reviewNote" class="mt-3 text-sm leading-6 text-slate-600">{{ nomination.reviewNote }}</p>
        <p class="mt-2 text-xs text-slate-500">
          {{ nomination.reviewedByTwitchId || 'Admin' }} · {{ nomination.reviewedAt ? new Date(nomination.reviewedAt).toLocaleString('de-DE') : 'ohne Zeitstempel' }}
        </p>
      </div>
      <p v-if="reviewedNominations.length === 0" class="rounded-2xl border border-dashed border-violet-100 px-4 py-6 text-sm text-slate-500">
        Noch keine gespeicherten Review-Entscheidungen.
      </p>
    </div>
  </div>
</template>
