dashfront/src/pages/lieferung/lieferanten.jsx

import { PureComponent } from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import CircularProgress from '@mui/material/CircularProgress';
import IconButton from '@mui/material/IconButton';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import StorefrontIcon from '@mui/icons-material/Storefront';
import { enqueueSnackbar } from 'notistack';
import BackendError from '../../components/BackendError';
import SingleLineTextEdit from '../../components/SingleLineTextEdit';
import { PanelTile, PanelTileGrid } from '../../components/panels';
import { StorageManagerContext } from '../../api/storageManagerContext';
import { requireDefined, requireObject } from '../../utils/apiShape';
import { backendErrorFrom } from '../../utils/backendError';
import { notifyError } from '../../utils/notify';

function sortSuppliers(suppliers) {
  return [...suppliers].sort((a, b) =>
    String(a.name).localeCompare(String(b.name), 'de'),
  );
}

function draftsFrom(suppliers) {
  return Object.fromEntries(suppliers.map((row) => [row.id, row.name]));
}

class LieferungLieferantenPage extends PureComponent {
  static contextType = StorageManagerContext;

  constructor(props) {
    super(props);
    this.state = {
      status: 'loading',
      error: null,
      suppliers: [],
      drafts: {},
      newName: '',
      busyKey: null,
    };
    this._cancelled = false;
    this.handleCreate = this.handleCreate.bind(this);
    this.handleRetry = this.handleRetry.bind(this);
    this.loadSuppliers = this.loadSuppliers.bind(this);
  }

  componentDidMount() {
    this._cancelled = false;
    void this.loadSuppliers();
  }

  componentWillUnmount() {
    this._cancelled = true;
  }

  applySuppliers(suppliers) {
    const sorted = sortSuppliers(suppliers);
    this.setState({
      status: 'ready',
      error: null,
      suppliers: sorted,
      drafts: draftsFrom(sorted),
    });
  }

  async loadSuppliers() {
    this.setState({ status: 'loading', error: null });
    try {
      const list = this.context.suppliers ?? (await this.context.supplierPromise);
      if (this._cancelled) return;
      this.applySuppliers(list);
    } catch (err) {
      if (this._cancelled) return;
      this.setState({ status: 'failed', error: backendErrorFrom(err) });
    }
  }

  handleRetry() {
    void this.loadSuppliers();
  }

  async refreshFromServer() {
    const list = await this.context.updateSupplier();
    if (this._cancelled) return;
    this.applySuppliers(list);
  }

  async handleCreate() {
    const name = this.state.newName.trim();
    if (!name || this.state.busyKey != null) return;

    this.setState({ busyKey: 'new' });
    try {
      const data = await this.context.supplier.create({ name });
      requireObject(data, 'POST /api/supplier');
      requireObject(data.supplier, 'supplier');
      requireDefined(data.supplier.id, 'supplier.id');
      await this.refreshFromServer();
      if (this._cancelled) return;
      this.setState({ newName: '', busyKey: null });
      enqueueSnackbar('Lieferant angelegt.', { variant: 'success' });
    } catch (err) {
      if (this._cancelled) return;
      notifyError(err);
      this.setState({ busyKey: null });
    }
  }

  async handleRename(supplier) {
    const draft = String(this.state.drafts[supplier.id] ?? '').trim();
    if (!draft) {
      this.setState((prev) => ({
        drafts: { ...prev.drafts, [supplier.id]: supplier.name },
      }));
      return;
    }
    if (draft === supplier.name || this.state.busyKey != null) return;

    this.setState({ busyKey: supplier.id });
    try {
      const data = await this.context.supplier.update(supplier.id, { name: draft });
      requireObject(data, 'PATCH /api/supplier/:id');
      requireObject(data.supplier, 'supplier');
      requireDefined(data.supplier.id, 'supplier.id');
      await this.refreshFromServer();
      if (this._cancelled) return;
      this.setState({ busyKey: null });
      enqueueSnackbar('Lieferant gespeichert.', { variant: 'success' });
    } catch (err) {
      if (this._cancelled) return;
      notifyError(err);
      this.setState((prev) => ({
        busyKey: null,
        drafts: { ...prev.drafts, [supplier.id]: supplier.name },
      }));
    }
  }

