<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { RouterLink, RouterView, useRoute } from 'vue-router'
import {
  AlertTriangle,
  BarChart3,
  CalendarCog,
  ClipboardList,
  Film,
  LayoutDashboard,
  Settings,
  Sparkles,
  Tags,
  UserCog,
  Users,
  Vote,
} from '@lucide/vue'

import Card from '../../components/ui/Card.vue'
import { useAwardsStore } from '../../stores/awards'
import { useAuthStore } from '../../stores/auth'

const route = useRoute()
const store = useAwardsStore()
const authStore = useAuthStore()

const navGroups = [
  {
    label: 'Betrieb',
    items: [
      { label: 'Dashboard', to: '/admin/dashboard', description: 'Live-Lage und Aufgaben', icon: LayoutDashboard, badge: () => null },
      { label: 'Nominierungen', to: '/admin/nominations', description: 'Eingang und Backlog', icon: ClipboardList, badge: () => `${store.adminSeasonDetail.pendingNominations.length}` },
      { label: 'Voting', to: '/admin/voting', description: 'Stimmen und Readiness', icon: Vote, badge: () => `${store.admin.metrics.find((metric) => metric.label === 'Stimmen')?.value ?? 0}` },
    ],
  },
  {
    label: 'Inhalte',
    items: [
      { label: 'Jahre', to: '/admin/years', description: 'Jahresstatus und Setup', icon: CalendarCog, badge: () => `${store.adminSeasons.length}` },
      { label: 'Kategorien', to: '/admin/categories', description: 'Struktur und Limits', icon: Tags, badge: () => `${store.adminSeasonDetail.categories.length}` },
      { label: 'Kandidaten', to: '/admin/candidates', description: 'Kandidatenbasis pflegen', icon: Users, badge: () => `${store.adminSeasonDetail.candidates.length}` },
      { label: 'Clips', to: '/admin/clips', description: 'Clip-Kategorien prüfen', icon: Film, badge: () => `${store.adminSeasonDetail.categories.filter((category) => `${category.groupName} ${category.name}`.toLowerCase().includes('clip')).length}` },
    ],
  },
  {
    label: 'Kontrolle',
    items: [
      { label: 'Reviews', to: '/admin/reviews', description: 'Freitext-Fälle entscheiden', icon: Sparkles, badge: () => `${store.adminSeasonDetail.pendingNominations.length}` },
      { label: 'Risiko & Audit', to: '/admin/risk', description: 'Flags prüfen', icon: AlertTriangle, badge: () => `${store.admin.riskFlags.length}` },
      { label: 'User & Logs', to: '/admin/users-logs', description: 'User-Spuren und Aktionen', icon: UserCog, badge: () => `${store.admin.auditEntries.length}` },
    ],
  },
  {
    label: 'Auswertung',
    items: [
      { label: 'Analytics', to: '/admin/analytics', description: 'Metriken und Rankings', icon: BarChart3, badge: () => `${store.admin.topCategories.length}` },
      { label: 'Einstellungen', to: '/admin/settings', description: 'Public-Status und Checks', icon: Settings, badge: () => null },
    ],
  },
]

const currentSeason = computed(() => store.adminSeasonDetail)
const seasonSummary = computed(() => [
  { label: 'Kategorien', value: currentSeason.value.categories.length },
  { label: 'Kandidaten', value: currentSeason.value.candidates.length },
  { label: 'Reviews', value: currentSeason.value.pendingNominations.length },
])

function isActive(to: string) {
  return route.path === to
}

onMounted(async () => {
  if (!authStore.isAdmin) return
  await store.initializeAdminWorkspace()
})
</script>

<template>
  <div class="pb-10">
    <div class="grid gap-6 xl:grid-cols-[292px_minmax(0,1fr)]">
      <aside class="space-y-3 xl:sticky xl:top-4 xl:h-fit">
        <Card class="p-3">
          <nav class="space-y-4">
            <section v-for="group in navGroups" :key="group.label" class="space-y-1.5">
              <p class="px-2 text-[10px] font-semibold uppercase tracking-[0.2em] text-slate-400">{{ group.label }}</p>
              <RouterLink
                v-for="item in group.items"
                :key="item.to"
                :to="item.to"
                class="group block rounded-2xl border px-3 py-2.5 transition"
                :class="isActive(item.to) ? 'border-violet-200 bg-gradient-to-br from-violet-50 via-white to-[#f7eef8] text-violet-950 shadow-[0_14px_34px_rgba(168,145,214,0.14)]' : 'border-transparent bg-white/55 text-slate-700 hover:border-violet-100 hover:bg-violet-50/70'"
              >
                <div class="flex items-center gap-3">
                  <div
                    class="grid h-9 w-9 shrink-0 place-items-center rounded-xl transition"
                    :class="isActive(item.to) ? 'bg-white text-violet-700 shadow-sm' : 'bg-violet-50 text-violet-600 group-hover:bg-white'"
                  >
                    <component :is="item.icon" class="h-4.5 w-4.5" />
                  </div>
                  <div class="min-w-0 flex-1">
                    <div class="flex min-w-0 items-center justify-between gap-3">
                      <p class="truncate text-sm font-semibold leading-5">{{ item.label }}</p>
                      <span
                        v-if="item.badge()"
                        class="grid h-6 min-w-6 shrink-0 place-items-center rounded-full border border-violet-200 bg-white px-2 text-[11px] font-semibold text-violet-700 shadow-sm"
                      >
                        {{ item.badge() }}
                      </span>
                    </div>
                    <p class="mt-0.5 truncate text-xs leading-5 text-slate-500">{{ item.description }}</p>
                  </div>
                </div>
              </RouterLink>
            </section>
          </nav>
        </Card>

        <Card class="p-3">
          <p class="text-[10px] font-semibold uppercase tracking-[0.18em] text-violet-500">Aktives Jahr</p>
          <p class="mt-1 truncate text-sm font-semibold text-violet-800">{{ currentSeason.year || 'Kein Jahr' }} · {{ currentSeason.currentPhase || 'Kein Status' }}</p>
          <p class="mt-1 truncate text-xs text-slate-500">{{ currentSeason.name || 'Bitte Jahr auswählen.' }}</p>
          <div class="mt-3 grid grid-cols-3 gap-1.5">
            <div
              v-for="item in seasonSummary"
              :key="item.label"
              class="rounded-md border border-white/80 bg-white/75 px-2 py-1.5"
            >
              <p class="truncate text-[9px] font-semibold uppercase tracking-[0.12em] text-slate-500">{{ item.label }}</p>
              <strong class="block text-base leading-5 text-violet-800">{{ item.value }}</strong>
            </div>
          </div>
        </Card>
      </aside>

      <RouterView />
    </div>
  </div>
</template>
