import { Suspense, lazy } from 'react';
import { RecoilRoot } from 'recoil';
import { ConfigProvider, Flex, Spin } 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 PrivateApp = lazy(() => import('./admin'));

export default function App() {
  return (
    <RecoilRoot>
      <DebugObserver />
      <ConfigProvider theme={APP_THEME.LIGHT}>
        <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={<PrivateApp />} />
            <Route path="/404" element={<NotFoundPage />} />
            <Route path="/403" element={<ForbiddenAccessPage />} />
            <Route path="*" element={<Navigate to="/app" />} />
          </Routes>
        </Suspense>
      </ConfigProvider>
    </RecoilRoot>
  );
}
