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 DriveFileRenameOutlineRoundedIcon from '@mui/icons-material/DriveFileRenameOutlineRounded';
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';

export default class VfsRenameDialog extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      targetPath: props.item?.path || '',
      error: '',
    };
  }

  componentDidUpdate(prevProps) {
    if (!prevProps.open && this.props.open) {
      this.setState({
        targetPath: this.props.item?.path || '',
        error: '',
      });
    }
  }

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

    const cleanNew = raw.replace(/^[/\\]+/, '').replace(/[/\\]+$/, '');
    const cleanOld = String(this.props.item?.path || '').replace(/^[/\\]+/, '').replace(/[/\\]+$/, '');

    if (cleanNew === cleanOld) {
      this.props.onClose?.();
      return;
    }

    this.props.onRename?.(cleanOld, cleanNew);
  };

  render() {
    const { open, onClose, isRenaming, item } = this.props;
    const { targetPath, error } = this.state;
    const isDir = Boolean(item?.isDirectory);

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

        <form onSubmit={this.handleSubmit} noValidate autoComplete="off">
          <DialogContent sx={{ pt: 1 }}>
            <SingleLineTextEdit
              autoFocus
              fullWidth
              size="small"
              label=""
              value={targetPath}
              onChange={(nextVal) => this.setState({ targetPath: nextVal, error: '' })}
              error={Boolean(error)}
              helperText={error}
              disabled={isRenaming}
            />
          </DialogContent>

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