"use client"
import { notFound } from "next/navigation"
import { useIntl } from "react-intl"

import {
  CheckIcon,
  ChevronRightSmallIcon,
  InfoCircleIcon,
} from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { formatPrice } from "@/utils/numberFormatting"

import Modal from "../../Modal"

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

import type { BookingConfirmationReceiptProps } from "@/types/components/hotelReservation/bookingConfirmation/receipt"
import { BreakfastPackageEnum } from "@/types/enums/breakfast"

export default function Receipt({
  booking,
  hotel,
  room,
}: BookingConfirmationReceiptProps) {
  const intl = useIntl()

  if (!room) {
    return notFound()
  }

  const breakfastPkgSelected = booking.packages.find(
    (pkg) => pkg.code === BreakfastPackageEnum.REGULAR_BREAKFAST
  )
  const breakfastPkgIncluded = booking.packages.find(
    (pkg) => pkg.code === BreakfastPackageEnum.FREE_MEMBER_BREAKFAST
  )
  return (
    <section className={styles.receipt}>
      <Subtitle type="two">{intl.formatMessage({ id: "Summary" })}</Subtitle>
      <article className={styles.room}>
        <header className={styles.roomHeader}>
          <Body color="uiTextHighContrast">{room.name}</Body>
          {booking.rateDefinition.isMemberRate ? (
            <div className={styles.memberPrice}>
              <Body color="uiTextPlaceholder">
                <s>N/A</s>
              </Body>
              <Body color="red">
                {formatPrice(intl, booking.roomPrice, booking.currencyCode)}
              </Body>
            </div>
          ) : (
            <Body color="uiTextHighContrast">
              {formatPrice(intl, booking.roomPrice, booking.currencyCode)}
            </Body>
          )}
          <Caption color="uiTextMediumContrast">
            {intl.formatMessage(
              { id: "booking.adults" },
              {
                totalAdults: booking.adults,
              }
            )}
          </Caption>
          <Caption color="uiTextMediumContrast">
            {booking.rateDefinition.cancellationText}
          </Caption>
          <Modal
            trigger={
              <Button intent="text" className={styles.termsLink}>
                <Link
                  color="peach80"
                  href=""
                  size="small"
                  textDecoration="underline"
                  variant="icon"
                >
                  {intl.formatMessage({ id: "Reservation policy" })}
                  <InfoCircleIcon color="peach80" />
                </Link>
              </Button>
            }
            title={booking.rateDefinition.cancellationText || ""}
            subtitle={
              booking.rateDefinition.cancellationRule == "CancellableBefore6PM"
                ? intl.formatMessage({ id: "Pay later" })
                : intl.formatMessage({ id: "Pay now" })
            }
          >
            <div className={styles.terms}>
              {booking.rateDefinition.generalTerms?.map((info) => (
                <Body
                  key={info}
                  color="uiTextHighContrast"
                  className={styles.termsText}
                >
                  <CheckIcon
                    color="uiSemanticSuccess"
                    width={20}
                    height={20}
                    className={styles.termsIcon}
                  ></CheckIcon>
                  {info}
                </Body>
              ))}
            </div>
          </Modal>
        </header>
        <div className={styles.entry}>
          <Body color="uiTextHighContrast">{room.bedType.description}</Body>
          <Body color="uiTextHighContrast">
            {formatPrice(intl, 0, booking.currencyCode)}
          </Body>
        </div>
        <div className={styles.entry}>
          <Body>{intl.formatMessage({ id: "Breakfast buffet" })}</Body>
          {booking.rateDefinition.breakfastIncluded ?? breakfastPkgIncluded ? (
            <Body color="red">{intl.formatMessage({ id: "Included" })}</Body>
          ) : null}

          {breakfastPkgSelected ? (
            <Body color="uiTextHighContrast">
              {formatPrice(
                intl,
                breakfastPkgSelected.totalPrice,
                breakfastPkgSelected.currency
              )}
            </Body>
          ) : null}
        </div>
      </article>
      <Divider color="primaryLightSubtle" />
      <div className={styles.price}>
        <div className={styles.entry}>
          <Body textTransform="bold">
            {intl.formatMessage({ id: "Total price" })}
          </Body>
          <Body textTransform="bold">
            {formatPrice(intl, booking.totalPrice, booking.currencyCode)}
          </Body>
        </div>
        <div className={styles.entry}>
          <Button
            className={styles.btn}
            intent="text"
            size="small"
            theme="base"
            variant="icon"
            wrapping
          >
            {intl.formatMessage({ id: "Price details" })}
            <ChevronRightSmallIcon />
          </Button>
          <Caption color="uiTextMediumContrast">
            {intl.formatMessage({ id: "Approx." })} N/A EUR
          </Caption>
        </div>
      </div>
    </section>
  )
}
