/* eslint-disable no-nested-ternary */

"use client";

import { useRouter } from "next/navigation";
import { useCallback } from "react";
import { useBoolean, useMediaQuery } from "usehooks-ts";

import { Button } from "@/components/ui/button/button";
import Card from "@/components/ui/card/card";
import { Dialog } from "@/components/ui/dialog/dialog";
import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import { Modal } from "@/components/ui/modal/modal";
import { useModal } from "@/components/ui/modal/modal.hook";
import {
  RezervationSummaryDivider,
  RezervationSummaryProvider,
  RezervationSummaryRoomInfo,
  RezervationSummaryRoomProperty,
  RezervationSummaryTitle,
  RezervationSummaryTotalPrice,
  RezervationSummaryTotalPriceMobile,
} from "@/components/widget/rezervation-summary/rezervation-summary";
import { useHotelSummary } from "@/features/modules/hotel/summary/hooks/use-hotel-summary";
import { useHotelTravelPlanner } from "@/features/modules/hotel/travel-planner/hooks/use-hotel-travel-planner";
import AllInstallmentsModalContent from "@/features/payment/credit-card-infos/components/all-installments-modal-content";
import { useApp } from "@/hooks/useApp";
import { useLabels } from "@/hooks/useLabels";
import { useLocale } from "@/hooks/useLocale";
import { DateHelper } from "@/libs/helpers/date-time-helper";
import { localeStorageHelper } from "@/libs/helpers/locale-storage-helper";
import { PriceManager } from "@/libs/price-manager/price-manager";
import { storageManager } from "@/libs/storage-manager";
import { ILoaderKeys } from "@/models/loader.model";
import type {
  RoomCollectionResult,
  RoomGroupResult,
} from "@/services/eva-display/hotel/hotel-detail/hotel-detail-services.types";
import type { IHotelSearchResultSerializer } from "@/services/eva-display/hotel/hotel-search/hotel-search-services.serializer";
import { useLoaderStore } from "@/store/loader-store/use-loader-store";

import { useRoomCtx } from "../../context/RoomContext";
import useRoomSelect from "../../hooks/use-room-select";
import ReservationSummaryCampaigns from "./reservation-summary-campaigns";

interface IRezervationSummaryProps {
  isLoading?: boolean;
  data?: RoomCollectionResult[];
  searchData?: IHotelSearchResultSerializer;
  primaryButtonOnClick?(selectedRoom: any): void;
}

