<template>
  <a-layout style="min-height: 100vh" class="admin-layout">
    <a-layout-sider :width="250" theme="dark" collapsible v-model:collapsed="collapsed" :collapsed-width="64" class="admin-sider">
      <div class="sider-header">
        <a-avatar :size="36" style="background: linear-gradient(135deg, #722ed1 0%, #b37feb 100%)">
          <icon-safe />
        </a-avatar>
        <span class="sider-title" v-if="!collapsed">超级管理员</span>
      </div>
      <a-menu :selected-keys="[$route.name]" @menu-item-click="onMenuClick" theme="dark">
        <a-menu-item key="admin-overview">
          <template #icon><icon-dashboard /></template>
          <span v-if="!collapsed">数据概览</span>
        </a-menu-item>
        <a-menu-item key="admin-orders">
          <template #icon><icon-file /></template>
          <span v-if="!collapsed">订单管理</span>
        </a-menu-item>
        <a-menu-item key="admin-risk">
          <template #icon><icon-exclamation /></template>
          <span v-if="!collapsed">风控审核</span>
        </a-menu-item>
        <a-menu-item key="admin-products">
          <template #icon><icon-apps /></template>
          <span v-if="!collapsed">商品管理</span>
        </a-menu-item>
        <a-menu-item key="admin-audit">
          <template #icon><icon-check-circle /></template>
          <span v-if="!collapsed">审核管理</span>
        </a-menu-item>
        <a-menu-item key="admin-users">
          <template #icon><icon-user-group /></template>
          <span v-if="!collapsed">用户管理</span>
        </a-menu-item>
        <a-menu-item key="admin-banners">
          <template #icon><icon-apps /></template>
          <span v-if="!collapsed">轮播图设置</span>
        </a-menu-item>
        <a-menu-item key="admin-reviews">
          <template #icon><icon-message /></template>
          <span v-if="!collapsed">评价管理</span>
        </a-menu-item>
        <a-menu-item key="admin-logistics">
          <template #icon><icon-send /></template>
          <span v-if="!collapsed">物流总览</span>
        </a-menu-item>
        <a-menu-item key="admin-inventory">
          <template #icon><icon-storage /></template>
          <span v-if="!collapsed">库存总览</span>
        </a-menu-item>
        <a-menu-item key="admin-profile">
          <template #icon><icon-user /></template>
          <span v-if="!collapsed">个人信息</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout class="admin-main">
      <a-layout-header class="admin-header">
        <div class="header-left">
          <span class="page-title">{{ titleMap[$route.name] || '管理后台' }}</span>
        </div>
        <div class="header-right">
          <a-space>
            <a-tag color="purple" size="small">
              <template #icon><icon-trophy /></template>
              管理员
            </a-tag>
            <a-button @click="goHome">
              <template #icon><icon-home /></template>
              前台首页
            </a-button>
            <a-dropdown>
              <a-button shape="circle">
                <template #icon><icon-user /></template>
              </a-button>
              <template #content>
                <a-doption @click="goProfile">
                  <template #icon><icon-settings /></template>
                  个人信息
                </a-doption>
                <a-doption @click="logout">
                  <template #icon><icon-export /></template>
                  退出登录
                </a-doption>
              </template>
            </a-dropdown>
          </a-space>
        </div>
      </a-layout-header>
      <a-layout-content class="admin-content">
        <router-view />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '../../stores/user'
import { IconSafe, IconDashboard, IconFile, IconExclamation, IconApps, IconCheckCircle, IconUserGroup, IconMessage, IconSend, IconStorage, IconUser, IconTrophy, IconHome, IconExport, IconSettings } from '@arco-design/web-vue/es/icon'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const collapsed = ref(false)

const titleMap = {
  'admin-overview': '数据概览',
  'admin-orders': '订单管理',
  'admin-risk': '风控审核',
  'admin-products': '商品管理',
  'admin-audit': '审核管理',
  'admin-users': '用户管理',
  'admin-banners': '轮播图设置',
  'admin-reviews': '评价管理',
  'admin-logistics': '物流总览',
  'admin-inventory': '库存总览',
  'admin-profile': '个人信息'
}

const onMenuClick = (key) => {
  router.push({ name: key })
}

const goHome = () => router.push('/')
const goProfile = () => router.push({ name: 'admin-profile' })
const logout = async () => {
  await userStore.logout()
  router.replace('/login')
}

onMounted(async () => {
  await userStore.fetchMe()
  if (userStore.role !== 'ADMIN') {
    router.replace('/login')
  }
})
</script>

<style scoped>
.admin-layout { background: #f0f2f5; }
.admin-sider { background: #001529; }
.sider-header { height: 64px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.sider-title { font-size: 16px; font-weight: 600; color: #fff; }
.admin-main { background: #f0f2f5; }
.admin-header { background: #fff; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.page-title { font-size: 18px; font-weight: 600; color: #1f2937; }
.admin-content { padding: 20px; overflow: auto; }
</style>