"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 | null;
    itemCode?: string;
    itemName?: string;
  };
  scannedLot: {
    lotNo: string | null;
    itemCode?: string;
    itemName?: string;
  };
  isLoading?: boolean;
  /** Shown inside the dialog when confirm/switch API fails (e.g. LOT_UNAVAILABLE). */
  errorMessage?: string | null;
}

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

  return (
    <Dialog
      open={open}
      onClose={onClose}
      maxWidth="md"
      fullWidth
      disableScrollLock
      disableAutoFocus
      disableEnforceFocus
      disableRestoreFocus
    >
      <DialogTitle>
        <Typography variant="h6" component="div" color={isFailure ? "error" : "warning.main"}>
          {isFailure ? t("Lot switch failed") : t("Lot Number Mismatch")}
        </Typography>
      </DialogTitle>

      <DialogContent>
        <Stack spacing={3}>
          {errorMessage ? (
            <Alert severity="error">
              {t(errorMessage)}
            </Alert>
          ) : null}
          {isFailure ? (
            <Alert severity="warning">
              {t(
                "The system could not switch to the scanned lot. Review the lots below, then tap Confirm to retry."
              )}
            </Alert>
          ) : (
            <Alert severity="warning">
              {t(
                "The scanned item matches the expected item, but the lot number is different. Scan again to confirm: scan the expected lot QR to keep the suggested lot, or scan the other lot QR again to switch."
              )}
            </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>

          {isFailure ? (
            <Alert severity="info">
              {t(
                "You can also scan again: expected lot QR keeps the suggested line; scanned lot QR retries the switch."
              )}
            </Alert>
          ) : (
            <>
              <Alert severity="info">
                {t(
                  "After you scan to choose, the system will update the pick line to the lot you confirmed."
                )}
              </Alert>
              <Alert severity="info">
                {t(
                  "Or use the Confirm button below if you cannot scan again (same as scanning the other lot again)."
                )}
              </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;
