import { MinusOutlined } from "@ant-design/icons";
import { Button, InputNumber, Popconfirm } from "antd";
import DeleteIcon from "components/Icons/DeleteIcon";
import PlusIcon from "components/Icons/PlusIcon";
import { removeItem, updateQuantity } from "features/order/orderSlice";
import { useTranslation } from "react-i18next";
import { useAppDispatch } from "redux/hooks";
import { CartItem } from "utils/types/appTypes";
import { colors } from "../../ThemeConstants";
import styles from "./CartActionsButtons.module.css";

export default function CartActionsButtons({ item }: { item: CartItem }) {
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
  const isMobile = false; // Default to desktop
  const message = { success: (msg: string) => console.log(msg) }; // Simple message handler
  const isRTL = false; // Default to LTR

  const handleDeleteItem = (itemId: string) => {
    dispatch(removeItem(Number(itemId)));
    message.success(t("cart.deleteConfirmation.success"));
  };

  const getPopconfirmOverlayStyle = () => ({
    width: isMobile ? "280px" : "auto",
    maxWidth: "320px",
    ".antPopconfirmMessageTitle": {
      fontSize: isMobile ? "14px" : "16px",
      paddingRight: isMobile ? "24px" : "0",
    },
    ".antPopconfirmMessageContent": {
      fontSize: isMobile ? "13px" : "14px",
      marginTop: "4px",
    },
    ".antPopconfirmButtons": {
      marginTop: "12px",
      ".ant-btn": {
        fontSize: isMobile ? "13px" : "14px",
        height: isMobile ? "28px" : "32px",
        padding: isMobile ? "0 12px" : "4px 15px",
      },
    },
  });

  return (
    <div className={styles.cartItemActions}>
      <div className={styles.quantityControls}>
        <div className={styles.quantityInputContainer}>
          {item.quantity > 1 ? (
            <Button
              type="text"
              size="small"
              onClick={() =>
                dispatch(updateQuantity({ id: item.id, quantity: Math.max(1, item.quantity - 1) }))
              }
              className={styles.quantityButton}
            >
              <MinusOutlined style={{ fontSize: 16, color: colors.primary }} />
            </Button>
          ) : (
            <Popconfirm
              title={t("cart.deleteConfirmation.title")}
              description={t("cart.deleteConfirmation.content")}
              onConfirm={() => handleDeleteItem(item.id.toString())}
              okText={t("cart.deleteConfirmation.confirm")}
              cancelText={t("cart.deleteConfirmation.cancel")}
              okButtonProps={{ danger: true }}
              placement={isRTL ? "left" : "right"}
              styles={{
                root: getPopconfirmOverlayStyle(),
                body: {
                  padding: isMobile ? "12px" : "16px",
                },
              }}
            >
              <Button
                type="text"
                size="small"
                danger
                icon={<DeleteIcon className={styles.deleteIcon} />}
                className={styles.removeButton}
              />
            </Popconfirm>
          )}
          <InputNumber
            min={1}
            max={100}
            value={item.quantity || 1}
            onChange={(value) => dispatch(updateQuantity({ id: item.id, quantity: value || 1 }))}
            size="small"
            controls={false}
            className={styles.quantityInput}
            name="id"
          />
          <Button
            type="text"
            size="small"
            onClick={() =>
              dispatch(updateQuantity({ id: item.id, quantity: Math.min(100, item.quantity + 1) }))
            }
            className={styles.quantityButton}
          >
            <PlusIcon className={styles.plusIcon} />
          </Button>
        </div>
      </div>
    </div>
  );
}
