import { createRouter, createWebHashHistory } from 'vue-router';
import LoginView from './views/LoginView.vue';
import { THEME_NAMES, useTheme } from './composables/useTheme';

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        { path: '/',        name: 'home',    component: () => import('./views/HomeView.vue'),   meta: { suffix: 'Home' }   },
        { path: '/login',   name: 'login',   component: LoginView,   meta: { suffix: 'Login' }                          },
        { path: '/agents',  name: 'agents',  component: () => import('./views/AgentsView.vue'),  meta: { suffix: 'Home',  requiresSocket: true }    },
        { path: '/chat',    redirect: '/agents'                                                                                  },
        { path: '/dev',     name: 'dev',     component: () => import('./views/DevView.vue'),     meta: { suffix: 'Dev',   requiresSocket: true }    },
        { path: '/viewer',  name: 'viewer',  component: () => import('./views/ViewerView.vue'),  meta: { suffix: 'Viewer', requiresSocket: true }   },
        { path: '/:pathMatch(.*)*', redirect: '/' },
    ],
});

router.afterEach((to) => {
    const { theme } = useTheme();
    const brand = THEME_NAMES[theme.value] || 'Hermes';
    const suffix = (to.meta?.suffix as string) || '';
    document.title = suffix ? `${brand} - ${suffix}` : brand;
});

export default router;
