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 DeleteSweepOutlinedIcon from '@mui/icons-material/DeleteSweepOutlined';
import { PanelTile } from 'dashgui/panels';
import { LINE_COLUMNS, hasArticleLines } from './manifestConfig';
import ManifestFormLine from './ManifestFormLine';

class ManifestLines extends PureComponent {
  render() {
    const {
      lines,
      saving,
      linesColor,
      onLineChange,
      onAddLine,
      onRemoveLine,
      onRemoveAllLines,
      columns = LINE_COLUMNS,
      supplierArticlesMap = {},
      supplierArticlesByLineKey = {},
      supplierArticlesLoading = false,
      loadingLineKeys = {},
      onSkuBlur,
      onCreateArticle,
      onSearchArticle,
      onRemoveSupplierArticle,
      busySupplierArticleLineKeys = {},
      wide = 4,
      ledgerLinesById = {},
      onBookLine,
    } = this.props;

    const hasArticles = hasArticleLines(lines);

    return (
      <PanelTile
        wide={wide}
        minHeight={280}
        color={linesColor}
        title="Artikel"
        sx={{
          ...(wide >= 4 ? { gridColumn: { xs: '1 / -1', sm: '1 / -1', md: 'span 4' } } : {}),
          ...(!hasArticles
            ? {
                border: '1.5px solid',
                borderColor: 'error.main',
              }
            : {}),
        }}
      >
        <Stack spacing={1.5}>
          <TableContainer>
            <Table size="small" stickyHeader>
              <TableHead>
                <TableRow sx={{ '& th': { borderBottom: 'none', fontWeight: 700 } }}>
                  {columns.map((col) => (
                    <TableCell
                      key={col.id}
                      align={col.align}
                      sx={{
                        width: col.width,
                        whiteSpace: 'nowrap',
                        bgcolor: linesColor,
                        fontWeight: 700,
                        px: 1,
                        py: 0.75,
                      }}
                    >
                      {col.label}
                    </TableCell>
                  ))}
                  <TableCell padding="none" sx={{ bgcolor: linesColor, borderBottom: 'none', width: 40 }} />
                </TableRow>
              </TableHead>
              <TableBody>
                {Array.isArray(lines) &&
                  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);
                    const ledgerLine = line.id != null ? ledgerLinesById[line.id] : null;

                    return (
                      <ManifestFormLine
                        key={lineKey}
                        line={line.key != null ? line : { ...line, key: index }}
                        columns={columns}
                        saving={saving}
                        supplierArticle={matched}
                        loading={Boolean(isLineLoading)}
                        supplierArticleBusy={Boolean(busySupplierArticleLineKeys[lineKey])}
                        onChange={onLineChange}
                        onRemove={onRemoveLine}
                        onSkuBlur={onSkuBlur}
                        onCreateArticle={onCreateArticle}
                        onSearchArticle={onSearchArticle}
                        onRemoveSupplierArticle={onRemoveSupplierArticle}
                        ledgerLine={ledgerLine}
                        onBookLine={onBookLine}
                      />
                    );
                  })}
              </TableBody>
            </Table>
          </TableContainer>
          <Box sx={{ display: 'flex', gap: 1.5, alignItems: 'center' }}>
            <Button
              size="small"
              startIcon={<AddIcon />}
              disabled={saving}
              onClick={onAddLine}
            >
              Zeile hinzufügen
            </Button>
            <Button
              size="small"
              color="error"
              startIcon={<DeleteSweepOutlinedIcon />}
              disabled={saving || !lines || lines.length === 0}
              onClick={onRemoveAllLines}
            >
              Alle Zeilen entfernen
            </Button>
          </Box>
        </Stack>
      </PanelTile>
    );
  }
}

export default ManifestLines;