import type { NavigationGuardNext, RouteLocationNormalized } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useNProgress } from '@vueuse/integrations/useNProgress';
import { createRouter, createWebHistory } from 'vue-router';
import { ROUTER_WHITE_LIST } from '@/config';
import { checkPagePermission } from '@/config/permission';
import { errorRouter, layoutRouter, staticRouter } from '@/routers/modules/staticRouter';
import { useDesignStore, useUserStore } from '@/stores';

// 创建页面加载进度条，提升用户体验。
const { start, done } = useNProgress(0, {
  showSpinner: false, // 不显示旋转器
  trickleSpeed: 200, // 进度条增长速度（毫秒）
  minimum: 0.3, // 最小进度值（30%）
  easing: 'ease', // 动画缓动函数
  speed: 500, // 动画速度
});
// 创建路由实例
const router = createRouter({
  history: createWebHistory(), // 使用 HTML5 History 模式
  routes: [...layoutRouter, ...staticRouter, ...errorRouter], // 合并所有路由
  strict: false, // 不严格匹配尾部斜杠
  scrollBehavior: () => ({ left: 0, top: 0 }), // 路由切换时滚动到顶部
});

// 路由前置守卫
router.beforeEach(
  async (
    to: RouteLocationNormalized,
    _from: RouteLocationNormalized,
    next: NavigationGuardNext,
  ) => {
    // 1. 获取状态管理
    const userStore = useUserStore();
    const designStore = useDesignStore(); // 必须在守卫内部调用
    // 2. 设置布局（根据路由meta中的layout配置）
    designStore._setLayout(to.meta?.layout || 'default');

    // 3. 开始显示进度条
    start();

    // 4. 设置页面标题
    document.title = (to.meta.title as string) || (import.meta.env.VITE_WEB_TITLE as string);

    // 3、权限 预留
    // 3、判断是访问登陆页，有Token访问当前页面，token过期访问接口，axios封装则自动跳转登录页面，没有Token重置路由到登陆页。
    // if (to.path.toLocaleLowerCase() === LOGIN_URL) {
    //   // 有Token访问当前页面
    //   if (userStore.token) {
    //     return next(from.fullPath);
    //   }
    //   else {
    //     ElMessage.error('账号身份已过期，请重新登录');
    //   }
    //   // 没有Token重置路由到登陆页。
    //   // resetRouter();  // 预留
    //   return next();
    // }
    // 4、判断访问页面是否在路由白名单地址[静态路由]中，如果存在直接放行。
    // 5. 白名单检查（跳过权限验证）
    if (ROUTER_WHITE_LIST.includes(to.path))
      return next();

    // 6. Token 检查（用户认证），没有重定向到 login 页面。
    if (!userStore.token)
      userStore.logout();

    // 7. 页面权限检查
    const userName = userStore.userInfo?.user?.userName;
    const hasPermission = checkPagePermission(to.path, userName);

    if (!hasPermission) {
      // 用户无权访问该页面，跳转到403页面
      ElMessage.warning('您没有权限访问该页面');
      return next('/403');
    }

    // 其余逻辑 预留...

    // 8. 放行路由
    next();
  },
);

// 路由跳转错误
router.onError((error) => {
  // 结束全屏动画
  done();
  console.warn('路由错误', error.message);
});

// 后置路由
router.afterEach(() => {
  // 结束全屏动画
  done();
});

export default router;
