import { Box, Button, Dialog, Text, color, config } from 'folds';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { AuthSplashScreen } from './auth/AuthSplashScreen';

export function ConfigConfigLoading() {
  return <AuthSplashScreen />;
}

// Element Web's pattern: blocking ErrorView with retry-only on config failure.
// Continuing past a missing config produces a half-broken login (empty
// homeserverList → no server allowed) and is worse UX than asking the user
// to retry. The 10s fetch timeout in ClientConfigLoader already filters out
// transient network blips so this modal only fires on real outages.
type ConfigConfigErrorProps = {
  error: unknown;
  retry: () => void;
};
export function ConfigConfigError({ error, retry }: ConfigConfigErrorProps) {
  const { t } = useTranslation();
  return (
    <AuthSplashScreen>
      <Box grow="Yes" direction="Column" gap="400" alignItems="Center" justifyContent="Center">
        <Dialog>
          <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
            <Box direction="Column" gap="100">
              <Text>{t('Boot.config_load_failed')}</Text>
              {typeof error === 'object' &&
                error &&
                'message' in error &&
                typeof error.message === 'string' && (
                  <Text size="T300" style={{ color: color.Critical.Main }}>
                    {error.message}
                  </Text>
                )}
            </Box>
            <Button variant="Critical" onClick={retry}>
              <Text as="span" size="B400">
                {t('Boot.retry')}
              </Text>
            </Button>
          </Box>
        </Dialog>
      </Box>
    </AuthSplashScreen>
  );
}