import React, { PureComponent } from 'react';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogActions from '@mui/material/DialogActions';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import CreateNewFolderRoundedIcon from '@mui/icons-material/CreateNewFolderRounded';
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';

export default class VfsNewFolderDialog extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      folderName: '',
      error: '',
    };
  }

  componentDidUpdate(prevProps) {
    if (!prevProps.open && this.props.open) {
      this.setState({ folderName: '', error: '' });
    }
  }

  handleSubmit = (e) => {
    e?.preventDefault();
    const raw = this.state.folderName.trim();
    if (!raw) {
      this.setState({ error: 'Bitte gib einen Ordnernamen ein.' });
      return;
    }
    if (raw.includes('..') || raw.includes('\\')) {
      this.setState({ error: 'Ungültige Zeichen im Ordnernamen.' });
      return;
    }

    const clean = raw.replace(/^[/\\]+/, '').replace(/[/\\]+$/, '');
    const parent = String(this.props.parentFolder || '').trim().replace(/^[/\\]+/, '').replace(/[/\\]+$/, '');
    const fullPath = parent ? `${parent}/${clean}` : clean;

    this.props.onCreate?.(fullPath);
  };

  render() {
    const { open, onClose, isCreating, parentFolder } = this.props;
    const { folderName, error } = this.state;
    const cleanParent = String(parentFolder || '').trim().replace(/^[/\\]+/, '').replace(/[/\\]+$/, '');

    return (
      <Dialog
        open={open}
        onClose={onClose}
        maxWidth="xs"
        fullWidth
        sx={{ zIndex: (theme) => theme.zIndex.modal + 20 }}
        slotProps={{
          paper: { sx: { borderRadius: 3, p: 1 } },
        }}
      >
        <DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1.2, pb: 1 }}>
          <CreateNewFolderRoundedIcon color="primary" />
          <Typography variant="h6" fontWeight={700}>
            Neuen Ordner erstellen
          </Typography>
        </DialogTitle>

        <form onSubmit={this.handleSubmit} noValidate autoComplete="off">
          <DialogContent sx={{ pt: 1 }}>
            {cleanParent && (
              <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 1, fontFamily: 'monospace' }}>
                In: {cleanParent}/
              </Typography>
            )}
            <SingleLineTextEdit
              autoFocus
              fullWidth
              size="small"
              label=""
              value={folderName}
              onChange={(nextVal) => this.setState({ folderName: nextVal, error: '' })}
              error={Boolean(error)}
              helperText={error}
              disabled={isCreating}
            />
          </DialogContent>

          <DialogActions sx={{ px: 3, pb: 2, pt: 1 }}>
            <Button onClick={onClose} disabled={isCreating} color="inherit">
              Abbrechen
            </Button>
            <Button
              type="submit"
              variant="contained"
              disabled={isCreating || !folderName.trim()}
              sx={{ borderRadius: 2 }}
            >
              {isCreating ? 'Erstelle…' : 'Erstellen'}
            </Button>
          </DialogActions>
        </form>
      </Dialog>
    );
  }
}