<script setup lang="ts">
definePageMeta({
  layout: false
})
const { user, clear } = useAuthSession()

const adminNav = [
  {
    label: '仪表盘',
    to: '/admin/dashboard',
    icon: 'dashboard'
  },
  {
    label: '定时任务',
    to: '/admin/scheduler',
    icon: 'schedule'
  },
]

const iconPaths: Record<string, string> = {
  dashboard: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6',
  schedule: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z',
  user: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z',
}

const logout = async () => {
  await clear()
  navigateTo("/")
}
</script>

<template>
  <div class="admin-layout">
    <div class="admin-container">
      <aside class="admin-sidebar">
        <div class="sidebar-header">
          <NuxtLink to="/admin/dashboard" class="brand-link">
            <span class="brand-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                <path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
            <span class="brand-name">管理后台</span>
          </NuxtLink>
        </div>

        <nav class="sidebar-nav">
          <NuxtLink
            v-for="item in adminNav"
            :key="item.to"
            :to="item.to"
            class="sidebar-link"
            active-class="active"
          >
            <svg class="sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
              <path :d="iconPaths[item.icon]" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span class="sidebar-link-label">{{ item.label }}</span>
          </NuxtLink>
        </nav>

        <div class="sidebar-footer">
          <NuxtLink to="/" class="home-link">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
              <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            返回首页
          </NuxtLink>
          <div class="user-section" v-if="user">
            <div class="user-avatar">
              {{ user.username?.charAt(0).toUpperCase() }}
            </div>
            <div class="user-info">
              <span class="user-name">{{ user.username }}</span>
              <span class="user-role">管理员</span>
            </div>
            <button class="logout-btn" @click="logout" title="退出登录">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                <path d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </button>
          </div>
        </div>
      </aside>

      <main class="admin-main">
        <NuxtPage />
      </main>
    </div>
  </div>
</template>

<style scoped>
.admin-layout {
  min-height: 100vh;
  background: var(--color-canvas);
}

.admin-container {
  display: flex;
}

.admin-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--color-surface-dark);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100vh;
}

.sidebar-header {
  padding: 20px 16px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-icon svg {
  width: 18px;
  height: 18px;
  color: var(--color-on-primary);
}

.brand-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-on-dark);
  letter-spacing: -0.01em;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 12px;
  flex: 1;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-on-dark-soft);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.sidebar-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-on-dark);
}

.sidebar-link.active {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.sidebar-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
}

.sidebar-link:hover .sidebar-icon,
.sidebar-link.active .sidebar-icon {
  opacity: 1;
}

.sidebar-footer {
  padding: 16px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.home-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--color-on-dark-soft);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.home-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-on-dark);
}

.home-link svg {
  width: 16px;
  height: 16px;
}

.user-section {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.user-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-on-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  font-size: 11px;
  color: var(--color-on-dark-soft);
}

.logout-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--color-on-dark-soft);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.logout-btn:hover {
  background: rgba(198, 69, 69, 0.2);
  color: #c64545;
}

.logout-btn svg {
  width: 16px;
  height: 16px;
}

.admin-main {
  flex: 1;
  margin-left: 260px;
  min-height: 100vh;
  background: var(--color-canvas);
}

@media (max-width: 768px) {
  .admin-sidebar {
    display: none;
  }

  .admin-main {
    margin-left: 0;
  }
}
</style>