<script setup lang="ts">
import { computed, ref } from 'vue'
import { Filter, Vote } from '@lucide/vue'

import AdminPageHeader from '../../components/admin/AdminPageHeader.vue'
import AdminSeasonToolbar from '../../components/admin/AdminSeasonToolbar.vue'
import AdminVotingLeaderboardModal from '../../components/admin/AdminVotingLeaderboardModal.vue'
import AdminVotingTreeWorkspace from '../../components/admin/AdminVotingTreeWorkspace.vue'
import { type AdminVotingWorkspaceRow, useAdminVotingManager } from '../../components/admin/useAdminVotingManager'
import Button from '../../components/ui/Button.vue'
import Card from '../../components/ui/Card.vue'

const {
  problemOnly,
  query,
  statusFilter,
  statusFilters,
  summaryCards,
  seasonCandidates,
  votingGroups,
  selectedGroupName,
  focusedCategoryId,
  clearFilters,
  selectGroup,
  focusCategory,
} = useAdminVotingManager()

const leaderboardCategory = ref<AdminVotingWorkspaceRow | null>(null)
const compactSummaryCards = computed(() => summaryCards.value.slice(0, 4))

function openLeaderboard(category: AdminVotingWorkspaceRow) {
  focusCategory(category.categoryId)
  leaderboardCategory.value = category
}
</script>

<template>
  <div class="space-y-6">
    <AdminPageHeader
      eyebrow="Voting"
      description="Operative Stimmenlage, Unterkategorie-Status und Gewinner-Vorbereitung in einer Arbeitsflaeche."
      :icon="Vote"
    />

    <AdminSeasonToolbar />

    <section class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
      <Card v-for="card in compactSummaryCards" :key="card.label" class="p-4">
        <div class="flex items-start justify-between gap-3">
          <div class="min-w-0">
            <p class="text-[11px] font-bold uppercase tracking-[0.16em] text-slate-500">{{ card.label }}</p>
            <strong class="mt-2 block text-2xl text-slate-950">{{ card.value }}</strong>
            <p class="mt-1 text-sm leading-5 text-slate-500">{{ card.note }}</p>
          </div>
          <div class="grid h-10 w-10 shrink-0 place-items-center rounded-xl border" :class="card.tone">
            <component :is="card.icon" class="h-5 w-5" />
          </div>
        </div>
      </Card>
    </section>

    <Card class="p-5">
      <div class="grid gap-4 xl:grid-cols-[minmax(260px,0.9fr)_minmax(0,1.1fr)_auto] xl:items-center">
        <label class="relative block">
          <Filter 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"
            type="search"
            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="Hauptkategorie, Unterkategorie oder Kandidat suchen"
          >
        </label>

        <div class="flex flex-wrap gap-2">
          <button
            v-for="option in statusFilters"
            :key="option.value"
            type="button"
            class="inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-semibold transition"
            :class="statusFilter === option.value ? 'border-violet-200 bg-violet-100 text-violet-800' : 'border-violet-100 bg-white text-slate-600 hover:bg-violet-50'"
            @click="statusFilter = option.value"
          >
            {{ option.label }}
            <span class="rounded-full bg-white/70 px-2 py-0.5 text-[11px]">{{ option.count }}</span>
          </button>
        </div>

        <div class="flex flex-wrap items-center gap-2 xl:justify-end">
          <Button
            :variant="problemOnly ? 'default' : 'ghost'"
            class="shrink-0"
            @click="problemOnly = !problemOnly"
          >
            {{ problemOnly ? 'Nur Sonderfaelle aktiv' : 'Nur Sonderfaelle' }}
          </Button>
          <Button
            v-if="query || statusFilter !== 'all' || problemOnly"
            variant="ghost"
            class="shrink-0"
            @click="clearFilters"
          >
            Filter reset
          </Button>
        </div>
      </div>
    </Card>

    <section>
      <AdminVotingTreeWorkspace
        :groups="votingGroups"
        :selected-group-name="selectedGroupName"
        :focused-category-id="focusedCategoryId"
        @select-group="selectGroup"
        @select-category="focusCategory"
        @open-leaderboard="openLeaderboard"
      />
    </section>

    <AdminVotingLeaderboardModal
      :category="leaderboardCategory"
      :candidates="seasonCandidates"
      @close="leaderboardCategory = null"
    />
  </div>
</template>
