dashfront/src/components/kunde/Kunde.jsx

import { PureComponent } from 'react';
import Box from '@mui/material/Box';
import Chip from '@mui/material/Chip';
import IconButton from '@mui/material/IconButton';
import ListItem from '@mui/material/ListItem';
import Tooltip from '@mui/material/Tooltip';
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
import PersonOutlinedIcon from '@mui/icons-material/PersonOutlined';
import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
import { enqueueSnackbar } from 'notistack';
import { router } from '../../appRouter';
import entityAutomat from '../../automats/entityAutomat';
import { notifyError } from '../../utils/notify';

function getCustomerDisplayName(item) {
  if (!item) return '';
  return [item.firstName, item.name].filter(Boolean).join(' ') || item.name || '';
}

class Kunde extends PureComponent {
  constructor(props) {
    super(props);
    const item = props.customer ?? props.item;
    this.state = {
      draft: getCustomerDisplayName(item),
    };
  }

  componentDidUpdate(prevProps) {
    const prevItem = prevProps.customer ?? prevProps.item;
    const item = this.props.customer ?? this.props.item;
    const prevName = getCustomerDisplayName(prevItem);
    const nextName = getCustomerDisplayName(item);

    if (prevName !== nextName) {
      this.setState({ draft: nextName });
    } else if (prevProps.disabled && !this.props.disabled) {
      if (this.state.draft !== nextName) {
        this.setState({ draft: nextName });
      }
    }
  }

  handleChange = (next) => {
    this.setState({ draft: next });
    const item = this.props.customer ?? this.props.item;
    this.props.onChange?.(next, item);
  };

  handleBlur = () => {
    const item = this.props.customer ?? this.props.item;
    if (!item) return;

    const draft = this.state.draft.trim();
    const currentDisplay = getCustomerDisplayName(item);
    if (!draft) {
      this.setState({ draft: currentDisplay });
      return;
    }
    if (draft !== currentDisplay) {
      void this.renameCustomer(item, draft);
    }
  };

  async renameCustomer(item, rawText) {
    const trimmed = rawText.trim();
    if (!trimmed) return;
    let name = trimmed;
    let firstName = null;

    if (trimmed.includes(',')) {
      const parts = trimmed.split(',').map((p) => p.trim());
      name = parts[0];
      firstName = parts.slice(1).join(' ') || null;
    } else if (trimmed.includes(' ') && !/gmbh|ag|kg|ug|inc|ltd|co\./i.test(trimmed)) {
      const parts = trimmed.split(' ');
      firstName = parts[0];
      name = parts.slice(1).join(' ');
    }

    try {
      await entityAutomat.actions.update(item.id, { name, firstName });
      enqueueSnackbar('Kunde gespeichert.', { variant: 'success' });
    } catch (err) {
      this.setState({ draft: getCustomerDisplayName(item) });
      notifyError(err);
    }
  }

  handleKeyDown = (event) => {
    const item = this.props.customer ?? this.props.item;
    if (event.key === 'Enter') {
      event.preventDefault();
      event.target.blur();
    }
    if (event.key === 'Escape') {
      event.preventDefault();
      this.setState({ draft: getCustomerDisplayName(item) });
      event.target.blur();
    }
  };

  handleDelete = () => {
    const item = this.props.customer ?? this.props.item;
    if (!item) return;
    const displayName = getCustomerDisplayName(item) || String(item.number ?? item.id);

    if (!window.confirm(`Kunde „${displayName}“ wirklich löschen?`)) return;
    void (async () => {
      try {
        await entityAutomat.actions.remove(item.id);
        enqueueSnackbar('Kunde gelöscht.', { variant: 'success' });
      } catch (err) {
        notifyError(err);
      }
    })();
  };

  render() {
    const { disabled, sx, groupName, onEdit } = this.props;
    const item = this.props.customer ?? this.props.item;
    const { draft } = this.state;
    const displayName = getCustomerDisplayName(item) || String(item?.number ?? '');

    const handleOpenEdit = () => {
      if (!item) return;
      if (onEdit) onEdit(item);
      else void router.navigate(`/kunde/${item.id}`);
    };

    return (
      <ListItem
        disableGutters
        data-id={item?.id}
        sx={{ gap: 1, py: 0.75, alignItems: 'center', width: '100%', minWidth: 0, ...sx }}
      >
        <Tooltip title="Kunde öffnen">
          <IconButton
            aria-label={`„${displayName}“ öffnen`}
            disabled={disabled || !item}
            onClick={handleOpenEdit}
            sx={{ width: 40, height: 40, flexShrink: 0 }}
          >
            <PersonOutlinedIcon sx={{ fontSize: 24 }} />
          </IconButton>
        </Tooltip>

        <SingleLineTextEdit
          size="small"
          label=""
          value={draft}
          disabled={disabled || !item}
          onChange={this.handleChange}
          onBlur={this.handleBlur}
          onKeyDown={this.handleKeyDown}
          sx={{ flex: 1, minWidth: 0 }}
        />

        {item?.number ? (
          <Chip
            size="small"
            label={item.number}
            sx={{
              height: 24,
              fontSize: '0.75rem',
              fontWeight: 600,
              fontFamily: 'monospace',
              fontVariantNumeric: 'tabular-nums',
              bgcolor: 'action.hover',
              color: 'text.primary',
              flexShrink: 0,
              '& .MuiChip-label': {
                px: 0.75,
                textAlign: 'center',
              },
            }}
          />
        ) : null}

        {groupName ? (
          <Chip
            size="small"
            label={groupName}
            sx={{
              height: 24,
              fontSize: '0.75rem',
              bgcolor: 'action.hover',
              color: 'text.secondary',
              flexShrink: 0,
              display: { xs: 'none', sm: 'inline-flex' },
              '& .MuiChip-label': {
                px: 0.75,
              },
            }}
          />
        ) : null}

        <Tooltip title="Details bearbeiten">
          <IconButton
            aria-label={`„${displayName}“ bearbeiten`}
            disabled={disabled || !item}
            onClick={handleOpenEdit}
            sx={{ width: 40, height: 40, flexShrink: 0 }}
          >
            <EditOutlinedIcon sx={{ fontSize: 22 }} />
          </IconButton>
        </Tooltip>

        <IconButton
          aria-label={`„${displayName}“ löschen`}
          disabled={disabled || !item}
          onClick={this.handleDelete}
          sx={{ width: 40, height: 40, flexShrink: 0 }}
        >
          <DeleteOutlinedIcon sx={{ fontSize: 24 }} />
        </IconButton>
      </ListItem>
    );
  }
}

export { getCustomerDisplayName };
export default Kunde;