<script setup lang="ts">
import { computed } from 'vue'
import { BarChart3, CheckCircle2, Tags, Users, Vote } 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 seasonDetail = computed(() => store.adminSeasonDetail)
const totalVotes = computed(() => store.admin.metrics.find((metric) => metric.label === 'Stimmen')?.value ?? 0)
const maxVotes = computed(() => Math.max(...store.admin.topCategories.map((category) => category.votes), 1))
const votingReadiness = computed(() =>
  seasonDetail.value.categories.map((category) => {
    const candidateCount = seasonDetail.value.candidates.filter((candidate) => candidate.categoryId === category.id).length
    return {
      ...category,
      candidateCount,
      ready: candidateCount > 0 && seasonDetail.value.currentPhase.toLowerCase().includes('voting'),
    }
  }),
)
const readyCount = computed(() => votingReadiness.value.filter((category) => category.ready).length)
const notReadyCategories = computed(() => votingReadiness.value.filter((category) => !category.ready))
const stats = computed(() => [
  { label: 'Stimmen gesamt', value: totalVotes.value, icon: Vote },
  { label: 'Voting-ready', value: readyCount.value, icon: CheckCircle2 },
  { label: 'Kategorien', value: seasonDetail.value.categories.length, icon: Tags },
  { label: 'Kandidaten', value: seasonDetail.value.candidates.length, icon: Users },
])
const votingChecklist = computed(() => [
  {
    label: 'Voting-Phase aktiv',
    done: seasonDetail.value.currentPhase.toLowerCase().includes('voting'),
    note: seasonDetail.value.currentPhase || 'Keine Phase gesetzt',
    to: '/admin/settings',
  },
  {
    label: 'Alle Kategorien haben Kandidaten',
    done: notReadyCategories.value.every((category) => category.candidateCount > 0) && seasonDetail.value.categories.length > 0,
    note: `${notReadyCategories.value.filter((category) => category.candidateCount === 0).length} Kategorien ohne Kandidaten`,
    to: '/admin/categories',
  },
  {
    label: 'Offene Reviews niedrig',
    done: seasonDetail.value.pendingNominations.length === 0,
    note: `${seasonDetail.value.pendingNominations.length} offene Reviews`,
    to: '/admin/reviews',
  },
])
</script>

<template>
  <div class="space-y-6">
    <AdminPageHeader
      eyebrow="Voting"
      title="Voting-Status und Rankings"
      description="Prüfe, ob Kategorien Kandidaten besitzen, ob das Jahr in der richtigen Phase ist und welche Kategorien aktuell die meiste Aktivität erzeugen."
      :icon="Vote"
    />

    <AdminSeasonToolbar />

    <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
      <Card v-for="stat in stats" :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.18em] text-violet-500">{{ stat.label }}</p>
            <strong class="mt-3 block text-3xl text-violet-900">{{ stat.value.toLocaleString('de-DE') }}</strong>
          </div>
          <div class="grid h-10 w-10 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-[1.08fr_0.92fr]">
      <Card class="p-6">
        <div class="flex items-end justify-between gap-4">
          <div>
            <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Ranking</p>
            <h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">Top Kategorien</h2>
          </div>
          <BarChart3 class="h-6 w-6 text-violet-500" />
        </div>

        <div class="mt-6 space-y-4">
          <div v-for="(category, index) in store.admin.topCategories" :key="category.category" class="rounded-[22px] border border-violet-100 bg-white/90 p-4">
            <div class="flex items-center justify-between gap-4">
              <div>
                <p class="text-xs font-semibold uppercase tracking-[0.16em] text-violet-500">#{{ index + 1 }}</p>
                <h3 class="mt-1 font-semibold text-slate-900">{{ category.category }}</h3>
              </div>
              <strong class="text-violet-800">{{ category.votes.toLocaleString('de-DE') }}</strong>
            </div>
            <div class="mt-3 h-3 overflow-hidden rounded-full bg-violet-50">
              <div class="h-full rounded-full bg-gradient-to-r from-[#c4b5fd] to-[#7c5cff]" :style="{ width: `${(category.votes / maxVotes) * 100}%` }" />
            </div>
          </div>
          <p v-if="store.admin.topCategories.length === 0" class="rounded-2xl border border-dashed border-violet-100 px-5 py-8 text-center text-sm text-slate-500">
            Noch keine Voting-Daten vorhanden.
          </p>
        </div>
      </Card>

      <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">Readiness</p>
          <h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">Kategorie-Check</h2>
        </div>
        <div class="max-h-[620px] divide-y divide-violet-50 overflow-y-auto">
          <div v-for="category in votingReadiness" :key="category.id" class="grid grid-cols-[minmax(0,1fr)_auto] gap-4 px-5 py-4">
            <div class="min-w-0">
              <p class="truncate font-semibold text-slate-900">{{ category.name }}</p>
              <p class="mt-1 truncate text-sm text-slate-500">{{ category.groupName }} · {{ category.candidateCount }} Kandidaten</p>
            </div>
            <span class="h-fit rounded-full border px-3 py-1 text-xs font-semibold" :class="category.ready ? 'border-emerald-100 bg-emerald-50 text-emerald-700' : 'border-amber-100 bg-amber-50 text-amber-700'">
              {{ category.ready ? 'bereit' : 'prüfen' }}
            </span>
          </div>
        </div>
      </Card>
    </section>

    <Card class="p-6">
      <p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Voting Checkliste</p>
      <h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">Vor dem Public Push</h2>
      <div class="mt-5 grid gap-3 lg:grid-cols-3">
        <RouterLink
          v-for="item in votingChecklist"
          :key="item.label"
          :to="item.to"
          class="rounded-[22px] border p-4 transition hover:-translate-y-0.5 hover:bg-violet-50/50"
          :class="item.done ? 'border-emerald-100 bg-emerald-50/40' : 'border-amber-100 bg-amber-50/50'"
        >
          <div class="flex items-start justify-between gap-3">
            <div>
              <p class="font-semibold text-slate-900">{{ item.label }}</p>
              <p class="mt-1 text-sm leading-5 text-slate-500">{{ item.note }}</p>
            </div>
            <span class="rounded-full px-3 py-1 text-xs font-semibold" :class="item.done ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700'">
              {{ item.done ? 'ok' : 'prüfen' }}
            </span>
          </div>
        </RouterLink>
      </div>
    </Card>
  </div>
</template>
