/**
 * React Router configuration with Nordic-styled layout.
 *
 * ⚠️ AUTO-GENERATED BY PRISM
 * Generated sections will be updated on `prism 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 }}

// 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 } = useAuth();{% endif %}

  // Update document title based on route
  useEffect(() => {
    const path = location.pathname;
    let title = APP_NAME;
    if (path !== '/') {
      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="/" 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 }}
            {/* 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 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 any).email || (user as any).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 any).email || (user as any).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>
  );
}

/** Home page with welcome message */
function HomePage(): ReactElement {
  return (
    <div className="page-container">
      <div className="card p-8 text-center">
        <div className="w-16 h-16 bg-surface-sunken rounded-full flex items-center justify-center mx-auto mb-4">
          <svg className="w-8 h-8 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
          </svg>
        </div>
        <h1 className="text-2xl font-semibold text-foreground mb-2">Welcome</h1>
        <p className="text-muted max-w-md mx-auto">
          Select an item from the sidebar to get started.
        </p>
      </div>
    </div>
  );
}

/** Application router with all model routes */
export const router = createBrowserRouter([
  {
    element: <Layout />,
    children: [
      { path: '/', element: <HomePage /> },
{{ routes_str }}
      // PRISM:PROTECTED:START - Custom Routes
      // Add your custom routes here:
      // { path: '/custom', element: <MyCustomPage /> },
      // PRISM:PROTECTED:END
    ],
  },
]);

export default router;
