import { getTranslations } from "next-intl/server";

import {
  PricingSummary,
  SpecialOfferButtonWrapper,
} from "@/components/domains/email-marketing/compatibility/v1";
import { Typography } from "@/components/ui";
import { loadFunnelPaymentById } from "@/entities/session/funnel/loaders";
import { IFunnelPaymentPlacement } from "@/entities/session/funnel/types";
import { translatePathEmailMarketingCompatibilityV1 } from "@/shared/constants/translate";
import { getFormattedPrice } from "@/shared/utils/price";
import { Currency, ELocalesPlacement } from "@/types";

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

const payload = {
  funnel: ELocalesPlacement.EmailMarketingCompatibilityV2,
};

export default async function SpecialOfferPage() {
  const t = await getTranslations(
    translatePathEmailMarketingCompatibilityV1("SpecialOffer")
  );

  const payment = (await loadFunnelPaymentById(
    payload,
    "main"
  )) as IFunnelPaymentPlacement | null;

  const trialInterval = payment?.trialInterval || 7;
  const variant = payment?.variants?.[0];
  const productId = variant?.id || "";
  const placementId = payment?.placementId || "";
  const paywallId = payment?.paywallId || "";
  const trialPrice = variant?.trialPrice || 0;
  const price = variant?.price || 0;
  const currency = payment?.currency || Currency.USD;

  return (
    <div className={styles.container}>
      <Typography
        as="h1"
        size="2xl"
        weight="semiBold"
        color="white"
        className={styles.title}
      >
        {t("title")}
      </Typography>
      <div className={styles.content}>
        <Typography as="h2" weight="medium" className={styles.contentTitle}>
          {t("start-trial", { days: trialInterval })}
        </Typography>
        <Typography as="p" weight="bold" className={styles.contentDescription}>
          <svg
            width="20"
            height="23"
            viewBox="0 0 20 23"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <mask
              id="mask0_44_3678"
              style={{ maskType: "luminance" }}
              maskUnits="userSpaceOnUse"
              x="0"
              y="0"
              width="20"
              height="23"
            >
              <path d="M0 0H20V22.6667H0V0Z" fill="white" />
            </mask>
            <g mask="url(#mask0_44_3678)">
              <path
                d="M15.2679 1.12743C13.3208 1.12743 11.4571 0.727711 10 0.000244141C8.54335 0.727711 6.67945 1.12743 4.73211 1.12743C3.01673 1.12743 1.36526 0.817012 0 0.245346V9.65397C0 15.7777 4.47844 21.5948 10 22.6667C15.5218 21.5948 20 15.7777 20 9.65397V0.245346C18.635 0.817012 16.9835 1.12743 15.2679 1.12743Z"
                fill="#00AE37"
              />
            </g>
            <path
              d="M8.03704 15.1012L3.87109 10.9979L5.11941 9.76837L8.03704 12.6421L14.8802 5.90161L16.1285 7.13116L8.03704 15.1012Z"
              fill="white"
            />
            <path
              d="M13.9968 20.9725C17.2096 18.7977 19.5429 14.9798 19.9398 10.8855L16.1286 7.13159L8.03711 15.1017L13.9968 20.9725Z"
              fill="#008E28"
            />
          </svg>

          {t("cancel-anytime")}
        </Typography>

        <PricingSummary
          totalToday={trialPrice}
          originalPrice={price}
          discountedPrice={price}
          trialDuration={trialInterval}
          saveText={""}
          currency={currency}
        />

        <SpecialOfferButtonWrapper
          productId={productId}
          placementId={placementId}
          paywallId={paywallId}
        />

        <p className={styles.contentPolicy}>
          {t("policy", {
            days: trialInterval,
            price: getFormattedPrice(price, currency),
          })}
        </p>
      </div>
    </div>
  );
}
