"use client"
import { useSearchParams } from "next/navigation"
import { useRef } from "react"
import { useIntl } from "react-intl"

import { MEMBERSHIP_FAILED_ERROR } from "@/constants/booking"

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 Alert from "@/components/TempDesignSystem/Alert"
import Divider from "@/components/TempDesignSystem/Divider"

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

import type { ConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
import { AlertTypeEnum } from "@/types/enums/alert"

export default function Confirmation({
  booking,
  hotel,
  room,
}: ConfirmationProps) {
  const searchParams = useSearchParams()
  const intl = useIntl()
  const mainRef = useRef<HTMLElement | null>(null)
  const membershipFailedError =
    searchParams.get("errorCode") === MEMBERSHIP_FAILED_ERROR
  const failedToVerifyMembership =
    booking.rateDefinition.isMemberRate && !booking.guest.membershipNumber

  return (
    <main className={styles.main} ref={mainRef}>
      <Header booking={booking} hotel={hotel} mainRef={mainRef} />
      <div className={styles.booking}>
        {/* Customer has manually entered a membership number for which verification failed  */}
        {membershipFailedError && (
          <Alert
            type={AlertTypeEnum.Info}
            heading={intl.formatMessage({
              id: "Failed to verify membership",
            })}
            text={intl.formatMessage({
              id: "The first or last name doesn't match the membership number you provided. Your booking(s) is confirmed but to get the membership attached you'll need to present your existing membership number upon check-in. If you have booked with a member discount, you'll either need to present your existing membership number upon check-in, become a member or pay the price difference at the hotel. Signing up is preferably done online before the stay, or we can assist upon arrival.",
            })}
          />
        )}
        {/* For some other reason membership could not be verified */}
        {!membershipFailedError && failedToVerifyMembership && (
          <Alert
            type={AlertTypeEnum.Info}
            heading={intl.formatMessage({
              id: "Failed to verify membership",
            })}
            text={intl.formatMessage({
              id: "Your booking(s) is confirmed but we could not verify your membership. If you have booked with a member discount, you'll either need to present your existing membership number upon check-in, become a member or pay the price difference at the hotel. Signing up is preferably done online before the stay.",
            })}
          />
        )}
        <Rooms
          booking={booking}
          mainRoom={room}
          linkedReservations={booking.linkedReservations}
        />
        <PaymentDetails booking={booking} />
        <Divider color="primaryLightSubtle" />
        <HotelDetails hotel={hotel} />
        <Promos
          confirmationNumber={booking.confirmationNumber}
          hotelId={hotel.operaId}
          lastName={booking.guest.lastName}
        />
        <div className={styles.mobileReceipt}>
          <Receipt booking={booking} hotel={hotel} room={room} />
        </div>
      </div>
      <aside className={styles.aside}>
        <SidePanel variant="receipt">
          <Receipt booking={booking} hotel={hotel} room={room} />
        </SidePanel>
      </aside>
    </main>
  )
}