import { StarOutlined } from "@ant-design/icons";
import { Badge, Button, 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, useParams } 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 navigate = useNavigate();
  const { t } = useTranslation();
  const { themeName } = useAppSelector((state) => state.theme);
  const { id } = useParams();

  // 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(`/${id}/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}
                    />

                    {item.isHasLoyalty && (
                      <Button
                        className={styles.loyaltyButton}
                        icon={<StarOutlined />}
                        style={{ width: 24, height: 24 }}
                      />
                    )}

                    <AddToCartButton />

                    {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>
    </>
  );
}
