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

interface MenuListProps {
  products: Product[];
}

export function SearchMenu({ products }: MenuListProps) {
  const { isRTL } = useAppSelector((state) => state.locale);
  const { isMobile, isTablet } = useBreakPoint();
  const { items } = useAppSelector((state) => state.order);
  const restaurantName = localStorage.getItem("restaurantName");
  const navigate = useNavigate();
  const { t } = useTranslation();
  const { themeName } = useAppSelector((state) => state.theme);

  // Show error state if data exists but has no products
  if (products && (!products || products.length === 0)) {
    return (
      <div
        className={styles.menuSections}
        style={{ padding: "40px", textAlign: "center" }}
      >
        <ProText type="secondary">{t("menu.noMenuItemsAvailable")}</ProText>
      </div>
    );
  }

  return (
    <>
      <div className={styles.menuSections}>
      <div className={styles.menuItemsGrid}>
        {products.map((item: Product) => (
          <div
            key={item.id}
            className={styles.productLink + " product-link-search"}
            onClick={() => {
              localStorage.setItem("product", JSON.stringify(item));
              navigate(`/${restaurantName}/product/${item.id}`);
            }}
          >
            <Card
              key={item.id}
              style={{
                borderRadius: 8,
                overflow: "hide",
                width: "100%",
              }}
              styles={{
                body: {
                  display: "flex",
                  flexDirection: "column",
                  justifyContent: "space-between",
                  borderRadius: 8,
                  padding: item.description
                    ? "16px 16px 8px 16px"
                    : "16px 16px 24px 16px",
                  overflow: "hide",
                  boxShadow:
                    "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05)",
                },
              }}
            >
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "space-between",
                  height: "100%",
                  gap: isMobile ? 10 : 16,
                }}
              >
                <div
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "space-between",
                    gap: "0.5rem",
                  }}
                >
                  <ProText
                    style={{
                      margin: 0,
                      display: "inline-block",
                      fontSize: "1rem",
                      fontWeight: 600,
                      letterSpacing: "-0.01em",
                      lineHeight: 1.2,
                      color: themeName === "dark" ? "#fff" : "#000044",
                    }}
                  >
                    {isRTL ? item.name : item.nameOther}
                  </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",
                        lineHeight: "1.5rem",
                        maxHeight: "3em",
                        fontSize: "1rem",
                        letterSpacing: "0.01em",
                      }}
                    >
                      {item.description}
                    </ProText>
                  )}

                  <div>
                    {item.original_price !== item.price && (
                      <ArabicPrice
                        price={item.original_price}
                        strong
                        style={{
                          fontSize: "1rem",
                          fontWeight: 700,
                          color: colors.primary,
                          textDecoration: "line-through",
                          marginRight: isRTL ? 0 : 10,
                          marginLeft: isRTL ? 10 : 0,
                        }}
                      />
                    )}
                    <ArabicPrice
                      price={item.price}
                      strong
                      style={{
                        fontSize: "1rem",
                        fontWeight: 700,
                        color: colors.primary,
                      }}
                    />
                  </div>

                  <div
                    style={{
                      position: "relative",
                      ...(isRTL ? { right: -5 } : {}),
                    }}
                  >
                    <ItemDescriptionIcons
                      className={styles.itemDescriptionIcons}
                    />
                  </div>
                </div>
                <div style={{ position: "relative" }}>
                  <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={90}
                    height={90}
                  />

                  <AddToCartButton item={item} />

                  {items.find((i) => i.id === item.id) && (
                    <Badge
                      count={items.find((i) => i.id === item.id)?.quantity}
                      className={
                        styles.cartBadge +
                        " " +
                        (isRTL ? styles.cartBadgeRTL : styles.cartBadgeLTR)
                      }
                      style={{
                        backgroundColor: colors.primary,
                      }}
                      title={`${
                        items.find((i) => i.id === item.id)?.quantity
                      } in cart`}
                    />
                  )}
                </div>
              </div>
            </Card>
          </div>
        ))}
      </div>
      </div>
    </>
  );
}