import ArabicPrice from "components/ArabicPrice";
import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons";
import { CouponBottomSheet } from "components/CustomBottomSheet/CouponBottomSheet";
import { CouponDialog } from "components/CustomBottomSheet/CouponDialog";
import { SpecialRequestBottomSheet } from "components/CustomBottomSheet/SpecialRequestBottomSheet";
import { SpecialRequestDialog } from "components/CustomBottomSheet/SpecialRequestDialog";
import { TipBottomSheet } from "components/CustomBottomSheet/TipBottomSheet";
import { TipDialog } from "components/CustomBottomSheet/TipDialog";
import CouponHeartIcon from "components/Icons/cart/CouponHeart";
import DonateHandIcon from "components/Icons/cart/DonateHandIcon";
import DonateIcon from "components/Icons/cart/DonateIcon";
import EmptyOrdersIcon from "components/Icons/EmptyOrdersIcon";
import ImageWithFallback from "components/ImageWithFallback";
import ProHeader from "components/ProHeader/ProHeader";
import ProInputCard from "components/ProInputCard/ProInputCard";
import ProText from "components/ProText";
import ProTitle from "components/ProTitle";
import {
  removeTable,
  selectCart,
  selectCartTotal,
  updateCollectionMethod,
  updateCoupon,
  updateEstimateTime,
  updateSpecialRequest,
  updateTables,
  updateTip,
} from "features/order/orderSlice";
import { useAppDispatch, useAppSelector } from "redux/hooks";

import { EditOutlined, PlusOutlined, RightOutlined } from "@ant-design/icons";
import {
  Button,
  Card,
  Col,
  Divider,
  Grid,
  Input,
  message,
  Row,
  Space,
} from "antd";
import { EstimateTimeBottomSheet } from "components/CustomBottomSheet/EstimateTimeBottomSheet";
import EditIcon from "components/Icons/EditIcon";
import OrderSummary from "components/OrderSummary/OrderSummary";
import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups";
import ProInModalMultiSelect from "components/ProSelect/ProInModalMultiSelect";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { Link, useParams } from "react-router-dom";
import { colors, ProBlack2 } from "ThemeConstants";
import { CartItem } from "utils/types/appTypes";
import styles from "./cart.module.css"; // Import CSS module
import YouMightAlsoLike from "./components/YouMightAlsoLike";

const { useBreakpoint } = Grid;

