import { cookies } from "next/headers"
import { notFound } from "next/navigation"

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

import { dt } from "@/lib/dt"
import {
  getAncillaryPackages,
  getBookingConfirmation,
  getProfileSafely,
} from "@/lib/trpc/memoizedRequests"

import { getIntl } from "@/i18n"
import { decrypt } from "@/utils/encryption"

import AdditionalInfoForm from "../../FindMyBooking/AdditionalInfoForm"
import accessBooking, {
  ACCESS_GRANTED,
  ERROR_BAD_REQUEST,
  ERROR_UNAUTHORIZED,
} from "../accessBooking"
import Footer from "./Footer"
import Specification from "./Specification"
import Total from "./Total"

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

import { CurrencyEnum } from "@/types/enums/currency"

export async function Receipt({ refId }: { refId: string }) {
  const value = decrypt(refId)
  if (!value) {
    return notFound()
  }
  const [confirmationNumber, lastName] = value.split(",")
  const bookingConfirmation = await getBookingConfirmation(confirmationNumber)
  if (!bookingConfirmation) {
    return notFound()
  }

  const { booking, hotel, room } = bookingConfirmation
  const user = await getProfileSafely()
  const bv = cookies().get("bv")?.value
  const intl = await getIntl()

  const access = accessBooking(booking.guest, lastName, user, bv)

  if (access === ACCESS_GRANTED) {
    const ancillaryPackages = await getAncillaryPackages({
      fromDate: dt(booking.checkInDate).format("YYYY-MM-DD"),
      hotelId: hotel.operaId,
      toDate: dt(booking.checkOutDate).format("YYYY-MM-DD"),
    })

    const currency =
      booking.currencyCode !== CurrencyEnum.POINTS
        ? booking.currencyCode
        : (booking.ancillaries.find((a) => a.currency !== CurrencyEnum.POINTS)
            ?.currency ??
          booking.packages.find((p) => p.currency !== CurrencyEnum.POINTS)
            ?.currency)

    return (
      <main className={styles.main}>
        <div>
          <ScandicLogoIcon width="89px" height="19px" color="Icon/Accent" />
          <div className={styles.addresses}>
            <div>
              <Typography variant="Body/Supporting text (caption)/smRegular">
                <div>{hotel.name}</div>
              </Typography>
              <Typography variant="Body/Supporting text (caption)/smRegular">
                <div>
                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                  {`${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city}`}
                </div>
              </Typography>
              <Typography variant="Body/Supporting text (caption)/smRegular">
                <div className={`${styles.tertiary} ${styles.addressMargin}`}>
                  {hotel.contactInformation.email}
                </div>
              </Typography>
              <Typography variant="Body/Supporting text (caption)/smRegular">
                <div className={styles.tertiary}>
                  {hotel.contactInformation.phoneNumber}
                </div>
              </Typography>
            </div>
            <div className={styles.rightColumn}>
              <Typography variant="Body/Supporting text (caption)/smRegular">
                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                <div>{`${booking.guest.firstName} ${booking.guest.lastName}`}</div>
              </Typography>
              {booking.guest.membershipNumber && (
                <Typography variant="Body/Supporting text (caption)/smRegular">
                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                  <div>{`${intl.formatMessage({
                    defaultMessage: "Member",
                  })} ${booking.guest.membershipNumber}`}</div>
                </Typography>
              )}
              <Typography variant="Body/Supporting text (caption)/smRegular">
                <div className={`${styles.tertiary} ${styles.addressMargin}`}>
                  {booking.guest.email}
                </div>
              </Typography>
              <Typography variant="Body/Supporting text (caption)/smRegular">
                <div className={styles.tertiary}>
                  {booking.guest.phoneNumber}
                </div>
              </Typography>
            </div>
          </div>
        </div>
        <Total booking={booking} currency={currency} />
        <Specification
          ancillaryPackages={ancillaryPackages}
          booking={booking}
          currency={currency}
        />

        <hr className={styles.divider} />

        <Footer booking={booking} room={room} />
      </main>
    )
  }

  if (access === ERROR_BAD_REQUEST) {
    return (
      <main className={styles.main}>
        <div className={styles.form}>
          <AdditionalInfoForm
            // send refId here?
            confirmationNumber={confirmationNumber}
            lastName={lastName}
          />
        </div>
      </main>
    )
  }

  if (access === ERROR_UNAUTHORIZED) {
    return (
      <main className={styles.main}>
        <div className={styles.logIn}>
          <Typography variant="Title/md">
            <h1>
              {intl.formatMessage({
                defaultMessage: "You need to be logged in to view your booking",
              })}
            </h1>
          </Typography>
          <Typography variant="Body/Lead text">
            <p>
              {intl.formatMessage({
                defaultMessage:
                  "And you need to be logged in with the same member account that made the booking.",
              })}
            </p>
          </Typography>
        </div>
      </main>
    )
  }

  return notFound()
}