<script setup lang="ts">
import { computed, ref } from 'vue'
import { ClipboardList, Search, Sparkles, Tags, Users } from '@lucide/vue'
import { RouterLink } from 'vue-router'

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

const store = useAwardsStore()
const query = ref('')
const categoryFilter = ref<number | null>(null)
const statusFilter = ref<'all' | 'selected' | 'empty-category' | 'heavy'>('all')

const seasonDetail = computed(() => store.adminSeasonDetail)
const categoryMap = computed(() => Object.fromEntries(seasonDetail.value.categories.map((category) => [category.id, category])))
const filteredNominations = computed(() => {
  const search = query.value.trim().toLowerCase()
  const heavyCategoryIds = new Set(categoryStats.value.filter((category) => category.pending >= 3).map((category) => category.id))
  return seasonDetail.value.pendingNominations.filter((nomination) => {
    const matchesCategory = !categoryFilter.value || nomination.categoryId === categoryFilter.value
    const category = categoryMap.value[nomination.categoryId]
    const candidateCount = seasonDetail.value.candidates.filter((candidate) => candidate.categoryId === nomination.categoryId).length
    const matchesStatus =
      statusFilter.value === 'all' ||
      (statusFilter.value === 'selected' && !!categoryFilter.value) ||
      (statusFilter.value === 'empty-category' && candidateCount === 0) ||
      (statusFilter.value === 'heavy' && heavyCategoryIds.has(nomination.categoryId))
    const matchesSearch = !search || [nomination.categoryName, nomination.candidateText, nomination.submittedByTwitchId]
      .join(' ')
      .toLowerCase()
      .includes(search)
    return matchesCategory && matchesStatus && matchesSearch && !!category
  })
})
const categoryStats = computed(() =>
  seasonDetail.value.categories
    .map((category) => ({
      ...category,
      pending: seasonDetail.value.pendingNominations.filter((nomination) => nomination.categoryId === category.id).length,
      candidates: seasonDetail.value.candidates.filter((candidate) => candidate.categoryId === category.id).length,
    }))
    .sort((a, b) => b.pending - a.pending || a.sortOrder - b.sortOrder),
)
const nominationStats = computed(() => [
  { label: 'Offene Nominierungen', value: seasonDetail.value.pendingNominations.length, icon: Sparkles },
  { label: 'Betroffene Kategorien', value: categoryStats.value.filter((category) => category.pending > 0).length, icon: Tags },
  { label: 'Kandidatenbasis', value: seasonDetail.value.candidates.length, icon: Users },
])
const statusFilters = computed(() => [
  { key: 'all' as const, label: 'Alle', count: seasonDetail.value.pendingNominations.length },
  { key: 'empty-category' as const, label: 'Ohne Kandidatenbasis', count: seasonDetail.value.pendingNominations.filter((nomination) => !seasonDetail.value.candidates.some((candidate) => candidate.categoryId === nomination.categoryId)).length },
  { key: 'heavy' as const, label: 'Hoher Druck', count: categoryStats.value.filter((category) => category.pending >= 3).reduce((sum, category) => sum + category.pending, 0) },
])
</script>

