import { computed } from 'vue'
import { useRouter } from 'vue-router'
import type { Component } from 'vue'

import { menuIcon } from '@/components/layout/menuIcons'
import { canAccessRoute, isMenuRecord } from '@/router/access'
import { useUserStore } from '@/store/user'

/** 菜单节点：从路由表派生，避免菜单标题与页面标题两处维护漂移。 */
export interface MenuNode {
  path: string
  title: string
  order: number
  group?: string
  /** 图标组件（由 meta.icon 语义 key 解析；未配置则为 undefined） */
  icon?: Component
}

export interface MenuGroup {
  name: string
  items: MenuNode[]
}

/**
 * 侧边菜单数据。
 *
 * 规则：
 * - 取路由表中带 `meta.title` 且未被 `meta.menu === false` 排除的记录
 * - `meta.requiresAdmin` 的项仅管理员可见（与路由守卫双保险，隐藏入口在前）
 * - `meta.group` 相同的项聚合为一个子菜单；无 group 的为顶层菜单项
 * - 按 `meta.order` 排序
 */
export function useAppMenu() {
  const router = useRouter()
  const userStore = useUserStore()

  const userRoles = computed(() => userStore.roles)

  const menuNodes = computed<MenuNode[]>(() =>
    router
      .getRoutes()
      // 准入规则与路由守卫、落地页解析共用，避免三处漂移
      .filter((record) => isMenuRecord(record) && canAccessRoute(record, userRoles.value))
      .map((record) => ({
        path: record.path,
        title: record.meta.title ?? '',
        order: record.meta.order ?? 99,
        group: record.meta.group,
        icon: menuIcon(record.meta.icon),
      }))
      .sort((a, b) => a.order - b.order),
  )

  /** 无分组的顶层菜单项 */
  const topLevelMenus = computed(() => menuNodes.value.filter((node) => !node.group))

  /** 分组菜单（按 group 名聚合，组内保持 order 顺序） */
  const groupedMenus = computed<MenuGroup[]>(() => {
    const groups = new Map<string, MenuNode[]>()
    for (const node of menuNodes.value) {
      if (!node.group) continue
      const items = groups.get(node.group) ?? []
      items.push(node)
      groups.set(node.group, items)
    }
    return [...groups.entries()].map(([name, items]) => ({ name, items }))
  })

  return { topLevelMenus, groupedMenus }
}