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

"use client";
import React from "react";
import { X, Save } from "@mui/icons-material";
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  IconButton,
  Typography,
  Button,
  Box,
  Stack,
} from "@mui/material";
import { useForm, Controller } from "react-hook-form";
import {
  QualityCheckModalProps,
  QualityCheckData,
  QualityCheckRecord,
  QualityCheckItem,
} from "./types";
import { getStatusIcon, getStatusColor } from "./utils/QualityCheckHelper";
import DefectsSection from "./DefectsSection";
import OperatorScanner from "./OperatorScanner";

const QualityCheckModal: React.FC<QualityCheckModalProps> = ({
  isOpen,
  onClose,
  item = null,
}) => {
  const {
    control,
    handleSubmit,
    reset,
    watch,
    setValue,
    setError,
    clearErrors,
    formState: { errors, isValid },
  } = useForm<QualityCheckData>({
    defaultValues: {
      inspectors: [],
      checkDate: new Date().toISOString().split("T")[0],
      status: "pending",
      notes: "",
      defects: [],
    },
    mode: "onChange",
  });

  const watchedDefects = watch("defects");
  const watchedInspectors = watch("inspectors");

  const validateForm = (): boolean => {
    let isValid = true;

    // Clear previous errors
    clearErrors();

    // Validate inspectors
    if (!watchedInspectors || watchedInspectors.length === 0) {
      setError("inspectors", {
        type: "required",
        message: "At least one inspector is required",
      });
      isValid = false;
    }

    return isValid;
  };

  const onSubmit = (data: QualityCheckData): void => {
    if (!validateForm()) {
      return;
    }

    console.log(data);
    const qualityRecord: QualityCheckRecord = {
      ...data,
      itemId: item?.id?.toString(),
      itemName: item?.name,
      timestamp: new Date().toISOString(),
    };

    // Save to localStorage or your preferred storage method
    // const existingRecords = JSON.parse(localStorage.getItem('qualityCheckRecords') || '[]');
    // const updatedRecords = [...existingRecords, qualityRecord];
    // localStorage.setItem('qualityCheckRecords', JSON.stringify(updatedRecords));

    // Close modal and reset form
    handleClose();
  };

  const handleClose = (): void => {
    reset({
      inspectors: [],
      checkDate: new Date().toISOString().split("T")[0],
      status: "pending",
      notes: "",
      defects: [],
    });
    onClose();
  };

  const statusOptions: Array<"pending" | "passed" | "failed"> = [
    "pending",
    "passed",
    "failed",
  ];

  if (!isOpen) return null;

  return (
    <Dialog open={isOpen} onClose={handleClose} maxWidth="md" fullWidth>
      <DialogTitle
        sx={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
        }}
      >
        <Box>
          <Typography variant="h5" fontWeight={700}>
            Quality Check
          </Typography>
          {item && (
            <Typography variant="body2" color="text.secondary" mt={0.5}>
              Item: {item.name} (ID: {item.id})
            </Typography>
          )}
        </Box>
        <IconButton onClick={handleClose} size="large">
          <X />
        </IconButton>
      </DialogTitle>
      <DialogContent dividers sx={{ p: 3 }}>
        <Stack spacing={4}>
          {/* Inspector and Date */}
          <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
            <Box sx={{ flex: 1 }}>
              <Typography variant="body2" fontWeight={600} mb={1}>
                Inspector *
              </Typography>
              <OperatorScanner
                operators={watchedInspectors || []}
                onOperatorsChange={(operators) => {
                  setValue("inspectors", operators);
                  if (operators.length > 0) {
                    clearErrors("inspectors");
                  }
                }}
                error={errors.inspectors?.message}
              />
            </Box>
          </Stack>
          <Stack direction={{ xs: "column", md: "row" }} spacing={2}>
            <Box sx={{ flex: 1 }}>
              <Typography variant="body2" fontWeight={600} mb={1}>
                Check Date *
              </Typography>
              <Controller
                name="checkDate"
                control={control}
                rules={{ required: "Check date is required" }}
                render={({ field }) => (
                  <input
                    {...field}
                    type="date"
                    style={{
                      width: "100%",
                      padding: "8px 12px",
                      border: errors.checkDate
                        ? "1px solid #f44336"
                        : "1px solid #ccc",
                      borderRadius: "4px",
                      fontSize: "14px",
                      outline: "none",
                    }}
                  />
                )}
              />
              {errors.checkDate && (
                <Typography variant="caption" color="error" sx={{ mt: 0.5 }}>
                  {errors.checkDate.message}
                </Typography>
              )}
            </Box>
          </Stack>

          {/* Quality Status */}
          <Box>
            <Typography variant="body2" fontWeight={600} mb={2}>
              Quality Status *
            </Typography>
            <Controller
              name="status"
              control={control}
              rules={{ required: "Please select a quality status" }}
              render={({ field }) => (
                <Stack direction="row" spacing={2}>
                  {statusOptions.map((statusOption) => {
                    const IconComponent = getStatusIcon(statusOption);
                    const isSelected = field.value === statusOption;

                    return (
                      <Button
                        key={statusOption}
                        variant={isSelected ? "contained" : "outlined"}
                        onClick={() => field.onChange(statusOption)}
                        startIcon={
                          <IconComponent
                            sx={{
                              fontSize: 20,
                              color:
                                statusOption === "passed"
                                  ? "success.main"
                                  : statusOption === "failed"
                                    ? "error.main"
                                    : "warning.main",
                            }}
                          />
                        }
                        sx={{
                          flex: 1,
                          textTransform: "capitalize",
                          py: 1.5,
                          backgroundColor: isSelected
                            ? statusOption === "passed"
                              ? "success.main"
                              : statusOption === "failed"
                                ? "error.main"
                                : "warning.main"
                            : "transparent",
                          borderColor:
                            statusOption === "passed"
                              ? "success.main"
                              : statusOption === "failed"
                                ? "error.main"
                                : "warning.main",
                          color: isSelected
                            ? "white"
                            : statusOption === "passed"
                              ? "success.main"
                              : statusOption === "failed"
                                ? "error.main"
                                : "warning.main",
                          "&:hover": {
                            backgroundColor: isSelected
                              ? statusOption === "passed"
                                ? "success.dark"
                                : statusOption === "failed"
                                  ? "error.dark"
                                  : "warning.dark"
                              : statusOption === "passed"
                                ? "success.light"
                                : statusOption === "failed"
                                  ? "error.light"
                                  : "warning.light",
                          },
                        }}
                      >
                        {statusOption}
                      </Button>
                    );
                  })}
                </Stack>
              )}
            />
            {errors.status && (
              <Typography variant="caption" color="error" sx={{ mt: 0.5 }}>
                {errors.status.message}
              </Typography>
            )}
          </Box>

          {/* Defects Section */}
          <DefectsSection
            defects={watchedDefects || []}
            onDefectsChange={(defects) => {
              setValue("defects", defects);
              clearErrors("defects");
            }}
            error={errors.defects?.message}
          />

          {/* Additional Notes */}
          <Controller
            name="notes"
            control={control}
            render={({ field }) => (
              <Box>
                <Typography variant="body2" fontWeight={600} mb={1}>
                  Additional Notes
                </Typography>
                <textarea
                  {...field}
                  rows={4}
                  style={{
                    width: "100%",
                    padding: "12px",
                    border: "1px solid #ccc",
                    borderRadius: "4px",
                    fontSize: "14px",
                    fontFamily: "inherit",
                    outline: "none",
                    resize: "vertical",
                  }}
                  placeholder="Enter any additional observations or notes..."
                />
              </Box>
            )}
          />
        </Stack>
      </DialogContent>
      <DialogActions sx={{ p: 3 }}>
        <Button variant="outlined" color="inherit" onClick={handleClose}>
          Cancel
        </Button>
        <Button
          variant="contained"
          color="primary"
          onClick={handleSubmit(onSubmit)}
          startIcon={<Save />}
          disabled={!isValid}
        >
          Save Quality Check
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default QualityCheckModal;