<template>
  <main class="admin-shell">
    <aside class="sidebar">
      <div class="brand-row">
        <div class="brand">
          <span class="brand-mark"><img src="/brand/huiyu-logo.png" alt="" /></span>
          <span>
            <strong>证书管理</strong>
            <small>慧遇书院管理后台</small>
          </span>
        </div>
        <el-tooltip content="退出登录" placement="right">
          <el-button class="logout" circle aria-label="退出登录" @click="logout"><el-icon><SwitchButton /></el-icon></el-button>
        </el-tooltip>
      </div>

      <el-menu :default-active="route.path" router>
        <el-menu-item index="/admin"><el-icon><DataAnalysis /></el-icon><span>数据概览</span></el-menu-item>
        <li class="menu-label">业务管理</li>
        <el-menu-item index="/admin/projects"><el-icon><Collection /></el-icon><span>项目管理</span></el-menu-item>
        <el-menu-item index="/admin/templates"><el-icon><Picture /></el-icon><span>证书模板</span></el-menu-item>
        <el-menu-item index="/admin/learners"><el-icon><User /></el-icon><span>学员管理</span></el-menu-item>
        <el-menu-item index="/admin/certificates"><el-icon><Postcard /></el-icon><span>证书管理</span></el-menu-item>
        <el-menu-item index="/admin/imports"><el-icon><Upload /></el-icon><span>Excel 导入</span></el-menu-item>
        <li class="menu-label">系统维护</li>
        <el-menu-item index="/admin/logs"><el-icon><Document /></el-icon><span>操作日志</span></el-menu-item>
        <el-menu-item index="/admin/backups"><el-icon><Coin /></el-icon><span>备份管理</span></el-menu-item>
        <el-menu-item index="/admin/settings"><el-icon><Setting /></el-icon><span>系统设置</span></el-menu-item>
      </el-menu>

      <div class="sidebar-foot">
        <span class="avatar">管</span>
        <span><strong>系统管理员</strong><small>已安全登录</small></span>
      </div>
    </aside>
    <section class="workspace">
      <div class="workspace-inner"><router-view /></div>
    </section>
  </main>
</template>

<script setup lang="ts">
import {
  Coin,
  Collection,
  DataAnalysis,
  Document,
  Picture,
  Postcard,
  Setting,
  SwitchButton,
  Upload,
  User,
} from "@element-plus/icons-vue";
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: 232px minmax(0, 1fr);
  background: var(--app-bg);
  color: var(--app-text);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px 14px 16px;
  border-right: 1px solid #dfe5e8;
  background: #ffffff;
}

.brand-row,
.brand {
  display: flex;
  align-items: center;
}

.brand-row {
  justify-content: space-between;
  gap: 8px;
  padding: 0 6px 18px;
  border-bottom: 1px solid #e8edef;
}

.brand {
  min-width: 0;
  gap: 10px;
}

.brand-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}

.brand-mark img {
  width: 32px;
  height: 28px;
  object-fit: contain;
}

.brand > span:last-child,
.sidebar-foot > span:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.brand strong {
  font-size: 16px;
  font-weight: 750;
}

.brand small,
.sidebar-foot small {
  color: #7b8992;
  font-size: 11px;
}

.logout {
  flex: 0 0 auto;
  min-height: 32px;
  width: 32px;
  height: 32px;
  padding: 0;
}

:deep(.el-menu) {
  flex: 1;
  border-right: 0;
  padding-top: 12px;
}

:deep(.el-menu-item) {
  height: 40px;
  margin: 3px 0;
  border-radius: 6px;
  color: #465965;
  font-size: 14px;
  font-weight: 600;
}

:deep(.el-menu-item .el-icon) {
  font-size: 17px;
}

:deep(.el-menu-item.is-active) {
  background: var(--app-primary-soft);
  color: var(--app-primary-strong);
}

:deep(.el-menu-item:hover) {
  background: #f3f6f7;
  color: var(--app-text);
}

.menu-label {
  list-style: none;
  padding: 16px 14px 5px;
  color: #99a4ab;
  font-size: 11px;
  font-weight: 700;
}

.sidebar-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 8px 2px;
  border-top: 1px solid #e8edef;
}

.sidebar-foot strong {
  font-size: 13px;
}

.avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #805f27;
  background: var(--app-gold-soft);
  font-size: 12px;
  font-weight: 700;
}

.workspace {
  min-width: 0;
  overflow: auto;
  padding: 30px 32px 48px;
}

.workspace-inner {
  width: min(1480px, 100%);
  margin: 0 auto;
}

@media (max-width: 900px) {
  .admin-shell {
    width: 100%;
    min-width: 0;
    grid-template-columns: 1fr;
    overflow: hidden;
  }

  .sidebar {
    position: sticky;
    z-index: 20;
    height: auto;
    width: 100%;
    min-width: 0;
    padding: 10px 14px 0;
    overflow: hidden;
    border-right: 0;
    border-bottom: 1px solid #dfe5e8;
  }

  .brand-row {
    padding: 0 2px 10px;
  }

  .brand small,
  .sidebar-foot,
  .menu-label {
    display: none;
  }

  :deep(.el-menu) {
    width: 100%;
    min-width: 0;
    display: flex;
    overflow-x: auto;
    gap: 4px;
    padding: 0 0 8px;
  }

  :deep(.el-menu-item) {
    flex: 0 0 auto;
    padding: 0 12px;
  }

  .workspace {
    width: 100%;
    min-width: 0;
    padding: 22px 16px 36px;
  }

  .workspace-inner {
    width: 100%;
    min-width: 0;
  }
}
</style>
