import { Button, Card, Flex, Layout, Progress, Timeline, Tooltip } from "antd";

import ProHeader from "components/ProHeader/ProHeader";
import ProText from "components/ProText";
import { useTranslation } from "react-i18next";
import { useNavigate, useParams } from "react-router-dom";
import styles from "./rewardsAndLoyalty.module.css";

import { OrderType } from "pages/checkout/hooks/types.ts";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import { selectCart, updateUseLoyaltyPoints } from "features/order/orderSlice";
import CoinsIcon from "components/Icons/CoinsIcon";
import ArabicPrice from "components/ArabicPrice";
import RaiseIcon from "components/Icons/RaiseIcon";
import CupIcon from "components/Icons/CupIcon";
import ProInputCard from "components/ProInputCard/ProInputCard";
import { useGetLoyaltyHistoryQuery } from "redux/api/others";
import dayjs from "dayjs";
import PopularIcon from "components/Icons/PopularIcon";

export default function RewardsAndLoyalityPage() {
  const dispatch = useAppDispatch();
  const { t } = useTranslation();
  const navigate = useNavigate();
  const { subdomain } = useParams();

  const { restaurant } = useAppSelector(selectCart);
  const loyaltyStamps = restaurant?.loyalty_stamps ?? 0;
  const customerLoyaltyPoints = restaurant?.customer_loyalty_points ?? 0;
  const { data: loyaltyHistory } = useGetLoyaltyHistoryQuery();
  const loyaltyHistories = loyaltyHistory?.filter(
    (LH) => Number(LH.restaurant_id) === Number(restaurant.restautantId),
  );

  const handleRedeem = () => {
    navigate(`/${subdomain}/menu?orderType=${OrderType.DineIn}`);
    dispatch(updateUseLoyaltyPoints(true));
  };

  const currentStampRound = customerLoyaltyPoints % loyaltyStamps;

  return (
    <>
      <Layout>
        <ProHeader>{t("rewardsAndLoyalty.title")}</ProHeader>
        <Layout.Content className={styles.redeemContainer}>
          <Flex gap="small" wrap justify="center">
            <Tooltip title="3 done / 3 in progress / 4 to do">
              <div style={{ margin: "47px 47px 20px 47px" }}>
                <Progress
                  percent={(currentStampRound / loyaltyStamps) * 100}
                  format={() => (
                    <div
                      style={{
                        display: "flex",
                        flexDirection: "column",
                        alignItems: "center",
                        justifyContent: "center",
                        gap: 4,
                      }}
                    >
                      <ProText
                        style={{
                          fontWeight: 600,
                          fontStyle: "SemiBold",
                          fontSize: 48,
                          lineHeight: "100%",
                          letterSpacing: "0%",
                          textAlign: "center",
                        }}
                      >
                        {currentStampRound} / {loyaltyStamps}
                      </ProText>
                      <ProText
                        style={{
                          fontWeight: 400,
                          fontStyle: "Regular",
                          fontSize: 16,
                          lineHeight: "140%",
                          letterSpacing: "0%",
                          textAlign: "center",
                          color: "#E8B400",
                          marginTop: 4,
                        }}
                      >
                        {t("rewardsAndLoyalty.completedPurchases")}
                      </ProText>
                    </div>
                  )}
                  strokeColor="#FFB700"
                  size={250}
                  type="circle"
                />
              </div>
            </Tooltip>
          </Flex>

          <Flex
            gap="small"
            wrap={false}
            justify="center"
            style={{ width: "100%" }}
          >
            <div className={styles.orderNotes}>
              <div
                style={{
                  height: 32,
                  width: 32,
                  minHeight: 32,
                  minWidth: 32,
                  backgroundColor: "var(--background)",
                  borderRadius: "50%",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                <CoinsIcon />
              </div>
              <div
                style={{
                  display: "flex",
                  flexDirection: "column",
                  gap: 4,
                  width: "100%",
                }}
              >
                <ProText
                  style={{
                    fontWeight: 400,
                    fontStyle: "Regular",
                    fontSize: 12,
                    lineHeight: "140%",
                    letterSpacing: "0%",
                    color: "#777580",
                  }}
                >
                  {t("rewardsAndLoyalty.saved")}
                </ProText>

                <ProText
                  style={{
                    fontWeight: 500,
                    fontStyle: "Medium",
                    fontSize: 14,
                    lineHeight: "140%",
                    letterSpacing: "0%",
                    color: "#333333",
                  }}
                >
                  <ArabicPrice price={customerLoyaltyPoints || 0} />
                </ProText>
              </div>
            </div>

            <div className={styles.orderNotes}>
              <div
                style={{
                  height: 32,
                  width: 32,
                  minHeight: 32,
                  minWidth: 32,
                  backgroundColor: "var(--background)",
                  borderRadius: "50%",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                <RaiseIcon />
              </div>
              <div
                style={{
                  display: "flex",
                  flexDirection: "column",
                  gap: 4,
                  width: "100%",
                }}
              >
                <ProText
                  style={{
                    fontWeight: 400,
                    fontStyle: "Regular",
                    fontSize: 12,
                    lineHeight: "140%",
                    letterSpacing: "0%",
                    color: "#777580",
                  }}
                >
                  {t("rewardsAndLoyalty.totalPurchased")}
                </ProText>

                <ProText
                  style={{
                    fontWeight: 500,
                    fontStyle: "Medium",
                    fontSize: 14,
                    lineHeight: "140%",
                    letterSpacing: "0%",
                    color: "#333333",
                  }}
                >
                  {loyaltyStamps}
                </ProText>
              </div>
            </div>
          </Flex>

          <div className={styles.nextRewards}>
            <div
              style={{
                height: 42,
                width: 42,
                minHeight: 42,
                minWidth: 42,
                backgroundColor: "#FFF5D4",
                borderRadius: "50%",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <CupIcon />
            </div>
            <div
              style={{
                display: "flex",
                flexDirection: "column",
                gap: 4,
                width: "100%",
              }}
            >
              <ProText
                style={{
                  fontWeight: 500,
                  fontStyle: "Medium",
                  fontSize: 16,
                  lineHeight: "140%",
                  letterSpacing: "0%",
                }}
              >
                {t("rewardsAndLoyalty.almosthere")}
              </ProText>

              <ProText
                style={{
                  fontWeight: 400,
                  fontStyle: "Regular",
                  fontSize: 14,
                  lineHeight: "140%",
                  letterSpacing: "0%",
                  color: "#777580",
                }}
              >
                {t("rewardsAndLoyalty.youreJustXCupsAwayFromYourNextReward", {
                  cups: loyaltyStamps - (customerLoyaltyPoints % loyaltyStamps),
                })}
              </ProText>
            </div>
          </div>

          <ProInputCard title={t("rewardsAndLoyalty.yourAvailableRewards")}>
            <div
              style={{
                display: "flex",
                flexDirection: "column",
                gap: 10,
                alignItems: "center",
                placeItems: "center",
              }}
            >
              <div
                style={{
                  height: 42,
                  width: 42,
                  minHeight: 42,
                  minWidth: 42,
                  backgroundColor: "#FFF5D4",
                  borderRadius: "50%",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                <CupIcon />
              </div>
              <ProText
                style={{
                  fontWeight: 600,
                  fontStyle: "SemiBold",
                  fontSize: 18,
                  lineHeight: "140%",
                  letterSpacing: "0%",
                  textAlign: "center",
                }}
              >
                {t("rewardsAndLoyalty.youCurrentlyHave")}
              </ProText>
              <ProText
                style={{
                  fontWeight: 600,
                  fontStyle: "SemiBold",
                  fontSize: 20,
                  lineHeight: "140%",
                  letterSpacing: "0%",
                  textAlign: "center",
                  color: "#E8B400",
                }}
              >
                <span style={{ padding: "0 4px" }}>
                  {Math.floor(customerLoyaltyPoints / loyaltyStamps)}
                </span>
                {t("rewardsAndLoyalty.freeItems")}
              </ProText>
              <ProText
                style={{
                  fontWeight: 400,
                  fontStyle: "Regular",
                  fontSize: 12,
                  lineHeight: "140%",
                  letterSpacing: "0%",
                  textAlign: "center",
                  color: "#777580",
                }}
              >
                {t("rewardsAndLoyalty.youCanRedeemDuringTheCheckout")}
              </ProText>
              <Button
                type="primary"
                shape="round"
                className={styles.checkoutButton}
                onClick={handleRedeem}
                style={{
                  width: "100%",
                  height: 40,
                  borderRadius: 888,
                  backgroundColor: "#FFB700",
                  color: "white",
                }}
              >
                {t("rewardsAndLoyalty.redeemNow")}
              </Button>
            </div>
          </ProInputCard>

          <ProInputCard title={t("rewardsAndLoyalty.loyaltyHistory")}>
            <Timeline
              items={
                loyaltyHistories && loyaltyHistories.length > 0
                  ? loyaltyHistories.map((item: any, index: number) => ({
                      content: (
                        <div key={index}>
                          {/* <ProText
                            style={{
                              fontWeight: 500,
                              fontStyle: "Medium",
                              fontSize: 14,
                              lineHeight: "140%",
                              letterSpacing: "0%",
                              color: "#333333",
                            }}
                          >
                            {item.restaurant_name ||
                              item.name ||
                              item.restaurantName ||
                              t("rewardsAndLoyalty.order")}
                          </ProText> */}
                          {(item.created_at ||
                            item.date ||
                            item.order_date ||
                            true) && (
                            <ProText
                              style={{
                                fontWeight: 600,
                                fontStyle: "SemiBold",
                                fontSize: 16,
                                lineHeight: "140%",
                                letterSpacing: "0%",
                                color: "#777580",
                              }}
                            >
                              {dayjs(
                                item.created_at || item.date || item.order_date,
                              ).format("DD MMMM YYYY")}
                            </ProText>
                          )}
                          <div className={styles.loyaltyHistoryItem}>
                            <div
                              style={{
                                height: 30,
                                width: 20,
                                minHeight: 30,
                                minWidth: 20,
                                borderRadius: "50%",
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "center",
                              }}
                            >
                              <PopularIcon />
                            </div>
                            <div
                              style={{
                                display: "flex",
                                flexDirection: "column",
                                gap: 4,
                                width: "100%",
                              }}
                            >
                              <ProText
                                style={{
                                  fontWeight: 500,
                                  fontStyle: "Medium",
                                  fontSize: 16,
                                  lineHeight: "140%",
                                  letterSpacing: "0%",
                                }}
                              >
                                {t("rewardsAndLoyalty.earned")}{" "}
                                <ProText
                                  style={{
                                    fontWeight: 500,
                                    fontStyle: "Medium",
                                    fontSize: 16,
                                    lineHeight: "140%",
                                    letterSpacing: "0%",
                                    color: "#E8B400",
                                  }}
                                >
                                  {t("rewardsAndLoyalty.xPoints", {
                                    points:
                                      item.total_points ||
                                      item.points ||
                                      item.loyalty_stamps,
                                  })}
                                </ProText>
                              </ProText>

                              <ProText
                                style={{
                                  fontWeight: 400,
                                  fontStyle: "Regular",
                                  fontSize: 14,
                                  lineHeight: "140%",
                                  letterSpacing: "0%",
                                  color: "#777580",
                                }}
                              >
                                {t("rewardsAndLoyalty.yourOrderFrom", {
                                  restaurantName:
                                    item.restaurant_name ||
                                    item.name ||
                                    item.restaurantName,
                                })}
                              </ProText>
                            </div>
                          </div>
                        </div>
                      ),
                    }))
                  : []
              }
            />
          </ProInputCard>
        </Layout.Content>
      </Layout>
    </>
  );
}
