import { createRouter, createWebHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
import Login from '@/views/login/index.vue'
import MainLayout from '@/layouts/MainLayout.vue'
import Dashboard from '@/views/dashboard/index.vue'
import Users from '@/views/users/index.vue'
import Test from '@/views/Test.vue'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 配置NProgress
NProgress.configure({ showSpinner: false })

// 静态路由
const staticRoutes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Login',
    component: Login,
    meta: {
      title: '登录',
      requiresAuth: false
    }
  },
  {
    path: '/main',
    component: MainLayout,
    children: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: Dashboard,
        meta: {
          title: '首页',
          requiresAuth: true
        }
      },
      {
        path: 'users',
        name: 'Users',
        component: Users,
        meta: {
          title: '用户管理',
          requiresAuth: true
        }
      },
      {
        path: 'product',
        name: 'Product',
        component: () => import('@/views/product/index.vue'),
        meta: {
          title: '产品管理',
          requiresAuth: true
        }
      },
      {
        path: 'sys/role',
        name: 'Role',
        component: () => import('@/views/sys/role/index.vue'),
        meta: {
          title: '角色管理',
          requiresAuth: true
        }
      },
      {
        path: 'sys/menu',
        name: 'Menu',
        component: () => import('@/views/sys/menu/index.vue'),
        meta: {
          title: '菜单管理',
          requiresAuth: true
        }
      },
      {
        path: 'sys/dict',
        name: 'Dict',
        component: () => import('@/views/sys/dict/index.vue'),
        meta: {
          title: '字典管理',
          requiresAuth: true
        }
      },
      {
        path: 'sys/dict-item',
        name: 'DictItem',
        component: () => import('@/views/sys/dict-item/index.vue'),
        meta: {
          title: '字典项管理',
          requiresAuth: true
        }
      },
      {
        path: 'sys/log',
        name: 'Log',
        component: () => import('@/views/sys/log/index.vue'),
        meta: {
          title: '日志管理',
          requiresAuth: true
        }
      },
      {
        path: 'product',
        name: 'Product',
        component: () => import('@/views/product/index.vue'),
        meta: {
          title: '产品管理',
          requiresAuth: true
        }
      },
      {
        path: 'dealer',
        name: 'Dealer',
        component: () => import('@/views/dealer/index.vue'),
        meta: {
          title: '经销商管理',
          requiresAuth: true
        }
      },
      {
        path: 'order',
        name: 'Order',
        component: () => import('@/views/order/index.vue'),
        meta: {
          title: '订单管理',
          requiresAuth: true
        }
      },
      {
        path: 'delivery',
        name: 'Delivery',
        component: () => import('@/views/delivery/index.vue'),
        meta: {
          title: '出库查询',
          requiresAuth: true
        }
      },
      {
        path: 'invoice',
        name: 'Invoice',
        component: () => import('@/views/invoice/index.vue'),
        meta: {
          title: '发票管理',
          requiresAuth: true
        }
      },
      {
        path: 'rebate',
        name: 'Rebate',
        component: () => import('@/views/rebate/index.vue'),
        meta: {
          title: '返利管理',
          requiresAuth: true
        }
      },
      {
        path: 'exception-workorder',
        name: 'ExceptionWorkorder',
        component: () => import('@/views/exceptionWorkorder/index.vue'),
        meta: {
          title: '异常工单',
          requiresAuth: true
        }
      },
      {
        path: 'test-menu',
        name: 'TestMenu',
        component: () => import('@/views/test-menu.vue'),
        meta: {
          title: '菜单测试',
          requiresAuth: true
        }
      },
      {
        path: 'settings',
        name: 'Settings',
        component: () => import('@/views/settings/index.vue'),
        meta: {
          title: '系统设置',
          requiresAuth: true
        }
      }
    ]
  },
  {
    path: '/dashboard',
    redirect: '/main/dashboard'
  },
  {
    path: '/test',
    name: 'Test',
    component: Test,
    meta: {
      title: '测试页面',
      requiresAuth: false
    }
  }
]

// 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes: staticRoutes,
  scrollBehavior: () => ({ top: 0 })
})

// 优化的路由守卫
router.beforeEach((to, from, next) => {
  // 只在路由真正变化时记录日志
  if (to.path !== from.path) {
    console.log('路由变化:', { from: from.path, to: to.path })
  }
  
  // 开始进度条
  NProgress.start()
  
  // 设置页面标题
  if (to.meta.title) {
    document.title = `${to.meta.title} - Apple经销商ERP系统`
  }
  
  // 检查认证状态
  if (to.meta.requiresAuth) {
    const token = localStorage.getItem('token')
    if (!token) {
      console.log('未认证，跳转到登录页')
      next('/')
      return
    }
  }
  
  // 如果已登录且访问登录页，跳转到首页
  if (to.path === '/' && localStorage.getItem('token')) {
    console.log('已登录，跳转到首页')
    next('/main/dashboard')
    return
  }
  
  // 继续导航
  next()
})

router.afterEach(() => {
  // 结束进度条
  NProgress.done()
})

// 路由错误处理
router.onError((error) => {
  console.error('路由错误:', error)
  NProgress.done()
})

export default router