<script setup lang="ts">
import { computed, onMounted, onUnmounted, shallowRef } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import { Collection, DataAnalysis, Files, House, Key, Menu, Notebook, OfficeBuilding, PriceTag, Setting, SwitchButton, Tickets, User } from '@element-plus/icons-vue'
import { useAuthStore } from '@/stores/auth'

const route = useRoute()
const router = useRouter()
const auth = useAuthStore()
const collapsed = shallowRef(false)
const mobileMenuOpen = shallowRef(false)

const activeMenu = computed(() => route.path)
const menus = [
  { path: '/admin/dashboard', label: '控制台', icon: House, permission: 'dashboard' },
  { path: '/admin/banks', label: '题库管理', icon: Collection, permission: 'banks' },
  { path: '/admin/questions', label: '题目管理', icon: Files, permission: 'questions' },
  { path: '/admin/taxonomy', label: '分类标签', icon: PriceTag, permission: 'questions' },
  { path: '/admin/papers', label: '试卷管理', icon: Notebook, permission: 'papers' },
  { path: '/admin/classes', label: '班级管理', icon: OfficeBuilding, permission: 'classes' },
  { path: '/admin/reports', label: '统计报表', icon: DataAnalysis, permission: 'reports' },
  { path: '/admin/users', label: '用户权限', icon: User, permission: 'users' },
  { path: '/admin/permissions', label: '角色权限', icon: Key, permission: 'permissions' },
  { path: '/admin/settings', label: '系统配置', icon: Setting, permission: 'settings' },
  { path: '/admin/logs', label: '操作日志', icon: Tickets, permission: 'logs' },
]
const visibleMenus = computed(() => menus.filter((item) => auth.can(item.permission)))

async function logout() {
  try {
    await ElMessageBox.confirm('确认退出当前账号？', '退出登录', {
      type: 'warning',
      confirmButtonText: '退出',
      cancelButtonText: '取消',
    })
  } catch {
    return
  }
  auth.clearSession()
  await router.replace('/login')
}

function syncMobileMenu() {
  if (window.innerWidth > 760) {
    mobileMenuOpen.value = false
  } else {
    collapsed.value = true
  }
}

function toggleMenu() {
  if (window.innerWidth <= 760) {
    mobileMenuOpen.value = !mobileMenuOpen.value
    return
  }
  collapsed.value = !collapsed.value
}

onMounted(() => {
  syncMobileMenu()
  window.addEventListener('resize', syncMobileMenu)
})

onUnmounted(() => {
  window.removeEventListener('resize', syncMobileMenu)
})
</script>

<template>
  <div class="admin-shell">
    <aside class="admin-aside" :class="{ 'admin-aside--collapsed': collapsed, 'admin-aside--mobile-open': mobileMenuOpen }">
      <div class="brand">
        <span class="brand-mark">Q</span>
        <span v-show="!collapsed" class="brand-name">QuickQuiz</span>
      </div>
      <ElMenu :default-active="activeMenu" class="admin-menu" :collapse="collapsed" router @select="mobileMenuOpen = false">
        <ElMenuItem v-for="item in visibleMenus" :key="item.path" :index="item.path">
          <ElIcon><component :is="item.icon" /></ElIcon>
          <span>{{ item.label }}</span>
        </ElMenuItem>
      </ElMenu>
    </aside>
    <main class="admin-main">
      <header class="admin-topbar">
        <ElButton :icon="Menu" circle @click="toggleMenu" />
        <div>
          <p class="page-title">题库工作台</p>
          <p class="muted text-sm">管理题库、导入题目、查看学习数据</p>
        </div>
        <ElButton type="primary" plain @click="router.push('/quiz')">进入学习端</ElButton>
        <ElButton :icon="SwitchButton" plain @click="logout">退出登录</ElButton>
      </header>
      <section class="admin-content">
        <RouterView />
      </section>
    </main>
  </div>
</template>

<style scoped>
.admin-shell {
  display: flex;
  min-height: 100vh;
}

.admin-aside {
  width: 236px;
  min-height: 100vh;
  border-right: 1px solid var(--qq-line);
  background: rgba(255, 255, 255, 0.88);
  transition: width 0.2s ease;
}

.admin-aside--collapsed {
  width: 76px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 64px;
  padding: 0 18px;
  border-bottom: 1px solid var(--qq-line);
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--qq-moss);
  color: white;
  font-weight: 800;
}

.brand-name {
  font-weight: 800;
  font-size: 18px;
}

.admin-menu {
  border-right: 0;
  background: transparent;
}

.admin-main {
  min-width: 0;
  flex: 1;
}

.admin-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--qq-line);
  background: rgba(247, 248, 244, 0.92);
}

.admin-topbar > div {
  flex: 1;
}

.admin-content {
  padding: 22px;
}

@media (max-width: 760px) {
  .admin-shell {
    display: block;
  }

  .admin-aside {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: min(82vw, 280px);
    min-height: 100vh;
    transform: translateX(-100%);
    box-shadow: 16px 0 32px rgba(23, 33, 27, 0.14);
    transition:
      transform 0.18s ease,
      width 0.18s ease;
  }

  .admin-aside--collapsed {
    width: min(82vw, 280px);
  }

  .admin-aside--mobile-open {
    transform: translateX(0);
  }

  .admin-aside--collapsed .brand-name {
    display: inline;
  }

  .admin-aside :deep(.el-menu--collapse) {
    width: 100%;
  }

  .admin-aside :deep(.el-menu--collapse .el-menu-item span) {
    display: inline-block;
    height: auto;
    overflow: visible;
    visibility: visible;
    width: auto;
  }

  .admin-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
  }

  .admin-topbar > div {
    min-width: 0;
    flex: 1 1 calc(100% - 54px);
  }

  .admin-topbar > .el-button:not(:first-child) {
    flex: 1;
    min-width: 0;
  }

  .admin-topbar .muted {
    display: none;
  }

  .admin-content {
    padding: 12px;
  }
}
</style>
