/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable no-restricted-globals */
/* eslint-disable no-console */
/* eslint-disable react/no-danger */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/interactive-supports-focus */
/* eslint-disable no-nested-ternary */
import dayjs from "dayjs";
import { useRouter } from "next/navigation";
import React, { useCallback, useEffect, useRef } from "react";
import { useBoolean } from "usehooks-ts";

import type { FormHandles } from "@/components/form/form";
import Form from "@/components/form/form";
import Container from "@/components/shared/container";
import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import {
  HotelRezervationSummary,
  RezervationSummaryDivider,
  RezervationSummaryProvider,
  RezervationSummaryTitle,
} from "@/components/widget/rezervation-summary/rezervation-summary";
import CoreSummaryActionButton from "@/features/core/summary/components/core-summary-action-button";
import CoreSummaryContent from "@/features/core/summary/components/core-summary-content";
import type { CoreSummaryHandles } from "@/features/core/summary/components/core-summary-form";
import CoreSummaryForm, {
  CoreSummaryPassengerGroup,
  GROUP_KEY_PREFIX,
} from "@/features/core/summary/components/core-summary-form";
import CoreSummaryHeader from "@/features/core/summary/components/core-summary-header";
import CoreSummaryMainColumn from "@/features/core/summary/components/core-summary-main-column";
import CoreSummaryNoteFormItem from "@/features/core/summary/components/core-summary-note-form-input";
import CoreSummaryPolicyFormItem from "@/features/core/summary/components/core-summary-policy-form-item";
import CoreSummarySideColumn from "@/features/core/summary/components/core-summary-side-column";
import CoreSummarySteps from "@/features/core/summary/components/core-summary-steps";
import {
  getBillingRequestDataFromBillingForm,
  getBillingRequestDataFromPassengerInfo,
} from "@/features/core/summary/libs/billing-helper";
import type { ICoreSummaryPassenger } from "@/features/core/summary/types/core-summary.types";
import type { IBillingInfoForm } from "@/features/customer/billing-info/billing-info-form";
import BillingInfoForm from "@/features/customer/billing-info/billing-info-form";
import PaymentList from "@/features/modules/payment/payment-list";
import { usePayment } from "@/features/modules/tour/payment/hooks/use-tour-payment";
import { useApp } from "@/hooks/useApp";
import { useLocale } from "@/hooks/useLocale";
import { useLocalStateCache } from "@/libs/helpers/local-state-cache-helper";
import { CorePassengerHelper } from "@/libs/helpers/passenger-helper";
import { PriceManager } from "@/libs/price-manager/price-manager";
import { storageManager } from "@/libs/storage-manager";
import type { ITourAddToCartResponse } from "@/services/eva-display/tour/tour-add-to-cart/tour-add-to-card-services.types";
import { useTourValidateMutation } from "@/services/eva-display/tour/tour-validate.service/tour-validate.service";
import { useMasterpassStore } from "@/store/masterpass-store/use-masterpass-store";
import { useNotifyStore } from "@/store/notify-store/use-notify-store";

import { useTourSummary } from "../hooks/use-tour-summary";

interface TourSummaryViewProps {
  tourAddToCartData: ITourAddToCartResponse;
  passengersGroups: Array<ICoreSummaryPassenger[]>;
}

export interface GuestCounts {
  totalGuests: number;
  totalChildren: number;
  totalParticipants?: number;
}

export interface TourPaymentListHandles extends FormHandles {}

