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

import {
  Blob1,
  Blob2,
  SaveOffButton,
} from "@/components/domains/secret-discount";
import { Header } from "@/components/layout";
import { Typography } from "@/components/ui";
import { loadFunnelPaymentById } from "@/entities/session/funnel/loaders";
import { IFunnelPaymentPlacement } from "@/entities/session/funnel/types";
import { secretDiscountImages } from "@/shared/constants/images";
import { getProperty } from "@/shared/utils/funnel";
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.CompatibilityV2,
};

export default async function SaveOffPage() {
  const t = await getTranslations("SaveOff");

  const paymentData = (await loadFunnelPaymentById(
    payload,
    "main_secret_discount"
  )) as IFunnelPaymentPlacement;

  const paymentDataMain = (await loadFunnelPaymentById(
    payload,
    "main"
  )) as IFunnelPaymentPlacement;

  const currency = paymentData?.currency ?? Currency.USD;
  const discountNew = getProperty(paymentData, "discount.new")?.value;
  const product = paymentData?.variants?.[0];
  const trialPrice = product?.trialPrice ?? 0;
  const trialPeriod = paymentData?.trialPeriod ?? "DAY";
  const trialInterval = paymentData?.trialInterval ?? 0;

  const price = paymentDataMain?.price ?? 0;
  const oldTrialPeriod = paymentDataMain?.trialPeriod ?? "DAY";
  const oldTrialInterval = paymentDataMain?.trialInterval ?? 0;

  return (
    <>
      <Header
        isVisibleMenuButton={false}
        isVisibleNotificationIcon={false}
        isVisibleSearchIcon={false}
      />
      <div className={styles.container}>
        <Blob1 className={styles.blob} />
        <Blob2 className={styles.blob2} />
        <Image
          src={secretDiscountImages("gift.svg")}
          alt="Gift"
          width={280}
          height={241}
        />
        <Typography
          as="h1"
          size="2xl"
          weight="semiBold"
          className={styles.title}
        >
          {t("title", {
            discount: discountNew,
          })}
        </Typography>
        <Typography as="p" className={styles.description}>
          {t.rich("instead", {
            price: () => (
              <span className={styles.price}>
                {getFormattedPrice(trialPrice, currency, 0)}
              </span>
            ),
            oldPrice: () => (
              <span className={styles.discount}>
                {t("instead-old-price", {
                  oldPrice: getFormattedPrice(price, currency, 0),
                })}
              </span>
            ),
          })}
        </Typography>

        <Typography
          as="p"
          weight="semiBold"
          className={styles.point}
          style={{ marginTop: 12 }}
        >
          <Image
            src={secretDiscountImages("fire.png")}
            alt="fire"
            width={31}
            height={31}
          />

          {t.rich("trial-duration", {
            trialPeriod: await getPeriodTextServer(trialPeriod, trialInterval),
            oldTrialPeriod: async () => (
              <s>
                {await getPeriodTextServer(oldTrialPeriod, oldTrialInterval)}
              </s>
            ),
          })}
        </Typography>

        <Typography as="p" weight="semiBold" className={styles.point}>
          <Image
            src={secretDiscountImages("gift.png")}
            alt="gift"
            width={31}
            height={31}
          />
          {t("discount-offer", {
            discount: discountNew,
          })}
        </Typography>

        <SaveOffButton
          trialPeriod={trialPeriod}
          trialInterval={trialInterval}
        />
      </div>
    </>
  );
}
