import Link from "next/link"
import React, { Suspense } from "react"

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { hotelreservation } from "@/constants/routes/hotelReservation"
import { partnerSas } from "@/constants/routes/myPages"
import { getProfileSafely } from "@/lib/trpc/memoizedRequests"

import Image from "@/components/Image"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Button from "@/components/TempDesignSystem/Button"
import { getIntl } from "@/i18n"

import { SASModal } from "../../components/SASModal"

import styles from "./transferSuccess.module.css"

import type { LangParams, PageArgs, SearchParams } from "@/types/params"
import type { Lang } from "@/constants/languages"

export default async function SASxScandicTransferSuccessPage(props: PageArgs<LangParams> & SearchParams<{ p?: string }>) {
  const searchParams = await props.searchParams;
  const params = await props.params;
  const intl = await getIntl()
  const { lang } = params
  const addedPoints = Number(searchParams.p) || 0

  return (
    <SASModal>
      <Image
        src="/_static/img/scandic-high-five.svg"
        alt=""
        width="111"
        height="139"
        sizes="100vw"
        className={styles.image}
      />
      <div className={styles.container}>
        <Typography variant="Title/Subtitle/lg">
          <h1>
            {intl.formatMessage({
              defaultMessage: "Point transfer completed!",
            })}
          </h1>
        </Typography>
        <TransactionCard addedPoints={addedPoints} lang={lang} />
        <div className={styles.divider} />
        <Button
          theme="primaryLight"
          asChild
          fullWidth
          className={styles.backButton}
        >
          <Link href={partnerSas[params.lang]} color="none">
            {intl.formatMessage({
              defaultMessage: "Go back to My Pages",
            })}
          </Link>
        </Button>
      </div>
    </SASModal>
  )
}

async function TransactionCard({
  addedPoints,
  lang,
}: {
  addedPoints: number
  lang: Lang
}) {
  const intl = await getIntl()
  const profile = await getProfileSafely()
  const transferredPoints = intl.formatNumber(addedPoints)

  // TODO is this updated immediately?
  const totalPoints = profile?.membership?.currentPoints ?? 0

  const showBonusNight = totalPoints > 10_000

  return (
    <div className={styles.transactionBox}>
      <Typography variant="Title/Subtitle/md">
        <h2>
          {intl.formatMessage({
            defaultMessage: "Your transaction",
          })}
        </h2>
      </Typography>
      <div className={styles.transactionDetails}>
        <div className={styles.transactionRow}>
          <Typography variant="Title/Overline/sm">
            <h3>
              {intl.formatMessage({
                defaultMessage: "Points added",
              })}
            </h3>
          </Typography>
          <Typography variant="Body/Paragraph/mdBold">
            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
            <p>+ {transferredPoints}</p>
          </Typography>
        </div>
        <div className={styles.transactionRow}>
          <Typography variant="Title/Overline/sm">
            <h3>
              {intl.formatMessage({
                defaultMessage: "Your new total",
              })}
            </h3>
          </Typography>
          <Suspense fallback={<SkeletonShimmer width="15ch" height="24px" />}>
            <TotalPoints />
          </Suspense>
        </div>
      </div>
      {showBonusNight && (
        <div className={styles.bonusNight}>
          <div className={styles.bonusNightDetails}>
            <Typography variant="Body/Paragraph/mdBold">
              <h3>
                {intl.formatMessage({
                  defaultMessage: "You have enough points for a bonus night!",
                })}
              </h3>
            </Typography>
            <Typography variant="Body/Paragraph/mdRegular">
              <p>
                {intl.formatMessage({
                  defaultMessage:
                    "Bonus Nights range from 10 000 - 80 000 points. Book your next stay with us today!",
                })}
              </p>
            </Typography>
          </div>
          <Button
            theme="primaryLight"
            intent="secondary"
            size="small"
            fullWidth
            className={styles.bookButton}
            asChild
          >
            {/* TODO correct link */}
            <Link href={hotelreservation(lang)} color="none">
              {intl.formatMessage({
                defaultMessage: "Book now",
              })}
              {
                /* eslint-disable-next-line formatjs/no-literal-string-in-jsx */
                " "
              }
              <MaterialIcon
                icon="calendar_add_on"
                size={20}
                color="CurrentColor"
              />
            </Link>
          </Button>
        </div>
      )}
    </div>
  )
}

async function TotalPoints() {
  const intl = await getIntl()
  const profile = await getProfileSafely()
  const points = profile?.membership?.currentPoints ?? 0

  return (
    <Typography variant="Body/Paragraph/mdBold">
      <p>
        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
        {"= "}
        {intl.formatMessage(
          {
            defaultMessage: "{points, number} points",
          },
          {
            points,
          }
        )}
      </p>
    </Typography>
  )
}
