'use client'
import { AppDispatch } from "@/redux/slices";
import { bookingActions } from "@/redux/slices/Booking/booking";
import getViewPropertyAvailability, { createBooking, getBookingSummary } from "@/redux/thunks/Booking/booking.thunk";
import { CreateBookingPayload } from "@/redux/types/bookingType";
import AmenitiesMain from "@/src/components/AmenitiesMain/AmenitiesMain";
import ViewPropertyBreadcrumb from "@/src/components/Breadcrumb/ViewPropertyBreadcrumb";
import CancellationCards from "@/src/components/CancellationCards";
import MarqueeSlide from "@/src/components/MarqueeSlide";
import PropertyImageBox from "@/src/components/PropertyImageBox";
import { formatLocation } from "@/src/utils/commonFunctions";
import useIsClient from "@/src/utils/customHooks/useIsClient";
import useIsMobile from "@/src/utils/customHooks/useIsMobile";
import Routes from "@/src/utils/RouteConstants";
import { renderSafeHtml } from "@/src/utils/sanitizeHTML";
import { BookNowSection } from "blankbase-packages";
import Image from "next/image";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import PropertyDetailsList from "../PropertyDetailsList/PropertyDetailsList";
import styles from "./page.module.scss";

const PropertyDetailsMain = ({ breadcrumbData, slug, PropertyDetails, PropertyDetailContent, ProfileData, FindAHomeContent }) => {
  const dispatch = useDispatch<AppDispatch>()
  const { viewPropertyAvailability, bookingSummary, isbookingSummaryLoading, isCreateBookingLoading } = useSelector((state: any) => state?.booking);

  const isMobile = useIsMobile(1200);
  const isClient = useIsClient();
  const router = useRouter();
  const [createBookingPayload, setCreateBookingPayload] = useState(null)
  const [selectedBedroom, setSelectedBedroom] = useState<string[]>([])

  useEffect(() => {
    if (PropertyDetails?.data?.propertyId) {
      dispatch(getViewPropertyAvailability({ propertyId: PropertyDetails?.data?.propertyId, propertySpaceIds: selectedBedroom }))
    }
  }, [PropertyDetails?.data?.propertyId])

  useEffect(() => {
    dispatch(bookingActions.resetBookingSummary());
    dispatch(bookingActions.resetViewPropertyAvailability());
  }, [])

  /**
   * Handles the "Book Now" button click.
   * Constructs the booking payload with specific flags (skip payment, not a guest booking),
   * then dispatches the createBooking action.
   * On successful booking creation, navigates to the review payment page using the returned booking ID.
 */
  const onClickBookNow = () => {
    const payload: CreateBookingPayload = {
      //@ts-ignore
      ...createBookingPayload,
      skipPayment: true,
      confirmBooking: false,
      isGuestBooking: false,
      propertySpaceIds: selectedBedroom
    }
    dispatch(createBooking(payload, (data: any) => {
      router.push(`${Routes.BOOKING(slug)}/${data?.data?.bookingId}`);
    }))
  }

  /**
   * Sets booking payload and fetches booking summary if property is selected.
   * @param payload - Booking data including guests and other details.
 */
  const getApiPayload = (payload: any) => {
    const { guests, ...rest } = payload
    if (PropertyDetails?.data?.propertyId) {
      setCreateBookingPayload({ numberOfGuest: guests, propertySpaceIds: selectedBedroom, ...rest })
      if (createBookingPayload && typeof createBookingPayload === 'object') {
        if (createBookingPayload?.checkInDate !== rest?.checkInDate || createBookingPayload?.checkOutDate !== rest?.checkOutDate) {
          dispatch(getBookingSummary({ numberOfGuest: guests, propertySpaceIds: selectedBedroom, ...rest }))
        }
      } else {
        dispatch(getBookingSummary({ numberOfGuest: guests, propertySpaceIds: selectedBedroom, ...rest }))
      }
    }
  }

  useEffect(() => {
    if (
      createBookingPayload &&
      typeof createBookingPayload === 'object'
    ) {
      const payload: any = {
        ...(createBookingPayload as CreateBookingPayload),
        propertySpaceIds: selectedBedroom,
      }
      dispatch(getBookingSummary(payload));
      dispatch(getViewPropertyAvailability({ propertyId: PropertyDetails?.data?.propertyId, propertySpaceIds: selectedBedroom }))
    }
  }, [selectedBedroom]);

  return (
    <>
      <main className={`mainPropertyOverviewBox main-mt bg-bgColor main-mt pb-[30px] sm:pb-[40px]`}>
        <section>
          <div className={`container`}>
            <ViewPropertyBreadcrumb content={breadcrumbData} />
            <div className={`bg-whiteColor rounded-[12px] p-3 xsm:p-4`}>
              <PropertyImageBox slug={slug} propertyImage={PropertyDetails ? [PropertyDetails?.data?.workspaceImage, ...(PropertyDetails?.data?.propertyImage || [])] : []} extraClass={"!z-0"} />
              <div
                className={`reviewMainWrapper flex gap-4 lg:gap-6 flex-wrap mt-6`}
              >
                <div
                  className={`reviewLeftWrapper h-full rounded-xl w-full xl:w-[calc(65%-24px)]`}
                >
                  {/* Property name and details box */}
                  <div
                    className={`${styles.propertyNameBox} flex flex-col gap-4 lg:gap-5 mb-6`}
                  >
                    <div className={`propertyName flex gap-5 justify-between`}>
                      <div className="nameDetails flex flex-col w-full">
                        <div
                          className={`w-full flex gap-2 items-start justify-between mb-[5px]`}
                        >
                          <h4 className={`!mb-0 break-all`}>{PropertyDetails?.data?.headline}</h4>
                          <span className="badge shrink-0 fs-18 !font-fw600 flex items-center">
                            {PropertyDetails?.data?.propertyTypeData?.slug === 'coliving' && <span className="!font-fw400 mr-1">From </span>}
                            {PropertyDetails?.data?.currencySymbol} {' '} {PropertyDetails?.data?.totalPrice}
                            <span className="fs-14 !font-fw400">/{PropertyDetailContent.WEEK}</span>
                            <div className="relative mt-[2px] ml-1.5" onClick={(e) => e.stopPropagation()}>
                              <div className="tooltipMainBox">
                                <span className="tooltipSpan !m-0">
                                  <i className="icon icon-info !w-4 !h-4 !bg-white"></i>
                                </span>
                                <div className="hiddenTooltip !left-[unset] !-right-3 !top-[calc(100%+15px)] before:!left-[93px] before:!right-0 before:md:!left-[calc(100%-26px)] before:!top-[-3px] !bg-primary">
                                  <p className={`!mb-0 !text-white`}>{PropertyDetails?.data?.cityTaxIncluded ? PropertyDetailContent?.CITYTAXINCLUDED : PropertyDetailContent?.CITYTAXEXCLUDED}</p>
                                </div>
                              </div>
                            </div>
                          </span>
                        </div>
                        <p className="fs-16 text-grey344Color flex items-center gap-1 !font-fw400">
                          <i className={`Icon IconLocation !bg-grey344Color shrink-0 w-[20px] h-[20px]`}></i>
                          <span className={`line-clamp-1 text-grey344Color`}>
                            {/* {`${PropertyDetails?.data?.propertyLocation?.streetName}, ${PropertyDetails?.data?.propertyLocation?.city}, ${PropertyDetails?.data?.propertyLocation?.state}, ${PropertyDetails?.data?.propertyLocation?.countryData?.name}, ${PropertyDetails?.data?.propertyLocation?.zip}`} */}
                            {formatLocation({
                              // streetName: PropertyDetails?.data?.propertyLocation?.streetName,
                              city: PropertyDetails?.data?.propertyLocation?.city,
                              // state: PropertyDetails?.data?.propertyLocation?.state,
                              country: PropertyDetails?.data?.propertyLocation?.countryData?.name,
                              // zip: PropertyDetails?.data?.propertyLocation?.zip
                            })}
                          </span>
                        </p>
                      </div>
                    </div>
                    <div className={`hostNameBox flex gap-3 items-center`}>
                      {PropertyDetails?.data?.hostDetails?.profilePicture?.imageUrl && <span
                        className={`flex h-[42px] w-[42px] rounded-full overflow-hidden`}
                      >
                        <Image
                          width={42}
                          height={42}
                          src={PropertyDetails?.data?.hostDetails?.profilePicture?.imageUrl}
                          alt="host-image"
                          className={`!w-full !h-full object-cover object-center`}
                        />
                      </span>}
                      <p className={`fs-16 mb-0 text-grey344Color !font-fw500`}>
                        {PropertyDetailContent.HOSTED_BY} {PropertyDetails?.data?.hostDetails?.firstName}{" "}{PropertyDetails?.data?.hostDetails?.lastName}
                      </p>
                    </div>
                  </div>
                  {/* Book Now In Mobile Start*/}
                  {isClient && isMobile &&
                    <div className={`mb-4 xl:hidden`}>
                      <h6 className={`!mb-4 !font-fw600`}>Book now...</h6>
                      <BookNowSection
                        onClickBookNow={onClickBookNow}
                        bookingSummaryData={bookingSummary?.data}
                        userType={'guest'}
                        propertyData={PropertyDetails?.data}
                        bgColor="#F9FAFB"
                        getApiPayload={getApiPayload}
                        viewPropertyAvailabilityData={viewPropertyAvailability?.data}
                        isbookingSummaryLoading={isbookingSummaryLoading}
                        isCreateBookingLoading={isCreateBookingLoading}
                      />
                    </div>}
                  {/* Book Now In Mobile End */}
                  {/* Essential box code */}
                  <div className={`${styles.essentialsBox} mb-6 grid gap-3`}>
                    <h6 className={`!mb-0 !font-fw600`}>{PropertyDetailContent.ESSENTIALS}</h6>
                    <div className="grid gap-3 md:gap-6 grid-cols-2">
                      <div
                        className={`essentailsList grid md:flex flex-wrap items-stretch gap-3`}
                      >
                        <div className="hidden md:flex items-center gap-2">
                          <span
                            className={`${styles.bedIconSpan} rounded-full w-[40px] md:w-[50px] h-[40px] md:h-full flex justify-center items-center`}
                          >
                            <i
                              className={`Icon IconHomeNew !w-[24px] md:w-auto !h-[24px] md:h-auto`}
                            ></i>
                          </span>
                          <p className="fs-20 !mb-0 md:hidden !font-fw500">{PropertyDetailContent.AVAILABILITY}</p>
                        </div>
                        <div
                          className={`${styles.stayDurationInfo} grid grid-cols-1 gap-3 w-full md:w-[calc(100%-62px)]`}
                        >
                          <div
                            className={`rounded-[14px] md:rounded-[200px] items-center flex gap-2 justify-center px-2 xsm:px-4 py-2.5 md:py-1.5 fs-16 !font-fw500 text-grey344Color mb-0`}
                          >
                            {/* <i
                                  className={`Icon IconBed shrink-0 !w-[20px] md:w-auto !h-[20px] md:h-auto !bg-grey344Color`}
                                ></i> */}
                            <i
                              className="Icon shrink-0 !w-[20px] md:w-auto !h-[20px] md:h-auto !bg-grey344Color"
                              style={{
                                WebkitMaskImage: (PropertyDetails?.data?.propertyTypeData?.icon || PropertyDetails?.data?.propertyTypeData?.listingIcon) ? `url(${(PropertyDetails?.data?.propertyTypeData?.icon || PropertyDetails?.data?.propertyTypeData?.listingIcon)})` : 'none',
                                maskImage: (PropertyDetails?.data?.propertyTypeData?.icon || PropertyDetails?.data?.propertyTypeData?.listingIcon) ? `url(${(PropertyDetails?.data?.propertyTypeData?.icon || PropertyDetails?.data?.propertyTypeData?.listingIcon)})` : 'none',
                              }}
                            ></i>
                            <span className="md:w-auto flex md:justify-center gap-1">
                              {PropertyDetails?.data?.propertyTypeData?.title}
                            </span>
                          </div>
                          <div
                            className={`rounded-[14px] md:rounded-[200px] items-center flex gap-2 justify-center px-2 xsm:px-4 py-2.5 md:py-1.5 fs-16 !font-fw500 text-grey344Color mb-0`}
                          >
                            <i
                              className={`Icon IconBed shrink-0 !w-[20px] md:w-auto !h-[20px] md:h-auto !bg-grey344Color`}
                            ></i>
                            <span className="md:w-auto flex md:justify-center gap-1">
                              {PropertyDetails?.data?.minimumStay?.number}-{PropertyDetails?.data?.maximumStay?.number} {PropertyDetails?.data?.minimumStay?.duration}
                            </span>
                          </div>
                        </div>
                      </div>
                      <div
                        className={`essentailsList grid md:flex flex-wrap items-stretch gap-3`}
                      >
                        <div className="hidden md:flex items-center gap-2">
                          <span
                            className={`${styles.bedIconSpan} rounded-full w-[40px] md:w-[50px] h-[40px] md:h-full flex justify-center items-center`}
                          >
                            <i
                              className={`Icon IconWifi !w-[24px] md:w-auto !h-[24px] md:h-auto`}
                            ></i>
                          </span>
                          <p className="fs-20 !mb-0 md:hidden !font-fw500">
                            {PropertyDetailContent.INTERNET_SPEED}
                          </p>
                        </div>
                        <div
                          className={`${styles.stayDurationInfo} grid grid-cols-1 gap-3 w-full md:w-[calc(100%-62px)]`}
                        >
                          <div
                            className={`rounded-[14px] md:rounded-[200px] items-center flex gap-2 justify-center px-2 xsm:px-4 py-2.5 md:py-1.5 fs-16 !font-fw500 text-grey344Color mb-0`}
                          >
                            <i
                              className={`Icon IconImport shrink-0 !w-[20px] md:w-auto !h-[20px] md:h-auto !bg-grey344Color`}
                            ></i>
                            <span className="md:w-auto flex items-center md:justify-center gap-1">
                              <b className="text-secondaryColor">{PropertyDetails?.data?.internetInfo?.downloadSpeed}</b> {PropertyDetailContent.MBPS}{" "}
                              <div className="relative mt-[2px]">
                                <div className="tooltipMainBox">
                                  <span className="tooltipSpan ml-1">
                                    <i className={`Icon IconInfo !w-full !h-full cursor-pointer !bg-grey344Color`}></i>
                                  </span>
                                  <div className="hiddenTooltip newTooltip">
                                    <p className={`!mb-0 !text-white fs-16 !font-fw600`}>{PropertyDetailContent.DOWNLOAD_SPEED}</p>
                                    <p className={`!mb-0 !text-white`}>{PropertyDetailContent.DOWNLOAD_SPEED_INFO}</p>
                                  </div>
                                </div>
                              </div>
                            </span>
                          </div>
                          <div
                            className={`rounded-[14px] md:rounded-[200px] items-center flex gap-2 justify-center px-2 xsm:px-4 py-2.5 md:py-1.5 fs-16 !font-fw500 text-grey344Color mb-0`}
                          >
                            <i
                              className={`Icon IconExport shrink-0 !w-[20px] md:w-auto !h-[20px] md:h-auto !bg-grey344Color`}
                            ></i>
                            <span className="md:w-auto flex items-center md:justify-center gap-1">
                              <b className="text-secondaryColor">{PropertyDetails?.data?.internetInfo?.uploadSpeed}</b> {PropertyDetailContent.MBPS}{" "}
                              <div className="relative mt-[2px]">
                                <div className="tooltipMainBox">
                                  <span className="tooltipSpan ml-1">
                                    <i className={`Icon IconInfo !w-full !h-full cursor-pointer !bg-grey344Color`}></i>
                                  </span>
                                  <div className="hiddenTooltip newTooltip">
                                    <p className={`!mb-0 !text-white fs-16 !font-fw600`}>{PropertyDetailContent.UPLOAD_SPEED}</p>
                                    <p className={`!mb-0 !text-white`}>{PropertyDetailContent.UPLOAD_SPEED_INFO}</p>
                                  </div>
                                </div>
                              </div>
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <AmenitiesMain
                    PropertyDetails={PropertyDetails}
                    PropertyDetailContent={PropertyDetailContent}
                    setSelectedBedroom={setSelectedBedroom}
                    selectedBedroom={selectedBedroom}
                  />
                  {PropertyDetails?.data?.houseRules && <div
                    className={`${styles.cancellationTerms} grid gap-4 mb-6`}
                  >
                    <div
                      className={`${styles.policyTerms} gap-3 grid`}
                    >
                      <h6 className="!mb-0 !font-fw600">{PropertyDetailContent.HOUSE_RULES}</h6>
                      <div className={`bg-whiteFBColor rounded-2xl p-4 !font-fw400 text-grey344Color fs-16 break-content notesForGuest`}>
                        {renderSafeHtml(PropertyDetails?.data?.houseRules)}
                      </div>
                    </div>
                  </div>}
                  {/* Cancelation Terms Box */}
                  <div className={`${styles.cancellationTerms} grid gap-4`}>
                    {/* <h6
                          className={`!mb-0 !font-fw600`}
                        >{`If you can't make it`}</h6> */}
                    <div
                      className={`${styles.policyTerms} rounded-2xl gap-3 grid`}
                    >
                      <h6 className="!mb-0 !font-fw600">
                        {PropertyDetailContent.CANCELLATION_POLICY}
                      </h6>
                      <div className={`grid gap-3`}>
                        <div className="grid grid-cols-1 md:grid-cols-2 xxl:!grid-cols-3 gap-4">
                          <CancellationCards data={PropertyDetails?.data?.cancellationPolicyData} totalNights={bookingSummary?.data?.summary?.totalNights || 0} />
                        </div>
                      </div>
                    </div>
                  </div>
                  {/* <AllReviewSection type={1} /> */}
                  {/* <Link className={`mt-6 SecondaryBtn w-full`} href="#">Book my home</Link> */}
                </div>
                {isClient && !isMobile && <div
                  className={`book-now-section reviewRightWrapper hidden xl:block lg:sticky lg:top-[85px] xxl:top-[110px] h-full w-[35%]`}
                >
                  {<BookNowSection
                    onClickBookNow={onClickBookNow}
                    bookingSummaryData={bookingSummary?.data}
                    userType={'guest'}
                    propertyData={PropertyDetails?.data}
                    bgColor="#F9FAFB"
                    getApiPayload={getApiPayload}
                    viewPropertyAvailabilityData={viewPropertyAvailability?.data}
                    isbookingSummaryLoading={isbookingSummaryLoading}
                    isCreateBookingLoading={isCreateBookingLoading}
                  />}
                </div>}
                {/* Book Now Button Mobile view */}
                {/* <div className="xl:hidden w-full">
                      <Link
                        href={Routes.BOOKING(slug)}
                        className="SecondaryBtn w-full"
                      >
                        Book
                      </Link>
                    </div> */}
                {/*<CommonPopup />*/}
              </div>
            </div>
          </div>
        </section>
        {/* You may also like */}
        <section className={`hidden xl:block`}>
          <div className={`container`}>
            <div
              className={`py-[30px] sm:py-[40px] lg:py-[50px] xxl:py-[65px]`}
            >
              <MarqueeSlide content={PropertyDetailContent.MarqueeData} />
            </div>
            {PropertyDetails?.data &&
              <PropertyDetailsList
                FindAHomeContent={FindAHomeContent?.FindAHomeCard}
                latitude={PropertyDetails?.data?.coordinates?.coordinates?.[1]}
                longitude={PropertyDetails?.data?.coordinates?.coordinates?.[0]}
                PropertyDetails={PropertyDetails}
              />
            }
          </div>
        </section>
      </main>
    </>
  )
}

export default PropertyDetailsMain