<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted } from 'vue'
import { Sparkles, X } from '@lucide/vue'

import AdminReviewDecisionPanel from './AdminReviewDecisionPanel.vue'
import { useBodyScrollLock } from '../../composables/useBodyScrollLock'
import type { AdminCandidateItem, AdminNominationReviewGroup, AdminNominationReviewItem } from '../../types/awards'

const props = defineProps<{
  open: boolean
  nomination: AdminNominationReviewGroup | null
  reviewSaving: number | null
  reviewForm: {
    displayName: string
    channelSlug: string
    platform: string
    categoryId: number | null
    reviewNote: string
  } | null
  candidatePlatformOptions: Array<{ key: string; label: string }>
  categoryOptions: Array<{ id: number; label: string }>
  selectedCandidateCollision: AdminCandidateItem | null
  selectedRelatedPendingNominations?: AdminNominationReviewItem[]
  signalSummary?: {
    submissions: number
    uniqueSubmitters: number
    platforms: string[]
  } | null
  trackingReviewNotes?: string
  streamUrl?: string
  canApproveSelected: boolean
  blacklistSaving: boolean
  selectedPlatformValue: (platform: string) => string
  trackerStatusMeta: (status: string) => { label: string; toneClass: string; hint: string }
}>()

const emit = defineEmits<{
  close: []
  'platform-change': [value: string]
  approve: [nominationId: number]
  reject: [nominationId: number]
  reviewFlagged: [nominationId: number]
  overrideFlagged: [nominationId: number]
  'blacklist-link': [streamUrl: string]
}>()

const modalTitle = computed(() => props.nomination?.displayName || 'Nominierung entscheiden')

function closeModal() {
  emit('close')
}

function onKey(event: KeyboardEvent) {
  if (event.key === 'Escape' && props.open) {
    closeModal()
  }
}

useBodyScrollLock(() => props.open)

onMounted(() => window.addEventListener('keydown', onKey))
onBeforeUnmount(() => {
  window.removeEventListener('keydown', onKey)
})
</script>

<template>
  <Teleport to="body">
    <div
      v-if="open"
      class="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-6"
      @click.self="closeModal"
    >
      <div class="absolute inset-0 bg-violet-950/35 backdrop-blur-sm" @click="closeModal" />

      <section class="relative z-10 flex max-h-[calc(100vh-2rem)] w-full max-w-6xl flex-col overflow-hidden rounded-[28px] border border-violet-200/80 bg-white shadow-[0_40px_90px_rgba(76,40,160,0.28)]">
        <header class="flex items-start justify-between gap-4 border-b border-violet-100 bg-[linear-gradient(135deg,#f7f2ff,#fff7ed)] px-5 py-4 sm:px-6">
          <div class="min-w-0">
            <div class="flex items-center gap-2">
              <span class="grid h-9 w-9 shrink-0 place-items-center rounded-2xl bg-violet-100 text-violet-700">
                <Sparkles class="h-4.5 w-4.5" />
              </span>
              <p class="text-xs font-semibold uppercase tracking-[0.22em] text-violet-500">Review-Fokus</p>
            </div>
            <h2 class="mt-3 text-2xl font-bold text-slate-950">{{ modalTitle }}</h2>
            <p class="mt-1 max-w-2xl text-sm leading-6 text-slate-500">
              Die Nominierungsliste bleibt scanbar; Entscheidungen laufen hier konzentriert mit Queue, Prüfung und Kandidatenübernahme.
            </p>
          </div>
          <button
            type="button"
            class="grid h-10 w-10 shrink-0 place-items-center rounded-full text-slate-400 transition hover:bg-white/80 hover:text-violet-700"
            aria-label="Review-Dialog schließen"
            @click="closeModal"
          >
            <X class="h-5 w-5" />
          </button>
        </header>

        <div class="min-h-0 overflow-y-auto p-4 sm:p-6">
          <AdminReviewDecisionPanel
            :nomination="nomination"
            :review-saving="reviewSaving"
            :review-form="reviewForm"
            :candidate-platform-options="candidatePlatformOptions"
            :category-options="categoryOptions"
            :selected-candidate-collision="selectedCandidateCollision"
            :selected-related-pending-nominations="selectedRelatedPendingNominations"
            :signal-summary="signalSummary"
            :tracking-review-notes="trackingReviewNotes"
            :stream-url="streamUrl"
            :can-approve-selected="canApproveSelected"
            :blacklist-saving="blacklistSaving"
            :selected-platform-value="selectedPlatformValue"
            :tracker-status-meta="trackerStatusMeta"
            @platform-change="emit('platform-change', $event)"
            @approve="emit('approve', $event)"
            @reject="emit('reject', $event)"
            @review-flagged="emit('reviewFlagged', $event)"
            @override-flagged="emit('overrideFlagged', $event)"
            @blacklist-link="emit('blacklist-link', $event)"
          />
        </div>
      </section>
    </div>
  </Teleport>
</template>
