<template>
  <div class="space-y-3">
    <article
      v-for="group in groups"
      :key="group.name"
      class="overflow-hidden rounded-2xl border bg-white/90 shadow-[0_14px_36px_rgba(124,91,180,0.08)]"
      :class="selectedGroupName === group.name ? 'border-violet-200 ring-2 ring-violet-100' : 'border-violet-100'"
    >
      <div class="grid gap-3 border-b border-violet-100 bg-violet-50/45 px-4 py-4 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center">
        <button type="button" class="min-w-0 text-left" @click="$emit('edit-group', group)">
          <div class="flex min-w-0 flex-wrap items-center gap-2">
            <span class="grid h-8 w-8 shrink-0 place-items-center rounded-xl bg-white text-violet-700 shadow-sm">
              <FolderTree class="h-4 w-4" />
            </span>
            <h2 class="truncate text-lg font-bold text-slate-900">{{ group.name }}</h2>
            <span class="rounded-full bg-white px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-violet-700">
              #{{ group.sortOrder }}
            </span>
            <span class="rounded-full bg-white px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-slate-600">
              Limit {{ group.maxNomineesPerUser }}
            </span>
          </div>
          <p class="mt-2 line-clamp-2 text-sm leading-6 text-slate-500">
            {{ group.description || 'Keine Beschreibung hinterlegt.' }}
          </p>
          <p class="mt-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-violet-500">
            Wird in der Landingpage-Awards-Karte verwendet
          </p>
        </button>

        <div class="flex flex-wrap items-center gap-2 lg:justify-end">
          <span class="rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700">
            {{ group.candidateCount }} Kandidaten
          </span>
          <span class="rounded-full bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-700">
            {{ group.pendingCount }} Reviews
          </span>
          <span class="rounded-full bg-sky-50 px-3 py-1 text-xs font-semibold text-sky-700">
            {{ group.nominatorCount }} Nominierer
          </span>
          <Button variant="ghost" size="sm" class="gap-2" @click.stop="$emit('overview-group', group)">
            <Info class="h-4 w-4" />
            Details
          </Button>
          <Button size="sm" class="gap-2" @click.stop="$emit('edit-group', group)">
            <Pencil class="h-4 w-4" />
            Bearbeiten
          </Button>
        </div>
      </div>

      <div class="divide-y divide-violet-100">
        <div
          v-for="category in group.categories"
          :key="category.id"
          class="group grid gap-3 rounded-[22px] border border-transparent px-4 py-3 transition duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center"
          :class="isFocused(category.slug) || isFocused(category.name)
            ? 'border-sky-200 bg-sky-50/70 shadow-[inset_0_1px_0_rgba(255,255,255,0.7)]'
            : 'bg-white hover:border-violet-200 hover:bg-gradient-to-r hover:from-violet-50/75 hover:via-white hover:to-violet-50/35 focus-within:border-violet-200 focus-within:bg-gradient-to-r focus-within:from-violet-50/75 focus-within:via-white focus-within:to-violet-50/35'"
        >
          <button
            type="button"
            class="min-w-0 rounded-2xl text-left outline-none focus-visible:ring-2 focus-visible:ring-violet-200 focus-visible:ring-offset-2 focus-visible:ring-offset-white"
            @click="$emit('overview-category', group, category)"
          >
            <div class="flex min-w-0 gap-4">
              <span
                class="mt-1 hidden h-14 w-1 shrink-0 rounded-full bg-violet-100 transition duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] sm:block"
                :class="isFocused(category.slug) || isFocused(category.name) ? 'bg-sky-300' : 'group-hover:bg-violet-200 group-focus-within:bg-violet-200'"
              />

              <div class="min-w-0 flex-1">
                <div class="flex min-w-0 flex-wrap items-center gap-2">
                  <span
                    class="grid h-7 w-7 shrink-0 place-items-center rounded-lg bg-violet-50 text-violet-600 transition duration-200 ease-[cubic-bezier(0.22,1,0.36,1)]"
                    :class="isFocused(category.slug) || isFocused(category.name) ? 'bg-sky-100 text-sky-700' : 'group-hover:bg-white group-hover:text-violet-700 group-focus-within:bg-white group-focus-within:text-violet-700'"
                  >
                    <GitBranch class="h-3.5 w-3.5" />
                  </span>
                  <p class="truncate font-semibold text-slate-900 transition-colors duration-200 group-hover:text-violet-950 group-focus-within:text-violet-950">
                    {{ category.name }}
                  </p>
                  <span
                    v-if="isFocused(category.slug) || isFocused(category.name)"
                    class="rounded-full bg-sky-100 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-sky-700"
                  >
                    Fokus
                  </span>
                  <span class="rounded-full px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em]" :class="statusClass(category)">
                    {{ statusLabel(category) }}
                  </span>
                </div>
                <div class="mt-2 flex flex-wrap gap-2 text-xs text-slate-500">
                  <span class="font-mono text-slate-400 transition-colors duration-200 group-hover:text-violet-500 group-focus-within:text-violet-500">/{{ category.slug }}</span>
                  <span>{{ formatViewerRange(category.viewerRangeMin, category.viewerRangeMax) }}</span>
                </div>
              </div>
            </div>
          </button>

          <div class="flex flex-wrap items-center gap-2 lg:justify-end">
            <span class="rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700">
              {{ category.candidateCount }} Kandidaten
            </span>
            <span class="rounded-full bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-700">
              {{ category.pendingCount }} Reviews
            </span>
            <span class="rounded-full bg-sky-50 px-3 py-1 text-xs font-semibold text-sky-700">
              {{ category.nominatorCount }} Nominierer<span v-if="recommendedNominatorTarget !== null"> · Ziel {{ recommendedNominatorTarget }}</span>
            </span>
            <Button variant="ghost" size="sm" class="gap-2" @click="$emit('overview-category', group, category)">
              <Info class="h-4 w-4" />
              Overview
            </Button>
          </div>
        </div>
      </div>
    </article>

    <div v-if="groups.length === 0" class="rounded-2xl border border-dashed border-violet-200 bg-violet-50/50 px-4 py-12 text-center text-sm text-slate-500">
      Keine Hauptkategorien passen zu diesem Filter.
    </div>
  </div>
