import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';
import { defineAsyncComponent } from 'vue';
import { useMainStore } from "@/stores/store";

const Home = defineAsyncComponent(() => import('@/views/Home.vue'));
const Login = defineAsyncComponent(() => import('@/views/Login.vue'));
const Crafts = defineAsyncComponent(() => import('@/views/Crafts.vue'));
const News = defineAsyncComponent(() => import('@/views/News.vue'));
const NewsDetail = defineAsyncComponent(() => import('@/views/NewsDetail.vue'));
// const Article = defineAsyncComponent(() => import('@/views/Article.vue'));
const ArticleDetail = defineAsyncComponent(() => import('@/views/ArticleDetail.vue'));
const CourseList = defineAsyncComponent(() => import('@/views/CourseList.vue'));
const CourseDetail = defineAsyncComponent(() => import('@/views/CourseDetail.vue'));

// 開課流程
const SetUpCourses = defineAsyncComponent(() => import('@/views/Courses/SetUp.vue'));
const CreateCourses = defineAsyncComponent(() => import('@/views/Courses/Create.vue'));
const TutorialCourses = defineAsyncComponent(() => import('@/views/Courses/Tutorial.vue'));
const ProposalCourses = defineAsyncComponent(() => import('@/views/Courses/Proposal.vue'));

// 八大學群
const CollegeGroup = defineAsyncComponent(() => import('@/views/CollegeGroup/Main.vue'));
const Online = defineAsyncComponent(() => import('@/views/CollegeGroup/Online.vue'));
const Craft = defineAsyncComponent(() => import('@/views/CollegeGroup/Craft.vue'));
const Future = defineAsyncComponent(() => import('@/views/CollegeGroup/Future.vue'));
const Proposal = defineAsyncComponent(() => import('@/views/CollegeGroup/Proposal.vue'));
const Cross = defineAsyncComponent(() => import('@/views/CollegeGroup/Cross.vue'));
const Life = defineAsyncComponent(() => import('@/views/CollegeGroup/Life.vue'));
const Cfa = defineAsyncComponent(() => import('@/views/CollegeGroup/Cfa.vue'));
// const Repair = defineAsyncComponent(() => import('@/views/CollegeGroup/Repair.vue'));
// const Teenager = defineAsyncComponent(() => import('@/views/CollegeGroup/Teenager.vue'));
// const Generation = defineAsyncComponent(() => import('@/views/CollegeGroup/Generation.vue'));

// 一日學徒
const Apprentice = defineAsyncComponent(() => import('@/views/CollegeGroup/Life/Apprentice/Main.vue'));
const ApprenticeAbout = defineAsyncComponent(() => import('@/views/CollegeGroup/Life/Apprentice/About.vue'));
const ApprenticeCourse = defineAsyncComponent(() => import('@/views/CollegeGroup/Life/Apprentice/Course.vue'));
const ApprenticeNews = defineAsyncComponent(() => import('@/views/CollegeGroup/Life/Apprentice/News.vue'));
const ApprenticeContact = defineAsyncComponent(() => import('@/views/CollegeGroup/Life/Apprentice/Contact.vue'));
const ApprenticeFAQ = defineAsyncComponent(() => import('@/views/CollegeGroup/Life/Apprentice/FAQ.vue'));
const ApprenticeTerms = defineAsyncComponent(() => import('@/views/CollegeGroup/Life/Apprentice/Terms.vue'));

const Campus = defineAsyncComponent(() => import('@/views/CollegeGroup/Life/Campus.vue')); // 校園扎根
const CraftJourney = defineAsyncComponent(() => import('@/views/CollegeGroup/Life/CraftJourney.vue')); // 工藝行旅
const Shop = defineAsyncComponent(() => import('@/views/CollegeGroup/Life/Shop.vue')); // 旅物 Shop

