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

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  scrollBehavior(to, _from, savedPosition) {
    if (to.hash) {
      return { el: to.hash, behavior: 'smooth' }
    }
    return savedPosition || { top: 0 }
  },
  routes: [
    {
      path: '/',
      name: 'home',
      redirect: '/playground',
    },
    // ==========================================================================
    // Version-specific routes - Separate pages for each section
    // ==========================================================================
    {
      // Async redirect: fetches model, redirects to active version entities
      path: '/semantic-models/:id',
      name: 'model-redirect',
      component: () => import('@/views/ModelRedirectView.vue'),
      meta: { title: 'Loading...' },
    },
    {
      // Version root - redirect to entities
      path: '/semantic-models/:id/v/:version',
      name: 'version-redirect',
      redirect: (to) => `/semantic-models/${to.params.id}/v/${to.params.version}/entities`,
    },
    {
      // Entities list (no specific entity)
      path: '/semantic-models/:id/v/:version/entities',
      name: 'entities-editor',
      component: () => import('@/views/EntityEditorView.vue'),
      meta: { title: 'Entities' },
    },
    {
      // Single entity editor
      path: '/semantic-models/:id/v/:version/entities/:entityId',
      name: 'entity-editor',
      component: () => import('@/views/EntityEditorView.vue'),
      meta: { title: 'Edit Entity' },
    },
    {
      // Relationships page
      path: '/semantic-models/:id/v/:version/relationships',
      name: 'relationships-editor',
      component: () => import('@/views/RelationshipsView.vue'),
      meta: { title: 'Relationships' },
    },
    {
      // Instructions page
      path: '/semantic-models/:id/v/:version/instructions',
      name: 'instructions-editor',
      component: () => import('@/views/InstructionsView.vue'),
      meta: { title: 'Instructions' },
    },
    {
      // Glossary page (vocabulary + bindings)
      path: '/semantic-models/:id/v/:version/glossary',
      name: 'glossary-editor',
      component: () => import('@/views/GlossaryEditorView.vue'),
      meta: { title: 'Glossary' },
    },
    {
      // Golden Queries page
      path: '/semantic-models/:id/v/:version/golden-queries',
      name: 'golden-queries-editor',
      component: () => import('@/views/GoldenQueriesView.vue'),
      meta: { title: 'Golden Queries' },
    },
    {
      // Indexing page
      path: '/semantic-models/:id/v/:version/indexing',
      name: 'indexing',
      component: () => import('@/views/IndexingView.vue'),
      meta: { title: 'Indexing' },
    },
    {
      // Playground with version context
      path: '/semantic-models/:id/v/:version/playground',
      name: 'version-playground',
      component: () => import('@/views/PlaygroundView.vue'),
      meta: { title: 'Playground' },
    },
    // ==========================================================================
    // Legacy routes (kept for backwards compatibility during transition)
    // ==========================================================================
    {
      // Old edit route - redirect to new URL structure
      path: '/semantic-models/:id/versions/:versionId/edit',
      name: 'version-edit-legacy',
      redirect: (to) => `/semantic-models/${to.params.id}/v/${to.params.versionId}`,
    },
    {
      // Old versions list - redirect to model (which will redirect to active version)
      path: '/semantic-models/:id/versions',
      name: 'semantic-model-versions',
      redirect: (to) => `/semantic-models/${to.params.id}`,
    },
    {
      // Legacy model glossary route - redirect to model page (glossary is version-scoped now)
      path: '/semantic-models/:id/glossary',
      name: 'semantic-model-glossary',
      redirect: (to) => `/semantic-models/${to.params.id}`,
    },
    {
      path: '/playground',
      name: 'playground',
      component: () => import('@/views/PlaygroundView.vue'),
      meta: { title: 'Playground' },
      // Note: Will be updated in PR 7 to require model context
    },
  ],
})

// Navigation guard for page title
router.beforeEach((to, _from, next) => {
  const title = to.meta.title as string
  if (title) {
    document.title = `${title} - Semantic Models`
  }
  next()
})

export default router
