<template>
  <div>
    <div class="hidden grid-cols-[minmax(0,1.6fr)_minmax(0,1.2fr)_120px_96px] gap-4 border-b border-violet-100 bg-violet-50/40 px-6 py-3 text-[11px] font-semibold uppercase tracking-[0.16em] text-violet-500 lg:grid">
      <span>Kandidat</span>
      <span>Kategorie</span>
      <span>Plattform</span>
      <span class="text-right">Aktionen</span>
    </div>

    <div class="divide-y divide-violet-50">
      <div
        v-for="candidate in pagedCandidates"
        :key="candidate.id"
        class="grid grid-cols-1 gap-3 px-6 py-4 transition hover:bg-violet-50/40 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1.2fr)_120px_96px] lg:items-center lg:gap-4"
      >
        <div class="flex min-w-0 items-center gap-3">
          <span class="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-[linear-gradient(135deg,#c4b5fd,#f5a9d6)] text-sm font-semibold text-white">
            {{ candidate.displayName.charAt(0) }}
          </span>
          <div class="min-w-0">
            <p class="truncate font-semibold text-slate-800">{{ candidate.displayName }}</p>
            <p class="truncate text-xs text-slate-500">{{ candidate.channelSlug }}</p>
            <p v-if="isDuplicate(candidate)" class="mt-1 text-xs font-semibold text-amber-700">
              Mögliches Duplikat in dieser Kategorie
            </p>
          </div>
        </div>
        <div class="min-w-0">
          <span class="inline-block max-w-full truncate rounded-full border border-violet-100 bg-violet-50/70 px-3 py-1 text-xs font-semibold text-violet-700">
            {{ categoryLabelMap[candidate.categoryId] || 'Ohne Kategorie' }}
          </span>
        </div>
        <div>
          <span class="rounded-full border border-amber-200 bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-700">{{ candidate.platform }}</span>
        </div>
        <div class="flex gap-2 lg:justify-end">
          <button
            class="grid h-9 w-9 place-items-center rounded-full border border-violet-200 text-violet-600 transition hover:bg-violet-50"
            title="Bearbeiten"
            @click="$emit('edit', candidate)"
          >
            <Pencil class="h-4 w-4" />
          </button>
          <button
            class="grid h-9 w-9 place-items-center rounded-full border border-rose-200 text-rose-500 transition hover:bg-rose-50"
            title="Löschen"
            @click="$emit('delete', candidate)"
          >
            <Trash2 class="h-4 w-4" />
          </button>
        </div>
      </div>

      <div v-if="filteredCount === 0" class="px-6 py-12 text-center">
        <p class="text-sm text-slate-500">
          {{ totalCount === 0 ? 'Noch keine Kandidaten in diesem Jahr.' : 'Keine Treffer für den aktuellen Filter.' }}
        </p>
        <Button class="mt-4 gap-2" @click="$emit('open-create')"><UserPlus class="h-4 w-4" /> Ersten Kandidaten anlegen</Button>
      </div>
    </div>

    <PaginationFooter
      :page="page"
      :total-pages="totalPages"
      :range-start="rangeStart"
      :range-end="rangeEnd"
      :filtered-count="filteredCount"
      @update:page="$emit('update:page', $event)"
    />
  </div>
</template>

<script setup lang="ts">
import { Pencil, Trash2, UserPlus } from '@lucide/vue'

import type { AdminCandidateItem } from '../../types/awards'
import Button from '../ui/Button.vue'
import PaginationFooter from '../ui/PaginationFooter.vue'

const props = defineProps<{
  pagedCandidates: AdminCandidateItem[]
  totalCount: number
  filteredCount: number
  page: number
  totalPages: number
  rangeStart: number
  rangeEnd: number
  categoryLabelMap: Record<number, string>
  duplicateCandidateKeys: Map<string, number>
}>()

defineEmits<{
  edit: [candidate: AdminCandidateItem]
  delete: [candidate: AdminCandidateItem]
  'update:page': [page: number]
  'open-create': []
}>()

function isDuplicate(candidate: AdminCandidateItem) {
  return (props.duplicateCandidateKeys.get(`${candidate.categoryId}:name:${candidate.displayName.trim().toLowerCase()}`) ?? 0) > 1
    || (props.duplicateCandidateKeys.get(`${candidate.categoryId}:slug:${candidate.channelSlug.trim().toLowerCase()}`) ?? 0) > 1
}
</script>