export default function CartPage() {
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
  const cart = useAppSelector(selectCart);
  const {
    items,
    specialRequest,
    coupon,
    tip,
    tables,
    estimateTimeDate,
    collectionMethod,
  } = cart;
  const subtotal = useAppSelector(selectCartTotal);
  const tax = subtotal * 0.1; // 10% tax
  const total = subtotal + tax;
  const { id } = useParams();

  const { sm, md } = useBreakpoint();

  // Mock responsive values for now
  const isMobile = !sm;
  const isTablet = sm && !md;
  const isDesktop = md;
  const isLargeDesktop = md;
  const getResponsiveClass = () =>
    isDesktop ? "desktop" : isTablet ? "tablet" : "mobile";
  const { themeName } = useAppSelector((state) => state.theme);
  const orderType = localStorage.getItem("orderType");

  // Function to get translated table names
  const getTableOptions = () => [
    { id: "1", name: t("table1") },
    { id: "2", name: t("table2") },
    { id: "3", name: t("table3") },
    { id: "4", name: t("table4") },
    { id: "5", name: t("table5") },
    { id: "6", name: t("table6") },
    { id: "7", name: t("table7") },
    { id: "8", name: t("table8") },
    { id: "9", name: t("table9") },
    { id: "10", name: t("table10") },
  ];

  const [isSpecialRequestOpen, setIsSpecialRequestOpen] = useState(false);
  const [isCouponOpen, setIsCouponOpen] = useState(false);
  const [estimateWay, setEstimateWay] = useState("now");
  const [isEstimateTimeOpen, setIsEstimateTimeOpen] = useState(false);
  const [isTipOpen, setIsTipOpen] = useState(false);

  // Prevent keyboard from appearing automatically on mobile
  useEffect(() => {
    // Blur any focused element when component mounts
    if (document.activeElement instanceof HTMLElement) {
      document.activeElement.blur();
    }

    // Prevent focus on any input elements
    const inputs = document.querySelectorAll("input, textarea, select");
    inputs.forEach((input) => {
      if (input instanceof HTMLElement) {
        input.blur();
      }
    });
  }, []);

  const handleSpecialRequestSave = (value: string) => {
    dispatch(updateSpecialRequest(value));
    message.success(t("cart.specialRequest") + " " + t("updatedSuccessfully"));
  };

  const handleSpecialRequestClose = () => {
    setIsSpecialRequestOpen(false);
  };

  const handleCouponSave = (value: string) => {
    dispatch(updateCoupon(value));
    message.success(t("cart.coupon") + " " + t("updatedSuccessfully"));
  };

  const handleCouponClose = () => {
    setIsCouponOpen(false);
  };

  const handleTipSave = (value: string) => {
    dispatch(updateTip(value));
    message.success(t("cart.tip") + " " + t("updatedSuccessfully"));
  };

  const handleTipClose = () => {
    setIsTipOpen(false);
  };

  const handleEstimateTimeSave = (date: Date, time: string) => {
    dispatch(updateEstimateTime({ date, time }));
    message.success(t("cart.estimateTime") + " " + t("updatedSuccessfully"));
  };

  const handleEstimateTimeClose = () => {
    setIsEstimateTimeOpen(false);
  };

  const getCartLayoutStyle = () => {
    if (isMobile) {
      return {
        padding: "16px",
        maxWidth: "100%",
        paddingBottom: "12vh",
      };
    } else if (isTablet) {
      return {
        padding: "24px",
        maxWidth: "100%",
        paddingBottom: "12vh",
      };
    } else {
      return {
        padding: "32px",
        maxWidth: "1400px",
        margin: "0 auto",
        paddingBottom: "12vh",
      };
    }
  };

  const getCartItemStyle = () => {
    if (isMobile) {
      return {
        padding: "16px",
        borderRadius: "12px",
      };
    } else if (isTablet) {
      return {
        padding: "20px",
        borderRadius: "16px",
      };
    } else {
      return {
        padding: "24px",
        borderRadius: "20px",
      };
    }
  };

  const getMenuItemImageStyle = () => {
    if (isMobile) {
      return {
        width: 90,
        height: 80,
      };
    } else if (isTablet) {
      return {
        width: 120,
        height: 120,
      };
    } else {
      return {
        width: 140,
        height: 140,
      };
    }
  };

  // Enhanced desktop layout
  if (isDesktop || isLargeDesktop) {
    return (
      <>
        <div className={styles.desktopCartContainer}>
          <Row gutter={[40, 40]} style={{ width: "100%" }}>
            {/* Main Content Column */}
            <Col xs={24} lg={16} xl={17}>
              <div className={styles.desktopMainContent}>
                {/* <div className={styles.desktopRecommendationsSection}>
                  <YouMightAlsoLike />
                </div> */}

                {/* Cart Items Section */}
                <div className={styles.desktopCartItemsSection}>
                  <div className={styles.desktopSectionHeader}>
                    <ProTitle
                      level={3}
                      style={{ marginBottom: "8px", color: colors.primary }}
                    >
                      {t("cartItems")} ({items.length})
                    </ProTitle>
                    <ProText type="secondary" style={{ fontSize: "16px" }}>
                      {items.length === 0
                        ? t("emptyCart")
                        : `${items.length} ${
                            items.length === 1 ? t("item") : t("items")
                          } ${t("inYourCart")}`}
                    </ProText>
                  </div>

                  {items.length === 0 ? (
                    <div className={styles.desktopEmptyCart}>
                      <div className={styles.desktopEmptyCartIcon}>
                        <EmptyOrdersIcon />
                      </div>
                      <ProTitle
                        level={4}
                        style={{ marginBottom: "16px", color: colors.primary }}
                      >
                        {t("emptyCart")}
                      </ProTitle>
                      <ProText
                        type="secondary"
                        style={{ marginBottom: "24px", fontSize: "16px" }}
                      >
                        {t("emptyCartMessage")}
                      </ProText>
                      <Link to="/menu">
                        <Button
                          type="primary"
                          size="large"
                          style={{ borderRadius: "12px", height: "48px" }}
                        >
                          {t("cart.browseMenu")}
                        </Button>
                      </Link>
                    </div>
                  ) : (
                    <div className={styles.desktopCartItems}>
                      {items.map((item, index) => (
                        <Card
                          key={item.id}
                          hoverable
                          className={`${
                            styles.desktopCartItem
                          } ${getResponsiveClass()}`}
                          styles={{
                            body: {
                              padding: "28px",
                              borderRadius: 24,
                            },
                          }}
                          style={
                            {
                              "--animation-order": index,
                            } as React.CSSProperties
                          }
                        >
                          <Row gutter={[28, 20]} align="middle">
                            <Col xs={24} sm={8} md={6}>
                              <div className={styles.desktopImageContainer}>
                                <ImageWithFallback
                                  src={item.image}
                                  alt={item.name}
                                  className={styles.desktopMenuItemImage}
                                  {...getMenuItemImageStyle()}
                                  fallbackSrc={
                                    "https://fascano-space.s3.me-central-1.amazonaws.com/uploads/restorants/685a8fc884a8c_large.jpg"
                                  }
                                />
                              </div>
                            </Col>

                            <Col xs={24} sm={16} md={12}>
                              <div className={styles.desktopItemDetails}>
                                <ProTitle
                                  level={4}
                                  style={{
                                    marginBottom: "12px",
                                    color: colors.primary,
                                  }}
                                >
                                  {item.name}
                                </ProTitle>
                                <ProText
                                  type="secondary"
                                  className={styles.desktopItemDescription}
                                  style={{ marginBottom: "20px" }}
                                >
                                  {item.description}
                                </ProText>
                                <div className={styles.desktopPriceContainer}>
                                  <ProText
                                    strong
                                    className={styles.desktopPrice}
                                  >
                                    <ArabicPrice
                                      price={item.price}
                                      style={{
                                        fontSize: "1rem",
                                        color: colors.primary,
                                      }}
                                    />
                                  </ProText>
                                </div>
                              </div>
                            </Col>

                            <Col xs={24} sm={24} md={6}>
                              <div className={styles.desktopActionsContainer}>
                                <CartActionsButtons item={item as CartItem} />
                              </div>
                            </Col>
                          </Row>
                        </Card>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            </Col>

            {/* Sidebar Column */}
            <Col xs={24} lg={8} xl={7}>
              <div className={styles.desktopSidebar}>
                {/* Special Request */}
                <div className={styles.desktopSidebarCard}>
                  <ProInputCard title={t("specialRequest")}>
                    <Input
                      value={specialRequest}
                      placeholder={t("specialRequestPlaceholder")}
                      size="large"
                      autoFocus={false}
                      style={{ height: 50 }}
                      suffix={
                        <Button
                          type="link"
                          style={{ color: colors.primary, padding: 0 }}
                          onClick={() => setIsSpecialRequestOpen(true)}
                        >
                          <EditOutlined /> {t("edit")}
                        </Button>
                      }
                    />
                  </ProInputCard>
                </div>

                {/* Coupon Code */}
                <div
                  className={styles.desktopSidebarCard}
                  style={{ "--animation-order": 1 } as React.CSSProperties}
                >
                  <ProInputCard
                    title={t("couponCode")}
                    titleRight={
                      <Button
                        type="link"
                        style={{ color: colors.primary, padding: 0 }}
                        onClick={() => setIsCouponOpen(true)}
                      >
                        {t("viewOffers")} <DonateIcon />
                      </Button>
                    }
                  >
                    <Input
                      placeholder={t("couponCodePlaceholder")}
                      size="large"
                      autoFocus={false}
                      suffix={
                        <Button
                          type="primary"
                          style={{
                            borderRadius: "100px",
                            backgroundColor: colors.primary,
                          }}
                        >
                          {t("apply")}
                          <CouponHeartIcon className={styles.couponApplyIcon} />
                        </Button>
                      }
                    />
                  </ProInputCard>
                </div>

                {/* Reward Your Waiter */}
                <Card
                  className={`${styles.desktopSidebarCard} ${styles.desktopTipCard}`}
                  style={
                    {
                      backgroundColor:
                        themeName === "light" ? "#FFB70014" : ProBlack2,
                      "--animation-order": 2,
                    } as React.CSSProperties
                  }
                >
                  <div className={styles.desktopTipHeader}>
                    <div className={styles.desktopTipIcon}>
                      <DonateHandIcon className={styles.donateHandIcon} />
                    </div>
                    <div>
                      <ProTitle level={4}>{t("rewardYourWaiter")}</ProTitle>
                      <ProText>{t("rewardYourWaiter100")}</ProText>
                    </div>
                  </div>

                  <Divider style={{ margin: "20px 0" }} />

                  <div className={styles.desktopTipButtons}>
                    <Button
                      className={styles.desktopTipButton}
                      style={{
                        borderRadius: "100px",
                        borderColor: colors.primary,
                        backgroundColor: "#FFB7001F",
                        color: colors.primary,
                      }}
                    >
                      <ArabicPrice price={0.5} />
                    </Button>
                    <Button
                      className={styles.desktopTipButton}
                      style={{
                        borderRadius: "100px",
                        backgroundColor: "#5F6C7B0D",
                      }}
                    >
                      <ArabicPrice price={1.0} />
                    </Button>
                    <Button
                      className={styles.desktopTipButton}
                      style={{
                        borderRadius: "100px",
                        color: colors.primary,
                      }}
                      onClick={() => setIsTipOpen(true)}
                    >
                      <EditOutlined /> {t("other")}
                    </Button>
                  </div>
                </Card>

                {/* Table Number */}
                <div
                  className={styles.desktopSidebarCard}
                  style={{ "--animation-order": 3 } as React.CSSProperties}
                >
                  <ProInputCard title={t("tableNumber")}>
                    <ProInModalMultiSelect
                      value={tables}
                      placeholder={t("tableNumberPlaceholder")}
                      size="large"
                      optionList={getTableOptions()}
                      style={{
                        width: "100%",
                        height: "50px",
                      }}
                      onSelect={(value) => {
                        updateTables(value);
                      }}
                      onClear={() => {
                        removeTable();
                      }}
                    />
                  </ProInputCard>
                </div>

                {/* Order Summary */}
                <Card
                  className={`${styles.desktopOrderSummary} ${styles.desktopSidebarCard}`}
                  style={{ "--animation-order": 4 } as React.CSSProperties}
                >
                  <ProTitle
                    level={3}
                    style={{ marginBottom: "20px", color: colors.primary }}
                  >
                    {t("orderSummary")}
                  </ProTitle>

                  <Divider style={{ margin: "20px 0" }} />

                  <Space
                    direction="vertical"
                    style={{ width: "100%" }}
                    size="large"
                  >
                    <div className={styles.desktopSummaryRow}>
                      <ProText>{t("basketTotal")}</ProText>
                      <ArabicPrice price={subtotal} strong />
                    </div>
                    <div className={styles.desktopSummaryRow}>
                      <ProText>{t("discount")}</ProText>
                      <ArabicPrice price={0} />
                    </div>
                    <div className={styles.desktopSummaryRow}>
                      <ProText>{t("riderTip")}</ProText>
                      <ArabicPrice price={tax} />
                    </div>

                    <Divider style={{ margin: "24px 0" }} />

                    <div className={styles.desktopTotalRow}>
                      <ProTitle
                        level={4}
                        style={{ margin: 0, color: colors.primary }}
                      >
                        {t("totalAmount")}
                      </ProTitle>
                      <ProTitle
                        level={4}
                        style={{ margin: 0, color: colors.primary }}
                      >
                        <ArabicPrice price={total} />
                      </ProTitle>
                    </div>
                  </Space>
                </Card>

                {/* Checkout Button */}
                <Button
                  type="primary"
                  size="large"
                  className={styles.desktopCheckoutButton}
                  style={{
                    height: "56px",
                    borderRadius: "16px",
                    fontSize: "18px",
                    fontWeight: 600,
                    backgroundColor: colors.primary,
                    border: "none",
                    width: "100%",
                  }}
                >
                  {t("checkout")}
                </Button>
              </div>
            </Col>
          </Row>
        </div>

        {/* Desktop Dialogs */}
        <SpecialRequestDialog
          isOpen={isSpecialRequestOpen}
          onClose={handleSpecialRequestClose}
          initialValue={specialRequest}
          onSave={handleSpecialRequestSave}
        />

        <CouponDialog
          isOpen={isCouponOpen}
          onClose={handleCouponClose}
          initialValue={coupon}
          onSave={handleCouponSave}
        />

        <TipDialog
          isOpen={isTipOpen}
          onClose={handleTipClose}
          initialValue={tip}
          onSave={handleTipSave}
        />
      </>
    );
  }

  // Mobile/Tablet Layout (existing code)
  return (
    <>
      <ProHeader>{t("cart.title")}</ProHeader>
      <div
        className={`${styles.cartContainer} ${getResponsiveClass()}`}
        style={getCartLayoutStyle()}
      >
        <Space
          direction="vertical"
          size={isMobile ? "middle" : isTablet ? "large" : "large"}
          style={{ width: "100%", gap: 16 }}
        >
          <div className={`${styles.cartContent} ${getResponsiveClass()}`}>
            <div className={styles.cartItems}>
              <Card
                hoverable
                styles={{
                  body: {
                    ...getCartItemStyle(),
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "space-between",
                  },
                }}
              >
                <div
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    justifyContent: "space-between",
                  }}
                >
                  <div
                    style={{
                      marginTop: 10,
                      boxSizing: "border-box", // Explicit box model definition
                    }}
                  >
                    <ProTitle level={5} style={{ whiteSpace: "nowrap" }}>
                      {t("cart.yourOrder")}
                    </ProTitle>
                  </div>

                  <Link
                    to={`/${id}/menu?${
                      orderType ? `orderType=${orderType}` : ""
                    }`}
                    style={{
                      width: "100%",
                      textAlign: "end",
                    }}
                  >
                    <div
                      style={{
                        color: colors.primary,
                      }}
                    >
                      <PlusOutlined
                        style={{
                          color: colors.primary,
                          marginLeft: 5,
                          marginTop: 15,
                        }}
                      />
                      {t("cart.addMore")}
                    </div>
                  </Link>
                </div>

                {items.length >= 1 && (
                  <Divider style={{ margin: "0px 0px 10px 0px" }} />
                )}
                {items.map((item, index) => (
                  <div key={index}>
                    <Space
                      size="middle"
                      style={{
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "space-between",
                        height: "100%",
                      }}
                    >
                      <Space
                        direction="vertical"
                        size="small"
                        style={{ flex: 1, gap: isMobile ? "50px" : "60px" }}
                      >
                        <div>
                          <ProText
                            style={{
                              margin: 0,
                              lineClamp: 1,
                              fontSize: isMobile ? 14 : isTablet ? 16 : 18,
                              fontWeight: 600,
                            }}
                          >
                            {item.name}
                          </ProText>
                          <br />
                          <ProText
                            type="secondary"
                            className={`${styles.itemDescription} responsive-text`}
                            style={{
                              margin: 0,
                              lineClamp: 1,
                              padding: isMobile ? 3 : isTablet ? 8 : 10,
                              fontSize: isMobile ? 14 : isTablet ? 18 : 20,
                              display: "-webkit-box",
                              WebkitBoxOrient: "vertical",
                              WebkitLineClamp: 1,
                              overflow: "hidden",
                              textOverflow: "ellipsis",
                              wordWrap: "break-word",
                              overflowWrap: "break-word",
                              lineHeight: "1.4",
                              maxHeight: "2.8em",
                              fontWeight: "500",
                              letterSpacing: "0.01em",
                            }}
                          >
                            {item.description}
                          </ProText>
                        </div>
                        <div
                          style={{
                            display: "flex",
                            flexDirection: "row",
                            justifyContent: "start",
                            gap: isMobile ? 20 : 24,
                          }}
                        >
                          <ProText
                            strong
                            style={{
                              fontSize: isMobile ? 14 : isTablet ? 16 : 18,
                            }}
                          >
                            <ArabicPrice price={item.price} />
                          </ProText>
                        </div>
                      </Space>
                      <div style={{ position: "relative" }}>
                        <ImageWithFallback
                          src={item.image}
                          alt={item.name}
                          className={`${styles.menuItemImage} responsive-image`}
                          {...getMenuItemImageStyle()}
                          fallbackSrc={
                            "https://fascano-space.s3.me-central-1.amazonaws.com/uploads/restorants/685a8fc884a8c_large.jpg"
                          }
                        />
                        <div
                          style={{
                            marginTop: 10,
                          }}
                        >
                          <CartActionsButtons item={item} />
                        </div>
                      </div>
                    </Space>

                    {index !== items.length - 1 && (
                      <Divider style={{ margin: "10px 0" }} />
                    )}
                  </div>
                ))}
              </Card>
            </div>
          </div>

          <YouMightAlsoLike />

          {/* Mobile/Tablet layout */}
          {/* Special Request */}
          <ProInputCard title={t("cart.specialRequest")}>
            <Input
              value={specialRequest}
              placeholder={t("cart.specialRequest")}
              size="large"
              autoFocus={false}
              style={{ height: 50 }}
              suffix={
                <div
                  style={{
                    color: colors.primary,
                    fontSize: 14,
                    cursor: "pointer",
                  }}
                  onClick={() => setIsSpecialRequestOpen(true)}
                >
                  <u>{t("cart.editNote")}</u> <RightOutlined />
                </div>
              }
            />
          </ProInputCard>

          {/* Coupon Code */}
          <ProInputCard
            title={t("cart.couponCode")}
            titleRight={
              <div
                style={{
                  display: "flex",
                  flexDirection: "row",
                  alignItems: "center",
                  gap: 10,
                }}
                onClick={() => setIsCouponOpen(true)}
              >
                <ProText
                  style={{
                    color: colors.primary,
                    fontSize: 14,
                    cursor: "pointer",
                  }}
                >
                  {t("cart.viewOffers")}
                </ProText>
                <DonateIcon />
              </div>
            }
          >
            <Input
              placeholder={t("cart.couponCode")}
              size="large"
              autoFocus={false}
              style={{ padding: "7px 11px", height: 50 }}
              suffix={
                <Button
                  style={{
                    width: 100,
                    height: 32,
                    borderRadius: 100,
                    backgroundColor: "black",
                    color: "white",
                  }}
                >
                  {t("cart.apply")}
                  <CouponHeartIcon className={styles.couponApplyIcon} />
                </Button>
              }
            />
          </ProInputCard>

          {/* Car Plate*/}
          {orderType === "pickup" && (
            <ProInputCard title={t("cart.plateNumber")}>
              <Input
                placeholder={t("plateNumber")}
                size="large"
                autoFocus={false}
                style={{ padding: "7px 11px", height: 50, borderRadius: 888 }}
              />
            </ProInputCard>
          )}

          {/* Estimate Time */}
          {(orderType === "delivery" || orderType === "pickup") && (
            <ProInputCard title={t("cart.estimateTime")}>
              <ProRatioGroups
                options={[
                  { label: t("cart.now"), value: "now", price: "" },
                  { label: t("cart.later"), value: "later", price: "" },
                ]}
                value={estimateWay}
                onRatioClick={(value) => {
                  if (value === "now") {
                    setEstimateWay(value);
                    handleEstimateTimeSave(new Date(), "now");
                  } else {
                    setEstimateWay(value);
                    setIsEstimateTimeOpen(true);
                  }
                }}
              />
            </ProInputCard>
          )}

          {/* Collection Method */}
          {orderType === "pickup" && (
            <ProInputCard title={t("cart.collectionMethod")}>
              <ProRatioGroups
                options={[
                  { label: t("cart.Cash"), value: "cod", price: "" },
                  {
                    label: t("cart.e-payment"),
                    value: "paymentgateway",
                    price: "",
                  },
                ]}
                value={collectionMethod}
                onRatioClick={(value) => {
                  if (value === "cod") {
                    updateCollectionMethod(value);
                  } else {
                    updateCollectionMethod(value);
                  }
                }}
              />
            </ProInputCard>
          )}

          {/* Reward Your Waiter */}
          <Card>
            <div
              style={{
                display: "flex",
                flexDirection: "row",
                justifyContent: "start",
                gap: 16,
              }}
            >
              <div
                style={{
                  width: 48,
                  gap: 10,
                  display: "flex",
                  flexDirection: "row",
                  justifyContent: "center",
                  marginTop: 4,
                }}
              >
                <DonateHandIcon className={styles.donateHandIcon} />
              </div>
              <div style={{ marginTop: 7 }}>
                <ProTitle style={{ fontSize: 18, margin: 0 }}>
                  {t("cart.rewardYourWaiter")}
                </ProTitle>
                <ProText
                  style={{ color: "rgba(95, 108, 123, 1)", fontSize: 12 }}
                >
                  {t("cart.rewardYourWaiter100")}
                </ProText>
              </div>
            </div>
            <Divider style={{ margin: "15px 0 15px 0" }} />
            <div
              style={{
                display: "flex",
                flexDirection: "row",
                justifyContent: "space-around",
              }}
            >
              <Button
                style={{
                  borderRadius: 100,
                  height: 32,
                  borderColor: "rgba(255, 183, 0, 0.12)",
                  backgroundColor: "#FFB7001F",
                  color: colors.primary,
                }}
              >
                <ArabicPrice price={0.5} />
              </Button>
              <Button
                style={{
                  borderRadius: 100,
                  height: 32,
                  backgroundColor: "#5F6C7B0D",
                  color: "rgba(95, 108, 123, 1)",
                  border: "none",
                }}
              >
                <ArabicPrice price={1.0} />
              </Button>
              <Button
                style={{
                  borderRadius: 100,
                  height: 32,
                  color: colors.primary,
                  borderColor: "#d9d9d9",
                }}
                onClick={() => setIsTipOpen(true)}
              >
                <EditIcon />
                <ProText
                  style={{
                    color: colors.primary,
                  }}
                >
                  {t("cart.other")}
                </ProText>
              </Button>
            </div>
          </Card>

          {/* Table Number */}
          {orderType === "dine-in" && (
            <ProInputCard
              title={t("cart.tableNumber")}
              className={styles.tableNumberCard}
            >
              <ProInModalMultiSelect
                value={tables}
                placeholder={t("tableNumber")}
                size="large"
                optionList={getTableOptions()}
                style={{
                  width: "100%",
                  height: 50,
                  fontSize: 12,
                }}
                onSelect={(value) => {
                  updateTables(value);
                }}
                onClear={() => {
                  removeTable();
                }}
              />
            </ProInputCard>
          )}

          {/* Invoice Summary */}
          <OrderSummary />
        </Space>
      </div>

      <div
        style={{
          width: "100%",
          padding: "16px 16px 0",
          position: "fixed",
          bottom: 0,
          left: 0,
          height: "10vh",
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-around",
          gap: "1rem",
          backgroundColor: themeName === "light" ? "white" : ProBlack2,
          boxShadow: "none",
        }}
      >
        <Link
          to={`/${id}/menu?${orderType ? `orderType=${orderType}` : ""}`}
          style={{
            width: "100%",
          }}
        >
          <Button
            style={{
              borderRadius: 100,
              height: isMobile ? 48 : isTablet ? 56 : 64,
              borderColor: "black",
              width: "100%",
              fontSize: 16,
            }}
          >
            {t("cart.addItem")}
          </Button>
        </Link>

        <Link
          to={`/${id}/checkout`}
          style={{
            width: "100%",
          }}
        >
          <Button
            style={{
              backgroundColor: colors.primary,
              borderRadius: 100,
              height: isMobile ? 48 : isTablet ? 56 : 64,
              borderColor: "#F2F2F2",
              fontSize: 16,
              color: "white",
              width: "100%",
            }}
            disabled={items.length === 0}
          >
            {t("cart.checkout")}
          </Button>
        </Link>
      </div>

      {/* Mobile/Tablet Bottom Sheets */}
      <SpecialRequestBottomSheet
        isOpen={isSpecialRequestOpen}
        onClose={handleSpecialRequestClose}
        initialValue={specialRequest}
        onSave={handleSpecialRequestSave}
      />

      <CouponBottomSheet
        isOpen={isCouponOpen}
        onClose={handleCouponClose}
        initialValue={coupon}
        onSave={handleCouponSave}
      />

      <TipBottomSheet
        isOpen={isTipOpen}
        onClose={handleTipClose}
        initialValue={tip}
        onSave={handleTipSave}
      />

      <EstimateTimeBottomSheet
        isOpen={isEstimateTimeOpen}
        onClose={handleEstimateTimeClose}
        initialDate={estimateTimeDate}
        onSave={handleEstimateTimeSave}
      />
    </>
  );
}