import ProHeader from "components/ProHeader/ProHeader.tsx";
import styles from "pages/cart/cart.module.css";
import { Space, Card, Divider } from "antd";
import ProTitle from "components/ProTitle.tsx";
import { Link, useParams } from "react-router-dom";
import { colors } from "ThemeConstants.ts";
import { PlusOutlined } from "@ant-design/icons";
import ProText from "components/ProText.tsx";
import ArabicPrice from "components/ArabicPrice";
import ImageWithFallback from "components/ImageWithFallback";
import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons.tsx";
import YouMightAlsoLike from "pages/cart/components/YouMightAlsoLike.tsx";
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups.tsx";
import {
  updateCollectionMethod,
  selectCart,
} from "features/order/orderSlice.ts";

import OrderSummary from "components/OrderSummary/OrderSummary.tsx";
import { useAppSelector } from "redux/hooks.ts";

import { useTranslation } from "react-i18next";
import SpecialRequestCard from "pages/cart/components/SpecialRequestCard.tsx";
import useBreakPoint from "hooks/useBreakPoint.ts";
import CouponCard from "pages/cart/components/CouponCard.tsx";
import RewardWaiterCard from "pages/cart/components/RewardWaiterCard.tsx";
import CarPlateCard from "pages/cart/components/CarPlateCard.tsx";
import TableNumberCard from "pages/cart/components/TableNumberCard.tsx";
import TimeEstimateCard from "pages/cart/components/timeEstimate/TimeEstimateCard.tsx";
import CartFooter from "pages/cart/components/cartFooter/CartFooter.tsx";

export default function CartMobileTabletLayout() {
  const { t } = useTranslation();
  const { items, collectionMethod } = useAppSelector(selectCart);
  const { id } = useParams();

  const { isMobile, isTablet } = useBreakPoint();

  const getResponsiveClass = () => (isTablet ? "tablet" : "mobile");

  const orderType = localStorage.getItem("orderType");

  const getMenuItemImageStyle = () => {
    if (isMobile) {
      return {
        width: 90,
        height: 80,
      };
    }
    return {
      width: 120,
      height: 120,
    };
  };
  return (
    <>
      <ProHeader>{t("cart.title")}</ProHeader>
      <div
        className={`${styles.cartContainer} '${styles.cartLayout}' ${getResponsiveClass()}`}
      >
        <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 className={styles.cartItem}>
                <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 />

          <SpecialRequestCard />

          <CouponCard />

          {/* Car Plate*/}
          {orderType === "pickup" && <CarPlateCard />}

          {/* Estimate Time */}
          {(orderType === "delivery" || orderType === "pickup") && (
            <TimeEstimateCard />
          )}

          {/* 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 */}
          <RewardWaiterCard />

          {/* Table Number */}
          {orderType === "dine-in" && <TableNumberCard />}

          {/* Invoice Summary */}
          <OrderSummary />
          {/* space keeper*/}
          <div style={{ height: "10vh" }} />
        </Space>
      </div>
      <CartFooter />
    </>
  );
}