import React, { useState } from "react";
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Typography,
  TextField,
  Button,
  IconButton,
  Box,
  SxProps,
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import { Theme } from "@emotion/react";

// Types for the component props
export interface ModalButton {
  label: string;
  onClick: (inputValue?: string, error?: string, setError?: any) => void;
  variant?: "text" | "outlined" | "contained";
  color?: "primary" | "secondary" | "error" | "info" | "success" | "warning";
  disabled?: boolean;
  sx?: SxProps<Theme>;
}

export interface InputField {
  label: string;
  placeholder?: string;
  required?: boolean;
  type?: "text" | "email" | "password" | "number";
  multiline?: boolean;
  rows?: number;
  defaultValue?: string;
  labelClassName?: string;
}

export interface ConfirmModalProps {
  open: boolean;
  onClose: () => void;
  title: string;
  description?: string;
  buttons: ModalButton[];
  input?: InputField;
  maxWidth?: "xs" | "sm" | "md" | "lg" | "xl";
  fullWidth?: boolean;
  className?: string;
}

const ConfirmModal: React.FC<ConfirmModalProps> = ({
  open,
  onClose,
  title,
  description,
  buttons,
  input,
  maxWidth = "sm",
  fullWidth = true,
}) => {
  const [inputValue, setInputValue] = useState(input?.defaultValue || "");
  const [error, setError] = useState("");
  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(event.target.value);
  };

  const handleButtonClick = (button: ModalButton) => {
    if (input) {
      button.onClick(inputValue, error, setError);
    } else {
      button.onClick();
    }
    setInputValue("");
  };

  const handleClose = () => {
    setInputValue(input?.defaultValue || "");
    onClose();
  };

  return (
    <Dialog
      open={open}
      onClose={(event, reason) => {
        if (reason !== "backdropClick" && reason !== "escapeKeyDown") {
          handleClose();
        }
      }}
      maxWidth={maxWidth}
      fullWidth={fullWidth}
      PaperProps={{
        sx: {
          borderRadius: 2,
          padding: 1,
        },
      }}
    >
      <DialogTitle
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          // padding: "16px 0px",
          px: "0px",
          marginX: "24px",
          paddingBottom: description ? "18px" : "20px",
          borderBottom: "1px solid #eeeeee",
        }}
      >
        <Typography variant="h6" component="h2" fontWeight="bold">
          {title}
        </Typography>
        <IconButton
          onClick={handleClose}
          size="small"
          sx={{
            color: "text.secondary",
          }}
        >
          <CloseIcon />
        </IconButton>
      </DialogTitle>

      <DialogContent sx={{ padding: "0 24px 16px 24px", mt: 2 }}>
        {description && (
          <Typography
            variant="body2"
            color="text.secondary"
            sx={{ marginBottom: input ? 3 : 0 }}
          >
            {description}
          </Typography>
        )}

        {input && (
          <Box sx={{ marginTop: description ? 0 : 2 }}>
            <Typography
              variant="body2"
              component="label"
              className={input.labelClassName}
              sx={{
                display: "block",
                marginBottom: 1,
                fontWeight: 500,
                color: "text.primary",
              }}
            >
              {input.label}
              {input.required && (
                <Typography component="span" color="error.main">
                  {" "}
                  *
                </Typography>
              )}
            </Typography>
            <TextField
              fullWidth
              value={inputValue}
              onChange={handleInputChange}
              placeholder={input.placeholder}
              type={input.type || "text"}
              multiline={input.multiline}
              rows={input.rows}
              variant="outlined"
              size="small"
              sx={{
                "& .MuiOutlinedInput-root": {
                  maxWidth: 280,
                  borderRadius: 1,
                  "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
                    border: "2px solid #7A5AF8",
                  },
                },
              }}
            />
            {error && (
              <Typography variant="body2" color="error.main">
                {error}
              </Typography>
            )}
          </Box>
        )}
      </DialogContent>

      <DialogActions
        sx={{
          padding: "16px 24px 24px 24px",
          gap: 1,
        }}
      >
        {buttons.map((button, index) => (
          <Button
            key={index}
            variant={button.variant || "outlined"}
            color={button.color || "primary"}
            className="confirm-modal-button"
            sx={button.sx}
            onClick={() => handleButtonClick(button)}
            disabled={
              button.disabled ||
              (input?.required &&
                !inputValue.trim() &&
                button.variant === "contained")
            }
          >
            {button.label}
          </Button>
        ))}
      </DialogActions>
    </Dialog>
  );
};

export default ConfirmModal;