"use client";

import {
  Box,
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Typography,
  Alert,
  Stack,
  Divider,
} from "@mui/material";
import { useTranslation } from "react-i18next";

interface LotConfirmationModalProps {
  open: boolean;
  onClose: () => void;
  onConfirm: () => void;
  expectedLot: {
    lotNo: string;
    itemCode: string;
    itemName: string;
  };
  scannedLot: {
    lotNo: string;
    itemCode: string;
    itemName: string;
  };
  isLoading?: boolean;
}

const LotConfirmationModal: React.FC<LotConfirmationModalProps> = ({
  open,
  onClose,
  onConfirm,
  expectedLot,
  scannedLot,
  isLoading = false,
}) => {
  const { t } = useTranslation("pickOrder");

  return (
    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
      <DialogTitle>
  <Typography variant="h6" component="div" color="warning.main">
    {t("Lot Number Mismatch")}
  </Typography>
</DialogTitle>
      
      <DialogContent>
        <Stack spacing={3}>
          <Alert severity="warning">
            {t("The scanned item matches the expected item, but the lot number is different. Do you want to proceed with this different lot?")}
          </Alert>

          <Box>
            <Typography variant="subtitle1" gutterBottom color="primary">
              {t("Expected Lot:")}
            </Typography>
            <Box sx={{ pl: 2, py: 1, backgroundColor: 'grey.50', borderRadius: 1 }}>
              <Typography variant="body2">
                <strong>{t("Item Code")}:</strong> {expectedLot.itemCode}
              </Typography>
              <Typography variant="body2">
                <strong>{t("Item Name")}:</strong> {expectedLot.itemName}
              </Typography>
              <Typography variant="body2">
                <strong>{t("Lot No")}:</strong> {expectedLot.lotNo}
              </Typography>
            </Box>
          </Box>

          <Divider />

          <Box>
            <Typography variant="subtitle1" gutterBottom color="warning.main">
              {t("Scanned Lot:")}
            </Typography>
            <Box sx={{ pl: 2, py: 1, backgroundColor: 'warning.50', borderRadius: 1 }}>
              <Typography variant="body2">
                <strong>{t("Item Code")}:</strong> {scannedLot.itemCode}
              </Typography>
              <Typography variant="body2">
                <strong>{t("Item Name")}:</strong> {scannedLot.itemName}
              </Typography>
              <Typography variant="body2">
                <strong>{t("Lot No")}:</strong> {scannedLot.lotNo}
              </Typography>
            </Box>
          </Box>

          <Alert severity="info">
            {t("If you confirm, the system will:")}
            <ul style={{ margin: '8px 0 0 16px' }}>
              <li>{t("Update your suggested lot to the this scanned lot")}</li>
            </ul>
          </Alert>
        </Stack>
      </DialogContent>

      <DialogActions>
        <Button 
          onClick={onClose} 
          variant="outlined"
          disabled={isLoading}
        >
          {t("Cancel")}
        </Button>
        <Button 
          onClick={onConfirm} 
          variant="contained" 
          color="warning"
          disabled={isLoading}
        >
          {isLoading ? t("Processing...") : t("Confirm")}
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default LotConfirmationModal;