<template>
  <div>
    <h1 class="text-xl font-semibold text-white mb-1">Dashboard</h1>
    <p class="text-sm text-gray-500 mb-8">rebreak Admin -- internes Verwaltungspanel</p>

    <!-- Quick-Links zu den 4 Phase-2-Pages -->
    <div class="grid grid-cols-2 gap-4 lg:grid-cols-4 mb-8">
      <NuxtLink
        v-for="card in quickLinks"
        :key="card.label"
        :to="card.to"
        class="rounded-lg border border-gray-800 bg-gray-900 p-4 hover:bg-gray-800 transition-colors block"
      >
        <div class="flex items-center gap-2 mb-2">
          <UIcon :name="card.icon" class="h-4 w-4 text-gray-500" />
          <span class="text-xs text-gray-500">{{ card.label }}</span>
        </div>
        <p class="text-2xl font-bold text-white">{{ card.value }}</p>
        <p class="text-xs text-gray-600 mt-1">{{ card.hint }}</p>
      </NuxtLink>
    </div>

    <!-- Vollständige Stats-Page-Hinweis -->
    <NuxtLink
      to="/stats"
      class="rounded-lg border border-gray-800 bg-gray-900 p-6 block hover:bg-gray-800 transition-colors"
    >
      <div class="flex items-center gap-3">
        <UIcon name="heroicons:chart-bar" class="h-6 w-6 text-blue-400" />
        <div class="flex-1">
          <h2 class="text-sm font-medium text-white">Vollständige Statistiken</h2>
          <p class="text-xs text-gray-500 mt-1">
            Aggregierte User/Posts/Domain-Stats mit Auto-Refresh
          </p>
        </div>
        <UIcon name="heroicons:arrow-right" class="h-4 w-4 text-gray-500" />
      </div>
    </NuxtLink>
  </div>
</template>

<script setup lang="ts">
// Auth-Guard via Nuxt-Middleware (siehe middleware/admin-auth.ts)
definePageMeta({
  middleware: "admin-auth",
})

// Quick-Links als statische Cards — echte Stats-page übernimmt Live-Werte
const quickLinks = [
  {
    label: "Domain-Approval",
    value: "→",
    hint: "Pending submissions prüfen",
    icon: "heroicons:globe-alt",
    to: "/domains",
  },
  {
    label: "User-Verwaltung",
    value: "→",
    hint: "Plan/Ban/Soft-Delete",
    icon: "heroicons:users",
    to: "/users",
  },
  {
    label: "Statistiken",
    value: "→",
    hint: "Aktive User, Posts, Domains",
    icon: "heroicons:chart-bar",
    to: "/stats",
  },
  {
    label: "Moderation",
    value: "→",
    hint: "Reported content queue",
    icon: "heroicons:flag",
    to: "/moderation",
  },
  {
    label: "Lyra-Posts",
    value: "→",
    hint: "Als Lyra oder ReBreak posten",
    icon: "heroicons:sparkles",
    to: "/lyra",
  },
]
</script>