const TourSummaryView = (props: TourSummaryViewProps) => {
  const { data: summaryData } = useTourSummary();
  const router = useRouter();
  const { setNotify } = useNotifyStore();
  const validateMutation = useTourValidateMutation();
  const tourPaymentRef = useRef<TourPaymentListHandles>(null);
  const { paymentState, setBookingData, setPaymentState } = usePayment();
  const { setMasterpassData } = useMasterpassStore();
  const coreSummaryFormRef = useRef<CoreSummaryHandles>(null);
  const paymentFormRef = useRef<CoreSummaryHandles>(null);
  const diffrentBillingInfoBoolean = useBoolean();
  const { isB2E } = useApp();
  const { t } = useLocale();

  const { getLocalStateCacheValues } = useLocalStateCache(
    "tourFormFields",
    props.passengersGroups,
  );

  function getDefaultValues() {
    const defaultValues: any = getLocalStateCacheValues();
    return defaultValues;
  }

  const defaultValues = getDefaultValues();
  function getRoomPassengers(passengerKeys: string[]) {
    const passengers: any[] = [];
    props.passengersGroups.forEach((group) => {
      group.forEach((passenger) => {
        if (passengerKeys.includes(passenger.key)) {
          passengers.push(passenger);
        }
      });
    });
    return passengers;
  }

  const summaryDataPassengersKeys = summaryData.payload.passengersKeys?.map(
    (obj) => obj.key,
  );

  function handleSubmitButtonClick() {
    if (paymentState?.payload.paymentStatus === "payment") {
      paymentFormRef.current?.submit();
      tourPaymentRef.current?.onlyValidate();
    } else {
      coreSummaryFormRef.current?.submit();
    }
  }

  function calculateGuestCounts(data: any): GuestCounts {
    let totalGuests = 0;
    let totalChildren = 0;

    for (const roomInfo of data) {
      for (const room of roomInfo.room) {
        const childCount = room.child.count;
        const guestCount = room.guest.count;

        if (childCount > 0) {
          totalChildren += childCount;
        }
        if (guestCount > 0) {
          totalGuests += guestCount;
        }
      }
    }

    const totalParticipants = totalGuests + totalChildren;

    return { totalGuests, totalChildren, totalParticipants };
  }
  const { totalGuests, totalChildren, totalParticipants } =
    calculateGuestCounts(summaryData.payload.rooms);

  const onBackButtonEvent = useCallback(
    (e: PopStateEvent) => {
      const getCorePayment = storageManager.get("core-payment");
      if (getCorePayment?.payload?.paymentStatus === "payment") {
        e.preventDefault();
        storageManager.delete("core-payment");
        setPaymentState("idle");
      } else {
        setTimeout(() => window.scrollTo(0, 0), 1);
        history.back();
      }
    },
    [paymentState?.payload?.paymentStatus],
  );

  useEffect(() => {
    window.history.pushState(null, "", window.location.pathname);
    window.addEventListener("popstate", onBackButtonEvent);
    return () => {
      window.removeEventListener("popstate", onBackButtonEvent);
    };
  }, [paymentState?.payload?.paymentStatus]);

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [paymentState?.payload?.paymentStatus]);

  return (
    <div className="pb-10">
      <div>
        <CoreSummarySteps
          steps={[
            {
              label: t("Tour Selection"),
            },
            {
              label: t("Person Information"),
            },
            {
              label: t("Payment"),
            },
          ]}
          activeIndex={
            paymentState?.payload?.paymentStatus === "payment" ? 2 : 1
          }
        />
        <Container>
          <CoreSummaryHeader>
            {paymentState?.payload?.paymentStatus === "payment"
              ? t("Payment Options")
              : t("Person Information")}
          </CoreSummaryHeader>
          <CoreSummaryContent>
            {paymentState?.payload?.paymentStatus === "payment" ? (
              <CoreSummaryMainColumn>
                <Form
                  ref={paymentFormRef}
                  onSubmit={() => tourPaymentRef.current?.submit()}
                  shouldAutoScroll
                >
                  <PaymentList
                    ref={tourPaymentRef}
                    cartId={props.tourAddToCartData.cartId}
                    searchId={summaryData.payload.searchId!}
                    transactionId={paymentState.payload.transactionId!}
                    reservationNote={paymentState.payload.reservationNote}
                    handles={{
                      onBookSuccess(payload) {
                        sessionStorage.setItem(
                          payload.bookingCode,
                          JSON.stringify(props.tourAddToCartData),
                        );
                        router.push(
                          `/booking-success?bookingId=${payload.bookingCode}`,
                        );
                      },
                      onBookFail(payload) {
                        setNotify({
                          title: "Bir Hata Oluştu!",
                          message: payload.message,
                          variant: "error",
                        });
                      },
                    }}
                  />
                </Form>
              </CoreSummaryMainColumn>
            ) : (
              <CoreSummaryMainColumn>
                <CoreSummaryForm<{
                  billingInfo: IBillingInfoForm;
                }>
                  wrapperClassName="space-y-4"
                  formItemPrefixes={["billingInfo"]}
                  ref={coreSummaryFormRef}
                  defaultValues={defaultValues}
                  onSubmit={async (values) => {
                    if (paymentState?.payload?.paymentStatus === "payment") {
                      return;
                    }
                    const passengersInformations = values.passengers.map(
                      (psg) =>
                        CorePassengerHelper.corePassengerToPassengerInformation(
                          psg,
                        ),
                    );
                    const passengerWithBillingInfo =
                      passengersInformations.find(
                        (x) => x.Address.Street !== "",
                      );

                    const billingInfo = diffrentBillingInfoBoolean.value
                      ? getBillingRequestDataFromBillingForm(
                          values.values?.billingInfo!,
                          passengerWithBillingInfo!,
                        )
                      : getBillingRequestDataFromPassengerInfo(
                          passengerWithBillingInfo!,
                        );
                    try {
                      const resp = await validateMutation.mutateAsync({
                        TourValidateBookingRequest: {
                          AddOnsKeyList: [],
                          CartId: props.tourAddToCartData.cartId,
                          SearchId: summaryData.payload.searchId!,
                          BookingPassengers: passengersInformations.map(
                            (x) => ({
                              ...x,
                              PhoneNumbers:
                                x.PhoneNumbers as unknown as string[],
                              SpecialServiceRequests: [
                                {
                                  $type: "TourPassengerDeparturePoint",
                                  DeparturePointKey:
                                    passengersInformations[0]
                                      ?.SpecialServiceRequests,
                                },
                              ],
                            }),
                          ) as any,
                          KvkkApproval: true,
                          CancelWarrantySearchId: "",
                          BillingRequest: billingInfo as any,
                          ReservationNotes: (values as any).specialNote ?? "",
                        },
                      });

                      if (
                        !resp.data?.result?.serviceResponse?.success ||
                        !resp.data?.result?.serviceResponse?.result
                          ?.transactionKey
                      ) {
                        setNotify({
                          title: "Bir Hata Oluştu!",
                          message:
                            resp.data.result.serviceResponse?.errors[0]
                              ?.message ?? "Bir hata oluştu",
                          variant: "error",
                        });
                        return;
                      }

                      setBookingData({
                        cartId: props.tourAddToCartData.cartId,
                        searchId: summaryData.payload.searchId!,
                        transactionId:
                          resp.data.result.serviceResponse.result
                            .transactionKey,
                        preSaleAgreementText:
                          resp.data.result.serviceResponse.result
                            .preSaleAgreementText,
                        saleAgreementText:
                          resp.data.result.serviceResponse.result
                            .saleAgreementText,
                        reservationNote: (values as any).specialNote ?? "",
                      });

                      if (
                        resp.data.result.serviceResponse.result
                          .masterPassUserData
                      ) {
                        setMasterpassData({
                          moduleName: "Tour",
                          payload: {
                            masterpassLoginState: false,
                            masterpassOtherUser: false,
                            cardList: [],
                            masterpassUserData:
                              resp.data.result.serviceResponse.result
                                .masterPassUserData,
                            customerEmail: values.passengers[0]!.email,
                            masterPassengerName:
                              values.passengers[0]!.name! +
                              values.passengers[0]!.surname!,
                          },
                        });
                      }
                    } catch (error) {
                      setNotify({
                        title: "Bir Hata Oluştu!",
                        message: "Bir hata oluştu",
                        variant: "error",
                      });
                    }
                  }}
                >
                  {summaryData.payload.rooms?.map(
                    (room: any, roomIndex: number) => (
                      <CoreSummaryPassengerGroup
                        key={room.room.key}
                        groupKey={`${GROUP_KEY_PREFIX}_${roomIndex}`}
                        passengers={getRoomPassengers(
                          summaryDataPassengersKeys ?? [],
                        )}
                        hasDeparturePoint
                        hasBadge
                        showIdentityWarning
                        hasReservationNote={!isB2E}
                      />
                    ),
                  )}

                  <BillingInfoForm
                    prefix="billingInfo"
                    onChangeDiffrentBillingInfoValue={(value) => {
                      diffrentBillingInfoBoolean.setValue(value);
                    }}
                    open={defaultValues?.billingInfoCompOpen}
                  />
                  <CoreSummaryNoteFormItem
                    name="specialNote"
                    placeholder="Talebinizi buraya yazın..."
                    title="Özel bir talebiniz mi var?"
                    hasMessage
                    open={defaultValues?.specialNote}
                  />
                  <CoreSummaryPolicyFormItem
                    kvkkAgreementText={
                      props.tourAddToCartData?.kvkkAgreementText
                    }
                  />
                </CoreSummaryForm>
              </CoreSummaryMainColumn>
            )}
            <CoreSummarySideColumn
              price={PriceManager({
                currency: props.tourAddToCartData.totalPrice.slice(0, 3),
                value: +props.tourAddToCartData.totalPrice.slice(3),
              })}
              button={
                <CoreSummaryActionButton
                  status="booking-confirm"
                  onClick={() => {
                    console.log("clicked");
                  }}
                  variant="primary"
                  loading={validateMutation.isLoading}
                />
              }
            >
              <RezervationSummaryProvider>
                <RezervationSummaryTitle title="Rezervasyon Özeti" />
                <HotelRezervationSummary
                  hotelName={props.tourAddToCartData.tourInformation.title}
                  image={summaryData.payload.option.defaultThumbnailImageUrl}
                >
                  <RezervationSummaryDivider />
                  <div className="flex justify-between">
                    <div className="flex flex-col gap-2">
                      <span className="text-xs text-gray-500">
                        Başlangıç Tarihi:
                      </span>
                      <div className="flex flex-col">
                        <span className="text-sm font-medium text-gray-800">
                          {dayjs(props.tourAddToCartData.startDate).format(
                            "DD MMMM YYYY ddd",
                          )}
                        </span>
                      </div>
                    </div>
                    <div className="flex flex-col gap-2">
                      <span className="text-xs text-gray-500">
                        Bitiş Tarihi:
                      </span>
                      <div className="flex flex-col">
                        <span className="text-sm font-medium text-gray-800">
                          {dayjs(props.tourAddToCartData.endDate).format(
                            "DD MMMM YYYY ddd",
                          )}
                        </span>
                      </div>
                    </div>
                  </div>
                  <RezervationSummaryDivider />
                  <div className="flex flex-col gap-3">
                    <div className="items-cente flex justify-between">
                      <h2 className="text-sm  font-semibold text-gray-800">
                        Konaklama
                      </h2>
                      <span className="text-sm text-gray-800">Opsiyon 1</span>
                    </div>
                    <span className="text-sm font-semibold text-gray-800">
                      {props.tourAddToCartData.optionName}
                    </span>
                    <div className="flex items-center">
                      <LIcon name="Check" className="mr-2" size={12} />
                      <span className="text-sm text-gray-800">
                        {props.tourAddToCartData.tourInformation.boardType}
                      </span>
                    </div>
                  </div>
                  <RezervationSummaryDivider />
                  <div className="flex flex-col gap-3">
                    {totalParticipants! > 0 && (
                      <div className="flex justify-between">
                        <span className="text-sm font-semibold text-gray-800">
                          Katılımcı sayısı
                        </span>
                        <span className="text-sm text-gray-500">
                          {totalParticipants}
                        </span>
                      </div>
                    )}
                    <div className="flex text-sm text-gray-800">
                      {totalGuests > 0 && (
                        <span>{`${totalGuests} yetişkin`}</span>
                      )}
                      {totalChildren > 0 && (
                        <span>{`, ${totalChildren} çocuk. `}</span>
                      )}
                    </div>
                  </div>

                  <RezervationSummaryDivider />
                </HotelRezervationSummary>

                <div className="flex items-center justify-between rounded-[4px] border p-2 text-gray-800">
                  <span className="text-sm ">Toplam Tutar</span>
                  <span className="text-xl font-semibold ">
                    {PriceManager({
                      currency: props.tourAddToCartData.totalPrice.slice(0, 3),
                      value: +props.tourAddToCartData.totalPrice.slice(3),
                    })}
                  </span>
                </div>

                <CoreSummaryActionButton
                  status="booking-confirm"
                  onClick={() => {
                    handleSubmitButtonClick();
                  }}
                  variant="primary"
                  loading={validateMutation.isLoading}
                />
              </RezervationSummaryProvider>
            </CoreSummarySideColumn>
          </CoreSummaryContent>
        </Container>
      </div>
    </div>
  );
};

export default TourSummaryView;