FPSMS-frontend/src/components/PoDetail/QcStockInModalVer2.tsx

"use client";
import { StockInLine } from "@/app/api/po";
import { ModalFormInput, PurchaseQcResult } from "@/app/api/po/actions";
import { QcItemWithChecks } from "@/app/api/qc";
import {
  Box,
  Button,
  Grid,
  Modal,
  ModalProps,
  Stack,
  Typography,
} from "@mui/material";
import { Dispatch, SetStateAction, useCallback, useEffect, useState } from "react";
import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
import { StockInLineRow } from "./PoInputGrid";
import { useTranslation } from "react-i18next";
import StockInForm from "./StockInForm";
import StockInFormVer2 from "./StockInFormVer2";
import QcFormVer2 from "./QcFormVer2";
import PutawayForm from "./PutawayForm";
import { dummyPutawayLine, dummyQCData, QcData } from "./dummyQcTemplate";
import { useGridApiRef } from "@mui/x-data-grid";
import {submitDialogWithWarning} from "../Swal/CustomAlerts";

const style = {
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  bgcolor: "background.paper",
  pt: 5,
  px: 5,
  pb: 10,
  display: "block",
  width: { xs: "60%", sm: "60%", md: "60%" },
  //   height: { xs: "60%", sm: "60%", md: "60%" },
};
interface CommonProps extends Omit<ModalProps, "children"> {
  // setRows: Dispatch<SetStateAction<PurchaseOrderLine[]>>;
  setEntries?: Dispatch<SetStateAction<StockInLineRow[]>>;
  setStockInLine?: Dispatch<SetStateAction<StockInLine[]>>;
  itemDetail: StockInLine & { qcResult?: PurchaseQcResult[] };
  setItemDetail: Dispatch<
    SetStateAction<
      | (StockInLine & {
          warehouseId?: number;
        })
      | undefined
    >
  >;
  qc?: QcItemWithChecks[];
  warehouse?: any[];
  //   type: "qc" | "stockIn" | "escalation" | "putaway" | "reject";
}
interface Props extends CommonProps {
  itemDetail: StockInLine & { qcResult?: PurchaseQcResult[] };
}
const PoQcStockInModalVer2: React.FC<Props> = ({
  // type,
  // setRows,
  setEntries,
  setStockInLine,
  open,
  onClose,
  itemDetail,
  setItemDetail,
  qc,
  warehouse,
}) => {
  console.log(warehouse);
  const {
    t,
    i18n: { language },
  } = useTranslation("purchaseOrder");
const [qcItems, setQcItems] = useState(dummyQCData)
  const formProps = useForm<ModalFormInput>({
    defaultValues: {
      ...itemDetail,
      putawayLine: dummyPutawayLine,
      // receiptDate: itemDetail.receiptDate || dayjs().add(-1, "month").format(INPUT_DATE_FORMAT),
      // warehouseId: itemDetail.defaultWarehouseId || 0
    },
  });
  const closeHandler = useCallback<NonNullable<ModalProps["onClose"]>>(
    (...args) => {
      onClose?.(...args);
      //   reset();
    },
    [onClose],
  );
  const [openPutaway, setOpenPutaway] = useState(false);
  const onOpenPutaway = useCallback(() => {
    setOpenPutaway(true);
  }, []);
  const onClosePutaway = useCallback(() => {
    setOpenPutaway(false);
  }, []);
  // Stock In submission handler
  const onSubmitStockIn = useCallback<SubmitHandler<ModalFormInput>>(
    async (data, event) => {
      console.log("Stock In Submission:", event!.nativeEvent);
      // Extract only stock-in related fields
      const stockInData = {
        //    quantity: data.quantity,
        //    receiptDate: data.receiptDate,
        //    batchNumber: data.batchNumber,
        //    expiryDate: data.expiryDate,
        //    warehouseId: data.warehouseId,
        //    location: data.location,
        //    unitCost: data.unitCost,
        data: data,
        // Add other stock-in specific fields from your form
      };
      console.log("Stock In Data:", stockInData);
      // Handle stock-in submission logic here
      // e.g., call API, update state, etc.
    },
    [],
  );
  // QC submission handler
  const onSubmitQc = useCallback<SubmitHandler<ModalFormInput>>(
    async (data, event) => {
      console.log("QC Submission:", event!.nativeEvent);
      
      // Get QC data from the shared form context
      const qcAccept = data.qcAccept;
      const acceptQty = data.acceptQty;
      
      // Validate QC data
      const validationErrors : string[] = [];
      // Check if all QC items have results
      const itemsWithoutResult = qcItems.filter(item => item.isPassed === undefined);
      if (itemsWithoutResult.length > 0) {
        validationErrors.push(`${t("QC items without result")}: ${itemsWithoutResult.map(item => item.qcItem).join(', ')}`);
      }

      // Check if failed items have failed quantity
      const failedItemsWithoutQty = qcItems.filter(item => 
        item.isPassed === false && (!item.failedQty || item.failedQty <= 0)
      );
      if (failedItemsWithoutQty.length > 0) {
        validationErrors.push(`${t("Failed items must have failed quantity")}: ${failedItemsWithoutQty.map(item => item.qcItem).join(', ')}`);
      }

      // Check if QC accept decision is made
      // if (qcAccept === undefined) {
      //   validationErrors.push("QC accept/reject decision is required");
      // }

      // Check if accept quantity is valid
      if (acceptQty === undefined || acceptQty <= 0) {
        validationErrors.push("Accept quantity must be greater than 0");
      }

      if (validationErrors.length > 0) {
        console.error("QC Validation failed:", validationErrors);
        alert(`未完成品檢: ${validationErrors}`);
        return;
      }

      const qcData = {
        qcAccept: qcAccept,
        acceptQty: acceptQty,
        qcItems: qcItems.map(item => ({
          id: item.id,
          qcItem: item.qcItem,
          qcDescription: item.qcDescription,
          isPassed: item.isPassed,
          failedQty: (item.failedQty && !item.isPassed) || 0,
          remarks: item.remarks || ''
        }))
      };
      // const qcData = data;

      console.log("QC Data for submission:", qcData);
      // await submitQcData(qcData);

      if (!qcData.qcItems.every((qc) => qc.isPassed) && qcData.qcAccept) {
        submitDialogWithWarning(onOpenPutaway, t, {title:"有不合格檢查項目，確認接受收貨？", confirmButtonText: "Confirm", html: ""});
        return;
      }

      if (qcData.qcAccept) {
        onOpenPutaway();
      } else {
        onClose();
      }
    },
    [onOpenPutaway, qcItems],
  );
  // Email supplier handler
  const onSubmitEmailSupplier = useCallback<SubmitHandler<ModalFormInput>>(
    async (data, event) => {
      console.log("Email Supplier Submission:", event!.nativeEvent);
      // Extract only email supplier related fields
      const emailData = {
        //    supplierEmail: data.supplierEmail,
        //    issueDescription: data.issueDescription,
        //    qcComments: data.qcComments,
        //    defectNotes: data.defectNotes,
        //    attachments: data.attachments,
        //    escalationReason: data.escalationReason,
        data: data,

        // Add other email-specific fields
      };
      console.log("Email Supplier Data:", emailData);
      // Handle email supplier logic here
      // e.g., send email to supplier, log escalation, etc.
    },
    [],
  );
  // Putaway submission handler
  const onSubmitPutaway = useCallback<SubmitHandler<ModalFormInput>>(
    async (data, event) => {
      console.log("Putaway Submission:", event!.nativeEvent);
      // Extract only putaway related fields
      const putawayData = {
        //    putawayLine: data.putawayLine,
        //    putawayLocation: data.putawayLocation,
        //    binLocation: data.binLocation,
        //    putawayQuantity: data.putawayQuantity,
        //    putawayNotes: data.putawayNotes,
        data: data,

        // Add other putaway specific fields
      };
      console.log("Putaway Data:", putawayData);
      // Handle putaway submission logic here
      // Close modal after successful putaway
      closeHandler({}, "backdropClick");
    },
    [closeHandler],
  );
  // Print handler
  const onPrint = useCallback(() => {
    console.log("Print putaway documents");
    // Handle print logic here
    window.print();
  }, []);
  const acceptQty = formProps.watch("acceptedQty")

  const checkQcIsPassed = useCallback((qcItems: QcData[]) => {
    const isPassed = qcItems.every((qc) => qc.isPassed);
    console.log(isPassed)
    if (isPassed) {
        formProps.setValue("passingQty", acceptQty)
    } else {
        formProps.setValue("passingQty", 0)
    }
    return isPassed
  }, [acceptQty, formProps])

  useEffect(() => {
    // maybe check if submitted before
    console.log(qcItems)
    checkQcIsPassed(qcItems)
  }, [qcItems, checkQcIsPassed])

  return (
    <>
      <FormProvider {...formProps}>
        <Modal open={open} onClose={closeHandler}>
          <Box
            sx={{
              ...style,
              padding: 2,
              maxHeight: "90vh",
              overflowY: "auto",
              marginLeft: 3,
              marginRight: 3,
            }}
          >
            {openPutaway ? (
              <Box
                component="form"
                onSubmit={formProps.handleSubmit(onSubmitPutaway)}
              >
                <PutawayForm
                  itemDetail={itemDetail}
                  warehouse={warehouse!}
                  disabled={false}
                />
                <Stack direction="row" justifyContent="flex-end" gap={1}>
                  <Button
                    id="printButton"
                    type="button"
                    variant="contained"
                    color="primary"
                    sx={{ mt: 1 }}
                    onClick={onPrint}
                  >
                    {t("print")}
                  </Button>
                  <Button
                    id="putawaySubmit"
                    type="submit"
                    variant="contained"
                    color="primary"
                    sx={{ mt: 1 }}
                  >
                    {t("confirm putaway")}
                  </Button>
                </Stack>
              </Box>
            ) : (
              <>
                <Grid
                  container
                  justifyContent="flex-start"
                  alignItems="flex-start"
                >
                  <Grid item xs={12}>
                    <Typography variant="h6" display="block" marginBlockEnd={1}>
                      {t("qc processing")}
                    </Typography>
                  </Grid>
                  <Grid item xs={12}>
                    <StockInFormVer2 itemDetail={itemDetail} disabled={false} />
                  </Grid>
                </Grid>
                <Stack direction="row" justifyContent="flex-end" gap={1}>
                  <Button
                    id="stockInSubmit"
                    type="button"
                    variant="contained"
                    color="primary"
                    onClick={formProps.handleSubmit(onSubmitStockIn)}
                  >
                    {t("submitStockIn")}
                  </Button>
                </Stack>
                <Grid
                  container
                  justifyContent="flex-start"
                  alignItems="flex-start"
                >
                  <QcFormVer2
                    qc={qc!}
                    itemDetail={itemDetail}
                    disabled={false}
                    qcItems={qcItems}
                    setQcItems={setQcItems}
                  />
                </Grid>
                <Stack direction="row" justifyContent="flex-end" gap={1}>
                  <Button
                    id="emailSupplier"
                    type="button"
                    variant="contained"
                    color="primary"
                    sx={{ mt: 1 }}
                    onClick={formProps.handleSubmit(onSubmitEmailSupplier)}
                  >
                    {t("email supplier")}
                  </Button>
                  <Button
                    id="qcSubmit"
                    type="button"
                    variant="contained"
                    color="primary"
                    sx={{ mt: 1 }}
                    onClick={formProps.handleSubmit(onSubmitQc)}
                  >
                    {t("confirm putaway")}
                  </Button>
                </Stack>
              </>
            )}
          </Box>
        </Modal>
      </FormProvider>
    </>
  );
};
export default PoQcStockInModalVer2;