"use client";

import {ChevronLeft, CircleAlert} from "lucide-react";
import Link from "next/link";
import {Popover, PopoverContent, PopoverTrigger} from "../ui/popover";
import {useSearchParams} from "next/navigation";
import {format} from "date-fns";
import FormBooking from "./formBooking";

interface Props {
  dataAvailability: any;
}

export default function RightSide({dataAvailability}: Props) {
  const searchParams = useSearchParams();
  const startDate = searchParams.get("check_in");
  const endDate = searchParams.get("check_out");
  const adultQ = searchParams.get("adult");
  const childQ = searchParams.get("child");

  const parseDate = (dateStr: string): Date => {
    const date = new Date(dateStr);
    return isNaN(date.getTime()) ? new Date() : date;
  };

  return (
    <div className="order-first lg:order-none space-y-5 relative">
      <Link href="/">
        <div className="flex items-center gap-2.5">
          <ChevronLeft size={30} className="text-main" />
          <p className="text-lg">Back</p>
        </div>
      </Link>

      <div className="space-y-2.5">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-[30px]">
          <div className="space-y-5">
            <div className="space-y-2.5">
              <div className="flex items-center justify-between">
                <h1 className="font-bold ">Your trip details</h1>
              </div>
              <div className="space-y-[5px]">
                <p className="font-bold">Dates</p>
                <p className="text-[15px] font-medium leading-[24px]">
                  {startDate === endDate
                    ? "Select Dates"
                    : `${format(
                        parseDate(startDate as string),
                        "MMM dd, yyyy"
                      )} - ${format(
                        parseDate(endDate as string),
                        "MMM dd, yyyy"
                      )}`}
                </p>
              </div>
              <div className="space-y-[5px]">
                <p className="font-bold">Guests</p>
                <p className="text-[15px] font-medium leading-[24px]">
                  {Number(adultQ as string) > 1
                    ? Number(adultQ as string) + " Adults"
                    : Number(adultQ as string) + " Adult"}

                  {Number(childQ as string) !== 0 &&
                    (Number(childQ as string) > 1
                      ? `, ${Number(childQ as string)}` + " Children"
                      : `, ${Number(childQ as string)}` + " Child")}
                </p>
              </div>
            </div>
          </div>
          <div className="space-y-2.5 order-first lg:order-none">
            <div className="flex items-start gap-2.5">
              <h1 className="font-bold  ">Total Price</h1>
              <Popover>
                <PopoverTrigger>
                  <CircleAlert size={20} className="text-main" />
                </PopoverTrigger>
                <PopoverContent side="right" align="center" className="w-auto">
                  <div className="space-y-2">
                    {dataAvailability?.data.price.map(
                      (item2: any, index: any) => (
                        <div
                          key={index}
                          className="flex items-center gap-x-3 text-main"
                        >
                          <span className="text-sm ">{item2.date}</span>
                          <span className="text-base font-bold">
                            Rp. {item2.idr.toLocaleString("id-ID")}
                          </span>
                        </div>
                      )
                    )}
                  </div>
                </PopoverContent>
              </Popover>
            </div>
            <div className="flex items-start gap-2.5">
              <h5 className="font-bold text-4xl">
                IDR {dataAvailability?.data.idr.toLocaleString("id-ID")}
              </h5>
              <Popover>
                <PopoverTrigger>
                  <CircleAlert size={20} className="text-main" />
                </PopoverTrigger>
                <PopoverContent side="right" align="center" className="w-auto">
                  <span className="text-base font-bold text-main">
                    <p className="text-base">
                      Price in USD :{" "}
                      <span className="font-bold">
                        $ {dataAvailability?.data.usd.toLocaleString("us-US")}
                      </span>
                    </p>
                  </span>
                </PopoverContent>
              </Popover>
            </div>
          </div>
        </div>
      </div>
      <hr className="border-main" />
      <h1 className="font-bold">Detail Booking</h1>
      <FormBooking dataBooking={dataAvailability} />
      <small className="block lg:hidden w-full text-justify">
        You're going to be redirected to our trusted payment partner,{" "}
        <span className="font-semibold">Xendit</span>, to complete your
        transaction.{" "}
        <span className="font-semibold">
          For a smooth booking experience, please follow the steps until you're
          safely redirected back to our page.
        </span>{" "}
        Rest assured, your payment is protected. We’ll finalize your booking as
        soon as the process is complete!
      </small>
    </div>
  );
}