<template>
  <div class="space-y-6">
    <AdminPageHeader
      eyebrow="Nominierungen"
      title="Eingang und Backlog verstehen"
      description="Hier siehst du, wo Freitext-Nominierungen auflaufen. Die eigentliche Entscheidung bleibt im Review-Bereich, aber diese Ansicht zeigt dir schneller, welche Kategorien Aufmerksamkeit brauchen."
      :icon="ClipboardList"
    />

    <AdminSeasonToolbar />

    <section class="grid gap-4 lg:grid-cols-3">
      <Card v-for="stat in nominationStats" :key="stat.label" class="p-5">
        <div class="flex items-start justify-between gap-4">
          <div>
            <p class="text-xs font-semibold uppercase tracking-[0.2em] text-violet-500">{{ stat.label }}</p>
            <strong class="mt-3 block text-4xl text-violet-900">{{ stat.value.toLocaleString('de-DE') }}</strong>
          </div>
          <div class="grid h-11 w-11 place-items-center rounded-2xl bg-violet-100 text-violet-700">
            <component :is="stat.icon" class="h-5 w-5" />
          </div>
        </div>
      </Card>
    </section>

    <section class="grid gap-6 xl:grid-cols-[0.92fr_1.08fr]">
      <Card class="overflow-hidden">
        <div class="border-b border-violet-100 p-5">
          <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Kategorien</p>
          <h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">Wo staut es sich?</h2>
        </div>
        <div class="divide-y divide-violet-50">
          <button
            v-for="category in categoryStats"
            :key="category.id"
            type="button"
            class="grid w-full grid-cols-[minmax(0,1fr)_auto] gap-4 px-5 py-4 text-left transition hover:bg-violet-50/50"
            :class="categoryFilter === category.id ? 'bg-violet-50/80' : ''"
            @click="categoryFilter = categoryFilter === category.id ? null : category.id"
          >
            <span class="min-w-0">
              <span class="block truncate font-semibold text-slate-900">{{ category.name }}</span>
              <span class="mt-1 block truncate text-sm text-slate-500">{{ category.groupName }} · {{ category.candidates }} Kandidaten</span>
            </span>
            <span class="rounded-full border border-violet-100 bg-white px-3 py-1 text-sm font-semibold text-violet-800">{{ category.pending }}</span>
          </button>
        </div>
      </Card>

      <Card class="overflow-hidden">
        <div class="border-b border-violet-100 p-5">
          <div class="grid gap-3 md:grid-cols-[minmax(0,1fr)_auto]">
            <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="query"
                class="h-12 w-full rounded-2xl border border-violet-200 bg-white pl-11 pr-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100"
                placeholder="Nach Kandidat, User oder Kategorie suchen"
              />
            </label>
            <RouterLink to="/admin/reviews" class="inline-flex h-12 items-center justify-center rounded-2xl bg-violet-600 px-5 text-sm font-semibold text-white shadow-lg shadow-violet-500/20 transition hover:bg-violet-500">
              Reviews öffnen
            </RouterLink>
          </div>
          <div class="mt-3 flex flex-wrap gap-2">
            <button
              v-for="filter in statusFilters"
              :key="filter.key"
              type="button"
              class="rounded-full border px-3 py-1.5 text-xs font-semibold transition"
              :class="statusFilter === filter.key ? 'border-violet-200 bg-violet-100 text-violet-800' : 'border-violet-100 bg-white text-slate-600 hover:bg-violet-50'"
              @click="statusFilter = filter.key"
            >
              {{ filter.label }} · {{ filter.count }}
            </button>
          </div>
        </div>

        <div class="max-h-[620px] divide-y divide-violet-50 overflow-y-auto">
          <div v-for="nomination in filteredNominations" :key="nomination.id" class="px-5 py-4">
            <div class="flex flex-wrap items-start justify-between gap-3">
              <div class="min-w-0">
                <p class="text-xs font-semibold uppercase tracking-[0.18em] text-violet-500">{{ nomination.categoryName }}</p>
                <h3 class="mt-1 truncate text-lg font-semibold text-slate-900">{{ nomination.candidateText }}</h3>
                <p class="mt-1 text-sm text-slate-500">
                  {{ nomination.submittedByTwitchId }} · {{ new Date(nomination.createdAt).toLocaleString('de-DE') }}
                </p>
              </div>
              <span class="rounded-full border border-slate-100 bg-slate-50 px-3 py-1 text-xs font-semibold text-slate-600">
                Limit {{ categoryMap[nomination.categoryId]?.maxNomineesPerUser ?? '-' }}
              </span>
              <span
                v-if="!seasonDetail.candidates.some((candidate) => candidate.categoryId === nomination.categoryId)"
                class="rounded-full border border-amber-100 bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-700"
              >
                erst Kandidatenbasis klären
              </span>
            </div>
          </div>
          <p v-if="filteredNominations.length === 0" class="px-5 py-10 text-center text-sm text-slate-500">
            Keine Nominierungen passen zum aktuellen Filter.
          </p>
        </div>
      </Card>
    </section>
  </div>
</template>
