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

import { 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 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">
                {intl.formatNumber(booking.roomPrice, {
                  currency: booking.currencyCode,
                  style: "currency",
                })}
              </Body>
            </div>
          ) : (
            <Body color="uiTextHighContrast">
              {intl.formatNumber(booking.roomPrice, {
                currency: booking.currencyCode,
                style: "currency",
              })}
            </Body>
          )}
          <Caption color="uiTextMediumContrast">
            {intl.formatMessage(
              { id: "booking.adults" },
              {
                totalAdults: booking.adults,
              }
            )}
          </Caption>
          <Caption color="uiTextMediumContrast">
            {booking.rateDefinition.cancellationText}
          </Caption>
          <Link
            color="peach80"
            href=""
            size="small"
            textDecoration="underline"
            variant="icon"
          >
            {intl.formatMessage({ id: "Reservation policy" })}
            <InfoCircleIcon color="peach80" />
          </Link>
        </header>
        <div className={styles.entry}>
          <Body color="uiTextHighContrast">{room.bedType.description}</Body>
          <Body color="uiTextHighContrast">
            {intl.formatNumber(0, {
              currency: booking.currencyCode,
              style: "currency",
            })}
          </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">
              {intl.formatNumber(breakfastPkgSelected.totalPrice, {
                currency: breakfastPkgSelected.currency,
                style: "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">
            {intl.formatNumber(booking.totalPrice, {
              currency: booking.currencyCode,
              style: "currency",
            })}
          </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>
  )
}
