<script setup lang="ts">
import { computed, reactive, ref, watch } from 'vue'
import { CheckCircle2, Search, Sparkles, Trash2 } from '@lucide/vue'

import AdminPageHeader from '../../components/admin/AdminPageHeader.vue'
import AdminSeasonToolbar from '../../components/admin/AdminSeasonToolbar.vue'
import Button from '../../components/ui/Button.vue'
import Card from '../../components/ui/Card.vue'
import { useAwardsStore } from '../../stores/awards'

const store = useAwardsStore()
const reviewSaving = ref<number | null>(null)
const adminMessage = ref('')
const adminError = ref('')

const reviewForms = reactive<Record<number, {
  displayName: string
  channelSlug: string
  platform: string
}>>({})

const seasonDetail = computed(() => store.adminSeasonDetail)
const selectedSeasonId = computed(() => store.adminSelectedSeasonId)
const reviewFilter = ref('')
const selectedNominationId = ref<number | null>(null)
const filteredNominations = computed(() => {
  const query = reviewFilter.value.trim().toLowerCase()
  if (!query) return seasonDetail.value.pendingNominations
  return seasonDetail.value.pendingNominations.filter((nomination) =>
    [nomination.categoryName, nomination.candidateText, nomination.submittedByTwitchId]
      .join(' ')
      .toLowerCase()
      .includes(query),
  )
})
const selectedNomination = computed(() =>
  filteredNominations.value.find((nomination) => nomination.id === selectedNominationId.value) ?? filteredNominations.value[0] ?? null,
)
const reviewStats = computed(() => [
  { label: 'Offen', value: seasonDetail.value.pendingNominations.length },
  { label: 'Sichtbar', value: filteredNominations.value.length },
  { label: 'Kategorien', value: new Set(seasonDetail.value.pendingNominations.map((nomination) => nomination.categoryName)).size },
])

watch(
  seasonDetail,
  (detail) => {
    for (const nomination of detail.pendingNominations) {
      reviewForms[nomination.id] = {
        displayName: nomination.candidateText,
        channelSlug: '',
        platform: 'Twitch',
      }
    }

    if (!detail.pendingNominations.some((nomination) => nomination.id === selectedNominationId.value)) {
      selectedNominationId.value = detail.pendingNominations[0]?.id ?? null
    }
  },
  { immediate: true },
)

watch(
  filteredNominations,
  (nominations) => {
    if (!nominations.some((nomination) => nomination.id === selectedNominationId.value)) {
      selectedNominationId.value = nominations[0]?.id ?? null
    }
  },
  { immediate: true },
)

async function approveNomination(nominationId: number) {
  if (!selectedSeasonId.value) return

  reviewSaving.value = nominationId
  adminMessage.value = ''
  adminError.value = ''

  try {
    await store.approveAdminNomination(nominationId, selectedSeasonId.value, reviewForms[nominationId])
    adminMessage.value = 'Nominierung wurde in die Kandidatenliste uebernommen.'
  } catch (error) {
    adminError.value = error instanceof Error ? error.message : 'Nominierung konnte nicht uebernommen werden.'
  } finally {
    reviewSaving.value = null
  }
}

async function rejectNomination(nominationId: number) {
  if (!selectedSeasonId.value) return

  reviewSaving.value = nominationId
  adminMessage.value = ''
  adminError.value = ''

  try {
    await store.rejectAdminNomination(nominationId, selectedSeasonId.value)
    adminMessage.value = 'Nominierung wurde aus der Review-Liste entfernt.'
  } catch (error) {
    adminError.value = error instanceof Error ? error.message : 'Nominierung konnte nicht verworfen werden.'
  } finally {
    reviewSaving.value = null
  }
}
</script>