const RezervationSummary = (props: IRezervationSummaryProps) => {
  const { state } = useRoomSelect();
  const { setDetailData, setSearchData } = useHotelSummary();
  const navigate = useRouter();
  const isDesktop = useMediaQuery("(min-width: 768px)");
  const labels = useLabels();
  const { isB2E, isOtel, isB2C } = useApp();
  const { data: tpdata } = useHotelTravelPlanner();
  const { t } = useLocale();
  const roomGroupResultCtx = useRoomCtx();
  const { closeModal, openModal, modalOpen } = useModal({ open: false });
  const { openLoader } = useLoaderStore();
  const allInstallmentsBoolean = useBoolean();
  const tpData = storageManager.get("core-travel-planner")?.payload;
  const hasTpDates = !!tpData?.dates?.checkIn && !!tpData?.dates?.checkOut;

  function getTotalPrice() {
    let value: number = 0;
    let currency: string = "";
    if (state?.selectedRooms[0]?.rooms) {
      state.selectedRooms.forEach((data) => {
        if (data.rooms && data.rooms[0]?.basePrice) {
          // eslint-disable-next-line radix
          value += parseFloat(data.rooms[0]?.totalPrice.slice(3));
          currency = data.rooms[0]?.totalPrice.slice(0, 3);
        }
      });
    }
    return {
      currency,
      value,
    };
  }

  const totalPrice = getTotalPrice();

  const findResult = () => {
    const roomKeys: string[] = [];
    const rooms: any[] = [];
    let result: undefined | RoomGroupResult;
    state.selectedRooms.forEach((item) => {
      if (item.rooms?.length > 0 && item.rooms[0]?.key) {
        rooms.push({
          room: item.rooms[0],
          roomCollection: item,
        });
        roomKeys.push(item.rooms[0].key);
      }
    });

    if (roomKeys.length > 0 && state.roomGroupResult) {
      result = state.roomGroupResult.find(
        (item) => JSON.stringify(item.roomKeys) === JSON.stringify(roomKeys),
      );
    }
    return {
      roomKeys,
      rooms,
      result,
      productKey: result?.key,
    };
  };

  function getProductKey(navigateSummary: boolean = true) {
    const { roomKeys, rooms, result } = findResult();

    if (roomKeys.length > 0 && state.roomGroupResult) {
      if (result?.key) {
        localStorage.setItem(
          "cart",
          JSON.stringify({ productKey: result.key, searchId: state.searchId }),
        );

        if (props.primaryButtonOnClick) {
          props.primaryButtonOnClick({
            roomData: props.data,
            ...state,
            productKey: result.key,
          });
        } else {
          openLoader({ key: ILoaderKeys.HotelDetailLoaderKey, open: true });
          setDetailData({
            roomGroupKey: result.key,
            rooms,
          });
          if (isOtel) {
            setSearchData({
              searchId: state!.searchId!.toString(),
              searchItemKey: "",
              passengersKeys: state!.passengerKeys!,
              isAbroad: false,
            });
          }

          return navigateSummary ? navigate.push("/hotel/summary") : result.key;
        }
      }
      return false;
    }
    return false;
  }

  function getPassengerInformation(index: number) {
    const localStorageValue = localeStorageHelper.get("travel-planner");
    const storagedValue = localStorageValue?.room;
    const roomsInfo = (tpdata?.payload?.rooms ?? storagedValue) as any;
    const employeCount = roomsInfo[index].employee?.count ?? 0;
    const guestCount = roomsInfo[index].guest?.count ?? 0;
    const childCount = roomsInfo[index].child?.count ?? 0;
    let passengerInfo = "";

    if (employeCount > 0) {
      passengerInfo += `${employeCount} Kurum çalışanı`;
    }
    if (guestCount > 0) {
      passengerInfo += ` ${guestCount} ${labels.guest.label}`;
    }
    if (childCount > 0) {
      passengerInfo += ` ${childCount} Çocuk`;
    }
    return passengerInfo;
  }

  const handleOpenModal = useCallback(() => {
    openModal();
  }, [openModal]);

  const renderModalContent = () => {
    return (
      <Modal
        size={isDesktop ? "xl" : "full"}
        open={modalOpen}
        onClose={closeModal}
        title={t("Booking Details")}
        footer
      >
        <div className="mt-4 flex max-h-[calc(100vh-100px)] flex-col gap-4 overflow-auto">
          {state.selectedRooms.map((room, index) => {
            if (Object.keys(room).length === 0) {
              return false;
            }
            return (
              <div key={room.rooms[0]?.key} className="flex flex-col gap-2">
                {(props.searchData?.hotelList?.[0]?.name ||
                  props.searchData?.hotelList?.[0]?.location) && (
                  <div className="flex flex-col gap-2">
                    {props.searchData?.hotelList?.[0]?.name && (
                      <p className="text-sm font-semibold">
                        {props.searchData?.hotelList?.[0]?.name}
                      </p>
                    )}
                    {props.searchData?.hotelList?.[0]?.location && (
                      <p className="text-sm text-gray-500">
                        {props.searchData?.hotelList?.[0]?.location}
                      </p>
                    )}
                  </div>
                )}

                {index === 0 && (
                  <>
                    <RezervationSummaryDivider />
                    <div className="flex gap-2">
                      <div className="flex-1 flex-col justify-start gap-1">
                        <p className="text-sm text-gray-500">
                          {t("Check-in")}:
                        </p>
                        <p className="font-semibold text-gray-800">
                          {DateHelper.formatDateToString(
                            roomGroupResultCtx[0].roomGroupResult?.[0]
                              ?.checkInDate as unknown as Date,
                          )}
                        </p>
                      </div>
                      <div className="flex-1 flex-col justify-start gap-1">
                        <p className="text-sm text-gray-500">
                          {t("Check-out")}:
                        </p>
                        <p className="font-semibold text-gray-800">
                          {DateHelper.formatDateToString(
                            roomGroupResultCtx[0].roomGroupResult?.[0]
                              ?.checkOutDate as unknown as Date,
                          )}
                        </p>
                      </div>
                    </div>
                    <RezervationSummaryDivider />
                  </>
                )}

                <div className="flex flex-col gap-2">
                  <p className="text-sm font-semibold">{room.title}</p>
                </div>

                <div className="flex flex-col gap-2">
                  <div className="flex justify-between gap-1">
                    {room?.rooms[0]?.mealType?.description && (
                      <div className="flex items-center gap-2 text-sm text-gray-500">
                        <LIcon size="12" name="UtensilsCrossed" />
                        {room?.rooms[0]?.mealType.description}
                      </div>
                    )}
                    <span className="text-xl font-semibold text-gray-800">
                      {PriceManager({
                        currency: (room.rooms?.[0]?.totalPrice || "TRY").slice(
                          0,
                          3,
                        ),
                        value: +(room.rooms?.[0]?.totalPrice || "").slice(3),
                      })}
                    </span>
                  </div>
                  <div className="flex justify-between gap-1">
                    <div className="flex items-center gap-2 text-sm text-gray-500">
                      <LIcon size="12" name="User" />
                      {getPassengerInformation(index)}
                    </div>
                    <span className="text-sm text-gray-500">
                      {room?.rooms[0]?.nightlyRateDescription}
                    </span>
                  </div>
                </div>
                <RezervationSummaryDivider />
              </div>
            );
          })}
          <div className="flex items-center justify-between rounded-primary border bg-gray-50 p-3">
            <span>{`${t("Total")} ${t("Amount")}`}</span>
            <span className="text-xl font-semibold text-gray-800">
              {PriceManager({
                currency: totalPrice.currency.slice(0, 3),
                value: totalPrice.value,
              })}
            </span>
          </div>
          <div className="hidden justify-end gap-4 md:flex">
            <Button variant="outline" onClick={() => closeModal()}>
              {t("Close")}
            </Button>
            <Button
              onClick={() => getProductKey()}
              isDisabled={!state.selectedRooms[state.roomCount - 1]?.rooms}
              variant="primary"
              loading={props.isLoading}
            >
              {isB2E ? "Talep Oluştur" : t("Book")}
            </Button>
          </div>
        </div>
      </Modal>
    );
  };
  const handleClickSelectDate = () => {
    const dateElement = document.getElementById(
      "tp-date-range-picker-trigger-button",
    );
    if (dateElement) {
      dateElement.click();
    }
  };

  if (!isDesktop) {
    return (
      <div
        data-multiple={state.roomCount > 1}
        className="fixed inset-x-0 bottom-0 z-[100] w-full bg-white"
      >
        <div className="border-t p-4 md:border-none md:p-0">
          <RezervationSummaryProvider>
            {state.selectedRooms[0]?.rooms ? (
              <div className="flex w-full items-center justify-between">
                <div className="flex gap-2">
                  <Button
                    className="!h-auto !p-0"
                    leftIcon={{ name: "ChevronUp", size: 20 }}
                    onClick={openModal}
                  />
                  <RezervationSummaryTotalPriceMobile
                    price={PriceManager({
                      currency: totalPrice.currency,
                      value: totalPrice.value,
                    })}
                  />
                </div>

                <Button
                  onClick={() => getProductKey()}
                  isDisabled={!state.selectedRooms[state.roomCount - 1]?.rooms}
                  variant="primary"
                  loading={props.isLoading}
                >
                  {isB2E ? "Talep Oluştur" : t("Book")}
                </Button>
              </div>
            ) : (
              <div className="grid grid-cols-8 md:grid-cols-1 md:gap-2">
                <span className="col-span-5 text-sm text-gray-800 md:col-auto">
                  {hasTpDates
                    ? t("Select the room you want to make a reservation.")
                    : t("Select a date to see hotel availability and prices")}
                </span>
                {!hasTpDates && (
                  <Button
                    className="col-span-3 md:col-auto"
                    variant="primary"
                    onClick={handleClickSelectDate}
                  >
                    {t("Select Date")}
                  </Button>
                )}
                {hasTpDates && (
                  <Button isDisabled className="col-span-3 md:col-auto">
                    {isB2E ? "Talep Oluştur" : t("Book")}
                  </Button>
                )}
              </div>
            )}
          </RezervationSummaryProvider>
        </div>
        {renderModalContent()}
      </div>
    );
  }

  return (
    <div>
      <div
        data-multiple={state.roomCount > 1}
        className="data-[multiple='true']:mt-2"
      >
        <div className="sticky top-[160px] min-w-[248px]">
          <RezervationSummaryProvider>
            {state.selectedRooms[0]?.rooms ? (
              <>
                <RezervationSummaryTitle title={t("Booking Details")}>
                  <Button
                    className="!h-auto !p-0"
                    leftIcon={{ name: "Maximize2", size: 20 }}
                    onClick={handleOpenModal}
                  />
                </RezervationSummaryTitle>
                <RezervationSummaryDivider />
                {state.selectedRooms.map((room, index) => {
                  if (Object.keys(room).length === 0) {
                    return false;
                  }
                  return (
                    <div key={room.rooms[0]?.key}>
                      <RezervationSummaryRoomInfo hotelName={room.title}>
                        {room?.rooms[0]?.addons?.map((addon) => (
                          <RezervationSummaryRoomProperty
                            key={addon.key}
                            icon={{ name: "Check" }}
                          >
                            {addon.description}
                          </RezervationSummaryRoomProperty>
                        ))}
                        {room?.rooms[0]?.mealType?.description && (
                          <RezervationSummaryRoomProperty
                            icon={{ name: "UtensilsCrossed" }}
                          >
                            {room?.rooms[0]?.mealType.description}
                          </RezervationSummaryRoomProperty>
                        )}
                        <RezervationSummaryRoomProperty icon={{ name: "User" }}>
                          {getPassengerInformation(index)}
                        </RezervationSummaryRoomProperty>
                      </RezervationSummaryRoomInfo>
                      <RezervationSummaryDivider />
                    </div>
                  );
                })}
                <RezervationSummaryTotalPrice
                  price={PriceManager({
                    currency: totalPrice.currency.slice(0, 3),
                    value: totalPrice.value,
                  })}
                />
                <Button
                  onClick={() => getProductKey()}
                  isDisabled={!state.selectedRooms[state.roomCount - 1]?.rooms}
                  variant="primary"
                  loading={props.isLoading}
                >
                  {isB2E ? "Talep Oluştur" : t("Book")}
                </Button>
              </>
            ) : (
              <div className="grid grid-cols-8 md:grid-cols-1 md:gap-2">
                <span className="col-span-5 text-sm text-gray-800 md:col-auto ">
                  {hasTpDates
                    ? t("Select the room you want to make a reservation.")
                    : isOtel
                      ? t(
                          "You can change the selected dates to see the prices.",
                        )
                      : t("Select a date to see hotel availability and prices")}
                </span>
                {!hasTpDates && (
                  <Button
                    className="col-span-3 md:col-auto"
                    variant="primary"
                    onClick={handleClickSelectDate}
                  >
                    {t("Select Date")}
                  </Button>
                )}
                {hasTpDates && (
                  <Button isDisabled className="col-span-3 md:col-auto">
                    {t("Book")}
                  </Button>
                )}
              </div>
            )}
            {!!state.selectedRooms?.[0]?.rooms?.[0]?.key &&
              !!state.searchId &&
              (isOtel || isB2C) && (
                <div className="text-center">
                  <span className=" text-xs text-gray-500">
                    {t("12 installments exclusive to Bonus Card")}
                  </span>
                  <Button
                    variant="primary-text"
                    className="flex items-center justify-center gap-1 text-xs"
                    onClick={async () => {
                      allInstallmentsBoolean.setValue(true);
                    }}
                  >
                    {t("All installment options")}{" "}
                    <LIcon name="ChevronDown" size={14} />
                  </Button>
                </div>
              )}
            {(isOtel || isB2C) && (
              <Dialog
                modal
                open={allInstallmentsBoolean.value}
                onOpenChange={allInstallmentsBoolean.setValue}
              >
                {allInstallmentsBoolean.value && (
                  <AllInstallmentsModalContent
                    productKey={findResult().productKey || ""}
                    searchId={state?.searchId || ""}
                  />
                )}
              </Dialog>
            )}
          </RezervationSummaryProvider>
          <ReservationSummaryCampaigns />
          {isOtel && (
            <Card className="w-full">
              <div className="flex cursor-pointer items-center justify-start gap-2 py-2 text-xs text-gray-500">
                <span>
                  <LIcon name="ShieldCheck" size={20} />
                </span>
                <span>
                  {t(
                    "Your vacation is safe with Cancellation Assurance Package for up to 72 hours.",
                  )}
                </span>
              </div>
            </Card>
          )}
        </div>
      </div>
      {renderModalContent()}
    </div>
  );
};

export default RezervationSummary;