<template>
  <div class="min-h-screen bg-gray-950 text-gray-100">
    <!-- Topbar -->
    <header class="border-b border-gray-800 bg-gray-900 px-6 py-3 flex items-center justify-between">
      <div class="flex items-center gap-3">
        <span class="text-sm font-semibold tracking-wide text-gray-400 uppercase">rebreak</span>
        <span class="text-gray-600">/</span>
        <span class="text-sm font-medium text-white">Admin</span>
      </div>
      <div class="flex items-center gap-4">
        <span class="text-xs text-gray-500">{{ adminEmail }}</span>
        <UButton
          size="xs"
          color="neutral"
          variant="ghost"
          label="Logout"
          @click="logout"
        />
      </div>
    </header>

    <!-- Sidebar + Content -->
    <div class="flex">
      <aside class="w-56 min-h-[calc(100vh-49px)] border-r border-gray-800 bg-gray-900 py-4">
        <nav class="flex flex-col gap-1 px-3">
          <NuxtLink
            v-for="item in nav"
            :key="item.to"
            :to="item.to"
            class="flex items-center gap-2 rounded px-3 py-2 text-sm text-gray-400 hover:bg-gray-800 hover:text-white transition-colors"
            active-class="bg-gray-800 text-white"
          >
            <UIcon :name="item.icon" class="h-4 w-4 shrink-0" />
            {{ item.label }}
          </NuxtLink>
        </nav>
      </aside>

      <main class="flex-1 p-6">
        <slot />
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
const { adminEmail, logout } = useAdminAuth()

const nav = [
  { to: "/", label: "Dashboard", icon: "heroicons:home" },
  { to: "/domains", label: "Domain-Approval", icon: "heroicons:globe-alt" },
  { to: "/users", label: "User-Management", icon: "heroicons:users" },
  { to: "/stats", label: "Statistiken", icon: "heroicons:chart-bar" },
  { to: "/moderation", label: "Moderation", icon: "heroicons:shield-check" },
]
</script>