<template>
  <div class="space-y-6">
    <AdminPageHeader
      eyebrow="Reviews"
      title="Freitext-Nominierungen sichten"
      description="Alle uneindeutigen oder noch nicht gemappten Nominierungen laufen hier zusammen. Suche nach User, Kategorie oder Kandidat und entscheide dann direkt im Kontext."
      :icon="Sparkles"
    />

    <AdminSeasonToolbar />

    <Card class="overflow-hidden">
      <div class="border-b border-violet-100 bg-white/75 p-6">
        <div class="flex flex-col gap-5 xl:flex-row xl:items-end xl:justify-between">
          <div>
            <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Review Queue</p>
            <h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">Offene Nominierungen</h2>
            <p class="mt-2 max-w-2xl text-sm leading-6 text-slate-500">
              Kompakte Liste fuer viele Freitext-Faelle. Waehle links einen Fall aus und entscheide rechts, ob daraus ein Kandidat wird.
            </p>
          </div>
          <div class="grid gap-2 sm:grid-cols-3 xl:min-w-[360px]">
            <div v-for="stat in reviewStats" :key="stat.label" class="rounded-2xl border border-violet-50 bg-violet-50/50 px-3 py-2">
              <p class="text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-500">{{ stat.label }}</p>
              <strong class="mt-1 block text-lg text-violet-800">{{ stat.value }}</strong>
            </div>
          </div>
        </div>

        <div class="mt-5 grid gap-3 md:grid-cols-[minmax(0,1fr)_220px]">
          <label class="relative block">
            <Search class="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-violet-400" />
            <input
              v-model="reviewFilter"
              type="text"
              class="h-12 w-full rounded-2xl border border-violet-200 bg-white/90 pl-11 pr-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
              placeholder="Nach Kategorie, Kandidat oder Nutzer suchen"
            />
          </label>
          <div class="rounded-2xl border border-violet-100 bg-violet-50/60 px-4 py-3 text-sm text-slate-600">
            {{ filteredNominations.length }} / {{ seasonDetail.pendingNominations.length }} sichtbar
          </div>
        </div>
      </div>

      <div class="space-y-4 p-6">
        <p v-if="adminMessage" class="rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">{{ adminMessage }}</p>
        <p v-if="adminError" class="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">{{ adminError }}</p>

        <div class="grid gap-5 xl:grid-cols-[minmax(320px,0.85fr)_minmax(0,1.15fr)]">
          <div class="space-y-2 xl:max-h-[680px] xl:overflow-y-auto xl:pr-2">
            <button
              v-for="nomination in filteredNominations"
              :key="nomination.id"
              type="button"
              class="w-full rounded-2xl border p-3 text-left transition"
              :class="selectedNomination?.id === nomination.id ? 'border-violet-200 bg-violet-50/80 shadow-[0_12px_30px_rgba(168,145,214,0.12)]' : 'border-violet-100 bg-white/85 hover:border-violet-200 hover:bg-violet-50/50'"
              @click="selectedNominationId = 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 bg-violet-50 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-violet-700">
                      {{ nomination.categoryName }}
                    </span>
                    <span class="rounded-full bg-slate-50 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-600">
                      ID {{ nomination.id }}
                    </span>
                  </div>
                  <h3 class="mt-2 truncate text-base font-semibold text-slate-900">{{ nomination.candidateText }}</h3>
                  <p class="mt-1 truncate text-sm text-slate-500">
                    {{ nomination.submittedByTwitchId }} · {{ new Date(nomination.createdAt).toLocaleString('de-DE') }}
                  </p>
                </div>
              </div>
            </button>

            <p v-if="seasonDetail.pendingNominations.length === 0" class="rounded-[22px] border border-dashed border-violet-100 px-5 py-6 text-sm text-slate-500">
              Keine offenen Review-Faelle im aktuell gewaehlten Award-Jahr.
            </p>
            <p v-else-if="filteredNominations.length === 0" class="rounded-[22px] border border-dashed border-violet-100 px-5 py-6 text-sm text-slate-500">
              Keine Review-Faelle passen zum aktuellen Filter.
            </p>
          </div>

          <div v-if="selectedNomination" 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">{{ selectedNomination.categoryName }}</p>
                <h3 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">{{ selectedNomination.candidateText }}</h3>
                <p class="mt-2 text-sm text-slate-500">
                  Eingereicht von {{ selectedNomination.submittedByTwitchId }} · {{ new Date(selectedNomination.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 {{ selectedNomination.id }}
              </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 uebernehmen</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="reviewForms[selectedNomination.id].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="reviewForms[selectedNomination.id].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>
                  <input
                    v-model="reviewForms[selectedNomination.id].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="Twitch"
                  />
                </label>
              </div>
            </div>

            <div class="mt-4 flex flex-wrap justify-end gap-3">
              <Button :disabled="reviewSaving === selectedNomination.id" variant="secondary" @click="rejectNomination(selectedNomination.id)">
                <Trash2 class="mr-2 h-4 w-4" />
                {{ reviewSaving === selectedNomination.id ? 'Speichert ...' : 'Verwerfen' }}
              </Button>
              <Button :disabled="reviewSaving === selectedNomination.id" @click="approveNomination(selectedNomination.id)">
                <CheckCircle2 class="mr-2 h-4 w-4" />
                {{ reviewSaving === selectedNomination.id ? 'Speichert ...' : 'Als Kandidat uebernehmen' }}
              </Button>
            </div>
          </div>
        </div>
      </div>
    </Card>
  </div>
</template>
