/* eslint-disable react-refresh/only-export-components */
/**
 * React Router configuration with Nordic-styled layout.
 *
 * ⚠️ AUTO-GENERATED BY PRISM
 * Generated sections will be updated on `prisme generate`.
 * Add custom code inside PRISM:PROTECTED regions to preserve it.
 */

import { useEffect, type ReactElement } from 'react';
import { createBrowserRouter, Link, NavLink, Outlet, useLocation } from 'react-router-dom';
{% if dark_mode %}import { ThemeToggle } from './ui/ThemeToggle';
{% endif %}{{ imports_str }}{{ auth_hook_import }}
import { customRoutes } from './routes/customRoutes';

// PRISM:PROTECTED:START - Custom Imports
// Add your custom page imports here:
// import MyCustomPage from './pages/custom';
// PRISM:PROTECTED:END

/** App name and description for branding */
const APP_NAME = "{{ project_title }}";
const APP_INITIAL = "{{ project_initial }}";
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const _APP_DESCRIPTION = "{{ project_description }}";

/** Shared layout with sidebar navigation */
function Layout({ children }: { children?: React.ReactNode }): ReactElement {
  const location = useLocation();{% if auth_enabled %}
  const { user, isAuthenticated, logout, hasRole } = useAuth();{% endif %}

  // Update document title based on route
  useEffect(() => {
    const path = location.pathname;
    let title = APP_NAME;
    if (path !== '{% if has_landing_page %}/dashboard{% else %}/{% endif %}') {
      const segment = path.split('/').filter(Boolean)[0];
      if (segment) {
        title = `${segment.charAt(0).toUpperCase() + segment.slice(1)} | ${APP_NAME}`;
      }
    }
    document.title = title;
  }, [location]);

  return (
    <div className="min-h-screen bg-surface">
      {/* Sidebar */}
      <aside className="fixed inset-y-0 left-0 w-64 bg-surface-elevated border-r border-border">
        <div className="flex flex-col h-full">
          {/* Logo */}
          <div className="flex items-center h-16 px-6 border-b border-border-light">
            <Link to="{% if has_landing_page %}/dashboard{% else %}/{% endif %}" className="flex items-center gap-2">
              <div className="w-8 h-8 bg-primary rounded-md flex items-center justify-center">
                <span className="text-white font-bold text-sm">{APP_INITIAL}</span>
              </div>
              <span className="font-semibold text-foreground">{APP_NAME}</span>
            </Link>
          </div>

          {/* Navigation */}
          <nav className="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
{{ nav_links_str }}
            {/* Custom route nav links */}
            {customRoutes
              .filter((r) => r.nav)
              .sort((a, b) => (a.nav?.order ?? 100) - (b.nav?.order ?? 100))
              .map((route) => (
                <NavLink
                  key={route.path}
                  to={route.path}
                  className={({ isActive }) =>
                    `flex items-center gap-3 px-3 py-2 rounded-nordic text-sm font-medium transition-colors ${
                      isActive
                        ? 'bg-nordic-100 text-nordic-900'
                        : 'text-nordic-600 hover:bg-nordic-50 hover:text-nordic-900'
                    }`
                  }
                >
                  {route.nav?.icon || (
                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
                    </svg>
                  )}
                  {route.nav?.label}
                </NavLink>
              ))}
            {/* PRISM:PROTECTED:START - Custom Nav Links */}
            {/* Add your custom navigation links here */}
            {/* PRISM:PROTECTED:END */}
          </nav>

          {/* Footer */}
          <div className="p-4 border-t border-border-light">
{% if dark_mode %}            <div className="flex items-center justify-between mb-3">
              <span className="text-xs text-muted">Theme</span>
              <ThemeToggle size="sm" />
            </div>
{% endif %}
{% if admin_panel_enabled %}            {hasRole && hasRole('admin') && (
              <div className="mb-3">
                <NavLink
                  to="{{ admin_path }}"
                  className={({ isActive }) =>
                    `flex items-center gap-1.5 px-2 py-1 rounded text-xs transition-colors ${
                      isActive
                        ? 'text-nordic-900 bg-nordic-100'
                        : 'text-muted hover:text-foreground hover:bg-surface-sunken'
                    }`
                  }
                >
                  <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                  </svg>
                  Admin
                </NavLink>
              </div>
            )}
{% endif %}
            {% if auth_enabled %}{isAuthenticated && user ? (
              <div className="space-y-2">
                <div className="flex items-center gap-2 px-2">
                  <div className="w-8 h-8 bg-surface-sunken rounded-full flex items-center justify-center">
                    <span className="text-muted-foreground text-xs font-medium">
                      {((user as { email?: string; username?: string }).email || (user as { email?: string; username?: string }).username || "U").charAt(0).toUpperCase()}
                    </span>
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="text-xs font-medium text-foreground truncate">
                      {(user as { email?: string; username?: string }).email || (user as { email?: string; username?: string }).username || "User"}
                    </p>
                  </div>
                </div>
                <button
                  onClick={logout}
                  className="w-full px-2 py-1.5 text-xs text-muted hover:text-foreground hover:bg-surface-sunken rounded transition-colors text-left"
                >
                  Sign out
                </button>
              </div>
            ) : (
              <p className="text-xs text-muted text-center">
                Built with Prism
              </p>
            )}{% else %}<p className="text-xs text-muted text-center">
              Built with Prism
            </p>{% endif %}
          </div>
        </div>
      </aside>

      {/* Main content */}
      <main className="pl-64">
        {children}
        <Outlet />
      </main>
    </div>
  );
}

/** Application router with all model routes */
export const router = createBrowserRouter([
{% if auth_enabled %}
{{ auth_routes_str }}
{% endif %}
{% if has_landing_page %}
  { path: '/', element: <LandingPage /> },
{% endif %}
  {
    element: <Layout />,
    children: [
{% if has_landing_page %}
      { path: '/dashboard', element: <ProtectedRoute><DashboardPage /></ProtectedRoute> },
{% elif auth_enabled %}
      { path: '/', element: <ProtectedRoute><DashboardPage /></ProtectedRoute> },
{% else %}
      { path: '/', element: <DashboardPage /> },
{% endif %}
{{ routes_str }}
      // Custom routes from routes/customRoutes.tsx
      ...customRoutes.map((r) => ({ path: r.path, element: r.element })),
      // PRISM:PROTECTED:START - Custom Routes
      // Add your custom routes here:
      // { path: '/custom', element: <MyCustomPage /> },
      // PRISM:PROTECTED:END
      { path: '*', element: <NotFoundPage /> },
    ],
  },
]);

export default router;
