import { notFound } from "next/navigation"

import { selectHotelMap } from "@/constants/routes/hotelReservation"
import { getLocations } from "@/lib/trpc/memoizedRequests"

import {
  fetchAvailableHotels,
  getFiltersFromHotels,
} from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
import HotelFilter from "@/components/HotelReservation/SelectHotel/HotelFilter"
import HotelSorter from "@/components/HotelReservation/SelectHotel/HotelSorter"
import MobileMapButtonContainer from "@/components/HotelReservation/SelectHotel/MobileMapButtonContainer"
import {
  generateChildrenString,
  getHotelReservationQueryParams,
} from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
import { ChevronRightIcon } from "@/components/Icons"
import StaticMap from "@/components/Maps/StaticMap"
import Alert from "@/components/TempDesignSystem/Alert"
import Link from "@/components/TempDesignSystem/Link"
import { getIntl } from "@/i18n"
import { setLang } from "@/i18n/serverContext"

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

import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
import { AlertTypeEnum } from "@/types/enums/alert"
import { LangParams, PageArgs } from "@/types/params"

export default async function SelectHotelPage({
  params,
  searchParams,
}: PageArgs<LangParams, SelectHotelSearchParams>) {
  setLang(params.lang)
  const locations = await getLocations()

  if (!locations || "error" in locations) {
    return null
  }
  const city = locations.data.find(
    (location) =>
      location.name.toLowerCase() === searchParams.city.toLowerCase()
  )
  if (!city) return notFound()

  const intl = await getIntl()
  const selectHotelParams = new URLSearchParams(searchParams)
  const selectHotelParamsObject =
    getHotelReservationQueryParams(selectHotelParams)
  const adults = selectHotelParamsObject.room[0].adults // TODO: Handle multiple rooms
  const children = selectHotelParamsObject.room[0].child
    ? generateChildrenString(selectHotelParamsObject.room[0].child)
    : undefined // TODO: Handle multiple rooms

  const hotels = await fetchAvailableHotels({
    cityId: city.id,
    roomStayStartDate: searchParams.fromDate,
    roomStayEndDate: searchParams.toDate,
    adults,
    children,
  })

  const filterList = getFiltersFromHotels(hotels)

  return (
    <>
      <header className={styles.header}>
        <div>{city.name}</div>
        <HotelSorter />
      </header>
      <main className={styles.main}>
        <div className={styles.sideBar}>
          {hotels.length > 0 ? ( // TODO: Temp fix until API returns hotels that are not available
            <Link
              className={styles.link}
              color="burgundy"
              href={selectHotelMap[params.lang]}
              keepSearchParams
            >
              <div className={styles.mapContainer}>
                <StaticMap
                  city={searchParams.city}
                  width={340}
                  height={180}
                  zoomLevel={11}
                  mapType="roadmap"
                  altText={`Map of ${searchParams.city} city center`}
                />
                <div className={styles.mapLinkText}>
                  {intl.formatMessage({ id: "Show map" })}
                  <ChevronRightIcon color="burgundy" width={20} height={20} />
                </div>
              </div>
            </Link>
          ) : (
            <div className={styles.mapContainer}>
              <StaticMap
                city={searchParams.city}
                width={340}
                height={180}
                zoomLevel={11}
                mapType="roadmap"
                altText={`Map of ${searchParams.city} city center`}
              />
            </div>
          )}
          <MobileMapButtonContainer city={searchParams.city} />
          <HotelFilter filters={filterList} />
        </div>
        <div className={styles.hotelList}>
          {!hotels.length && (
            <Alert
              type={AlertTypeEnum.Info}
              heading={intl.formatMessage({ id: "No availability" })}
              text={intl.formatMessage({
                id: "There are no rooms available that match your request.",
              })}
            />
          )}
          <HotelCardListing hotelData={hotels} />
        </div>
      </main>
    </>
  )
}