import { createRouter, createWebHistory } from 'vue-router'
import { isMpEmbed } from '../lib/mpEmbed'

const router = createRouter({
  history: createWebHistory('/psy/'),
  routes: [
    { path: '/', name: 'home', component: () => import('../pages/HomePage.vue') },
    { path: '/explore', name: 'explore', component: () => import('../pages/ExplorePage.vue') },
    {
      path: '/explore/bank/:category',
      name: 'explore-bank-category',
      component: () => import('../pages/ExploreBankCategoryPage.vue'),
    },
    {
      path: '/explore/:category',
      name: 'explore-category',
      component: () => import('../pages/ExploreCategoryPage.vue'),
    },
    {
      path: '/growth-plan',
      name: 'growth-plan',
      component: () => import('../pages/GrowthPlanPage.vue'),
    },
    { path: '/ask', name: 'ask', component: () => import('../pages/AskPage.vue') },
    { path: '/companion', name: 'companion', component: () => import('../pages/CompanionPage.vue') },
    { path: '/mine', name: 'mine', component: () => import('../pages/MinePage.vue') },
    { path: '/login', name: 'login', component: () => import('../pages/LoginPage.vue') },
    { path: '/profile', name: 'profile', component: () => import('../pages/ProfilePage.vue') },
    { path: '/portrait', name: 'portrait', component: () => import('../pages/PortraitPage.vue') },
    { path: '/star', name: 'star', component: () => import('../pages/StarProfilePage.vue') },
    { path: '/synastry', name: 'synastry', component: () => import('../pages/SynastryPage.vue') },
    {
      path: '/synastry/invite/:token',
      name: 'synastry-invite',
      component: () => import('../pages/SynastryInvitePage.vue'),
    },
    { path: '/rhythm', name: 'rhythm', component: () => import('../pages/LifeRhythmPage.vue') },
    { path: '/cards', name: 'cards', component: () => import('../pages/ImageCardPage.vue') },
    { path: '/relation', name: 'relation', component: () => import('../pages/RelationPage.vue') },
    { path: '/membership', name: 'membership', component: () => import('../pages/MembershipPage.vue') },
    { path: '/scales/:slug', name: 'scale', component: () => import('../pages/ScalePage.vue') },
    { path: '/share', name: 'share', component: () => import('../pages/SharePage.vue') },
    { path: '/reports', name: 'reports', component: () => import('../pages/ReportsPage.vue') },
    { path: '/reports/:id', name: 'report', component: () => import('../pages/ReportPage.vue') },
    { path: '/decode', redirect: (to) => ({ path: '/portrait', query: to.query }) },
  ],
  scrollBehavior() {
    return { top: 0 }
  },
})

router.beforeEach((to) => {
  if (!isMpEmbed()) return true
  const q = { ...to.query }
  let changed = false
  if (q.mp !== '1') {
    q.mp = '1'
    changed = true
  }
  if (sessionStorage.getItem('yxg_mp_native_header') === '1' && q.nh !== '1') {
    q.nh = '1'
    changed = true
  }
  const storedSbh = sessionStorage.getItem('yxg_sbh')
  if (storedSbh && q.sbh !== storedSbh && q.nh !== '1') {
    q.sbh = storedSbh
    changed = true
  }
  if (!changed) return true
  return { path: to.path, query: q, hash: to.hash, replace: true }
})

export default router