import React from 'react';
import { Box, Typography, Button, CircularProgress } from '@mui/material';

const MaintenancePage = ({ onRetry, checking }) => {
  return (
    <Box sx={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: 'background.default', p: 3 }}>
      <Box sx={{ maxWidth: 640, textAlign: 'center' }}>
        <Typography variant="h4" sx={{ mb: 2, fontWeight: 'bold' }}>EhChadServices is currently under maintenance</Typography>
        <Typography sx={{ mb: 2 }}>We're checking the service status and will reload automatically when the backend is available. Please check back in a few moments.</Typography>
        <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 2, mt: 2 }}>
          <CircularProgress size={40} />
          <Typography>{checking ? 'Checking...' : 'Idle'}</Typography>
        </Box>
        <Box sx={{ mt: 3 }}>
          <Button variant="contained" onClick={onRetry}>Retry now</Button>
        </Box>
      </Box>
    </Box>
  );
};

export default MaintenancePage;