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

import Button from '../ui/Button.vue'
import NativeSelect from '../ui/NativeSelect.vue'
import type { AdminCandidateItem, AdminNominationReviewItem } from '../../types/awards'

defineProps<{
  nomination: AdminNominationReviewItem | null
  reviewSaving: number | null
  reviewForm: {
    displayName: string
    channelSlug: string
    platform: string
    reviewNote: string
  } | null
  candidatePlatformOptions: Array<{ key: string; label: string }>
  selectedCandidateCollision: AdminCandidateItem | null
  selectedRelatedPendingNominations?: AdminNominationReviewItem[]
  signalSummary?: {
    submissions: number
    uniqueSubmitters: number
    platforms: string[]
  } | null
  streamUrl?: string
  canApproveSelected: boolean
  selectedPlatformValue: (platform: string) => string
}>()

const emit = defineEmits<{
  'platform-change': [value: string]
  approve: [nominationId: number]
  reject: [nominationId: number]
}>()
</script>

<template>
  <div v-if="nomination && reviewForm" class="rounded-[26px] border border-violet-100 bg-white/90 p-5 shadow-[0_14px_36px_rgba(168,145,214,0.08)]">
    <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
      <div class="min-w-0">
        <p class="text-xs font-semibold uppercase tracking-[0.22em] text-violet-500">{{ nomination.categoryName }}</p>
        <h3 class="mt-1 text-xl font-bold text-slate-900">{{ nomination.candidateText || 'Name im Review festlegen' }}</h3>
        <p class="mt-2 text-sm text-slate-500">
          Eingereicht von {{ nomination.submittedByTwitchId }} · {{ new Date(nomination.createdAt).toLocaleString('de-DE') }}
        </p>
      </div>
      <div class="rounded-2xl border border-violet-100 bg-violet-50/60 px-4 py-3 text-sm font-semibold text-violet-800">
        ID {{ nomination.id }}
      </div>
    </div>

    <div v-if="streamUrl" class="mt-5 rounded-2xl border border-sky-100 bg-sky-50/70 p-4">
      <p class="text-xs font-semibold uppercase tracking-[0.18em] text-sky-700">Eingereichter Stream-Link</p>
      <a
        :href="streamUrl"
        target="_blank"
        rel="noopener"
        class="mt-2 inline-flex max-w-full items-center rounded-full border border-sky-200 bg-white px-3 py-1.5 text-sm font-semibold text-sky-800 underline-offset-4 hover:underline"
      >
        <span class="truncate">{{ streamUrl }}</span>
      </a>
    </div>

    <div v-if="signalSummary" class="mt-4 grid gap-3 sm:grid-cols-3">
      <div class="rounded-2xl border border-violet-100 bg-white px-4 py-3">
        <p class="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">Einreichungen</p>
        <strong class="mt-1 block text-xl text-violet-900">{{ signalSummary.submissions }}</strong>
      </div>
      <div class="rounded-2xl border border-violet-100 bg-white px-4 py-3">
        <p class="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">Eindeutige User</p>
        <strong class="mt-1 block text-xl text-violet-900">{{ signalSummary.uniqueSubmitters }}</strong>
      </div>
      <div class="rounded-2xl border border-violet-100 bg-white px-4 py-3">
        <p class="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">Plattformen</p>
        <strong class="mt-1 block truncate text-sm text-violet-900">{{ signalSummary.platforms.join(', ') || 'keine' }}</strong>
      </div>
    </div>

    <div class="mt-5 rounded-2xl border border-violet-100 bg-violet-50/50 p-4">
      <p class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Als Kandidat übernehmen</p>
      <div class="mt-4 grid gap-4 md:grid-cols-3">
        <label class="space-y-2">
          <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Anzeigename</span>
          <input
            v-model="reviewForm.displayName"
            type="text"
            class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
            placeholder="Anzeigename"
          />
        </label>
        <label class="space-y-2">
          <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Handle</span>
          <input
            v-model="reviewForm.channelSlug"
            type="text"
            class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
            placeholder="channel"
          />
        </label>
        <label class="space-y-2">
          <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Plattform</span>
          <NativeSelect
            :model-value="selectedPlatformValue(reviewForm.platform)"
            :options="[
              ...candidatePlatformOptions.map((option) => ({ label: option.label, value: option.key })),
              { label: 'Eigene Plattform', value: 'custom' },
            ]"
            @update:model-value="emit('platform-change', String($event))"
          />
        </label>
      </div>
      <label v-if="selectedPlatformValue(reviewForm.platform) === 'custom'" class="mt-3 block space-y-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Eigene Plattform</span>
        <input
          v-model="reviewForm.platform"
          type="text"
          class="h-12 w-full rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
          placeholder="z. B. Cake, Booth, neue Plattform"
        />
      </label>
      <p v-if="selectedCandidateCollision" class="mt-3 rounded-2xl border border-amber-100 bg-amber-50 px-4 py-3 text-sm text-amber-800">
        Mögliches Duplikat: {{ selectedCandidateCollision.displayName }} ist in dieser Kategorie bereits vorhanden. Übernimm nur, wenn es wirklich ein separater Kandidat ist; Alias-/Merge-Pflege gehört danach in Kandidaten.
      </p>
      <div v-if="selectedRelatedPendingNominations?.length" class="mt-3 rounded-2xl border border-amber-100 bg-amber-50 px-4 py-3 text-sm text-amber-800">
        <p class="font-semibold">Weitere offene Einreichungen für denselben Namen oder Link:</p>
        <ul class="mt-2 space-y-1">
          <li v-for="related in selectedRelatedPendingNominations" :key="related.id">
            ID {{ related.id }} · {{ related.submittedByTwitchId }} · {{ related.candidateText || related.streamUrl || related.reviewNote || 'Name offen' }}
          </li>
        </ul>
      </div>
      <p v-if="!canApproveSelected" class="mt-3 rounded-2xl border border-rose-100 bg-rose-50 px-4 py-3 text-sm text-rose-700">
        Anzeigename, Handle und Plattform sind Pflicht, damit der Kandidat später im Voting eindeutig erscheint.
      </p>
      <label class="mt-3 block space-y-2">
        <span class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Moderationsnotiz</span>
        <textarea
          v-model="reviewForm.reviewNote"
          rows="3"
          class="w-full rounded-2xl border border-violet-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
          placeholder="Warum wurde übernommen oder verworfen?"
        />
      </label>
    </div>

    <div class="mt-4 flex flex-wrap justify-end gap-3">
      <Button :disabled="reviewSaving === nomination.id" variant="secondary" @click="emit('reject', nomination.id)">
        <Trash2 class="mr-2 h-4 w-4" />
        {{ reviewSaving === nomination.id ? 'Speichert ...' : 'Verwerfen' }}
      </Button>
      <Button :disabled="reviewSaving === nomination.id || !canApproveSelected" @click="emit('approve', nomination.id)">
        <CheckCircle2 class="mr-2 h-4 w-4" />
        {{ reviewSaving === nomination.id ? 'Speichert ...' : 'Als Kandidat übernehmen' }}
      </Button>
    </div>
  </div>
</template>
