import { createRouter, createWebHistory } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { ElMessage } from 'element-plus'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 配置 NProgress
NProgress.configure({ 
  showSpinner: false,
  minimum: 0.1,
  speed: 200
})

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/LoginView.vue'),
    meta: {
      title: '登入',
      requiresAuth: false,
      hideLayout: true
    }
  },
  {
    path: '/',
    name: 'Layout',
    component: () => import('@/layouts/MainLayout.vue'),
    redirect: '/home',
    meta: {
      requiresAuth: true
    },
    children: [
      {
        path: '/home',
        name: 'Home',
        component: () => import('@/views/HomeView.vue'),
        meta: {
          title: '首頁',
          icon: 'House',
          showInMenu: true
        }
      },
      {
        path: '/upload',
        name: 'Upload',
        component: () => import('@/views/UploadView.vue'),
        meta: {
          title: '檔案上傳',
          icon: 'Upload',
          showInMenu: true
        }
      },
      {
        path: '/jobs',
        name: 'Jobs',
        component: () => import('@/views/JobListView.vue'),
        meta: {
          title: '任務列表',
          icon: 'List',
          showInMenu: true
        }
      },
      {
        path: '/history',
        name: 'History',
        component: () => import('@/views/HistoryView.vue'),
        meta: {
          title: '歷史記錄',
          icon: 'Clock',
          showInMenu: true
        }
      },
      {
        path: '/profile',
        name: 'Profile',
        component: () => import('@/views/ProfileView.vue'),
        meta: {
          title: '個人設定',
          icon: 'User'
        }
      },
      {
        path: '/admin',
        name: 'Admin',
        component: () => import('@/views/AdminView.vue'),
        meta: {
          title: '管理後台',
          icon: 'Setting',
          requiresAdmin: true,
          showInMenu: true
        }
      },
      {
        path: '/admin/jobs',
        name: 'AdminJobs',
        component: () => import('@/views/AdminJobsView.vue'),
        meta: {
          title: '全部任務',
          requiresAdmin: true
        }
      }
    ]
  },
  {
    path: '/job/:uuid',
    name: 'JobDetail',
    component: () => import('@/views/JobDetailView.vue'),
    meta: {
      title: '任務詳情',
      requiresAuth: true,
      hideLayout: false
    }
  },
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('@/views/NotFoundView.vue'),
    meta: {
      title: '頁面不存在',
      hideLayout: true
    }
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  }
})

// 路由守衛
router.beforeEach(async (to, from, next) => {
  NProgress.start()
  
  const authStore = useAuthStore()
  
  // 設置頁面標題
  document.title = to.meta.title ? `${to.meta.title} - PANJIT Document Translator` : 'PANJIT Document Translator'
  
  // 檢查是否需要認證
  if (to.meta.requiresAuth && !authStore.isAuthenticated) {
    ElMessage.warning('請先登入')
    next('/login')
    return
  }
  
  // 檢查管理員權限
  if (to.meta.requiresAdmin && !authStore.isAdmin) {
    ElMessage.error('無權限存取此頁面')
    next('/home')
    return
  }
  
  // 如果已經登入且訪問登入頁面，重定向到首頁
  if (to.path === '/login' && authStore.isAuthenticated) {
    next('/home')
    return
  }
  
  next()
})

router.afterEach(() => {
  NProgress.done()
})

export default router