import { PureComponent, lazy, Suspense } from 'react';
import Alert from '@mui/material/Alert';
import Box from '@mui/material/Box';
import CircularProgress from '@mui/material/CircularProgress';
import authAutomat from './automats/authAutomat';
import LoginPage from './components/LoginPage';

const CompanySetupDialog = lazy(() => import('./components/CompanySetupDialog'));
const AppRouter = lazy(() => import('./appRouter'));
const OAuthAuthorizePage = lazy(() => import('./routes/oauth/OAuthAuthorizePage'));
const SseMonitor = import.meta.env.DEV
  ? lazy(() => import('./devtools/SseMonitor'))
  : null;

function PageFallback() {
  return (
    <Box
      sx={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1,
        minHeight: 200,
      }}
    >
      <CircularProgress />
    </Box>
  );
}

class App extends PureComponent {
  constructor(props) {
    super(props);
    this.state = authAutomat.state;
  }

  componentDidMount() {
    this.unsubscribe = authAutomat.subscribe(this, [
      'status',
      'user',
      'hasAuth',
      'hasCompany',
      'retryNotification',
    ]);
  }

  componentWillUnmount() {
    this.unsubscribe?.();
  }

  render() {
    const { status, user, hasAuth, hasCompany, retryNotification } = this.state;
    const isAuthed = Boolean(hasAuth ?? (status === 'authed' && user));
    const isCompanySelected = Boolean(hasCompany ?? (isAuthed && user?.selectedCompanyId != null));

    if (status === 'loading') {
      return (
        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            minHeight: 'var(--df-vh, 100vh)',
            bgcolor: 'background.default',
            gap: 2.5,
            p: 2,
          }}
        >
          {retryNotification ? (
            <Alert
              severity="warning"
              variant="outlined"
              sx={{
                maxWidth: 480,
                alignItems: 'center',
                bgcolor: 'background.paper',
                boxShadow: 1,
              }}
            >
              {retryNotification}
            </Alert>
          ) : null}
          <CircularProgress />
        </Box>
      );
    }

    if (!isAuthed) {
      if (typeof window !== 'undefined' && window.location.pathname === '/oauth/authorize') {
        const returnTo = encodeURIComponent(window.location.pathname + window.location.search);
        window.history.replaceState(null, '', `/login?returnTo=${returnTo}`);
      }
      return <LoginPage />;
    }

    const isOAuthAuthorize =
      typeof window !== 'undefined' && window.location.pathname === '/oauth/authorize';

    return (
      <>
        <Suspense fallback={<PageFallback />}>
          {!isCompanySelected ? (
            isOAuthAuthorize ? (
              <OAuthAuthorizePage />
            ) : (
              <CompanySetupDialog />
            )
          ) : (
            <AppRouter />
          )}
        </Suspense>
        {SseMonitor ? (
          <Suspense fallback={null}>
            <SseMonitor />
          </Suspense>
        ) : null}
      </>
    );
  }
}

export default App;