parameters: {
    route: {
      id: "_authenticated/users/$userId/profile",
      params: { userId: 1 },
    },
  }

export interface RouteData {
  path: string;
  loader?: Record<string, unknown>;
}

interface InitialEntries {
  entry: string;
  params?: Record<string, string>;
}

interface RouterParameters {
  initialEntries?: InitialEntries[];
  routes?: RouteData[];
}

const defaultRoute = [{ path: '/' }];
const defaultInitialEntries = [{ entry: '/', params: undefined }];

export function withTanstackRouter(Story: PartialStoryFn, { parameters }: StoryContext) {
  const { initialEntries = defaultInitialEntries, routes = defaultRoute } = parameters?.router || {};
  const rootRoute = createRootRoute({});

  routes.forEach((route) => {
    const { parentRoute, storyRoute } = createRouteConfig(route, Story, rootRoute);

    if (parentRoute !== rootRoute) rootRoute.addChildren([parentRoute]);
    parentRoute.addChildren([storyRoute]);
  });

  // Process entries with dynamic parameters
  const processedEntries = initialEntries.map(({ entry, params }) => {
    if (params) {
      return interpolatePath({
        path: entry,
        params
      }).interpolatedPath;
    }
    return entry;
  });

  const router = createRouter({
    history: createMemoryHistory({
      initialEntries: processedEntries,
      initialIndex: 0
    }),
    routeTree: rootRoute
  });

  return <RouterProvider router={router}></RouterProvider>;
}

declare module '@storybook/types' {
  interface Parameters {
    router?: RouterParameters;
  }
}

/**
 * Creates route configuration for Storybook stories
 * @param {RouteData} route - Full story path pattern and loader if exists
 * @param {PartialStoryFn} Story - Storybook component
 * @param {RootRoute} rootRoute - Application root route
 * @returns {Object} Contains layout and story routes
 */

export function createRouteConfig(route: RouteData, Story: PartialStoryFn, rootRoute: RootRoute) {
  const { layoutRouteId, storyRoutePath } = parseRoutePath(route.path);

  const parentRoute = layoutRouteId
    ? createRoute({
        id: layoutRouteId,
        component: Outlet,
        getParentRoute: () => rootRoute
      })
    : rootRoute;

  const storyRoute = createRoute({
    component: Story,
    path: `${storyRoutePath}`,
    getParentRoute: () => parentRoute,
    loader: () => route.loader
  });

  return { parentRoute, storyRoute };
}

/**
 * Finds the index of the last layout segment in a route.
 * @param segments - Array of route segments.
 * @returns The index of the last layout found, or -1 if no layouts are present.
 */
const findLastLayoutIndex = (segments: string[]): number => {
  let lastLayoutIndex = -1;

  for (let i = segments.length - 1; i >= 0; i--) {
    if (segments[i].startsWith('_')) {
      lastLayoutIndex = i;
      break;
    }
  }
  return lastLayoutIndex;
};

/**
 * Parses a route and separates layout and story components.
 * @param path - Route to parse.
 * @returns Object with the layout route or undefined, and the story route path.
 * @throws Error if the path is invalid.
 */
export function parseRoutePath(path: string): RouteParseResult {
  if (!path || typeof path !== 'string') {
    throw new Error('Invalid path: must be a non-empty string');
  }
  const hasTrailingSlash = path.endsWith('/');

  const pathSegments = path.split('/').filter(Boolean);

  const layoutMarkerIndex = findLastLayoutIndex(pathSegments);
  const hasLayout = layoutMarkerIndex !== -1;

  const boundaryIndex = layoutMarkerIndex + 1;
  const layoutSegments = hasLayout ? pathSegments.slice(0, boundaryIndex) : [];
  const storySegments = hasLayout ? pathSegments.slice(boundaryIndex) : [...pathSegments];

  const layoutRouteId = layoutSegments.length ? `/${layoutSegments.join('/')}` : undefined;
  let storyRoutePath = storySegments.length ? `/${storySegments.join('/')}` : '/';

  if (hasTrailingSlash && storyRoutePath !== '/') storyRoutePath += '/';

  return {
    layoutRouteId,
    storyRoutePath
  };
}