  async handleDelete(supplier) {
    if (this.state.busyKey != null) return;
    if (!window.confirm(`Lieferant „${supplier.name}“ wirklich löschen?`)) {
      return;
    }

    this.setState({ busyKey: supplier.id });
    try {
      await this.context.supplier.delete(supplier.id);
      await this.refreshFromServer();
      if (this._cancelled) return;
      this.setState({ busyKey: null });
      enqueueSnackbar('Lieferant gelöscht.', { variant: 'success' });
    } catch (err) {
      if (this._cancelled) return;
      notifyError(err);
      this.setState({ busyKey: null });
    }
  }

  render() {
    const { status, error, suppliers, drafts, newName, busyKey } = this.state;
    const busy = busyKey != null;

    if (status === 'loading') {
      return (
        <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
          <CircularProgress />
        </Box>
      );
    }

    if (status === 'failed') {
      return (
        <BackendError error={error} onRetry={this.handleRetry} />
      );
    }

    return (
      <PanelTileGrid>
        <PanelTile wide={2} minHeight={280} color="#bbf7d0">
          <Stack spacing={2}>
            <Typography variant="body2" color="text.secondary">
              Lieferanten der ausgewählten Firma.
            </Typography>

            <List dense disablePadding>
              {suppliers.length === 0 ? (
                <Typography variant="body2" color="text.secondary" sx={{ py: 1 }}>
                  Noch keine Lieferanten.
                </Typography>
              ) : (
                suppliers.map((supplier) => (
                  <ListItem
                    key={supplier.id}
                    disableGutters
                    sx={{ gap: 1, py: 0.75, alignItems: 'center' }}
                  >
                    <StorefrontIcon sx={{ color: 'text.secondary', fontSize: 20, flexShrink: 0 }} />
                    <SingleLineTextEdit
                      size="small"
                      label=""
                      value={drafts[supplier.id] ?? ''}
                      disabled={busy}
                      onChange={(next) =>
                        this.setState((prev) => ({
                          drafts: { ...prev.drafts, [supplier.id]: next },
                        }))
                      }
                      onBlur={() => void this.handleRename(supplier)}
                      onKeyDown={(event) => {
                        if (event.key === 'Enter') {
                          event.preventDefault();
                          event.target.blur();
                        }
                        if (event.key === 'Escape') {
                          event.preventDefault();
                          this.setState((prev) => ({
                            drafts: { ...prev.drafts, [supplier.id]: supplier.name },
                          }));
                          event.target.blur();
                        }
                      }}
                      sx={{ flex: 1 }}
                    />
                    <IconButton
                      edge="end"
                      size="small"
                      aria-label={`„${supplier.name}“ löschen`}
                      disabled={busy}
                      onClick={() => void this.handleDelete(supplier)}
                    >
                      <DeleteOutlinedIcon fontSize="small" />
                    </IconButton>
                  </ListItem>
                ))
              )}
            </List>

            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
              <SingleLineTextEdit
                size="small"
                label="Neuer Lieferant"
                value={newName}
                disabled={busy}
                onChange={(next) => this.setState({ newName: next })}
                onKeyDown={(event) => {
                  if (event.key === 'Enter') {
                    event.preventDefault();
                    void this.handleCreate();
                  }
                }}
                sx={{ flex: 1 }}
              />
              <Button
                variant="contained"
                size="small"
                disabled={busy || !newName.trim()}
                onClick={() => void this.handleCreate()}
              >
                {busyKey === 'new' ? '…' : 'Hinzufügen'}
              </Button>
            </Box>
          </Stack>
        </PanelTile>
      </PanelTileGrid>
    );
  }
}

export default LieferungLieferantenPage;