<script setup lang="ts">
import { DataLine, Document, DocumentChecked, Operation, ScaleToOriginal, Shop, SwitchButton, Tickets, User, Wallet } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { computed } from 'vue'
import { useRouter } from 'vue-router'

import { logoutAdmin } from '@/api/adminAuth'
import { useAdminSessionStore } from '@/stores/adminSession'

const router = useRouter()
const adminSession = useAdminSessionStore()

const navItems = [
  { label: '仪表盘', to: '/admin/dashboard', icon: DataLine },
  { label: '用户管理', to: '/admin/users', icon: User },
  { label: '订单管理', to: '/admin/orders', icon: Tickets },
  { label: '商品管理', to: '/admin/listings', icon: Shop },
  { label: '商品审核', to: '/admin/listings/review', icon: DocumentChecked },
  { label: '仲裁中心', to: '/admin/disputes', icon: ScaleToOriginal },
  { label: '资金流水', to: '/admin/wallet-ledger', icon: Wallet },
  { label: '系统配置', to: '/admin/system-configs', icon: Operation },
  { label: '审计日志', to: '/admin/audit-logs', icon: Document },
]

const adminName = computed(() => adminSession.nickname || adminSession.username || '管理员')

async function handleLogout() {
  try {
    await logoutAdmin()
  } catch {
    // Local logout should still happen if the development API is unavailable.
  }
  adminSession.logout()
  ElMessage.success('已退出后台')
  await router.push('/admin/login')
}
</script>

<template>
  <div class="admin-shell">
    <aside class="admin-sidebar">
      <RouterLink class="admin-brand" to="/admin/dashboard">
        <span class="brand-mark">H</span>
        <span>哈夫币后台</span>
      </RouterLink>

      <nav class="admin-nav">
        <RouterLink v-for="item in navItems" :key="item.to" class="admin-nav-link" :to="item.to">
          <el-icon><component :is="item.icon" /></el-icon>
          <span>{{ item.label }}</span>
        </RouterLink>
      </nav>
    </aside>

    <section class="admin-workspace">
      <header class="admin-topbar">
        <div>
          <span>管理系统</span>
          <strong>{{ adminName }}</strong>
        </div>
        <el-button :icon="SwitchButton" @click="handleLogout">退出</el-button>
      </header>
      <main class="admin-main">
        <slot />
      </main>
    </section>
  </div>
</template>
