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

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

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

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

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

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

  const trialInterval = payment?.trialInterval || 7;
  const trialPeriod = payment?.trialPeriod || "DAY";
  const billingInterval = payment?.billingInterval || 7;
  const billingPeriod = payment?.billingPeriod || "DAY";
  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}>
      <HeaderTimer className={styles.headerTimer} />
      <Typography as="h1" color="white" className={styles.title}>
        {t("title")}
      </Typography>
      <div className={styles.content}>
        <Typography as="h2" className={styles.contentTitle}>
          {t("start-trial", { days: trialInterval })}
        </Typography>
        <Typography as="p" 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_339_96"
              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_339_96)">
              <path
                d="M15.2679 1.12718C13.3208 1.12718 11.4571 0.727467 10 0C8.54335 0.727467 6.67945 1.12718 4.73211 1.12718C3.01673 1.12718 1.36526 0.816768 0 0.245102V9.65372C0 15.7775 4.47844 21.5946 10 22.6664C15.5218 21.5946 20 15.7775 20 9.65372V0.245102C18.635 0.816768 16.9835 1.12718 15.2679 1.12718Z"
                fill="#00AE37"
              />
            </g>
            <path
              d="M8.03704 15.101L3.87109 10.9977L5.11941 9.76813L8.03704 12.6419L14.8802 5.90137L16.1285 7.13091L8.03704 15.101Z"
              fill="white"
            />
            <path
              d="M13.9968 20.9727C17.2096 18.7979 19.5429 14.9801 19.9398 10.8858L16.1286 7.13184L8.03711 15.1019L13.9968 20.9727Z"
              fill="#008E28"
            />
          </svg>
          {t("cancel-anytime")}
        </Typography>

        <PricingSummary
          trialPrice={trialPrice}
          trialInterval={trialInterval}
          trialPeriod={trialPeriod}
          price={price}
          currency={currency}
          billingInterval={billingInterval}
          billingPeriod={billingPeriod}
        />

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

        <p className={styles.contentPolicy}>
          {t.rich("policy", {
            days: trialInterval,
            price: getFormattedPrice(price, currency),
            billingPeriod: await getPeriodTextServer(
              billingPeriod,
              billingInterval
            ),
            refundLink: chunks => (
              <Link href="https://witlab.us/refund" target="_blank">
                {chunks}
              </Link>
            ),
            subscriptionLink: chunks => (
              <Link href="https://witlab.us/terms" target="_blank">
                {chunks}
              </Link>
            ),
          })}
        </p>
      </div>
    </div>
  );
}
