import { PureComponent } from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import AddIcon from '@mui/icons-material/Add';
import { PanelTile } from 'dashgui/panels';
import { LINE_COLUMNS } from './manifestConfig';
import ManifestFormLine from './ManifestFormLine';

class ManifestLines extends PureComponent {
  render() {
    const {
      lines,
      saving,
      linesColor,
      onLineChange,
      onAddLine,
      onRemoveLine,
      onSave,
      columns = LINE_COLUMNS,
      supplierArticlesMap = {},
      supplierArticlesByLineKey = {},
      supplierArticlesLoading = false,
      loadingLineKeys = {},
      onSkuBlur,
      onCreateArticle,
    } = this.props;

    return (
      <PanelTile wide={3} minHeight={280} color={linesColor} title="Artikel">
        <Stack spacing={1.5}>
          <TableContainer>
            <Table size="small" stickyHeader>
              <TableHead>
                <TableRow>
                  {columns.map((col) => (
                    <TableCell
                      key={col.id}
                      align={col.align}
                      sx={{
                        width: col.width,
                        whiteSpace: 'nowrap',
                        bgcolor: linesColor,
                      }}
                    >
                      {col.label}
                    </TableCell>
                  ))}
                  <TableCell padding="checkbox" sx={{ bgcolor: linesColor }} />
                </TableRow>
              </TableHead>
              <TableBody>
                {lines.map((line, index) => {
                  const lineKey = line.key ?? index;
                  const rawSku = line.sku != null ? String(line.sku).trim() : '';
                  const matched =
                    supplierArticlesByLineKey[lineKey] ||
                    (rawSku ? supplierArticlesMap[rawSku.toLowerCase()] || supplierArticlesMap[rawSku] : null);
                  const isLineLoading =
                    loadingLineKeys[lineKey] ||
                    (supplierArticlesLoading && !matched);

                  return (
                    <ManifestFormLine
                      key={lineKey}
                      line={line.key != null ? line : { ...line, key: index }}
                      columns={columns}
                      saving={saving}
                      supplierArticle={matched}
                      loading={Boolean(isLineLoading)}
                      onChange={onLineChange}
                      onRemove={onRemoveLine}
                      onSkuBlur={onSkuBlur}
                      onCreateArticle={onCreateArticle}
                    />
                  );
                })}
              </TableBody>
            </Table>
          </TableContainer>
          <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
            <Button
              size="small"
              startIcon={<AddIcon />}
              disabled={saving}
              onClick={onAddLine}
            >
              Zeile hinzufügen
            </Button>
            <Box sx={{ flex: 1 }} />
            <Button
              variant="contained"
              size="small"
              disabled={saving}
              onClick={onSave}
            >
              {saving ? 'Speichern…' : 'Speichern'}
            </Button>
          </Box>
        </Stack>
      </PanelTile>
    );
  }
}

export default ManifestLines;