</template>

<script setup lang="ts">
import { FolderTree, GitBranch, Info, Pencil } from '@lucide/vue'

import Button from '../ui/Button.vue'
import type { AdminCategoryGroupSummary } from './useAdminCategoryManager'
import { formatViewerRange } from './useAdminCategoryManager'

type TreeCategory = AdminCategoryGroupSummary['categories'][number]

defineProps<{
  groups: AdminCategoryGroupSummary[]
  selectedGroupName: string | null
  isFocused: (nameOrSlug: string) => boolean
  recommendedNominatorTarget: number | null
}>()

defineEmits<{
  'edit-group': [group: AdminCategoryGroupSummary]
  'overview-group': [group: AdminCategoryGroupSummary]
  'overview-category': [group: AdminCategoryGroupSummary, category: TreeCategory]
}>()

function statusLabel(category: TreeCategory) {
  if (category.pendingCount > 0) return 'Reviews'
  if (category.nominatorCount >= 4) return 'Bereit'
  if (category.nominatorCount > 0 || category.candidateCount > 0) return 'Aufbau'
  if (category.candidateCount === 0) return 'Leer'
  return 'Aufbau'
}

function statusClass(category: TreeCategory) {
  if (category.pendingCount > 0) return 'bg-amber-50 text-amber-700'
  if (category.nominatorCount >= 4) return 'bg-emerald-50 text-emerald-700'
  if (category.nominatorCount > 0 || category.candidateCount > 0) return 'bg-sky-50 text-sky-700'
  if (category.candidateCount === 0) return 'bg-rose-50 text-rose-700'
  return 'bg-sky-50 text-sky-700'
}
</script>
