{{!-- SmartStack React Router Configuration Template --}}
{{!-- Generates router configuration from NavRoute registry --}}

/**
 * React Router Configuration
 *
 * Auto-generated by SmartStack MCP - DO NOT EDIT MANUALLY
 * Generated: {{generatedAt}}
 */

import React, { Suspense, lazy } from 'react';
import { createBrowserRouter, RouteObject, Navigate } from 'react-router-dom';
import { ROUTES } from './navRoutes.generated';
{{#if includeGuards}}
import { ProtectedRoute, PermissionGuard } from './guards';
{{/if}}

// ============================================================================
// Layouts
// ============================================================================

{{#each contexts}}
import { {{capitalize this}}Layout } from '../layouts/{{capitalize this}}Layout';
{{/each}}

// ============================================================================
// Pages (lazy loaded for code splitting)
// ============================================================================

{{#each routes}}
const {{pageName this.navRoute}}Page = lazy(() => import('../pages/{{pagePath this.navRoute}}'));
{{/each}}

// ============================================================================
// Loading Component
// ============================================================================

const PageLoader: React.FC = () => (
  <div className="flex items-center justify-center h-64">
    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500" />
  </div>
);

// ============================================================================
// Route Configuration
// ============================================================================

const routes: RouteObject[] = [
  // Root redirect
  {
    path: '/',
    element: <Navigate to="{{defaultPath}}" replace />,
  },

{{#each contextTree}}
  // {{uppercase @key}} Context
  {
    path: '{{@key}}',
    element: <{{capitalize @key}}Layout />,
    children: [
{{#each this}}
      // {{uppercase @key}} Application
      {
        path: '{{@key}}',
        children: [
{{#each this}}
          {
            path: '{{modulePath this.navRoute}}',
{{#if this.permissions.length}}
            element: (
              <PermissionGuard permissions={ROUTES['{{this.navRoute}}'].permissions}>
                <Suspense fallback={<PageLoader />}>
                  <{{pageName this.navRoute}}Page />
                </Suspense>
              </PermissionGuard>
            ),
{{else}}
            element: (
              <Suspense fallback={<PageLoader />}>
                <{{pageName this.navRoute}}Page />
              </Suspense>
            ),
{{/if}}
          },
{{/each}}
        ],
      },
{{/each}}
    ],
  },
{{/each}}

  // 404 Not Found
  {
    path: '*',
    element: (
      <div className="flex flex-col items-center justify-center h-screen">
        <h1 className="text-4xl font-bold text-gray-900">404</h1>
        <p className="mt-2 text-gray-600">Page not found</p>
        <a href="{{defaultPath}}" className="mt-4 text-blue-600 hover:underline">
          Return to home
        </a>
      </div>
    ),
  },
];

// ============================================================================
// Router Export
// ============================================================================

{{#if includeGuards}}
export const router = createBrowserRouter([
  {
    element: <ProtectedRoute />,
    children: routes,
  },
]);
{{else}}
export const router = createBrowserRouter(routes);
{{/if}}

export default router;

// ============================================================================
// Type Exports
// ============================================================================

export type { RouteObject };

/**
 * Get route configuration by NavRoute path
 */
export const getRouteConfig = (navRoute: string) => ROUTES[navRoute];