"use client";
import React from "react";
import {
  Box,
  Button,
  Paper,
  Stack,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
  TextField,
  Typography,
} from "@mui/material";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import { useTranslation } from "react-i18next";
import { UpdateProductProcessLineQtyRequest } from "@/app/api/jo/actions";

interface ProductionOutputFormProps {
  outputData: (UpdateProductProcessLineQtyRequest & {
    byproductName: string;
    byproductQty: number;
    byproductUom: string;
  });
  setOutputData: React.Dispatch<
    React.SetStateAction<
      UpdateProductProcessLineQtyRequest & {
        byproductName: string;
        byproductQty: number;
        byproductUom: string;
      }
    >
  >;
  onSubmit: () => Promise<void> | void;
  onCancel: () => void;
}

const ProductionOutputForm: React.FC<ProductionOutputFormProps> = ({
  outputData,
  setOutputData,
  onSubmit,
  onCancel,
}) => {
  const { t } = useTranslation();

  return (
    <Paper sx={{ p: 3, bgcolor: "grey.50" }}>
      <Table size="small">
        <TableHead>
          <TableRow>
            <TableCell width="30%">{t("Type")}</TableCell>
            <TableCell width="35%">{t("Quantity")}</TableCell>
            <TableCell width="35%">{t("Unit")}</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          <TableRow>
            <TableCell>
              <Typography fontWeight={500}>{t("Output from Process")}</Typography>
            </TableCell>
            <TableCell>
              <TextField
                type="number"
                fullWidth
                size="small"
                value={outputData.outputFromProcessQty}
                onChange={(e) =>
                  setOutputData({
                    ...outputData,
                    outputFromProcessQty: parseInt(e.target.value) || 0,
                  })
                }
              />
            </TableCell>
            <TableCell>
              <TextField
                fullWidth
                size="small"
                value={outputData.outputFromProcessUom}
                onChange={(e) =>
                  setOutputData({
                    ...outputData,
                    outputFromProcessUom: e.target.value,
                  })
                }
              />
            </TableCell>
          </TableRow>

          <TableRow>
            <TableCell>
              <Stack>
                <Typography fontWeight={500}>{t("By-product")}</Typography>
              </Stack>
            </TableCell>
            <TableCell>
              <TextField
                type="number"
                fullWidth
                size="small"
                value={outputData.byproductQty}
                onChange={(e) =>
                  setOutputData({
                    ...outputData,
                    byproductQty: parseInt(e.target.value) || 0,
                  })
                }
              />
            </TableCell>
            <TableCell>
              <TextField
                fullWidth
                size="small"
                value={outputData.byproductUom}
                onChange={(e) =>
                  setOutputData({
                    ...outputData,
                    byproductUom: e.target.value,
                  })
                }
              />
            </TableCell>
          </TableRow>

          <TableRow sx={{ bgcolor: "warning.50" }}>
            <TableCell>
              <Typography fontWeight={500} color="warning.dark">
                {t("Defect")}
              </Typography>
            </TableCell>
            <TableCell>
              <TextField
                type="number"
                fullWidth
                size="small"
                value={outputData.defectQty}
                onChange={(e) =>
                  setOutputData({
                    ...outputData,
                    defectQty: parseInt(e.target.value) || 0,
                  })
                }
              />
            </TableCell>
            <TableCell>
              <TextField
                fullWidth
                size="small"
                value={outputData.defectUom}
                onChange={(e) =>
                  setOutputData({
                    ...outputData,
                    defectUom: e.target.value,
                  })
                }
              />
            </TableCell>
          </TableRow>

          <TableRow sx={{ bgcolor: "error.50" }}>
            <TableCell>
              <Typography fontWeight={500} color="error.dark">
                {t("Scrap")}
              </Typography>
            </TableCell>
            <TableCell>
              <TextField
                type="number"
                fullWidth
                size="small"
                value={outputData.scrapQty}
                onChange={(e) =>
                  setOutputData({
                    ...outputData,
                    scrapQty: parseInt(e.target.value) || 0,
                  })
                }
              />
            </TableCell>
            <TableCell>
              <TextField
                fullWidth
                size="small"
                value={outputData.scrapUom}
                onChange={(e) =>
                  setOutputData({
                    ...outputData,
                    scrapUom: e.target.value,
                  })
                }
              />
            </TableCell>
          </TableRow>
        </TableBody>
      </Table>

      <Box sx={{ mt: 3, display: "flex", gap: 2 }}>
        <Button variant="outlined" onClick={onCancel}>
          {t("Cancel")}
        </Button>
        <Button variant="contained" startIcon={<CheckCircleIcon />} onClick={onSubmit}>
          {t("Complete Step")}
        </Button>
      </Box>
    </Paper>
  );
};

export default ProductionOutputForm;