<script setup lang="ts">
/**
 * 后台功能入口：顶栏快捷 + Tab 分组 + 4 列金刚区。
 * 不用 wd-collapse/cell 白底列表，暗色走 AppPageShell admin。
 */
import { computed, ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import AppNavbar from '@/components/layout/AppNavbar.vue'
import AppFloatingTabbar from '@/components/layout/AppFloatingTabbar.vue'
import AppPageShell from '@/components/layout/AppPageShell.vue'
import { useAuth } from '@/composables/useAuth'
import { useAppMode } from '@/composables/useAppMode'
import { useTheme } from '@/composables/useTheme'
import { ADMIN_MENUS, type MenuItem } from '@/config/menus'

const { isAuthenticated } = useAuth()
const { canEnterAdmin } = useAppMode()
const { apply } = useTheme()

/** 0 = 全部，其余对应 groups 下标 +1 */
const tabIndex = ref(0)

const quickLinks = computed(() => ADMIN_MENUS.filter(m => m.path))
const groups = computed(() => ADMIN_MENUS.filter(m => m.children?.length))

const tabLabels = computed(() => ['全部', ...groups.value.map(g => g.title)])

/** 当前 Tab 下的入口列表（扁平） */
const gridItems = computed(() => {
  if (tabIndex.value === 0) {
    return groups.value.flatMap(g => g.children || [])
  }
  const g = groups.value[tabIndex.value - 1]
  return g?.children || []
})

function guardAdmin() {
  if (!isAuthenticated() || !canEnterAdmin.value) {
    uni.reLaunch({ url: '/pages/mine/index' })
    return false
  }
  return true
}

onShow(() => {
  apply()
  guardAdmin()
})

const open = (item: MenuItem) => {
  if (!item.path) return
  uni.navigateTo({ url: item.path })
}
</script>

<template>
  <AppPageShell admin with-tab-pad>
    <AppNavbar title="功能入口" />
    <view class="page-pad">
      <view class="hero-eyebrow">Admin</view>
      <view class="section-title" style="margin-bottom: 24rpx;">后台菜单</view>

      <view class="quick-row">
        <view
          v-for="item in quickLinks"
          :key="item.key"
          class="admin-card quick"
          @click="open(item)"
        >
          <wd-icon :name="item.icon || 'apps'" size="22px" color="rgb(212,179,131)" />
          <text class="quick-title">{{ item.title }}</text>
        </view>
      </view>

      <wd-tabs v-model="tabIndex" slidable="always">
        <wd-tab v-for="(label, i) in tabLabels" :key="i" :title="label" :name="i" />
      </wd-tabs>

      <view class="grid">
        <view
          v-for="item in gridItems"
          :key="item.key"
          class="admin-card cell"
          @click="open(item)"
        >
          <wd-icon :name="item.icon || 'apps'" size="26px" color="rgb(212,179,131)" />
          <text class="cell-title">{{ item.title }}</text>
        </view>
      </view>
      <wd-empty v-if="!gridItems.length" description="暂无入口" />
    </view>
    <AppFloatingTabbar />
  </AppPageShell>
</template>

<style scoped lang="scss">
.page-pad { padding: 24rpx 32rpx 48rpx; }
.quick-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16rpx;
  margin-bottom: 28rpx;
}
.quick {
  padding: 28rpx 24rpx;
  display: flex;
  align-items: center;
  gap: 16rpx;
}
.quick-title { font-size: 28rpx; color: rgb(var(--art-text)); }
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16rpx;
  margin-top: 24rpx;
}
.cell {
  padding: 24rpx 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  min-height: 160rpx;
  text-align: center;
}
.cell-title {
  font-size: 22rpx;
  color: rgb(var(--art-text));
  line-height: 1.3;
}
</style>
