import { differenceInCalendarDays, format, isWeekend } from "date-fns"
import { Suspense } from "react"

import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"

import Header from "@/components/HotelReservation/BookingConfirmation/Header"
import HotelDetails from "@/components/HotelReservation/BookingConfirmation/HotelDetails"
import PaymentDetails from "@/components/HotelReservation/BookingConfirmation/PaymentDetails"
import Promos from "@/components/HotelReservation/BookingConfirmation/Promos"
import Receipt from "@/components/HotelReservation/BookingConfirmation/Receipt"
import Rooms from "@/components/HotelReservation/BookingConfirmation/Rooms"
import SidePanel from "@/components/HotelReservation/SidePanel"
import LoadingSpinner from "@/components/LoadingSpinner"
import Divider from "@/components/TempDesignSystem/Divider"
import TrackingSDK from "@/components/TrackingSDK"
import { setLang } from "@/i18n/serverContext"

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

import {
  TrackingChannelEnum,
  TrackingSDKHotelInfo,
  TrackingSDKPageData,
} from "@/types/components/tracking"
import { CurrencyEnum } from "@/types/enums/currency"
import type { LangParams, PageArgs } from "@/types/params"

export default async function BookingConfirmationPage({
  params,
  searchParams,
}: PageArgs<LangParams, { confirmationNumber: string }>) {
  setLang(params.lang)
  void getBookingConfirmation(searchParams.confirmationNumber)
  const { confirmationNumber } = searchParams

  const { hotel, booking } = await getBookingConfirmation(confirmationNumber)

  const arrivalDate = new Date(booking.checkInDate)
  const departureDate = new Date(booking.checkOutDate)

  const initialPageTrackingData: TrackingSDKPageData = {
    pageId: "booking-confirmation",
    domainLanguage: params.lang,
    channel: TrackingChannelEnum["hotelreservation"],
    pageName: `hotelreservation|confirmation`,
    siteSections: `hotelreservation|confirmation`,
    pageType: "confirmation",
    siteVersion: "new-web",
  }

  const initialHotelsTrackingData: TrackingSDKHotelInfo = {
    searchTerm: searchParams.city,
    arrivalDate: format(arrivalDate, "yyyy-MM-dd"),
    departureDate: format(departureDate, "yyyy-MM-dd"),
    noOfAdults: booking.adults,
    noOfChildren: booking.childrenAges?.length,
    ageOfChildren: booking.childrenAges?.join(","),
    childBedPreference: booking?.extraBedTypes?.map((c) => c.bedType).join("|"),
    noOfRooms: 1, // // TODO: Handle multiple rooms
    duration: differenceInCalendarDays(departureDate, arrivalDate),
    leadTime: differenceInCalendarDays(arrivalDate, new Date()),
    searchType: "hotel",
    bookingTypeofDay: isWeekend(arrivalDate) ? "weekend" : "weekday",
    country: hotel?.address.country,
    region: hotel?.address.city,
    rateCode: booking.rateDefinition.rateCode ?? undefined,
    rateCodeType: booking.rateDefinition.title ?? undefined,
    rateCodeName: booking.rateDefinition.rateCode ?? undefined,
    rateCodeCancellationRule:
      booking.rateDefinition?.cancellationText ?? undefined,
    revenueCurrencyCode: CurrencyEnum[booking.currencyCode],
    breakfastOption: booking.rateDefinition.breakfastIncluded
      ? "breakfast buffet"
      : "no breakfast",
    totalPrice: booking.totalPrice,
    //specialRoomType: getSpecialRoomType(booking.packages), TODO: Add
    //roomTypeName: booking.roomTypeCode ?? undefined, TODO: Do we get the name?
    //bedType: bedType?.description, TODO: Can we get bedType?
    roomTypeCode: booking.roomTypeCode ?? undefined,
    roomPrice: booking.roomPrice,
    bnr: booking.confirmationNumber ?? undefined,
  }

  return (
    <main className={styles.main}>
      <Suspense fallback={<LoadingSpinner fullPage />}>
        <Header confirmationNumber={searchParams.confirmationNumber} />
        <div className={styles.booking}>
          <Rooms confirmationNumber={searchParams.confirmationNumber} />
          <PaymentDetails
            confirmationNumber={searchParams.confirmationNumber}
          />
          <Divider color="primaryLightSubtle" />
          <HotelDetails confirmationNumber={searchParams.confirmationNumber} />
          <Promos />
          <div className={styles.mobileReceipt}>
            <Receipt confirmationNumber={searchParams.confirmationNumber} />
          </div>
        </div>
        <aside className={styles.aside}>
          <SidePanel variant="receipt">
            <Receipt confirmationNumber={searchParams.confirmationNumber} />
          </SidePanel>
        </aside>
        <TrackingSDK
          pageData={initialPageTrackingData}
          hotelInfo={initialHotelsTrackingData}
        />
      </Suspense>
    </main>
  )
}
