<template>
  <Modal
    :open="open && leaderboardEntry !== null"
    :title="leaderboardEntry?.displayName || 'Kandidatendetails'"
    :subtitle="subtitle"
    size="lg"
    @close="$emit('close')"
  >
    <template v-if="leaderboardEntry">
      <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
        <div class="rounded-2xl border border-violet-100 bg-violet-50/50 px-4 py-3">
          <p class="text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-500">Rang</p>
          <strong class="mt-1 block text-xl text-slate-950">#{{ rankLabel }}</strong>
        </div>
        <div class="rounded-2xl border border-violet-100 bg-violet-50/50 px-4 py-3">
          <p class="text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-500">Votes</p>
          <strong class="mt-1 block text-xl text-slate-950">{{ leaderboardEntry.votes.toLocaleString('de-DE') }}</strong>
        </div>
        <div class="rounded-2xl border border-violet-100 bg-violet-50/50 px-4 py-3">
          <p class="text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-500">Anteil</p>
          <strong class="mt-1 block text-xl text-violet-800">{{ leaderboardEntry.voteSharePercent }}%</strong>
        </div>
        <div class="rounded-2xl border border-violet-100 bg-violet-50/50 px-4 py-3">
          <p class="text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-500">Viewer-Nominierungen</p>
          <strong class="mt-1 block text-xl text-slate-950">{{ leaderboardEntry.nominationTally }}</strong>
        </div>
      </div>

      <section class="mt-5 rounded-2xl border border-violet-100 bg-white p-4">
        <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.18em] text-violet-500">Kanal</p>
            <h4 class="mt-2 text-xl font-bold text-slate-950">{{ leaderboardEntry.displayName }}</h4>
            <p class="mt-1 break-all text-sm text-slate-500">{{ leaderboardEntry.channelSlug }} · {{ leaderboardEntry.platform }}</p>
          </div>
          <div class="flex flex-wrap gap-2 lg:max-w-[50%] lg:justify-end">
            <span v-if="leaderboardEntry.isCurrentWinner" class="rounded-full bg-emerald-50 px-3 py-1 text-[11px] font-semibold text-emerald-700">
              Gewinner
            </span>
            <span v-if="leaderboardEntry.isTopTie" class="rounded-full bg-amber-50 px-3 py-1 text-[11px] font-semibold text-amber-700">
              Tie
            </span>
            <span class="rounded-full px-3 py-1 text-[11px] font-semibold" :class="leaderboardEntry.hasClip ? 'bg-emerald-50 text-emerald-700' : 'bg-amber-50 text-amber-700'">
              {{ leaderboardEntry.hasClip ? 'Clip da' : 'Clip fehlt' }}
            </span>
            <span v-if="leaderboardEntry.hasWinnerConflict" class="rounded-full bg-amber-50 px-3 py-1 text-[11px] font-semibold text-amber-700">
              Regelkonflikt
            </span>
            <span class="rounded-full px-3 py-1 text-[11px] font-semibold" :class="leaderboardEntry.isAccepted ? 'bg-sky-50 text-sky-700' : 'bg-slate-100 text-slate-600'">
              {{ acceptanceStatusLabel(candidate?.acceptanceStatus, leaderboardEntry.isAccepted) }}
            </span>
          </div>
        </div>
      </section>

      <div class="mt-5 grid gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
        <section class="rounded-2xl border border-violet-100 bg-violet-50/35 p-4">
          <p class="text-xs font-semibold uppercase tracking-[0.18em] text-violet-500">Voting-Readiness</p>
          <div class="mt-3 grid gap-3 sm:grid-cols-2">
            <div class="rounded-2xl border border-violet-100 bg-white px-4 py-3">
              <p class="text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-500">Annahme</p>
              <strong class="mt-1 block text-base text-slate-950">{{ acceptanceStatusLabel(candidate?.acceptanceStatus, leaderboardEntry.isAccepted) }}</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.14em] text-slate-500">Clip-Embed</p>
              <strong class="mt-1 block text-base text-slate-950">{{ clipEmbedStatusLabel(candidate?.clipEmbedStatus, leaderboardEntry.clipEmbedStatus) }}</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.14em] text-slate-500">Ø Viewer</p>
              <strong class="mt-1 block text-base text-slate-950">{{ avgViewersLabel }}</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.14em] text-slate-500">Kandidat-ID</p>
              <strong class="mt-1 block text-base text-slate-950">{{ candidate?.id ?? leaderboardEntry.candidateId }}</strong>
            </div>
          </div>
        </section>

        <section class="rounded-2xl border border-violet-100 bg-white p-4">
          <div class="flex items-start justify-between gap-3">
            <div>
              <p class="text-xs font-semibold uppercase tracking-[0.18em] text-violet-500">Clip / Compilation</p>
              <p class="mt-1 text-sm text-slate-500">Voting-Link und aktueller Nutzungsstatus.</p>
            </div>
            <a
              v-if="candidate?.clipCompilationUrl"
              :href="candidate.clipCompilationUrl"
              target="_blank"
              rel="noopener noreferrer"
              class="inline-flex items-center justify-center rounded-full border border-violet-200 px-3 py-1.5 text-xs font-semibold text-violet-700 transition hover:bg-violet-50"
            >
              Link öffnen
            </a>
          </div>
          <dl class="mt-4 grid gap-3">
            <div class="rounded-2xl border border-violet-100 bg-violet-50/35 px-4 py-3">
              <dt class="text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-500">URL</dt>
              <dd class="mt-1 break-all text-sm text-slate-900">{{ candidate?.clipCompilationUrl || 'Kein Clip-Link gepflegt.' }}</dd>
            </div>
            <div class="grid gap-3 sm:grid-cols-2">
              <div class="rounded-2xl border border-violet-100 bg-violet-50/35 px-4 py-3">
                <dt class="text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-500">Titel</dt>
                <dd class="mt-1 text-sm text-slate-900">{{ candidate?.clipCompilationTitle || 'Kein Titel gepflegt.' }}</dd>
              </div>
              <div class="rounded-2xl border border-violet-100 bg-violet-50/35 px-4 py-3">
                <dt class="text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-500">Plattform</dt>
                <dd class="mt-1 text-sm text-slate-900">{{ candidate?.clipCompilationPlatform || leaderboardEntry.platform }}</dd>
              </div>
            </div>
          </dl>
        </section>
      </div>

      <section class="mt-5 rounded-2xl border border-violet-100 bg-violet-50/35 p-4">
        <p class="text-xs font-semibold uppercase tracking-[0.18em] text-violet-500">Teamnotiz</p>
        <p class="mt-2 text-sm leading-6 text-slate-600">
          {{ candidate?.acceptanceNote?.trim() || 'Noch keine Teamnotiz hinterlegt.' }}
        </p>
      </section>
    </template>

    <template #footer>
      <Button variant="ghost" @click="$emit('close')">Schliessen</Button>
    </template>
  </Modal>
