<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>

    <!-- Stat-Cards (Placeholder bis Phase 2 echte API-Calls hat) -->
    <div class="grid grid-cols-2 gap-4 lg:grid-cols-4 mb-8">
      <div
        v-for="card in statCards"
        :key="card.label"
        class="rounded-lg border border-gray-800 bg-gray-900 p-4"
      >
        <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>
      </div>
    </div>

    <!-- Phase 2 Preview -->
    <div class="rounded-lg border border-gray-800 bg-gray-900 p-6">
      <h2 class="text-sm font-medium text-gray-400 mb-3">Phase 2 -- ausstehende Features</h2>
      <ul class="space-y-2 text-sm text-gray-500">
        <li class="flex items-center gap-2">
          <UIcon name="heroicons:clock" class="h-4 w-4 text-gray-600" />
          Domain-Approval-Queue (wartende Anfragen)
        </li>
        <li class="flex items-center gap-2">
          <UIcon name="heroicons:clock" class="h-4 w-4 text-gray-600" />
          User-Liste mit Plan-Status + letztem Login
        </li>
        <li class="flex items-center gap-2">
          <UIcon name="heroicons:clock" class="h-4 w-4 text-gray-600" />
          SOS-Session-Statistiken (aggregiert, anonym)
        </li>
        <li class="flex items-center gap-2">
          <UIcon name="heroicons:clock" class="h-4 w-4 text-gray-600" />
          Content-Moderation-Queue (gemeldete Nachrichten)
        </li>
      </ul>
    </div>
  </div>
</template>

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

// Placeholder-Werte -- Phase 2 ersetzt mit echten API-Calls gegen backend /api/admin/*
const statCards = [
  { label: "Aktive User (30d)", value: "—", icon: "heroicons:users" },
  { label: "SOS-Sessions heute", value: "—", icon: "heroicons:chat-bubble-left-ellipsis" },
  { label: "Domains pending", value: "—", icon: "heroicons:globe-alt" },
  { label: "Free / Pro / Legend", value: "—", icon: "heroicons:star" },
]
</script>
