import React, { useState } from "react";

import { useSelector } from "react-redux";

import "./payment-screen.css";

import useSteps, { Step } from "@/hooks/palmistry/use-steps";
import useTimer from "@/hooks/palmistry/use-timer";
import HeaderLogo from "@/components/palmistry/header-logo/header-logo";
import { selectors } from "@/store";
import { EPlacementKeys } from "@/api/resources/Paywall";
import { useNavigate, useSearchParams } from "react-router-dom";
import PaymentModalNew from "@/components/PaymentModalNew";
import { addCurrency, ELocalesPlacement } from "@/locales";
import { getPriceCentsToDollars } from "@/services/price";
import routes from "@/routes";
import { useTranslations } from "@/hooks/translations";
import metricService, { EGoals, EMetrics } from "@/services/metric/metricService";

export default function PaymentScreen() {
  const { translate } = useTranslations(ELocalesPlacement.PalmistryV0);
  const navigate = useNavigate();
  const time = useTimer();
  const activeProductFromStore = useSelector(selectors.selectActiveProduct);
  const [searchParams] = useSearchParams();
  const subscriptionStatus =
    searchParams.get("redirect_status") === "succeeded" ? "subscribed" : "lead";
  const [height, setHeight] = useState(
    subscriptionStatus === "subscribed" ? 246 : 146
  );

  const steps = useSteps();

  React.useEffect(() => {
    if (subscriptionStatus === "subscribed") {
      metricService.reachGoal(EGoals.PAYMENT_SUCCESS, [EMetrics.YANDEX, EMetrics.KLAVIYO]);
      metricService.reachGoal(EGoals.PAYMENT_SUCCESS_PALMISTRY, [
        EMetrics.YANDEX,
      ]);
      // if (activeProductFromStore) {
      //   metricService.reachGoal(EGoals.PURCHASE, [EMetrics.FACEBOOK], {
      //     currency: "USD",
      //     value: ((activeProductFromStore.trialPrice || 100) / 100).toFixed(2),
      //   });
      // }
      setTimeout(() => {
        // steps.goNext();
        navigate(routes.client.skipTrial());
      }, 1500);
    }
  }, [activeProductFromStore, navigate, subscriptionStatus]);

  React.useEffect(() => {
    if (!activeProductFromStore) {
      steps.setFirstUnpassedStep(Step.SubscriptionPlan);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [activeProductFromStore]);

  const trialPrice = activeProductFromStore?.trialPrice || 0;
  const fullPrice = activeProductFromStore?.price || 0;
  const currency = useSelector(selectors.selectCurrency);
  const [minutes, seconds] = time.split(":");

  const returnUrl = window.location.origin + "/palmistry/payment";
  return (
    <div className="payment-screen">
      <div className="payment-screen__header">
        <HeaderLogo />
      </div>

      <div className="payment-screen__content">
        <div className="payment-screen__about-us">
          <span>
            {translate("/payment.app_number_one", {
              color: (
                <span className="payment-screen__about-us-accent">
                  {translate("/payment.app_number_one_color")}
                </span>
              ),
            })}
          </span>

          <svg
            width="77"
            height="12"
            viewBox="0 0 77 12"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <g clipPath="url(#clip0_409_2130)">
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M12.4773 4.45009C12.4173 4.2587 12.2544 4.13486 12.0624 4.13486L8.13729 4.12454L6.89963 0.310887C6.83788 0.120438 6.67628 -0.00762207 6.48113 0.000352486C6.28911 0.00269785 6.12704 0.127475 6.06931 0.319328L4.91044 4.12454L0.937881 4.13486C0.745855 4.13486 0.582925 4.2587 0.522944 4.44961C0.462517 4.64098 0.52384 4.84226 0.678714 4.96139L3.78738 7.36358L2.56808 11.401C2.5099 11.5928 2.57256 11.7926 2.72833 11.9109C2.80666 11.97 2.89618 12 2.98571 12C3.07434 12 3.16251 11.9709 3.23906 11.9132L6.51646 9.49272L9.76119 11.9113C9.91565 12.0295 10.1179 12.0291 10.2733 11.9109C10.429 11.7932 10.4917 11.5933 10.434 11.4014L9.21289 7.36358L12.3211 4.96184C12.476 4.84226 12.5373 4.64098 12.4773 4.45009Z"
                fill="#FFC43A"
              />
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M28.4773 4.45009C28.4173 4.2587 28.2544 4.13486 28.0624 4.13486L24.1373 4.12454L22.8996 0.310887C22.8379 0.120438 22.6763 -0.00762207 22.4811 0.000352486C22.2891 0.00269785 22.127 0.127475 22.0693 0.319328L20.9104 4.12454L16.9379 4.13486C16.7458 4.13486 16.5829 4.2587 16.5229 4.44961C16.4625 4.64098 16.5239 4.84226 16.6787 4.96139L19.7874 7.36358L18.5681 11.401C18.5099 11.5928 18.5726 11.7926 18.7283 11.9109C18.8066 11.97 18.8962 12 18.9857 12C19.0743 12 19.1625 11.9709 19.2391 11.9132L22.5165 9.49272L25.7612 11.9113C25.9156 12.0295 26.1179 12.0291 26.2733 11.9109C26.429 11.7931 26.4917 11.5933 26.434 11.4014L25.2129 7.36358L28.3211 4.96184C28.476 4.84226 28.5373 4.64098 28.4773 4.45009Z"
                fill="#FFC43A"
              />
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M44.4773 4.45009C44.4173 4.2587 44.2544 4.13486 44.0624 4.13486L40.1373 4.12454L38.8996 0.310887C38.8379 0.120438 38.6763 -0.00762207 38.4811 0.000352486C38.2891 0.00269785 38.127 0.127475 38.0693 0.319328L36.9104 4.12454L32.9379 4.13486C32.7459 4.13486 32.5829 4.2587 32.5229 4.44961C32.4625 4.64098 32.5238 4.84226 32.6787 4.96139L35.7874 7.36358L34.5681 11.401C34.5099 11.5928 34.5726 11.7926 34.7283 11.9109C34.8066 11.97 34.8962 12 34.9857 12C35.0743 12 35.1625 11.9709 35.2391 11.9132L38.5165 9.49272L41.7612 11.9113C41.9156 12.0295 42.1179 12.0291 42.2733 11.9109C42.429 11.7931 42.4917 11.5933 42.434 11.4014L41.2129 7.36358L44.3211 4.96184C44.476 4.84226 44.5373 4.64098 44.4773 4.45009Z"
                fill="#FFC43A"
              />
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M60.4774 4.45009C60.4169 4.2587 60.2543 4.13486 60.0621 4.13486L56.1372 4.12454L54.8996 0.310887C54.8376 0.120438 54.6761 -0.00762207 54.4812 0.000352486C54.2889 0.00269785 54.1268 0.127475 54.069 0.319328L52.9106 4.12454L48.9379 4.13486C48.7459 4.13486 48.5829 4.2587 48.5229 4.44961C48.4625 4.64098 48.5238 4.84226 48.6787 4.96139L51.7873 7.36358L50.5681 11.401C50.5098 11.5928 50.5725 11.7926 50.7283 11.9109C50.8066 11.97 50.8961 12 50.9857 12C51.0743 12 51.1625 11.9709 51.239 11.9132L54.5166 9.49272L57.7609 11.9113C57.9157 12.0295 58.1179 12.0291 58.2732 11.9109C58.429 11.7931 58.4915 11.5933 58.4337 11.4014L57.2127 7.36358L60.321 4.96184C60.4758 4.84226 60.5373 4.64098 60.4774 4.45009Z"
                fill="#FFC43A"
              />
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M76.4774 4.45009C76.4174 4.2587 76.2544 4.13486 76.0626 4.13486L72.1372 4.12454L70.8996 0.310887C70.8381 0.120438 70.6765 -0.00762207 70.4811 0.000352486C70.2894 0.00269785 70.1273 0.127475 70.0695 0.319328L68.9106 4.12454L64.9382 4.13486C64.746 4.13486 64.5829 4.2587 64.5229 4.44961C64.4625 4.64098 64.524 4.84226 64.6787 4.96139L67.7876 7.36358L66.5682 11.401C66.5099 11.5928 66.5729 11.7926 66.7282 11.9109C66.8069 11.97 66.8965 12 66.9856 12C67.0742 12 67.1628 11.9709 67.2394 11.9132L70.5166 9.49272L73.7614 11.9113C73.9157 12.0295 74.1179 12.0291 74.2731 11.9109C74.429 11.7931 74.492 11.5933 74.4342 11.4014L73.2127 7.36358L76.3211 4.96184C76.4758 4.84226 76.5373 4.64098 76.4774 4.45009Z"
                fill="#FFC43A"
              />
            </g>
            <defs>
              <clipPath id="clip0_409_2130">
                <rect
                  width="76"
                  height="12"
                  fill="white"
                  transform="translate(0.5)"
                />
              </clipPath>
            </defs>
          </svg>
        </div>

        <div className="payment-screen__timer">
          <span className="payment-screen__timer-title">
            {translate("/payment.payment_information.personalized_offer")}
          </span>

          <div className="payment-screen__timer-time">
            <span>{minutes[0]}</span>
            <span>{minutes[1]}</span>:<span>{seconds[0]}</span>
            <span>{seconds[1]}</span>
          </div>
        </div>

        <h1 className="payment-screen__title">
          {translate("/payment.payment_information.title", {
            trialDuration: activeProductFromStore?.trialDuration,
          })}
        </h1>

        <div className="payment-screen__total-today">
          <span>{translate("/payment.payment_information.total_today")}</span>

          <span className="payment-screen__trial-price">
            {addCurrency(getPriceCentsToDollars(trialPrice), currency)}
          </span>
        </div>

        <div className="payment-screen__promocode">
          <svg
            width="20"
            height="20"
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.125 8.125C8.47018 8.125 8.75 7.84518 8.75 7.5C8.75 7.15482 8.47018 6.875 8.125 6.875C7.77982 6.875 7.5 7.15482 7.5 7.5C7.5 7.84518 7.77982 8.125 8.125 8.125Z"
              fill="#04A777"
            />
            <path
              d="M11.875 13.125C12.2202 13.125 12.5 12.8452 12.5 12.5C12.5 12.1548 12.2202 11.875 11.875 11.875C11.5298 11.875 11.25 12.1548 11.25 12.5C11.25 12.8452 11.5298 13.125 11.875 13.125Z"
              fill="#04A777"
            />
            <path
              d="M17.5 6.05375V3.75C17.5 3.405 17.22 3.125 16.875 3.125H3.125C2.78 3.125 2.5 3.405 2.5 3.75V6.05375C0.9875 6.7575 0 8.29 0 10C0 11.7087 0.9875 13.2425 2.5 13.9462V16.25C2.5 16.595 2.78 16.875 3.125 16.875H16.875C17.22 16.875 17.5 16.595 17.5 16.25V13.9462C19.0125 13.2425 20 11.7087 20 10C20 8.29 19.0125 6.7575 17.5 6.05375ZM8.125 5.625C9.15875 5.625 10 6.46625 10 7.5C10 8.53375 9.15875 9.375 8.125 9.375C7.09125 9.375 6.25 8.53375 6.25 7.5C6.25 6.46625 7.09125 5.625 8.125 5.625ZM6.875 14.375C6.73375 14.375 6.5925 14.3275 6.475 14.23C6.21 14.0087 6.17375 13.615 6.395 13.35L12.645 5.85C12.8675 5.58375 13.2612 5.55125 13.525 5.77C13.79 5.99125 13.825 6.385 13.6038 6.65125L7.35375 14.1512C7.23125 14.2975 7.05375 14.375 6.875 14.375ZM11.875 14.375C10.8413 14.375 10 13.5337 10 12.5C10 11.4663 10.8413 10.625 11.875 10.625C12.9087 10.625 13.75 11.4663 13.75 12.5C13.75 13.5337 12.9087 14.375 11.875 14.375Z"
              fill="#04A777"
            />
          </svg>

          <span>
            {translate("/payment.payment_information.code_applied", {
              bold: (
                <b>
                  {translate("/payment.payment_information.code_applied_bold")}
                </b>
              ),
            })}
          </span>
        </div>

        <div className="payment-screen__prices">
          <span>
            {translate("/payment.will_be_charged", {
              trialInfo: (
                <b>
                  {translate("/payment.will_be_charged_trial_info", {
                    trialPrice: addCurrency(
                      getPriceCentsToDollars(trialPrice),
                      currency
                    ),
                    trialDuration: activeProductFromStore?.trialDuration,
                  })}
                </b>
              ),
              fullPrice: (
                <s>
                  {addCurrency(getPriceCentsToDollars(fullPrice), currency)}
                </s>
              ),
              trialPrice: addCurrency(
                getPriceCentsToDollars(trialPrice),
                currency
              ),
              save: addCurrency(
                getPriceCentsToDollars(fullPrice - trialPrice),
                currency
              ),
              emailReminder: (
                <b>{translate("/payment.will_be_charged_email_reminder")}</b>
              ),
            })}
          </span>
        </div>

        <div className="payment-screen__guarantees">
          <div className="payment-screen__guarantee">
            <svg
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g clipPath="url(#clip0_409_2029)">
                <path
                  d="M20.003 4.75028C20.003 3.23303 18.7698 2 17.2525 2H2.75046C1.23321 2 0 3.23303 0 4.75028V8.00088H20.003V4.75028Z"
                  fill="#066FDE"
                />
                <path
                  d="M5.00027 5.00079C4.44721 5.00079 4 4.55267 4 4.00052V1.00008C4 0.448125 4.44721 0 5.00027 0C5.55333 0 6.00035 0.448125 6.00035 1.00008V4.00052C6.00035 4.55267 5.55333 5.00079 5.00027 5.00079Z"
                  fill="#066FDE"
                />
                <path
                  d="M15.002 5.00079C14.449 5.00079 14.002 4.55267 14.002 4.00052V1.00008C14.002 0.448125 14.449 0 15.002 0C15.5551 0 16.0021 0.448125 16.0021 1.00008V4.00052C16.0021 4.55267 15.5551 5.00079 15.002 5.00079Z"
                  fill="#066FDE"
                />
                <path
                  d="M8.00123 19.0029H3.00044C1.3462 19.0029 0 17.6567 0 16.0025V6.00106C0 5.44892 0.447026 5.00098 1.00008 5.00098C1.55314 5.00098 2.00035 5.44892 2.00035 6.00106V16.0025C2.00035 16.5537 2.44829 17.0027 3.00044 17.0027H8.00123C8.55429 17.0027 9.00131 17.4507 9.00131 18.0028C9.00131 18.555 8.55429 19.0029 8.00123 19.0029Z"
                  fill="#066FDE"
                />
                <path
                  d="M19.004 9.0015C18.4509 9.0015 18.0039 8.55337 18.0039 8.00141V6.00106C18.0039 5.44892 18.4509 5.00098 19.004 5.00098C19.5571 5.00098 20.0043 5.44892 20.0043 6.00106V8.00141C20.0043 8.55337 19.5571 9.0015 19.004 9.0015Z"
                  fill="#066FDE"
                />
                <path
                  d="M22.1001 12.9057C19.5657 10.3713 15.441 10.3713 12.9066 12.9057C10.3723 15.44 10.3723 19.5647 12.9066 22.0991C15.441 24.6334 19.5657 24.6334 22.1001 22.0991C24.6344 19.5647 24.6344 15.44 22.1001 12.9057ZM18.7405 20.1548L17.5033 18.9166L16.2662 20.1537C15.8761 20.5437 15.2419 20.5437 14.8519 20.1537C14.4618 19.7636 14.4618 19.1296 14.8519 18.7395L16.0891 17.5023L14.8519 16.2652C14.4618 15.8751 14.4618 15.241 14.8519 14.8509C15.2419 14.4608 15.8761 14.4608 16.2662 14.8509L17.5033 16.0881L18.7405 14.8509C19.1306 14.4608 19.7646 14.4608 20.1546 14.8509C20.5447 15.241 20.5447 15.8751 20.1546 16.2652L18.9176 17.5023L20.1546 18.7395C20.5447 19.1296 20.5447 19.7636 20.1546 20.1537C19.7646 20.5448 19.1315 20.5448 18.7405 20.1548Z"
                  fill="#066FDE"
                />
              </g>
              <defs>
                <clipPath id="clip0_409_2029">
                  <rect width="24" height="24" fill="white"></rect>
                </clipPath>
              </defs>
            </svg>

            <span>{translate("/payment.guarantees.no_commitment")}</span>
          </div>

          <div className="payment-screen__guarantee">
            <svg
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M21.4319 3.42545C16.665 3.42545 12.5755 0.218965 12.5326 0.184671C12.3813 0.0650635 12.194 0 12.0011 0C11.8081 0 11.6209 0.0650635 11.4695 0.184671C11.4266 0.218965 7.35424 3.42545 2.57024 3.42545C2.34286 3.42545 2.12479 3.51577 1.964 3.67656C1.80322 3.83734 1.71289 4.05541 1.71289 4.28279V11.9989C1.71289 17.7517 4.0363 20.5724 11.6496 23.9246C11.7601 23.9743 11.8799 24 12.0011 24C12.1222 24 12.242 23.9743 12.3526 23.9246C19.9658 20.5724 22.2892 17.7517 22.2892 11.9989V4.28279C22.2892 4.05541 22.1989 3.83734 22.0381 3.67656C21.8773 3.51577 21.6593 3.42545 21.4319 3.42545ZM12.0011 18.8577C10.6445 18.8577 9.31845 18.4554 8.19053 17.7018C7.06261 16.9481 6.1835 15.8769 5.66438 14.6237C5.14525 13.3704 5.00942 11.9913 5.27407 10.6608C5.53872 9.33037 6.19195 8.10825 7.15117 7.14903C8.11039 6.18981 9.33251 5.53658 10.663 5.27193C11.9935 5.00728 13.3725 5.14311 14.6258 5.66223C15.8791 6.18136 16.9503 7.06047 17.7039 8.18839C18.4576 9.31631 18.8598 10.6424 18.8598 11.9989C18.8598 13.818 18.1372 15.5625 16.851 16.8488C15.5647 18.1351 13.8201 18.8577 12.0011 18.8577Z"
                fill="#066FDE"
              />
              <path
                d="M13.9646 9.67597L11.1439 12.5052L10.0379 11.3907C9.95799 11.3107 9.86309 11.2473 9.75865 11.2041C9.65421 11.1608 9.54226 11.1385 9.42921 11.1385C9.31617 11.1385 9.20422 11.1608 9.09978 11.2041C8.99534 11.2473 8.90044 11.3107 8.8205 11.3907C8.74056 11.4706 8.67715 11.5655 8.63389 11.6699C8.59063 11.7744 8.56836 11.8863 8.56836 11.9994C8.56836 12.1124 8.59063 12.2244 8.63389 12.3288C8.67715 12.4333 8.74056 12.5282 8.8205 12.6081L10.5352 14.3228C10.6149 14.4031 10.7097 14.4669 10.8142 14.5105C10.9187 14.554 11.0307 14.5764 11.1439 14.5764C11.2571 14.5764 11.3692 14.554 11.4736 14.5105C11.5781 14.4669 11.6729 14.4031 11.7526 14.3228L15.182 10.8934C15.262 10.8135 15.3254 10.7186 15.3686 10.6141C15.4119 10.5097 15.4342 10.3977 15.4342 10.2847C15.4342 10.1716 15.4119 10.0597 15.3686 9.95525C15.3254 9.8508 15.262 9.7559 15.182 9.67597C15.1021 9.59603 15.0072 9.53262 14.9027 9.48936C14.7983 9.44609 14.6863 9.42383 14.5733 9.42383C14.4603 9.42383 14.3483 9.44609 14.2439 9.48936C14.1394 9.53262 14.0445 9.59603 13.9646 9.67597Z"
                fill="#066FDE"
              />
            </svg>

            <span>{translate("/payment.guarantees.30_day_money_back")}</span>
          </div>
        </div>
      </div>

      <style>{`.palmistry-payment-modal { max-height: calc(100dvh - 40px) }`}</style>

      {activeProductFromStore && (
        <div
          className="payment-screen__widget_modal_container"
          style={{ minHeight: `${height}px` }}
        >
          <div
            className={`payment-screen__widget${subscriptionStatus === "subscribed"
                ? " payment-screen__widget_success"
                : ""
              }`}
          >
            {subscriptionStatus !== "subscribed" && (
              <PaymentModalNew
                setHeight={setHeight}
                activeProduct={activeProductFromStore}
                returnUrl={returnUrl}
                placementKey={EPlacementKeys["aura.placement.palmistry.main"]}
              />
            )}

            {subscriptionStatus === "subscribed" && (
              <div className="payment-screen__success">
                <svg
                  className="payment-screen__success-icon"
                  xmlns="http://www.w3.org/2000/svg"
                  width="512"
                  height="512"
                  viewBox="0 0 52 52"
                >
                  <path
                    fill="#4ec794"
                    d="M26 0C11.664 0 0 11.663 0 26s11.664 26 26 26 26-11.663 26-26S40.336 0 26 0zm14.495 17.329-16 18a1.997 1.997 0 0 1-2.745.233l-10-8a2 2 0 0 1 2.499-3.124l8.517 6.813L37.505 14.67a2.001 2.001 0 0 1 2.99 2.659z"
                  />
                </svg>

                <div className="payment-screen__success-text">
                  {translate("/payment.payment_success")}
                </div>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}