import { profile } from "@/constants/routes/myPages"
import { dt } from "@/lib/dt"
import {
  getBookingConfirmation,
  getProfileSafely,
} from "@/lib/trpc/memoizedRequests"

import { CreditCardAddIcon, EditIcon, PersonIcon } from "@/components/Icons"
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 { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"

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

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

export default async function Summary({
  confirmationNumber,
}: BookingConfirmationProps) {
  const intl = await getIntl()
  const lang = getLang()
  const { booking, hotel } = await getBookingConfirmation(confirmationNumber)
  const user = await getProfileSafely()
  const { firstName, lastName } = booking.guest
  const membershipNumber = user?.membership?.membershipNumber
  const totalNights = dt(booking.checkOutDate.setHours(0, 0, 0)).diff(
    dt(booking.checkInDate.setHours(0, 0, 0)),
    "days"
  )

  const breakfastPackage = booking.packages.find(
    (pkg) => pkg.code === BreakfastPackageEnum.REGULAR_BREAKFAST
  )
  return (
    <div className={styles.summary}>
      <div className={styles.container}>
        <div className={styles.textContainer}>
          <Body color="uiTextPlaceholder">
            {intl.formatMessage({ id: "Guest" })}
          </Body>
          <Body color="uiTextHighContrast">{`${firstName} ${lastName}`}</Body>
          {membershipNumber ? (
            <Body color="uiTextHighContrast">
              {intl.formatMessage(
                { id: "membership.no" },
                { membershipNumber }
              )}
            </Body>
          ) : null}
          <Body color="uiTextHighContrast">{booking.guest.email}</Body>
          <Body color="uiTextHighContrast">{booking.guest.phoneNumber}</Body>
        </div>
        {user ? (
          <Link className={styles.link} href={profile[lang]} variant="icon">
            <PersonIcon color="baseButtonTextOnFillNormal" />
            <Caption color="burgundy" type="bold">
              {intl.formatMessage({ id: "Go to profile" })}
            </Caption>
          </Link>
        ) : null}
      </div>
      <Divider color="primaryLightSubtle" />
      <div className={styles.container}>
        <div className={styles.textContainer}>
          <Body color="uiTextPlaceholder">
            {intl.formatMessage({ id: "Payment" })}
          </Body>
          <Body color="uiTextHighContrast">
            {intl.formatMessage(
              { id: "guest.paid" },
              {
                amount: intl.formatNumber(booking.totalPrice),
                currency: booking.currencyCode,
              }
            )}
          </Body>
          <Body color="uiTextHighContrast">Date information N/A</Body>
          <Body color="uiTextHighContrast">Card information N/A</Body>
        </div>
        {/* # href until more info */}
        {user ? (
          <Link className={styles.link} href="#" variant="icon">
            <CreditCardAddIcon color="baseButtonTextOnFillNormal" />
            <Caption color="burgundy" type="bold">
              {intl.formatMessage({ id: "Save card to profile" })}
            </Caption>
          </Link>
        ) : null}
      </div>
      <Divider color="primaryLightSubtle" />
      <div className={styles.container}>
        <div className={styles.textContainer}>
          <Body color="uiTextPlaceholder">
            {intl.formatMessage({ id: "Booking" })}
          </Body>
          <Body color="uiTextHighContrast">
            N/A, {intl.formatMessage({ id: "booking.nights" }, { totalNights })}
            ,{" "}
            {intl.formatMessage(
              { id: "booking.adults" },
              { totalAdults: booking.adults }
            )}
          </Body>
          {breakfastPackage ? (
            <Body color="uiTextHighContrast">
              {intl.formatMessage({ id: "Breakfast added" })}
            </Body>
          ) : null}
          <Body color="uiTextHighContrast">Bedtype N/A</Body>
        </div>
        {/* # href until more info */}
        <Link className={styles.link} href="#" variant="icon">
          <EditIcon color="baseButtonTextOnFillNormal" />
          <Caption color="burgundy" type="bold">
            {intl.formatMessage({ id: "Manage booking" })}
          </Caption>
        </Link>
      </div>
      <Divider color="primaryLightSubtle" />
      <div className={styles.container}>
        <div className={styles.textContainer}>
          <Body color="uiTextPlaceholder">
            {intl.formatMessage({ id: "Hotel" })}
          </Body>
          <Body color="uiTextHighContrast">{hotel.name}</Body>
          <Body color="uiTextHighContrast">
            {`${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city}`}
          </Body>
          <Body color="uiTextHighContrast">
            {hotel.contactInformation.phoneNumber}
          </Body>
          <Caption color="uiTextMediumContrast" className={styles.latLong}>
            {`${intl.formatMessage({ id: "Longitude" }, { long: hotel.location.longitude })} ∙ ${intl.formatMessage({ id: "Latitude" }, { lat: hotel.location.latitude })}`}
          </Caption>
        </div>
        <div className={styles.hotelLinks}>
          <Link color="peach80" href={hotel.contactInformation.websiteUrl}>
            {hotel.contactInformation.websiteUrl}
          </Link>
          <Link
            color="peach80"
            href={`mailto:${hotel.contactInformation.email}`}
          >
            {hotel.contactInformation.email}
          </Link>
        </div>
      </div>
    </div>
  )
}
