"use client";

import { useState } from "react";
import Image from "next/image";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";

import { Offer, RetainingButton } from "@/components/domains/retaining";
import { EyeSvg } from "@/components/domains/retaining/images";
import { Spinner } from "@/components/ui";
import { BlurComponent } from "@/components/widgets";
import { useLottie } from "@/hooks/lottie/useLottie";
import { ROUTES } from "@/shared/constants/client-routes";
import { retainingImages } from "@/shared/constants/images/retaining";
import { ELottieKeys } from "@/shared/constants/lottie";
import { ERetainingFunnel } from "@/types";

import styles from "./SecondChancePage.module.scss";

export default function SecondChancePage() {
  const router = useRouter();
  const t = useTranslations("SecondChance");
  useLottie({
    preloadKey: ELottieKeys.loaderCheckMark2,
  });
  useLottie({
    preloadKey: ELottieKeys.confetti,
  });

  const [activeOffer, setActiveOffer] = useState<"pause_30" | "free_chat_30">(
    "pause_30"
  );
  const [isLoadingButton, setIsLoadingButton] = useState<boolean>(false);
  // const retainingFunnel = useSelector(selectors.selectRetainingFunnel);
  // const token = useSelector(selectors.selectToken);
  // const cancellingSubscriptionId = useSelector(selectors.selectCancellingSubscriptionId);

  const retainingFunnel = ERetainingFunnel.Red;

  const handleOfferClick = (offer: "pause_30" | "free_chat_30") => {
    if (isLoadingButton) return;
    setActiveOffer(offer);
  };

  const handleGetOfferClick = async () => {
    if (isLoadingButton) return;
    setIsLoadingButton(true);

    // const response = await api.userSubscriptionAction({
    //     subscriptionId: cancellingSubscriptionId,
    //     action: activeOffer,
    //     token
    // });
    // if (response.status === "success") {
    //     navigate(routes.client.retainingFunnelPlanCancelled());
    // }
  };

  const handleCancelClick = () => {
    if (isLoadingButton) return;
    if (retainingFunnel === ERetainingFunnel.Red) {
      router.push(ROUTES.retainingFunnelChangeMind());
    }
    // if (retainingFunnel === ERetainingFunnel.Green) {
    //     return navigate(routes.client.retainingFunnelCancellationOfSubscription());
    // }
    // if (retainingFunnel === ERetainingFunnel.Purple) {
    //     return navigate(routes.client.retainingFunnelStopFor30Days());
  };

  return (
    <>
      <div className={styles.offers}>
        <Offer
          title={t.rich("offers.1.title", { br: () => <br /> })}
          description={t("offers.1.description")}
          oldPrice={t("offers.1.old-price")}
          newPrice={t("offers.1.new-price")}
          onClick={() => handleOfferClick("pause_30")}
          active={activeOffer === "pause_30"}
          image={<EyeSvg className={styles.offerImageEYE} />}
        />
        <Offer
          title={t("offers.2.title")}
          description={t("offers.2.description")}
          oldPrice={t("offers.2.old-price")}
          newPrice={t("offers.2.new-price")}
          onClick={() => handleOfferClick("free_chat_30")}
          active={activeOffer === "free_chat_30"}
          image={
            // <img className={styles.offerImageVIP} src={images("vip_member.png")} alt="vip member" />
            <Image
              src={retainingImages("vip_member.png")}
              alt="vip member"
              className={styles.offerImageVIP}
              width={711}
              height={609}
            />
          }
        />
      </div>

      <div className={styles.buttonOfferContainer}>
        <BlurComponent className={styles.blur} isActiveBlur={true}>
          <RetainingButton
            className={styles.buttonOffer}
            active={true}
            onClick={handleGetOfferClick}
          >
            {isLoadingButton && (
              <div className={styles.loaderContainer}>
                <Spinner />
              </div>
            )}
            {t("get_offer")}
          </RetainingButton>
        </BlurComponent>
      </div>
      <RetainingButton
        className={styles.buttonCancel}
        onClick={handleCancelClick}
      >
        {t("cancel")}
      </RetainingButton>
    </>
  );
}