<template>
  <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
    <div class="flex">
      <aside
        class="fixed left-0 top-0 h-full w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700"
      >
        <nav class="p-4 space-y-2">
          <UButton
            to="/admin/dashboard"
            variant="ghost"
            class="w-full justify-start"
            :active="$route.path.startsWith('/admin/dashboard')"
          >
            <UIcon name="i-heroicons-chart-bar" class="w-5 h-5 mr-3" />
            数据分析
          </UButton>
          <UButton
            to="/admin/articles"
            variant="ghost"
            class="w-full justify-start"
            :active="$route.path.startsWith('/admin/articles')"
          >
            <UIcon name="i-heroicons-document-text" class="w-5 h-5 mr-3" />
            文章管理
          </UButton>
          <UButton
            to="/admin/comments"
            variant="ghost"
            class="w-full justify-start"
            :active="$route.path.startsWith('/admin/comments')"
          >
            <UIcon name="i-heroicons-chat-bubble-left-right" class="w-5 h-5 mr-3" />
            评论管理
          </UButton>
          <UButton
            to="/admin/users"
            variant="ghost"
            class="w-full justify-start"
            :active="$route.path.startsWith('/admin/users')"
          >
            <UIcon name="i-heroicons-users" class="w-5 h-5 mr-3" />
            用户管理
          </UButton>
        </nav>
      </aside>

      <div class="flex-1 ml-64">
        <header
          class="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-6 py-4"
        >
          <div class="flex items-center justify-between">
            <h1 class="text-xl font-semibold text-gray-900 dark:text-white">
              管理后台
            </h1>
            <div class="flex items-center space-x-4">
              <UButton to="/" variant="ghost" size="sm">
                <UIcon name="i-heroicons-arrow-left" class="w-4 h-4 mr-2" />
                返回首页
              </UButton>
              <UserMenu />
            </div>
          </div>
        </header>

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