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

import {
  Blob3,
  SecretDiscountButton,
  SecretDiscountTable,
} from "@/components/domains/secret-discount";
import SecretDiscountPolicy from "@/components/domains/secret-discount/secret-discount/Policy/Policy";
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 { getProperty } from "@/shared/utils/funnel";
import { Currency, ELocalesPlacement } from "@/types";

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

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

export default async function SecretDiscountPage() {
  const t = await getTranslations("SecretDiscount");

  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 product = paymentData?.variants?.[0];
  const trialPrice = product?.trialPrice ?? 0;
  const trialPeriod = paymentData?.trialPeriod ?? "DAY";
  const trialInterval = paymentData?.trialInterval ?? 0;
  const billingPeriod = paymentData?.billingPeriod ?? "DAY";
  const billingInterval = paymentData?.billingInterval ?? 0;

  const productId = product?.id ?? "";
  const placementId = paymentData?.placementId ?? "";
  const paywallId = paymentData?.paywallId ?? "";

  const oldPrice = paymentDataMain?.price ?? 0;
  const price = paymentData?.price ?? 0;

  const discountNew = getProperty(paymentData, "discount.new")?.value;
  const discountOld = getProperty(paymentData, "discount.old")?.value;

  return (
    <>
      <Header
        isVisibleMenuButton={false}
        isVisibleNotificationIcon={false}
        isVisibleSearchIcon={false}
        isVisibleBackButton={true}
      />
      <Blob3 className={styles.blob3} />
      <div className={styles.container}>
        <Typography
          as="h1"
          weight="semiBold"
          color="white"
          className={styles.title}
        >
          {t("title")}
        </Typography>

        <SecretDiscountTable
          trialPrice={trialPrice}
          trialInterval={trialInterval}
          trialPeriod={trialPeriod}
          oldPrice={oldPrice}
          oldDiscount={Number(discountOld)}
          newDiscount={Number(discountNew)}
          currency={currency}
        />

        <SecretDiscountButton
          trialPeriod={trialPeriod}
          trialInterval={trialInterval}
          productId={productId}
          placementId={placementId}
          paywallId={paywallId}
        />

        <SecretDiscountPolicy
          trialPeriod={trialPeriod}
          trialInterval={trialInterval}
          billingPeriod={billingPeriod}
          billingInterval={billingInterval}
          price={price}
          currency={currency}
        />
      </div>
    </>
  );
}
