frontend/src/router/index.js

/**
 * SAAP Vue Router Configuration
 * Navigation system for SAAP Multi-Agent Platform
 */

import { createRouter, createWebHistory } from 'vue-router'
import SaapDashboard from '@/components/SaapDashboard.vue'
import DashboardSimple from '@/views/DashboardSimple.vue'
import AgentDetails from '@/views/AgentDetails.vue'
import Settings from '@/views/Settings.vue'
import About from '@/views/About.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'Dashboard',
      component: SaapDashboard, // ✅ FIXED: Use SaapDashboard with beautiful card layout
      meta: {
        title: 'SAAP Dashboard',
        requiresAuth: false
      }
    },
    {
      path: '/simple',
      name: 'DashboardSimple',
      component: DashboardSimple,
      meta: {
        title: 'SAAP Dashboard (Simple)',
        requiresAuth: false
      }
    },
    {
      path: '/agents/:id',
      name: 'AgentDetails',
      component: AgentDetails,
      props: true,
      meta: {
        title: 'Agent Details',
        requiresAuth: false
      }
    },
    {
      path: '/settings',
      name: 'Settings',
      component: Settings,
      meta: {
        title: 'Settings',
        requiresAuth: false
      }
    },
    {
      path: '/about',
      name: 'About',
      component: About,
      meta: {
        title: 'About SAAP',
        requiresAuth: false
      }
    },
    {
      // Catch-all route for 404
      path: '/:pathMatch(.*)*',
      name: 'NotFound',
      redirect: '/'
    }
  ]
})

// Navigation Guards
router.beforeEach((to, from, next) => {
  // Update document title
  if (to.meta.title) {
    document.title = `${to.meta.title} | SAAP Platform`
  }
  
  // Continue navigation
  next()
})

router.afterEach((to, from) => {
  // Log navigation for debugging
  console.log(`🧭 Navigated from ${from.path} to ${to.path}`)
})

export default router