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

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

import GuaranteeIcon from "./guarantee.svg";

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

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

export default async function SpecialOfferPage() {
  const t = await getTranslations(
    translatePathEmailMarketingCompatibilityV2("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}>
          <GuaranteeIcon />
          {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>
  );
}
