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 AdditionalInfoForm from "@/components/HotelReservation/FindMyBooking/AdditionalInfoForm"
import accessBooking, {
  ACCESS_GRANTED,
  ERROR_BAD_REQUEST,
  ERROR_UNAUTHORIZED,
} from "@/components/HotelReservation/MyStay/accessBooking"
import Footer from "@/components/HotelReservation/MyStay/Receipt/Footer"
import Specification from "@/components/HotelReservation/MyStay/Receipt/Specification"
import Total from "@/components/HotelReservation/MyStay/Receipt/Total"
import { getIntl } from "@/i18n"
import { parseRefId } from "@/utils/refId"

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

import { CurrencyEnum } from "@/types/enums/currency"
import type { LangParams, PageArgs } from "@/types/params"

export default async function ReceiptPage({
  params,
  searchParams,
}: PageArgs<LangParams, { RefId?: string }>) {
  const refId = searchParams.RefId

  if (!refId) {
    notFound()
  }

  const { confirmationNumber, lastName } = parseRefId(refId)

  const bookingConfirmation = await getBookingConfirmation(
    confirmationNumber,
    params.lang
  )

  if (!bookingConfirmation) {
    return notFound()
  }

  const { booking, hotelData, room } = bookingConfirmation
  const { hotel } = hotelData

  const intl = await getIntl()
  const user = await getProfileSafely()
  const bv = cookies().get("bv")?.value

  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 refId={refId} 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()
}