<script setup lang="ts">
import type { AdminNominationReviewItem } from '../../types/awards'

defineProps<{
  nominations: AdminNominationReviewItem[]
  totalPending: number
  selectedNominationId: number | null
}>()

const emit = defineEmits<{
  select: [nominationId: number]
}>()
</script>

<template>
  <div class="space-y-2 xl:max-h-[680px] xl:overflow-y-auto xl:pr-2">
    <button
      v-for="nomination in nominations"
      :key="nomination.id"
      type="button"
      class="w-full rounded-2xl border p-3 text-left transition"
      :class="selectedNominationId === nomination.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'"
      @click="emit('select', nomination.id)"
    >
      <div class="flex items-start justify-between gap-3">
        <div class="min-w-0">
          <div class="flex flex-wrap items-center gap-2">
            <span class="rounded-full bg-violet-50 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-violet-700">
              {{ nomination.categoryName }}
            </span>
            <span class="rounded-full bg-slate-50 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-600">
              ID {{ nomination.id }}
            </span>
          </div>
          <h3 class="mt-2 truncate text-base font-semibold text-slate-900">{{ nomination.candidateText || nomination.streamUrl || 'Name im Review festlegen' }}</h3>
          <p class="mt-1 truncate text-sm text-slate-500">
            {{ nomination.submittedByTwitchId }} · {{ new Date(nomination.createdAt).toLocaleString('de-DE') }}
          </p>
        </div>
      </div>
    </button>

    <p v-if="totalPending === 0" class="rounded-[22px] border border-dashed border-violet-100 px-5 py-6 text-sm text-slate-500">
      Keine offenen Review-Fälle im aktuell gewählten Award-Jahr.
    </p>
    <p v-else-if="nominations.length === 0" class="rounded-[22px] border border-dashed border-violet-100 px-5 py-6 text-sm text-slate-500">
      Keine Review-Fälle passen zum aktuellen Filter.
    </p>

  </div>
</template>
