import { MinusOutlined, PlusOutlined } from "@ant-design/icons";
import { Button, InputNumber, Popconfirm } from "antd";
import DeleteIcon from "components/Icons/DeleteIcon";
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 isRTL = false; // Default to LTR

  const handleDeleteItem = (uniqueId: string) => {
    dispatch(removeItem(uniqueId));
  };

  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
              shape="circle"
              iconPlacement="start"
              icon={<MinusOutlined title="add" className={styles.minusIcon} />}
              size="small"
              onClick={() =>
                dispatch(
                  updateQuantity({
                    id: item.id,
                    uniqueId: item.uniqueId || "",
                    quantity: Math.max(1, item.quantity - 1),
                  }),
                )
              }
              className={styles.addButton}
              style={{
                width: 28,
                height: 28,
                border: "none",
              }}
            />
          ) : (
            <Popconfirm
              title={t("cart.deleteConfirmation.title")}
              description={t("cart.deleteConfirmation.content")}
              onConfirm={() => handleDeleteItem(item.uniqueId || "")}
              okText={t("cart.deleteConfirmation.confirm")}
              cancelText={t("cart.deleteConfirmation.cancel")}
              okButtonProps={{ danger: true }}
              placement={isRTL ? "left" : "right"}
              styles={{
                root: getPopconfirmOverlayStyle(),
              }}
            >
              <Button
                shape="circle"
                iconPlacement="start"
                icon={<DeleteIcon />}
                size="small"
                onClick={() =>
                  dispatch(
                    updateQuantity({
                      id: item.id,
                      uniqueId: item.uniqueId || "",
                      quantity: Math.max(1, item.quantity - 1),
                    }),
                  )
                }
                className={styles.addButton}
                style={{
                  background: "#FEF2F2",
                  width: 28,
                  height: 28,
                  border: "none",
                }}
              />
            </Popconfirm>
          )}
          <InputNumber
            min={1}
            max={99}
            value={item.quantity || 1}
            onChange={(value: number | null) =>
              dispatch(
                updateQuantity({
                  id: item.id,
                  uniqueId: item.uniqueId || "",
                  quantity: value || 1,
                }),
              )
            }
            size="small"
            controls={false}
            className={styles.quantityInput}
            name="id"
          />
          <Button
            shape="circle"
            iconPlacement="start"
            icon={<PlusOutlined title="add" className={styles.plusIcon} />}
            size="small"
            onClick={() =>
              dispatch(
                updateQuantity({
                  id: item.id,
                  uniqueId: item.uniqueId || "",
                  quantity: Math.min(100, item.quantity + 1),
                }),
              )
            }
            disabled={item.quantity >= 99}
            className={styles.addButton}
            style={{
              backgroundColor: "#FFC600",
              width: 28,
              height: 28,
              border: "none",
            }}
          />
        </div>
      </div>
    </div>
  );
}
