import { Suspense, lazy } from 'react';
import { RecoilRoot } from 'recoil';
import { ConfigProvider, Flex, Spin, App as AntdApp } from 'antd';
import { DebugObserver, ForbiddenAccessPage, NotFoundPage } from '@pos/base';
import { Navigate, Route, Routes } from 'react-router-dom';
import { APP_THEME } from '@pos/base/presentation/assets/themes';
import { LoadingOutlined } from '@ant-design/icons';

const AuthApp = lazy(() => import('./auth'));
const AppModule = lazy(() => import('./admin/index'));

export default function App() {
  return (
    <RecoilRoot>
      <DebugObserver />
      <ConfigProvider theme={APP_THEME.LIGHT}>
        <AntdApp>
          <Suspense
            fallback={
              <Flex align="center" justify="center" style={{ height: '100vh' }}>
                <Spin indicator={<LoadingOutlined style={{ fontSize: 48 }} spin />} />
              </Flex>
            }
          >
            <Routes>
              <Route path="/auth/*" element={<AuthApp />} />
              <Route path="/app/*" element={<AppModule />} />
              <Route path="/404" element={<NotFoundPage />} />
              <Route path="/403" element={<ForbiddenAccessPage />} />
              <Route path="*" element={<Navigate to="/app" />} />
            </Routes>
          </Suspense>
        </AntdApp>
      </ConfigProvider>
    </RecoilRoot>
  );
}