<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { RouterLink, RouterView, useRoute } from 'vue-router'
import { AlertTriangle, CalendarCog, LayoutDashboard, Sparkles, Users } 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 navItems = [
  { label: 'Dashboard', to: '/admin/dashboard', description: 'Status, Trends, Schnellzugriffe', icon: LayoutDashboard, badge: () => null },
  { label: 'Jahre', to: '/admin/years', description: 'Jahresstatus, Kategorien, Limits', icon: CalendarCog, badge: () => `${store.adminSeasonDetail.categories.length}` },
  { label: 'Kandidaten', to: '/admin/candidates', description: 'Kandidatenbasis pro Jahr pflegen', icon: Users, badge: () => `${store.adminSeasonDetail.candidates.length}` },
  { label: 'Reviews', to: '/admin/reviews', description: 'Freitext-Nominierungen bearbeiten', icon: Sparkles, badge: () => `${store.adminSeasonDetail.pendingNominations.length}` },
  { label: 'Risiko & Audit', to: '/admin/risk', description: 'Hinweise pruefen, Aktionen nachvollziehen', icon: AlertTriangle, badge: () => `${store.admin.riskFlags.length}` },
]

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 },
])

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

<template>
  <div class="pb-10">
    <div class="grid gap-5 xl:grid-cols-[220px_minmax(0,1fr)]">
      <aside class="space-y-3 xl:sticky xl:top-4 xl:h-fit">
        <Card class="p-2">
          <nav class="space-y-1">
            <RouterLink
              v-for="item in navItems"
              :key="item.to"
              :to="item.to"
              class="block rounded-lg border px-3 py-2.5 transition"
              :class="route.path === item.to ? 'border-violet-200 bg-violet-100/80 text-violet-900' : 'border-transparent bg-white/70 text-slate-700 hover:border-violet-100 hover:bg-violet-50/70'"
            >
              <div class="flex items-center justify-between gap-2">
                <div class="flex min-w-0 items-center gap-2">
                  <div class="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-white/80 text-violet-700">
                    <component :is="item.icon" class="h-4 w-4" />
                  </div>
                  <div class="min-w-0">
                    <p class="truncate text-sm font-semibold">{{ item.label }}</p>
                    <p class="truncate text-xs text-slate-500">{{ item.description }}</p>
                  </div>
                </div>
                <span
                  v-if="item.badge()"
                  class="shrink-0 rounded-full border border-violet-200 bg-white/90 px-2 py-0.5 text-[11px] font-semibold text-violet-700"
                >
                  {{ item.badge() }}
                </span>
              </div>
            </RouterLink>
          </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 auswaehlen.' }}</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>
