"use client";

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

import { RetainingButton } from "@/components/domains/retaining";
import { Spinner } from "@/components/ui";
import { performUserSubscriptionAction } from "@/entities/subscriptions/actions";
import { useLottie } from "@/hooks/lottie/useLottie";
import { useRetainingStore } from "@/providers/retaining-store-provider";
import { useToast } from "@/providers/toast-provider";
import { ROUTES } from "@/shared/constants/client-routes";
import { ELottieKeys } from "@/shared/constants/lottie";
import { ERetainingFunnel } from "@/types";

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

export default function Buttons() {
  const t = useTranslations("StopFor30Days");
  const router = useRouter();
  useLottie({
    preloadKey: ELottieKeys.loaderCheckMark2,
  });
  useLottie({
    preloadKey: ELottieKeys.confetti,
  });
  const { addToast } = useToast();

  const [isLoadingButton, setIsLoadingButton] = useState<boolean>(false);

  const { funnel, cancellingSubscription, journey } = useRetainingStore(
    state => state
  );

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

    const response = await performUserSubscriptionAction({
      subscriptionId: cancellingSubscription?.id || "",
      action: "pause_30",
      retainingJourney: journey || undefined,
    });

    if (response?.data?.status === "success") {
      return router.push(ROUTES.retainingFunnelSubscriptionStopped());
    }
    setIsLoadingButton(false);
    addToast({
      variant: "error",
      message: t("error_message"),
      duration: 5000,
    });
  };

  const handleCancelClick = async () => {
    if (isLoadingButton) return;
    if (funnel === ERetainingFunnel.Green) {
      return router.push(ROUTES.retainingFunnelChangeMind());
    }

    // Direct cancellation instead of 60-day pause screen
    setIsLoadingButton(true);
    const response = await performUserSubscriptionAction({
      subscriptionId: cancellingSubscription?.id || "",
      action: "cancel",
      retainingJourney: journey || undefined,
    });

    if (response?.data?.status === "success") {
      return router.push(ROUTES.retainingFunnelPlanCancelled());
    }
    setIsLoadingButton(false);
    addToast({
      variant: "error",
      message: "Something went wrong. Please try again later.",
      duration: 5000,
    });
  };

  return (
    <div className={styles.buttonsContainer}>
      <RetainingButton
        className={styles.button}
        active={true}
        onClick={handleStopClick}
      >
        {isLoadingButton && (
          <div className={styles.loaderContainer}>
            <Spinner />
          </div>
        )}
        {t("stop")}
      </RetainingButton>
      <RetainingButton
        className={styles.buttonCancel}
        onClick={handleCancelClick}
      >
        {t("cancel")}
      </RetainingButton>
    </div>
  );
}