<template>
  <main class="admin-shell">
    <aside class="sidebar">
      <div class="brand">
        <h1>证书管理</h1>
        <p>培训结业证书后台</p>
      </div>
      <el-menu :default-active="route.path" router>
        <el-menu-item index="/admin">数据概览</el-menu-item>
        <el-menu-item index="/admin/projects">项目管理</el-menu-item>
        <el-menu-item index="/admin/learners">学员管理</el-menu-item>
        <el-menu-item index="/admin/certificates">证书管理</el-menu-item>
        <el-menu-item index="/admin/imports">Excel 导入</el-menu-item>
        <el-menu-item index="/admin/logs">操作日志</el-menu-item>
        <el-menu-item index="/admin/backups">备份管理</el-menu-item>
        <el-menu-item index="/admin/settings">系统设置</el-menu-item>
      </el-menu>
      <el-button class="logout" @click="logout">退出登录</el-button>
    </aside>
    <section class="workspace">
      <router-view />
    </section>
  </main>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();

function logout() {
  localStorage.removeItem("admin_token");
  router.push("/admin/login");
}
</script>

<style scoped>
.admin-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 248px 1fr;
  background: linear-gradient(180deg, #f7fafb 0%, #eef4f6 100%);
  color: #172033;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: rgba(255, 255, 255, 0.94);
  border-right: 1px solid #e1ebef;
  padding: 24px 14px;
  box-shadow: 8px 0 26px rgba(42, 64, 78, 0.045);
}

.brand {
  padding: 0 12px 20px;
  border-bottom: 1px solid #e1ebef;
  margin-bottom: 18px;
}

.brand h1 {
  font-size: 21px;
  font-weight: 800;
  margin: 0;
  letter-spacing: 0;
}

.brand p {
  margin: 7px 0 0;
  color: #6b8795;
  font-size: 13px;
}

:deep(.el-menu) {
  border-right: 0;
}

:deep(.el-menu-item) {
  height: 42px;
  margin: 4px 0;
  border-radius: 8px;
  color: #42576a;
  font-weight: 650;
}

:deep(.el-menu-item.is-active),
:deep(.el-menu-item:hover) {
  background: #e6f5f3;
  color: #116d6b;
}

.logout {
  width: calc(100% - 16px);
  margin: 20px 8px 0;
}

.workspace {
  min-width: 0;
  padding: 28px;
  overflow: auto;
}

@media (max-width: 900px) {
  .admin-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
  }
}
</style>
