import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      name: 'Dashboard',
      component: () => import('../views/Dashboard.vue')
    },
    {
      path: '/timer',
      name: 'Timer',
      component: () => import('../views/Timer.vue')
    },
    {
      path: '/clients',
      name: 'Clients',
      component: () => import('../views/Clients.vue')
    },
    {
      path: '/projects',
      name: 'Projects',
      component: () => import('../views/Projects.vue')
    },
    {
      path: '/projects/:id',
      name: 'ProjectDetail',
      component: () => import('../views/ProjectDetail.vue')
    },
    {
      path: '/entries',
      name: 'Entries',
      component: () => import('../views/Entries.vue')
    },
    {
      path: '/calendar',
      name: 'Calendar',
      component: () => import('../views/CalendarView.vue')
    },
    {
      path: '/timesheet',
      name: 'Timesheet',
      component: () => import('../views/TimesheetView.vue')
    },
    {
      path: '/reports',
      name: 'Reports',
      component: () => import('../views/Reports.vue')
    },
    {
      path: '/mini-timer',
      name: 'MiniTimer',
      component: () => import('../views/MiniTimer.vue')
    },
    {
      path: '/invoices',
      name: 'Invoices',
      component: () => import('../views/Invoices.vue')
    },
    {
      path: '/settings',
      name: 'Settings',
      component: () => import('../views/Settings.vue')
    }
  ]
})

router.afterEach(async (to) => {
  const name = (to.name as string) || 'ZeroClock'
  document.title = `${name} - ZeroClock`

  setTimeout(() => {
    const main = document.getElementById('main-content')
    if (main) {
      main.focus()
    }
    const announcer = document.getElementById('route-announcer')
    if (announcer) {
      announcer.textContent = `Navigated to ${name}`
    }
  }, 300)

  // Track page visits for onboarding checklist
  try {
    const { useOnboardingStore } = await import('../stores/onboarding')
    const onboardingStore = useOnboardingStore()
    if (onboardingStore.loaded) {
      onboardingStore.onRouteVisit(to.path)
    }
  } catch {
    // Onboarding store not ready yet - ignore
  }
})

export default router
