import { Box } from '@mui/material';
import { alpha, useTheme } from '@mui/material/styles';
import Header from '@blocklet/ui-react/lib/Header';

interface LoadingViewProps {
  mode?: string;
}

// Pulsing dots — minimal loading indicator
function PulsingDots() {
  return (
    <Box sx={{ display: 'flex', gap: 2, mt: 4 }}>
      {[0, 1, 2].map((i) => (
        <Box
          key={i}
          sx={{
            width: 12,
            height: 12,
            borderRadius: '50%',
            bgcolor: 'primary.main',
            opacity: 0.4,
            animation: `pulse 1.4s ease-in-out ${i * 0.2}s infinite`,
            '@keyframes pulse': {
              '0%, 80%, 100%': { transform: 'scale(0.6)', opacity: 0.3 },
              '40%': { transform: 'scale(1)', opacity: 0.7 },
            },
          }}
        />
      ))}
    </Box>
  );
}

// Reuse the same blob decoration as error-view (without wireframe mesh for simplicity)
function LoadingDecoration() {
  return (
    <Box
      sx={{
        position: 'relative',
        width: { xs: 160, md: 200 },
        height: { xs: 160, md: 200 },
      }}>
      <Box
        sx={{
          position: 'absolute',
          inset: 0,
          borderRadius: '38% 62% 63% 37% / 41% 44% 56% 59%',
          background: (t) =>
            `linear-gradient(45deg, ${alpha(t.palette.primary.main, 0.1)}, ${alpha(t.palette.primary.main, 0.03)})`,
          filter: 'blur(1px)',
          animation: 'spin 20s linear infinite',
          '@keyframes spin': { from: { transform: 'rotate(0deg)' }, to: { transform: 'rotate(360deg)' } },
        }}
      />
      <Box
        sx={{
          position: 'absolute',
          inset: 0,
          borderRadius: '38% 62% 63% 37% / 41% 44% 56% 59%',
          background: (t) =>
            `linear-gradient(135deg, ${alpha(t.palette.primary.main, 0.07)}, ${alpha(t.palette.primary.main, 0.01)})`,
          filter: 'blur(1px)',
          transform: 'scale(0.88)',
          opacity: 0.6,
          animation: 'spinReverse 15s linear infinite',
          '@keyframes spinReverse': {
            from: { transform: 'scale(0.88) rotate(0deg)' },
            to: { transform: 'scale(0.88) rotate(-360deg)' },
          },
        }}
      />
    </Box>
  );
}

export default function LoadingView({ mode = 'inline' }: LoadingViewProps) {
  const isFullScreen = mode === 'standalone';
  const theme = useTheme();
  const primaryColor = theme.palette.primary.main;

  // Shared background — must match checkout-layout parent exactly
  const bgSx = {
    background: {
      xs: 'none',
      md: `linear-gradient(160deg, ${alpha(primaryColor, 0.03)} 0%, ${alpha(primaryColor, 0.07)} 50%, ${alpha(primaryColor, 0.04)} 100%)`,
    },
    bgcolor: (t: any) => (t.palette.mode === 'dark' ? 'background.default' : '#f8faff'),
  };

  // Centered content
  const centerContent = (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1,
      }}>
      <LoadingDecoration />
      <PulsingDots />
    </Box>
  );

  if (!isFullScreen) {
    return (
      <Box
        sx={{
          display: 'flex',
          width: '100%',
          minHeight: { xs: 400, md: 640 },
          maxWidth: 1120,
          mx: 'auto',
          borderRadius: '16px',
          overflow: 'hidden',
          boxShadow: 1,
          border: 1,
          borderColor: 'divider',
          borderLeft: '4px solid',
          borderLeftColor: 'primary.main',
          ...bgSx,
        }}>
        {centerContent}
      </Box>
    );
  }

  // Standalone (full-screen) mode
  return (
    <Box
      sx={{
        width: '100%',
        height: '100vh',
        minHeight: '100vh',
        display: 'flex',
        flexDirection: 'column',
        position: 'relative',
        overflow: 'hidden',
        ...bgSx,
      }}>
      {/* Header */}
      <Header
        sx={{
          position: 'absolute',
          top: 20,
          left: 0,
          right: 0,
          zIndex: 10,
          background: 'transparent',
          '& .header-container': { height: 'auto' },
        }}
        hideNavMenu
        brand={null}
        description={null}
        addons={(buildIns: any) =>
          buildIns.filter((addon: any) => ['locale-selector', 'theme-mode-toggle', 'session-user'].includes(addon.key))
        }
      />
      {centerContent}
    </Box>
  );
}