import styles from "pages/menu/components/MenuList/ProductCard.module.css";
import { Card, Badge } from "antd";
import ProText from "components/ProText.tsx";
import ArabicPrice from "components/ArabicPrice";
import { ItemDescriptionIcons } from "components/ItemDescriptionIcons/ItemDescriptionIcons.tsx";
import ImageWithFallback from "components/ImageWithFallback";
import { Product } from "utils/types/appTypes.ts";
import useBreakPoint from "hooks/useBreakPoint.ts";
import { useAppSelector } from "redux/hooks.ts";
import { ProductPreviewDialog } from "pages/menu/components/ProductPreviewDialog";
import { useState } from "react";
import { AddToCartButton } from "../AddToCartButton/AddToCartButton";
import { useTranslation } from "react-i18next";

type Props = {
  item: Product;
  setIsBottomSheetOpen: (isOpen: boolean) => void;
};
export default function ProductCard({ item, setIsBottomSheetOpen }: Props) {
  const { isRTL } = useAppSelector((state) => state.locale);
  const { isMobile, isTablet, isDesktop } = useBreakPoint();
  const { items } = useAppSelector((state) => state.order);
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  // const navigate = useNavigate();
  // const { subdomain } = useParams();
  const { t } = useTranslation();

  // Handle dialog close
  const handleDialogClose = () => {
    setIsDialogOpen(false);
    setIsBottomSheetOpen(false);
  };

  // Handle product click - open dialog on desktop, navigate on mobile/tablet
  const handleProductClick = (item: Product) => {
    localStorage.setItem("productId", item.id.toString());
    if (isDesktop) {
      setIsDialogOpen(true);
    }
    setIsBottomSheetOpen(true);
    //  else {
    //   navigate(`/${subdomain}/product/${item.id}`);
    // }
  };

  const hasOptions =
    (item.extras && item.extras.length > 0) ||
    (item.variants && item.variants.length > 0) ||
    (item.theExtrasGroups && item.theExtrasGroups.length > 0);

  return (
    <>
      <div
        key={item.id}
        className={styles.productLink}
        onClick={() => handleProductClick(item)}
      >
        <Card
          key={item.id}
          style={{
            borderRadius: 8,
            height: 156,
            overflow: "hide",
            width: "100%",
            boxShadow: "none",
            backgroundColor: "var(--secondary-background)",
            border: "none",
            position: "relative",
          }}
          styles={{
            body: {
              display: "flex",
              flexDirection: "column",
              justifyContent: "space-between",
              padding: item.description ? "16px 16px 8px 16px" : "16px",
              overflow: "hide",
              boxShadow: "none",
            },
          }}
        >
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              height: "100%",
              gap: isMobile ? 11 : 16,
            }}
          >
            <div
              style={{
                display: "flex",
                flexDirection: "column",
                justifyContent: "flex-start",
                gap: "0.3rem",
              }}
            >
              <ProText
                style={{
                  margin: 0,
                  fontWeight: 600,
                  fontStyle: "SemiBold",
                  fontSize: "16px",
                  lineHeight: "140%",
                  letterSpacing: "0%",
                }}
              >
                {isRTL ? item.nameOther : item.name}
              </ProText>
              {item.description && (
                <ProText
                  type="secondary"
                  className={styles.itemDescription}
                  style={{
                    display: "-webkit-box",
                    WebkitBoxOrient: "vertical",
                    WebkitLineClamp: 2,
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    wordWrap: "break-word",
                    overflowWrap: "break-word",
                    maxHeight: "3em",
                    fontWeight: 500,
                    fontStyle: "Medium",
                    fontSize: "12px",
                    // leadingTrim: "NONE",
                    lineHeight: "140%",
                    letterSpacing: "0%",
                  }}
                >
                  {item.description}
                </ProText>
              )}

              <div
                style={{
                  position: "absolute",
                  bottom: 16,
                  [isRTL ? "right" : "left"]: 16,
                }}
              >
                {item.original_price !== item.price && (
                  <ArabicPrice
                    price={item.original_price}
                    strong
                    style={{
                      fontSize: "1rem",
                      fontWeight: 700,
                      color: "#333333",
                      textDecoration: "line-through",
                      marginRight: isRTL ? 0 : 10,
                      marginLeft: isRTL ? 10 : 0,
                    }}
                  />
                )}
                <ArabicPrice
                  price={item.price}
                  strong
                  style={{
                    color: "#333333",
                    fontFamily: "Outfit",
                    fontWeight: 600,
                    fontStyle: "SemiBold",
                    fontSize: "14px",
                    lineHeight: "140%",
                    letterSpacing: "0%",
                  }}
                />
                <div
                  style={{
                    position: "relative",
                    ...(isRTL ? { right: -5 } : {}),
                    marginTop: 6,
                  }}
                >
                  <ItemDescriptionIcons
                    className={styles.itemDescriptionIcons}
                    hasLoyalty={item.isHasLoyalty}
                  />
                </div>
              </div>
            </div>

            <div style={{ position: "relative" }}>
              <Badge
                size="default"
                offset={[-3, 3]}
                count={items
                  .filter((i) => i.id === item.id)
                  .reduce((total, item) => total + item.quantity, 0)}
                color="#FFC600"
                title={`${items
                  .filter((i) => i.id === item.id)
                  .reduce((total, item) => total + item.quantity, 0)} in cart`}
              >
                <ImageWithFallback
                  src={item.image_small || "/default.png"}
                  fallbackSrc="/default.png"
                  alt={item.name}
                  className={`${styles.popularMenuItemImage} ${
                    isMobile
                      ? styles.popularMenuItemImageMobile
                      : isTablet
                        ? styles.popularMenuItemImageTablet
                        : styles.popularMenuItemImageDesktop
                  }`}
                  width={91}
                  height={96}
                />
                <div
                  style={{
                    position: "absolute",
                    bottom: 3,
                  }}
                >
                  <AddToCartButton item={item} />
                </div>
              </Badge>
            </div>
          </div>
          {hasOptions && (
            <ProText
              style={{
                fontWeight: 400,
                fontStyle: "Regular",
                fontSize: "12px",
                lineHeight: "140%",
                letterSpacing: "0%",
                textAlign: "center",
                position: "absolute",
                bottom: 19,
                [isRTL ? "left" : "right"]: 26,
                color: "#A4A3AA",
              }}
            >
              {t("menu.customizable")}
            </ProText>
          )}
        </Card>
      </div>

      {/* Product Preview Dialog for Desktop */}
      {isDialogOpen && (
        <ProductPreviewDialog
          isOpen={isDialogOpen}
          onClose={handleDialogClose}
        />
      )}
    </>
  );
}
