import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';
import HomeViewOffensive from '../views/HomeViewOffensive.vue';

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/offensive',
      name: 'offensive',
      component: HomeViewOffensive,
    },
    {
      path: '/mixed',
      name: 'mixed',
      component: () => import('../views/HomeViewMixed.vue'),
    },
    {
      path: '/wallet/:address',
      name: 'wallet',
      component: () => import('../views/HolderDashboardView.vue'),
    },
    {
      path: '/docs',
      name: 'Docs',
      meta: {
        title: 'Docs',
        group: 'navbar',
      },
      redirect: '/docs/introduction',
      component: () => import('../views/DocsView.vue'),
      children: [
        {
          path: '/docs/introduction',
          name: 'DocsIntroduction',
          meta: {
            title: 'Docs',
          },
          alias: ['/docs/Introduction'],
          component: () => import('../views/docs/IntroductionDocs.vue'),
        },
        {
          path: '/docs/how-it-works',
          name: 'DocsHowItWorks',
          meta: {
            title: 'Docs',
          },
          alias: ['/docs/How-It-Works'],
          component: () => import('../views/docs/HowItWorks.vue'),
        },
        {
          path: '/docs/liquidity-management',
          name: 'DocsLiquidityManagement',
          meta: {
            title: 'Docs',
          },
          alias: ['/docs/Liquidity-Management'],
          component: () => import('../views/docs/LiquidityManagement.vue'),
        },
        {
          path: '/docs/ai-agent',
          name: 'DocsAiAgent',
          meta: {
            title: 'Docs',
          },
          alias: ['/docs/AI-agent'],
          component: () => import('../views/docs/AiAgent.vue'),
        },
        {
          path: '/docs/tokenomics',
          name: 'DocsTokenomics',
          meta: {
            title: 'Docs',
          },
          alias: ['/docs/Tokenomics'],
          component: () => import('../views/docs/TokenomicsDocs.vue'),
        },
        {
          path: '/docs/staking',
          name: 'DocsStaking',
          meta: {
            title: 'Docs',
          },
          alias: ['/docs/Staking'],
          component: () => import('../views/docs/StakingDocs.vue'),
        },
        {
          path: '/docs/faq',
          name: 'DocsFaq',
          meta: {
            title: 'Docs',
          },
          alias: ['/docs/FAQ'],
          component: () => import('../views/docs/FaqDocs.vue'),
        },
        {
          path: '/docs/code',
          name: 'DocsCode',
          meta: {
            title: 'Docs',
          },
          alias: ['/docs/Code'],
          component: () => import('../views/docs/CodeDocs.vue'),
        },
        {
          path: ':pathMatch(.*)*',
          redirect: '/docs/introduction',
        },
      ],
    },
    {
      path: '/:pathMatch(.*)*',
      redirect: '/',
    },
  ],
  scrollBehavior(to, from, savedPosition) {
    // Check if the target route contains a hash
    if (to.hash) {
      // Wait for the component to load, then scroll to the target
      return {
        el: to.hash,
        behavior: 'smooth', // Optional: for smooth scrolling
        top: 80,
      };
    }
    return savedPosition || { top: 0 }; // Scroll to the top of the page if no hash is present
  },
});

export default router;