</template>

<script setup lang="ts">
import { computed } from 'vue'

import type { AdminCandidateItem, AdminVotingCandidateRank } from '../../types/awards'
import Button from '../ui/Button.vue'
import Modal from '../ui/Modal.vue'

const props = defineProps<{
  open: boolean
  categoryName: string
  groupName: string
  rank: number | null
  candidate: AdminCandidateItem | null
  leaderboardEntry: AdminVotingCandidateRank | null
}>()

defineEmits<{
  close: []
}>()

const subtitle = computed(() => {
  if (!props.leaderboardEntry) return undefined
  return `${props.groupName} · ${props.categoryName}`
})

const rankLabel = computed(() => props.rank ?? '–')
const avgViewersLabel = computed(() => {
  if (props.candidate?.avgViewers === null || props.candidate?.avgViewers === undefined) return 'Keine Daten'
  return props.candidate.avgViewers.toLocaleString('de-DE')
})

function acceptanceStatusLabel(status: string | null | undefined, isAccepted: boolean) {
  if (status === 'contacted') return 'Angefragt'
  if (status === 'accepted') return 'Angenommen'
  if (status === 'declined') return 'Abgesagt'
  if (status === 'open') return 'Offen'
  return isAccepted ? 'Angenommen' : 'nicht final'
}

function clipEmbedStatusLabel(candidateStatus: string | null | undefined, rankStatus: string | null | undefined) {
  const value = candidateStatus || rankStatus || 'unchecked'
  if (value === 'embeddable') return 'Einbettbar'
  if (value === 'link_only') return 'Nur Link'
  if (value === 'blocked') return 'Nicht nutzbar'
  return 'Noch nicht geprueft'
}
</script>