// 學習者頁面
const Dashboard = defineAsyncComponent(() => import('@/views/User/Dashboard.vue'));
const Profile = defineAsyncComponent(() => import('@/views/User/Profile.vue')); // 個人檔案
const Passport = defineAsyncComponent(() => import('@/views/User/Passport.vue')); // 學習護照
const userProposal = defineAsyncComponent(() => import('@/views/User/Proposal.vue')); // 我的提案
const userCourses = defineAsyncComponent(() => import('@/views/User/Courses.vue')); // 我的開課
const FavoriteClass = defineAsyncComponent(() => import('@/views/User/FavoriteClass.vue')); // 我的收藏
const Setting = defineAsyncComponent(() => import('@/views/User/Setting.vue')); // 帳戶設定

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/login',
    name: 'Login',
    component: Login,
  },
  // {
  //   path: '/user/profile',
  //   name: 'UserProfile',
  //   component: UserProfile,
  // },
  {
    path: '/user',
    component: Dashboard,
    meta: { requiresAuth: true }, // 需驗證登入權限
    children: [
      {
        path: 'profile',
        name: 'Profile',
        component: Profile,
      },
      {
        path: 'passport',
        name: 'Passport',
        component: Passport,
      },
      {
        path: 'proposal',
        name: 'userProposal',
        component: userProposal,
      },
      {
        path: 'courses',
        name: 'Courses',
        component: userCourses,
      },
      {
        path: 'favorite-class',
        name: 'FavoriteClass',
        component: FavoriteClass,
      },
      {
        path: 'setting',
        name: 'Setting',
        component: Setting,
      },
    ],
  },
  {
    path: '/crafts/:id?',
    name: 'Crafts',
    component: Crafts,
  },
  {
    path: '/college-group',
    component: CollegeGroup,
    redirect: '/college-group/craft',
    children: [
      {
        path: 'future',
        name: 'Future',
        component: Future,
        meta: {
          group_id: 1,
          title: '未來工藝',
        },
      },
      {
        path: 'craft',
        name: 'Craft',
        component: Craft,
        meta: {
          group_id: 2,
          title: '技藝工藝',
        },
      },
      {
        path: 'life',
        name: 'Life',
        component: Life,
        meta: {
          group_id: 3,
          title: '生活工藝',
        },
      },
      {
        path: 'cross',
        name: 'Cross',
        component: Cross,
        meta: {
          group_id: 7,
          title: '跨域增能',
        },
      },
      {
        path: 'online',
        name: 'Online',
        component: Online,
        meta: {
          group_id: 8,
          title: '線上工藝',
        },
      },
      {
        path: 'craft-for-all',
        name: 'Cfa',
        component: Cfa,
        meta: {
          group_id: 9,
          title: '希望工程',
        },
      },
      // {
      //   path: 'generation',
      //   name: 'Generation',
      //   component: Generation,
      //   meta: {
      //     title: '世代工藝',
      //   },
      // },
      // {
      //   path: 'teenager',
      //   name: 'Teenager',
      //   component: Teenager,
      //   meta: {
      //     title: '青年工藝',
      //   },
      // },
      // {
      //   path: 'repair',
      //   name: 'Repair',
      //   component: Repair,
      //   meta: {
      //     title: '修護工藝',
      //   },
      // },
      {
        path: 'life/apprentice',
        name: 'Apprentice',
        redirect: 'life/apprentice/about',
        component: Apprentice,
        meta: {
          group_id: 3,
          title: '生活工藝',
        },
        children: [
          {
            path: 'about',
            name: 'ApprenticeAbout',
            component: ApprenticeAbout,
          },
          {
            path: 'course',
            name: 'ApprenticeCourse',
            component: ApprenticeCourse,
          },
          {
            path: 'news',
            name: 'ApprenticeNews',
            component: ApprenticeNews,
          },
          {
            path: 'contact',
            name: 'ApprenticeContact',
            component: ApprenticeContact,
          },
          {
            path: 'faq',
            name: 'ApprenticeFAQ',
            component: ApprenticeFAQ,
          },
          {
            path: 'terms',
            name: 'ApprenticeTerms',
            component: ApprenticeTerms,
          },
        ],
      },
      {
        path: 'life/campus',
        name: 'Campus',
        component: Campus,
        meta: {
          group_id: 3,
          title: '生活工藝',
        },
      },
      {
        path: 'life/craftJourney',
        name: 'CraftJourney',
        component: CraftJourney,
        meta: {
          group_id: 3,
          title: '生活工藝',
        },
      },
      {
        path: 'life/shop',
        name: 'Shop',
        component: Shop,
        meta: {
          group_id: 3,
          title: '生活工藝',
        },
      },
    ],
  },
  {
    path: '/college-group/future/proposal/:id',
    name: 'Proposal',
    component: Proposal
  },
  {
    path: '/news',
    name: 'News',
    component: News,
  },
  {
    path: '/news/:id',
    name: 'NewsDetail',
    component: NewsDetail,
  },
  // {
  //   path: '/article/:id?',
  //   name: 'Article',
  //   component: Article,
  // },
  {
    path: '/article-detail/:id',
    name: 'ArticleDetail',
    component: ArticleDetail,
  },
  {
    path: '/course-list',
    name: 'CourseList',
    component: CourseList,
  },
  {
    path: '/course-detail/:id',
    name: 'CourseDetail',
    component: CourseDetail,
  },
  {
    path: '/setup-courses',
    name: 'SetUpCourses',
    component: SetUpCourses,
    meta: { requiresAuth: true }, // 需驗證登入權限
  },
  {
    path: '/setup-courses/create',
    name: 'CreateCourses',
    component: CreateCourses,
  },
  {
    path: '/setup-courses/tutorial',
    name: 'TutorialCourses',
    component: TutorialCourses,
  },
  {
    path: '/setup-courses/proposal',
    name: 'ProposalCourses',
    component: ProposalCourses,
  },
  // {
  //   path: '/college-group/craft',
  //   name: 'Craft',
  //   component: Craft
  // },
  // {
  //   path: '/college-group/generation',
  //   name: 'Generation',
  //   component: Generation
  // },
  // {
  //   path: '/college-group/future',
  //   name: 'Future',
  //   component: Future
  // },
  // {
  //   path: '/college-group/repair',
  //   name: 'Repair',
  //   component: Repair
  // },
  // {
  //   path: '/college-group/teenager',
  //   name: 'Teenager',
  //   component: Teenager
  // },
  // {
  //   path: '/college-group/cross',
  //   name: 'Cross',
  //   component: Cross
  // },
];

const router = createRouter({
  // history: createWebHashHistory(),
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
});

// 檢查登入狀態
router.beforeEach((to, from, next) => {
  if (to.hash === "") {
    // 切換頁面時回到畫面最上方
    setTimeout(() => {
      window.scrollTo({ top: 0 });
    }, 300);
  }

  const store = useMainStore();
  store.checkToken()

  // 檢查目標路由是否需要驗證權限
  if (to.meta.requiresAuth) {
    store.checkToken();
    console.log('檢查目標路由');
    const haveToken = store.loginState;
    console.log('router store token', store.token);
    // let isTokenExpired = store.checkTokenExpiration(); // 檢查 Token 是否過期
    if (haveToken) {
      next(); // 允許使用者訪問目標頁面
    } else {
      console.log('>> 沒有token');
      store.loginDialog = true; // 開啟登入視窗
      next(); // 若無 token 直接輸入網址前往時，將重定向至首頁
    }
  }
  else {
    // 如果目標路由不需要驗證權限，直接允許使用者訪問
    next();
  }
});

export default router;