<script setup lang="ts">
import { computed, reactive, ref, watch } from '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 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),
  )
})

watch(
  seasonDetail,
  (detail) => {
    for (const nomination of detail.pendingNominations) {
      reviewForms[nomination.id] = {
        displayName: nomination.candidateText,
        channelSlug: '',
        platform: 'Twitch',
      }
    }
  },
  { 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."
    />

    <AdminSeasonToolbar />

    <Card class="p-7">
      <div class="flex items-center justify-between gap-4">
        <div>
          <h2 class="font-[Cormorant_Garamond] text-4xl text-violet-800">Review-Liste</h2>
          <p class="mt-2 text-sm text-slate-500">Freitext-Nominierungen und Alias-Faelle, die das Team direkt in Kandidaten ueberfuehren oder verwerfen kann.</p>
        </div>
        <span class="text-sm uppercase tracking-[0.2em] text-slate-500">
          {{ filteredNominations.length }} / {{ seasonDetail.pendingNominations.length }} offen
        </span>
      </div>

      <p v-if="adminMessage" class="mt-6 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="mt-6 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
        {{ adminError }}
      </p>

      <div class="mt-6 grid gap-4 md:grid-cols-[minmax(0,1fr)_220px]">
        <input
          v-model="reviewFilter"
          type="text"
          class="rounded-2xl border border-violet-200 px-4 py-3"
          placeholder="Nach Kategorie, Nominierung oder Nutzer filtern"
        />
        <div class="rounded-2xl border border-violet-100 bg-violet-50/60 px-4 py-3 text-sm text-slate-600">
          Tipp: Suche erst nach dem Problemfall, dann entscheide uebernehmen oder verwerfen.
        </div>
      </div>

      <div class="mt-6 space-y-4">
        <div
          v-for="nomination in filteredNominations"
          :key="nomination.id"
          class="rounded-[26px] border border-violet-100 bg-white/90 p-5"
        >
          <div class="flex flex-wrap items-start justify-between gap-4">
            <div>
              <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">{{ nomination.categoryName }}</p>
              <h3 class="mt-2 font-[Cormorant_Garamond] text-3xl text-violet-800">{{ nomination.candidateText }}</h3>
              <p class="mt-2 text-sm text-slate-500">
                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 text-slate-600">
              ID {{ nomination.id }}
            </div>
          </div>

          <div class="mt-5 grid gap-4 md:grid-cols-3">
            <input
              v-model="reviewForms[nomination.id].displayName"
              type="text"
              class="rounded-2xl border border-violet-200 px-4 py-3"
              placeholder="Anzeigename"
            />
            <input
              v-model="reviewForms[nomination.id].channelSlug"
              type="text"
              class="rounded-2xl border border-violet-200 px-4 py-3"
              placeholder="@channel"
            />
            <input
              v-model="reviewForms[nomination.id].platform"
              type="text"
              class="rounded-2xl border border-violet-200 px-4 py-3"
              placeholder="Plattform"
            />
          </div>

          <div class="mt-4 flex flex-wrap justify-end gap-3">
            <Button :disabled="reviewSaving === nomination.id" variant="secondary" @click="rejectNomination(nomination.id)">
              {{ reviewSaving === nomination.id ? 'Speichert ...' : 'Verwerfen' }}
            </Button>
            <Button :disabled="reviewSaving === nomination.id" @click="approveNomination(nomination.id)">
              {{ reviewSaving === nomination.id ? 'Speichert ...' : 'Als Kandidat uebernehmen' }}
            </Button>
          </div>
        </div>

        <p v-if="seasonDetail.pendingNominations.length === 0" class="rounded-[26px] 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-[26px] border border-dashed border-violet-100 px-5 py-6 text-sm text-slate-500">
          Keine Review-Faelle passen zum aktuellen Filter.
        </p>
      </div>
    </Card>
  </div>
</template>
