#Route Configuration

interface RouteConfig {
    path: string;
    component?: unknown;
    children?: RouteConfig[];
    redirect?: RouteLocationInput | RouteConfirmHook;
    meta?: RouteMeta;
    app?: string | RouterMicroAppCallback;
    asyncComponent?: () => Promise<unknown>;
    beforeEnter?: RouteConfirmHook;
    beforeUpdate?: RouteConfirmHook;
    beforeLeave?: RouteConfirmHook;
    layer?: boolean;
    override?: RouteConfirmHook;
}

// Static path
{ path: '/about' }

// Dynamic segment
{ path: '/user/:id' }

// Multiple dynamic segments
{ path: '/post/:year/:month/:slug' }

// Wildcard (catch-all)
{ path: '/files/*' }

// Optional segment
{ path: '/user/:id?' }

import Home from './Home.vue';

{ path: '/', component: Home }

{
    path: '/dashboard',
    asyncComponent: () => import('./Dashboard.vue')
}

{
    path: '/user',
    component: UserLayout,
    children: [
        { path: '', component: UserList },
        { path: ':id', component: UserDetail },
        { path: ':id/edit', component: UserEdit }
    ]
}

// Static redirect
{ path: '/old', redirect: '/new' }

// Dynamic redirect
{
    path: '/user',
    redirect: (to, from, router) => {
        return '/user/' + getDefaultUserId();
    }
}

{
    path: '/admin',
    component: Admin,
    meta: {
        requiresAuth: true,
        title: 'Admin Panel',
        permissions: ['admin']
    }
}

// String reference to named app
{ path: '/app1/*', app: 'app1' }

// Factory function
{
    path: '/embedded/*',
    app: (router) => ({
        mount(el) { /* mount app */ },
        unmount() { /* cleanup */ }
    })
}

{
    path: '/admin',
    component: Admin,
    beforeEnter: (to, from, router) => {
        if (!isAdmin()) return '/login';
    }
}

// Only available as a layer
{ path: '/dialog/select', component: SelectDialog, layer: true }

// Never available as a layer
{ path: '/main', component: MainPage, layer: false }

{
    path: '/native-page',
    override: (to, from) => {
        if (isInApp()) {
            return () => JSBridge.openNative();
        }
    }
}

interface RouteParsedConfig extends RouteConfig {
    compilePath: string;
    children: RouteParsedConfig[];
    match: MatchFunction;
    compile: (params?: Record<string, string>) => string;
}

interface RouteMatchResult {
    readonly matches: readonly RouteParsedConfig[];
    readonly params: Record<string, string | string[]>;
}

type RouteMatcher = (
    to: URL,
    base: URL,
    cb?: (item: RouteParsedConfig) => boolean
) => RouteMatchResult;

const routes = [
    // Matches /user/1, /user/abc, etc.
    { path: '/user/:id', component: User },

    // Multiple segments
    { path: '/post/:year/:month/:day', component: Post },

    // Wildcard catch-all
    { path: '/docs/*', component: DocsPage }
];

// URL: /user/42
route.params.id // '42'

// URL: /post/2024/01/15
route.params.year  // '2024'
route.params.month // '01'
route.params.day   // '15'

import { Router } from '@esmx/router';

const router = new Router({
    routes: [
        {
            path: '/',
            component: Layout,
            children: [
                { path: '', component: Home },
                {
                    path: 'user/:id',
                    component: UserDetail,
                    meta: { requiresAuth: true },
                    beforeEnter: (to) => {
                        if (!isLoggedIn()) return '/login';
                    }
                },
                {
                    path: 'settings',
                    asyncComponent: () => import('./Settings.vue'),
                    beforeLeave: (to, from) => {
                        if (hasUnsavedChanges()) return false;
                    }
                }
            ]
        },
        { path: '/login', component: Login },
        { path: '/old-page', redirect: '/new-page' }
    ]
});