<template>
  <div class="app-shell">
    <header class="topbar">
      <div class="topbar-inner">
        <div class="topbar-brand">
          <div class="topbar-brand-mark">VB</div>
          <span>内容风控平台</span>
        </div>

        <nav class="topbar-nav">
          <router-link
            v-for="tab in userTabs"
            :key="tab.path"
            :to="tab.path"
            class="topbar-tab"
            active-class="is-active"
            :exact="tab.exact"
          >{{ tab.label }}</router-link>
        </nav>

        <div class="topbar-actions">
          <div v-if="isAdminUser" class="topbar-admin" v-click-outside="closeAdminMenu">
            <div
              class="topbar-admin-trigger"
              :class="{ 'is-active': adminMenuOpen || isAdminRoute }"
              @click="toggleAdminMenu"
            >管理后台 <span style="font-size: 10px;">▾</span></div>
            <div v-if="adminMenuOpen" class="topbar-admin-menu">
              <router-link
                v-for="item in adminTabs"
                :key="item.path"
                :to="item.path"
                class="topbar-admin-item"
                @click.native="closeAdminMenu"
              >{{ item.label }}</router-link>
            </div>
          </div>

          <div class="topbar-user">
            <span class="topbar-avatar">{{ avatarText }}</span>
            <span>{{ userName }}</span>
          </div>

          <button class="btn btn-ghost btn-sm" type="button" @click="handleLogout">退出</button>
        </div>
      </div>
    </header>

    <main>
      <router-view />
    </main>
  </div>
</template>

<script>
import { store, isAdmin, logout, refreshUser } from '@/store'
import { confirm, toast } from '@/utils/feedback'

const userTabs = [
  { path: '/', label: '首页', exact: true },
  { path: '/detect', label: '发布' },
  { path: '/history', label: '历史' },
  { path: '/inbox', label: '私信' },
  { path: '/batch', label: '批量' },
  { path: '/profile', label: '我的' }
]

const adminTabs = [
  { path: '/admin/dashboard', label: '运营看板' },
  { path: '/admin/review', label: '复核与申诉' },
  { path: '/admin/samples', label: '样本管理' },
  { path: '/admin/users', label: '用户管理' }
]

export default {
  name: 'AppLayout',
  directives: {
    clickOutside: {
      bind(el, binding) {
        el.__clickOutsideHandler__ = (event) => {
          if (!(el === event.target || el.contains(event.target))) {
            binding.value(event)
          }
        }
        document.addEventListener('click', el.__clickOutsideHandler__)
      },
      unbind(el) {
        document.removeEventListener('click', el.__clickOutsideHandler__)
      }
    }
  },
  data() {
    return {
      adminMenuOpen: false,
      userTabs,
      adminTabs
    }
  },
  computed: {
    storeRef() {
      return store
    },
    isAdminUser() {
      return isAdmin()
    },
    userName() {
      const u = store.user
      return (u && (u.nickname || u.username)) || '未登录'
    },
    avatarText() {
      const name = this.userName
      if (!name) return 'U'
      return name.slice(0, 1).toUpperCase()
    },
    isAdminRoute() {
      return /^\/admin\//.test(this.$route.path)
    }
  },
  watch: {
    $route() {
      this.adminMenuOpen = false
    }
  },
  mounted() {
    refreshUser()
  },
  methods: {
    toggleAdminMenu() {
      this.adminMenuOpen = !this.adminMenuOpen
    },
    closeAdminMenu() {
      this.adminMenuOpen = false
    },
    async handleLogout() {
      const { confirm: ok } = await confirm({
        title: '退出登录',
        content: '确定要退出当前账号吗？',
        confirmText: '退出',
        cancelText: '取消'
      })
      if (!ok) return
      logout()
      toast('已退出登录', 'success')
      this.$router.replace('/login')
    }
  }
}
</script>
