FPSMS-frontend/src/components/ProductionProcess/MaterialLotScanner.tsx

"use client";
import React, { useState, useRef, useEffect } from "react";
import { Material, MaterialDatabase } from "./types";
import {
  Box,
  Typography,
  TextField,
  Paper,
  Stack,
  Button,
  IconButton,
  Chip,
} from "@mui/material";
import CheckIcon from "@mui/icons-material/Check";
import CloseIcon from "@mui/icons-material/Close";

interface MaterialLotScannerProps {
  materials: Material[];
  onMaterialsChange: (materials: Material[]) => void;
  error?: string;
}

const MaterialLotScanner: React.FC<MaterialLotScannerProps> = ({
  materials,
  onMaterialsChange,
  error,
}) => {
  const [materialScanInput, setMaterialScanInput] = useState<string>("");
  const materialScanRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (materialScanRef.current) {
      materialScanRef.current.focus();
    }
  }, []);

  const handleMaterialInputChange = (
    e: React.ChangeEvent<HTMLInputElement>,
  ) => {
    setMaterialScanInput(e.target.value.trim());
  };

  const handleMaterialInputKeyPress = async (
    e: React.KeyboardEvent<HTMLInputElement>,
  ) => {
    if (e.key === "Enter") {
      const target = e.target as HTMLInputElement;
      const scannedLot = target.value.trim();
      if (scannedLot) {
        const response = await fetch(
          "http://your-backend-url.com/validateLot",
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({ lot: scannedLot }),
          },
        );
        const data = await response.json();
        if (data.suggestedLot) {
          const updatedMaterials = materials.map((material) => {
            if (material.name === data.matchedMaterial.name) {
              const isAlreadyAdded = material.lotNumbers.includes(scannedLot);
              if (!isAlreadyAdded) {
                return {
                  ...material,
                  isUsed: true,
                  lotNumbers: [...material.lotNumbers, scannedLot],
                };
              }
            }
            return material;
          });
          onMaterialsChange(updatedMaterials);
          setMaterialScanInput("");
        } else if (data.matchedMaterial) {
          setMaterialScanInput(
            scannedLot +
              " (Invalid lot number format. Suggested lot number: " +
              data.suggestedLot +
              ")",
          );
        } else {
          setMaterialScanInput(
            scannedLot +
              " (Invalid lot number format or material not recognized.)",
          );
        }
      }
    }
  };

  const removeLotNumber = (materialName: string, lotNumber: string): void => {
    const updatedMaterials = materials.map((material) => {
      if (material.name === materialName) {
        const updatedLotNumbers = material.lotNumbers.filter(
          (lot) => lot !== lotNumber,
        );
        return {
          ...material,
          lotNumbers: updatedLotNumbers,
          isUsed: updatedLotNumbers.length > 0,
        };
      }
      return material;
    });
    onMaterialsChange(updatedMaterials);
  };

  const requiredMaterials = materials.filter((m) => m.required);
  const optionalMaterials = materials.filter((m) => !m.required);

  return (
    <Box>
      <Typography variant="h6" fontWeight={600} mb={2}>
        Material Lot Numbers
      </Typography>
      <Paper
        elevation={2}
        sx={{
          mb: 2,
          p: 2,
          bgcolor: "yellow.50",
          border: "1px solid",
          borderColor: "yellow.200",
        }}
      >
        <TextField
          inputRef={materialScanRef}
          type="text"
          value={materialScanInput}
          onChange={handleMaterialInputChange}
          onKeyPress={handleMaterialInputKeyPress}
          fullWidth
          label="Scan or enter material lot number (e.g., SS-240616-001)"
          variant="outlined"
          size="small"
          sx={{ bgcolor: "white" }}
        />
        <Box mt={2}>
          <Typography variant="body2" color="warning.main">
            <strong>Lot Number Formats:</strong>
          </Typography>
          <Typography variant="body2" color="warning.main">
            Steel Sheet: SS-YYMMDD-XXX | Aluminum: AL-YYMMDD-XXX | Plastic:
            PP-YYMMDD-XXX
          </Typography>
          <Typography variant="body2" color="warning.main">
            Copper Wire: CW-YYMMDD-XXX | Rubber: RG-YYMMDD-XXX | Glass:
            GP-YYMMDD-XXX
          </Typography>
        </Box>
      </Paper>
      {error && (
        <Typography color="error" variant="body2" mb={2}>
          {error}
        </Typography>
      )}
      <Stack spacing={3}>
        {/* Required Materials */}
        <Box>
          <Stack direction="row" alignItems="center" spacing={1} mb={1}>
            <Typography variant="subtitle1" fontWeight={600} color="error.main">
              Required Materials
            </Typography>
            <Chip label="Must scan lot numbers" color="error" size="small" />
          </Stack>
          <Stack spacing={1}>
            {requiredMaterials.map((material) => (
              <Paper
                key={material.id}
                sx={{
                  p: 2,
                  bgcolor: "red.50",
                  border: "1px solid",
                  borderColor: "red.200",
                }}
              >
                <Stack
                  direction="row"
                  alignItems="center"
                  justifyContent="space-between"
                  mb={1}
                >
                  <Stack direction="row" alignItems="center" spacing={1}>
                    {material.isUsed && (
                      <CheckIcon fontSize="small" color="success" />
                    )}
                    <Typography fontWeight={500}>{material.name}</Typography>
                  </Stack>
                  <Typography variant="body2" color="text.secondary">
                    {material.lotNumbers.length} lot(s)
                  </Typography>
                </Stack>
                {material.lotNumbers.length > 0 && (
                  <Stack spacing={1}>
                    {material.lotNumbers.map((lotNumber, index) => (
                      <Paper
                        key={index}
                        sx={{
                          p: 1,
                          display: "flex",
                          alignItems: "center",
                          justifyContent: "space-between",
                          bgcolor: "white",
                          border: "1px solid",
                          borderColor: "grey.200",
                        }}
                      >
                        <Typography variant="body2" fontFamily="monospace">
                          {lotNumber}
                        </Typography>
                        <IconButton
                          onClick={() =>
                            removeLotNumber(material.name, lotNumber)
                          }
                          color="error"
                          size="small"
                        >
                          <CloseIcon fontSize="small" />
                        </IconButton>
                      </Paper>
                    ))}
                  </Stack>
                )}
              </Paper>
            ))}
          </Stack>
        </Box>
        {/* Optional Materials */}
        <Box>
          <Stack direction="row" alignItems="center" spacing={1} mb={1}>
            <Typography
              variant="subtitle1"
              fontWeight={600}
              color="primary.main"
            >
              Optional Materials
            </Typography>
            <Chip
              label="Lot numbers recommended"
              color="primary"
              size="small"
            />
          </Stack>
          <Stack spacing={1}>
            {optionalMaterials.map((material) => (
              <Paper
                key={material.id}
                sx={{
                  p: 2,
                  bgcolor: "blue.50",
                  border: "1px solid",
                  borderColor: "blue.200",
                }}
              >
                <Stack
                  direction="row"
                  alignItems="center"
                  justifyContent="space-between"
                  mb={1}
                >
                  <Stack direction="row" alignItems="center" spacing={1}>
                    {material.isUsed && (
                      <CheckIcon fontSize="small" color="success" />
                    )}
                    <Typography fontWeight={500}>{material.name}</Typography>
                  </Stack>
                  <Typography variant="body2" color="text.secondary">
                    {material.lotNumbers.length} lot(s)
                  </Typography>
                </Stack>
                {material.lotNumbers.length > 0 && (
                  <Stack spacing={1}>
                    {material.lotNumbers.map((lotNumber, index) => (
                      <Paper
                        key={index}
                        sx={{
                          p: 1,
                          display: "flex",
                          alignItems: "center",
                          justifyContent: "space-between",
                          bgcolor: "white",
                          border: "1px solid",
                          borderColor: "grey.200",
                        }}
                      >
                        <Typography variant="body2" fontFamily="monospace">
                          {lotNumber}
                        </Typography>
                        <IconButton
                          onClick={() =>
                            removeLotNumber(material.name, lotNumber)
                          }
                          color="error"
                          size="small"
                        >
                          <CloseIcon fontSize="small" />
                        </IconButton>
                      </Paper>
                    ))}
                  </Stack>
                )}
              </Paper>
            ))}
          </Stack>
        </Box>
      </Stack>
    </Box>
  );
};

export default MaterialLotScanner;