import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import { icons } from '../data/icons.js'

export const appViews = ['overview', 'workbench', 'documents', 'requests', 'approval', 'archive', 'policies', 'audit', 'employees', 'logs', 'settings']

export const navItems = [
  {
    id: 'overview',
    label: '总览',
    navHint: '查看系统总览与关键指标',
    icon: icons.dashboard,
    title: '财务运营总览',
    desc: '聚合差旅申请、审批效率、风险信号与 SLA 表现。'
  },
  {
    id: 'workbench',
    label: '个人工作台',
    navHint: '集中处理个人待办',
    icon: icons.workspace,
    title: '个人工作台',
    desc: '聚焦当前待办、快捷操作与助手入口。'
  },
  {
    id: 'documents',
    label: '单据中心',
    navHint: '统一查看申请、报销、审批与归档',
    icon: icons.file,
    title: '单据中心',
    desc: '统一查看申请、报销、审批与归档。'
  },
  {
    id: 'requests',
    label: '报销中心',
    navHint: '查看和管理报销单据',
    icon: icons.list,
    title: '报销中心',
    desc: '集中查看草稿、审批进度、票据状态与风险提示。'
  },
  {
    id: 'approval',
    label: '审批中心',
    navHint: '处理审批任务',
    icon: icons.approval,
    title: '审批中心',
    desc: '按优先级处理待审批事项，控制时效与风险。'
  },
  {
    id: 'archive',
    label: '归档中心',
    navHint: '查阅公司已归档财务数据',
    icon: icons.archive,
    title: '归档中心',
    desc: '集中保存公司已归档入账的报销单据，形成完整财务归档库。'
  },
  {
    id: 'policies',
    label: '制度知识',
    navHint: '查看制度与知识库',
    icon: icons.file,
    title: '制度与知识库',
    desc: '统一管理制度文档、检索入口与知识资产。'
  },
  {
    id: 'audit',
    label: '任务规则中心',
    navHint: '查看和管理任务规则配置',
    icon: icons.skill,
    title: '任务规则中心',
    desc: '集中管理规则文件、外部 MCP 服务与定时任务调度。'
  },
  {
    id: 'employees',
    label: '员工管理',
    navHint: '维护员工与组织信息',
    icon: icons.users,
    title: '员工与组织管理',
    desc: '维护员工账号、组织结构与角色权限。'
  },
  {
    id: 'logs',
    label: '日志管理',
    navHint: '查看 Hermes 调用与系统运行日志',
    icon: icons.logs,
    title: '日志管理',
    desc: '集中查看 Hermes 归纳任务进度、调用明细与系统运行日志。'
  },
  {
    id: 'settings',
    label: '系统设置',
    navHint: '维护企业品牌、管理员安全与系统配置',
    icon: icons.settings,
    title: '系统设置中心',
    desc: '集中配置公司名称、管理员账号安全、模型接入、日志策略与邮箱通知。'
  }
]

const viewRouteNames = {
  overview: 'app-overview',
  workbench: 'app-workbench',
  documents: 'app-documents',
  requests: 'app-requests',
  approval: 'app-approval',
  archive: 'app-archive',
  policies: 'app-policies',
  audit: 'app-audit',
  logs: 'app-logs',
  employees: 'app-employees',
  settings: 'app-settings'
}

const routeNameViews = Object.fromEntries(
  Object.entries(viewRouteNames).map(([view, routeName]) => [routeName, view])
)

routeNameViews['app-request-detail'] = 'requests'
routeNameViews['app-document-detail'] = 'documents'
routeNameViews['app-log-detail'] = 'logs'

export function resolveAppViewFromRoute(route) {
  const routeName = String(route?.name || '').trim()
  if (routeNameViews[routeName]) {
    return routeNameViews[routeName]
  }

  const metaView = String(route?.meta?.appView || '').trim()
  return appViews.includes(metaView) ? metaView : 'overview'
}

export function resolveTargetRouteName(view) {
  return viewRouteNames[view] || viewRouteNames.overview
}

export function useNavigation() {
  const route = useRoute()
  const router = useRouter()

  const activeView = computed({
    get() {
      return resolveAppViewFromRoute(route)
    },
    set(view) {
      setView(view)
    }
  })

  const currentView = computed(
    () => navItems.find((item) => item.id === activeView.value) ?? navItems[0]
  )

  function setView(view) {
    const targetName = resolveTargetRouteName(view)

    if (route.name === targetName) {
      return
    }

    router.push({ name: targetName, params: {}, query: {}, hash: '' })
  }

  return { activeView, currentView, setView, navItems }
}