import { PureComponent } from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogActions from '@mui/material/DialogActions';
import CircularProgress from '@mui/material/CircularProgress';
import SystemUpdateAltIcon from '@mui/icons-material/SystemUpdateAlt';
import AppDialog from './AppDialog';
import pwaAutomat from '../automats/pwaAutomat';

/**
 * PWA Update prompt dialog.
 * Appears when a new service worker update has been downloaded in the background.
 * Allows the user to reload the page to apply the update immediately,
 * or postpone it ("Später") without losing ongoing form input.
 */
export default class PwaUpdateDialog extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      dialogOpen: pwaAutomat.state.dialogOpen,
      updating: pwaAutomat.state.updating,
    };
    this.handleUpdate = this.handleUpdate.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

  componentDidMount() {
    this.unsub = pwaAutomat.subscribe(this, ['dialogOpen', 'updating']);
  }

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

  handleClose() {
    if (this.state.updating) return;
    pwaAutomat.actions.closeDialog();
  }

  handleUpdate() {
    pwaAutomat.actions.applyUpdate();
  }

  render() {
    const { dialogOpen, updating } = this.state;

    return (
      <AppDialog
        open={dialogOpen}
        onClose={this.handleClose}
        maxWidth="xs"
        fullWidth
        aria-labelledby="pwa-update-dialog-title"
      >
        <DialogTitle
          id="pwa-update-dialog-title"
          sx={{ display: 'flex', alignItems: 'center', gap: 1.5, pb: 1 }}
        >
          <Box
            sx={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              width: 38,
              height: 38,
              borderRadius: '50%',
              bgcolor: 'primary.main',
              color: 'primary.contrastText',
            }}
          >
            <SystemUpdateAltIcon fontSize="small" />
          </Box>
          Aktualisierung verfügbar
        </DialogTitle>

        <DialogContent>
          <DialogContentText sx={{ color: 'text.primary', mb: 1, fontWeight: 500 }}>
            Eine neue Version von <strong>Dashfront</strong> ist bereit.
          </DialogContentText>
          <DialogContentText variant="body2" color="text.secondary">
            Möchten Sie die Anwendung jetzt neu laden, um die Änderungen zu übernehmen?
            Stellen Sie sicher, dass wichtige Eingaben gespeichert sind.
          </DialogContentText>
        </DialogContent>

        <DialogActions sx={{ px: 3, pb: 2.5, pt: 1, gap: 1 }}>
          <Button
            onClick={this.handleClose}
            color="inherit"
            disabled={updating}
            sx={{ textTransform: 'none' }}
          >
            Später
          </Button>
          <Button
            onClick={this.handleUpdate}
            variant="contained"
            disabled={updating}
            startIcon={
              updating ? <CircularProgress size={16} color="inherit" /> : null
            }
            autoFocus
            sx={{ textTransform: 'none', px: 2 }}
          >
            {updating ? 'Aktualisiere…' : 'Jetzt neu laden'}
          </Button>
        </DialogActions>
      </AppDialog>
    );
  }
}