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

const props = defineProps<{
  nominations: AdminNominationReviewGroup[]
  totalPending: number
  selectedNominationId: number | null
  trackerStatusMeta: (status: string) => { label: string; toneClass: string; hint: string }
}>()

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

function avgViewerLabel(nomination: AdminNominationReviewGroup) {
  if (nomination.avgViewers === null) return null
  const avgViewerMetric = nomination.trackingMetrics.find((metric) => metric.key === 'avg_viewers')
  const windowLabel = avgViewerMetric?.windowLabel?.trim()
  return windowLabel
    ? `${nomination.avgViewers} Avg Viewer · ${windowLabel}`
    : `${nomination.avgViewers} Avg Viewer`
}
</script>

<template>
  <div class="space-y-3 xl:max-h-[680px] xl:overflow-y-auto xl:pr-2">
    <div v-if="nominations.length > 0" class="rounded-[22px] border border-violet-100 bg-violet-50/50 px-4 py-3">
      <div class="flex flex-wrap items-center gap-2 text-xs font-semibold text-slate-600">
        <span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-violet-500">Queue-Navigation</span>
        <div class="flex flex-wrap gap-2 text-xs font-semibold text-slate-600">
          <span class="rounded-full border border-violet-100 bg-white px-3 py-1.5">
            <kbd class="rounded border border-violet-200 bg-violet-50 px-1.5 py-0.5 text-[10px] font-bold text-violet-700">↑</kbd>
            <kbd class="ml-1 rounded border border-violet-200 bg-violet-50 px-1.5 py-0.5 text-[10px] font-bold text-violet-700">↓</kbd>
            <span class="ml-2">oder</span>
            <kbd class="ml-2 rounded border border-violet-200 bg-violet-50 px-1.5 py-0.5 text-[10px] font-bold text-violet-700">J</kbd>
            <kbd class="ml-1 rounded border border-violet-200 bg-violet-50 px-1.5 py-0.5 text-[10px] font-bold text-violet-700">K</kbd>
            <span class="ml-2">Navigieren</span>
          </span>
          <span class="rounded-full border border-sky-100 bg-sky-50 px-3 py-1.5 text-sky-700">
            <kbd class="rounded border border-sky-200 bg-white px-1.5 py-0.5 text-[10px] font-bold">Enter</kbd>
            <span class="ml-2">Modal öffnen</span>
          </span>
          <span class="rounded-full border border-emerald-100 bg-emerald-50 px-3 py-1.5 text-emerald-700">
            <kbd class="rounded border border-emerald-200 bg-white px-1.5 py-0.5 text-[10px] font-bold">A</kbd>
            <span class="ml-2">Annehmen</span>
          </span>
          <span class="rounded-full border border-rose-100 bg-rose-50 px-3 py-1.5 text-rose-700">
            <kbd class="rounded border border-rose-200 bg-white px-1.5 py-0.5 text-[10px] font-bold">R</kbd>
            <span class="ml-2">Verwerfen</span>
          </span>
        </div>
      </div>
    </div>

    <button
      v-for="nomination in nominations"
      :key="nomination.id"
      type="button"
      class="group w-full rounded-[24px] border p-4 text-left transition"
      :class="selectedNominationId === nomination.id ? 'border-violet-300 bg-white shadow-[0_18px_34px_rgba(168,145,214,0.14)] ring-2 ring-violet-100' : 'border-violet-100 bg-white/85 hover:border-violet-200 hover:bg-violet-50/50'"
      @click="emit('open', 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 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.14em]"
              :class="selectedNominationId === nomination.id ? 'bg-violet-100 text-violet-800' : 'bg-violet-50 text-violet-700'"
            >
              {{ nomination.categoryGroupName }}
            </span>
            <span class="rounded-full bg-slate-50 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-600">
              {{ nomination.uniqueSubmitterCount }} Nominierende
            </span>
            <span
              class="rounded-full border px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.14em]"
              :class="props.trackerStatusMeta(nomination.trackerStatus).toneClass"
            >
              {{ props.trackerStatusMeta(nomination.trackerStatus).label }}
            </span>
          </div>
          <h3 class="mt-2 line-clamp-2 text-base font-semibold text-slate-900">{{ nomination.displayName || nomination.streamUrl || 'Name im Review festlegen' }}</h3>
          <div class="mt-2 flex flex-wrap gap-2 text-xs font-semibold text-slate-500">
            <span class="rounded-full border border-violet-100 bg-violet-50/50 px-2.5 py-1">{{ nomination.suggestedCategoryName || 'Tier offen' }}</span>
            <span class="rounded-full border border-slate-200 bg-slate-50 px-2.5 py-1">{{ nomination.nominationTally }} Nominierungen</span>
            <span class="rounded-full border border-slate-200 bg-slate-50 px-2.5 py-1">{{ nomination.uniqueSubmitterCount }} eindeutige Nominierende</span>
            <span v-if="avgViewerLabel(nomination)" class="rounded-full border border-sky-100 bg-sky-50 px-2.5 py-1 text-sky-700">{{ avgViewerLabel(nomination) }}</span>
            <span
              v-if="nomination.trackingFlags.length > 0"
              class="rounded-full border border-amber-200 bg-amber-50 px-2.5 py-1 text-amber-700"
            >
              Tracking-Hinweise
            </span>
            <span
              v-else-if="nomination.requiresManualReview"
              class="rounded-full border border-amber-200 bg-amber-50 px-2.5 py-1 text-amber-700"
            >
              Manuelle Pruefung
            </span>
            <span
              v-if="!nomination.suggestedCategoryName"
              class="rounded-full border border-slate-200 bg-white px-2.5 py-1 text-slate-600"
            >
              Tier manuell wählen
            </span>
          </div>
          <p class="mt-2 text-xs font-medium text-slate-400">
            zuletzt {{ new Date(nomination.lastSubmittedAt).toLocaleString('de-DE') }}
          </p>
        </div>
        <div class="flex shrink-0 flex-col items-end gap-2">
          <div
            class="rounded-full border px-3 py-1.5 text-xs font-bold"
            :class="selectedNominationId === nomination.id ? 'border-violet-200 bg-violet-100 text-violet-800' : 'border-violet-100 bg-white text-slate-500'"
          >
            #{{ nomination.id }}
          </div>
          <span
            class="rounded-full border border-violet-200 bg-white px-3 py-1.5 text-xs font-semibold text-violet-700 transition group-hover:bg-violet-50"
          >
            Prüfen
          </span>
        </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>
