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 { setLang } from "@/i18n/serverContext"

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

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)
  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>
      </Suspense>
    </main>
  )
}