"use server";

import {postSingleAvailability} from "@/app/api/Actions";
import RightSide from "@/components/booking/rightSide";
import {villasContent as dataVilla, paymentMethods} from "@/data/dataContent";
import Image from "next/image";
import {notFound} from "next/navigation";

interface Props {
  params: {slug: string};
  searchParams: {[key: string]: string};
}

export default async function page({params, searchParams}: Props) {
  const villa = dataVilla.find(
    (villa) => villa.slug.trim() === params.slug.trim()
  );

  if (!villa) {
    notFound();
  }

  const dataForm = {
    start: searchParams.check_in,
    end: searchParams.check_out,
    adult: Number(searchParams.adult),
    child: Number(searchParams.child),
  };

  let resData;
  let toastMessage;
  try {
    const response = await postSingleAvailability(villa && villa.id, dataForm);

    if (response.success) {
      resData = {
        ...dataForm,
        ...response,
      };
    } else {
      toastMessage = response.message;
    }
  } catch (error) {
    toastMessage = "Failed to load data. Please try again.";
  }

  return (
    <main className="min-h-screen relative px-5 lg:px-20 py-10 flex flex-col justify-between space-y-10">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-20">
        <div className="space-y-5">
          <div className="w-full h-[400px] lg:h-[700px] relative">
            <Image
              src="/villa-building.jpg"
              alt="Alegria de la vida"
              fill
              sizes="(max-width: 768px) 100vw, 1200px"
              className="object-cover"
            />
          </div>
          <hr className="border-main" />
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
            <div className="space-y-2.5 2xl:space-y-5">
              <p className="text-lg font-bold">Payment Method</p>
              <small className="block text-[11px] text-justify 2xl:text-[12.8px]">
                All payments on this website are denominated in{" "}
                <span className="font-semibold">
                  Indonesian Rupiah (IDR). Prices shown in USD are provided
                  solely to give you an estimate of the payment amount.
                </span>
              </small>
            </div>
            <div className="space-y-2.5 2xl:space-y-5">
              <p className="text-lg font-bold">We accept</p>
              <div className="flex gap-2.5 items-center">
                {paymentMethods[0]?.methods.map((item: any, idx: number) => (
                  <Image
                    key={idx}
                    src={item}
                    alt="payment methods"
                    height={30}
                    width={48}
                    className="w-[35px] 2xl:w-[48px] h-[30px]"
                  />
                ))}
              </div>
              <div className="flex gap-2.5 items-center flex-wrap">
                {paymentMethods[1]?.methods.map((item: any, idx: number) => (
                  <Image
                    key={idx}
                    src={item}
                    alt="payment methods"
                    height={30}
                    width={48}
                    className="w-[35px] 2xl:w-[48px] h-[30px]"
                  />
                ))}
              </div>
            </div>
          </div>
        </div>
        <RightSide dataAvailability={resData} />
      </div>
      <small className="hidden lg:block w-[60%] 2xl:w-[50%] text-center mx-auto mb-32 text-[11px] 2xl:text-[12.8px]">
        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>
    </main>
  );
}