import { useState, Suspense, useMemo } from 'react';
import { createBrowserRouter, RouterProvider, Navigate } from 'react-router-dom';
import { ThemeProvider, DensityType } from '@repo/ui/provider';
import { AgGridProvider } from '@repo/ui/components';
import { useThemeStore } from './core/stores/theme.store';
import ShowcaseLayout from './layouts/ShowcaseLayout';

// Pages
import UiComponentsPage from './pages/ui-components';
import FormsPage from './pages/forms';
import StoragePage from './pages/storage';
import EventsPage from './pages/events';
import HardwarePage from './pages/hardware';
import RbacPage from './pages/rbac';
import AuthPage from './pages/auth';
import ShellDemoPage from './pages/shell-demo';
import ActionToolsPage from './pages/action-tools';
import AgGridPage from './pages/ag-grid';

export default function App() {
  const colorScheme = useThemeStore((s) => s.colorScheme);
  const [density, setDensity] = useState<DensityType>('compact');

  const router = useMemo(() => createBrowserRouter([
    {
      path: "/",
      element: <ShowcaseLayout density={density} setDensity={setDensity} />,
      children: [
        { index: true, element: <Navigate to="/ui-components" replace /> },
        { path: "ui-components", element: <UiComponentsPage /> },
        { path: "forms", element: <FormsPage /> },
        { path: "storage", element: <StoragePage /> },
        { path: "events", element: <EventsPage /> },
        { path: "hardware", element: <HardwarePage /> },
        { path: "rbac", element: <RbacPage /> },
        { path: "auth", element: <AuthPage /> },
        { path: "action-tools", element: <ActionToolsPage /> },
        { path: "ag-grid", element: <AgGridPage /> },
      ]
    },
    { path: "/shell-demo", element: <ShellDemoPage /> }
  ]), [density]);

  return (
    <ThemeProvider colorScheme={colorScheme} density={density}>
      <AgGridProvider bypassLicense>
        <Suspense fallback={<div>Loading...</div>}>
          <RouterProvider router={router} />
        </Suspense>
      </AgGridProvider>
    </ThemeProvider>
  );
}