/* eslint-disable react-hooks/exhaustive-deps */
import dayjs from "dayjs";
import Link from "next/link";
import { useEffect, useState } from "react";

import { Button } from "@/components/ui/button/button";
import Card from "@/components/ui/card/card";
import Spinner from "@/components/ui/spinner";
import {
  ReservationSummaryImage,
  ReservationSummaryProvider,
  ReservationSummaryRoutes,
  ReservationSummarySeperator,
  ReservationSummaryTitle,
} from "@/components/widget/reservation-summary/reservation-summary";
import { PriceManager } from "@/libs/price-manager/price-manager";
import DefautlImage from "@/public/assets/images/defaultImage.jpg";
import { useTransferAddToCartMutation } from "@/services/eva-display/transfer/transfer-cart/transfer-add-to-cart.service";

import { useBookingRequestTransferChangeContext } from "../context/booking-request-transfer-change-context";
import { useBookingRequestTransferChange } from "../hooks/use-booking-request-transfer-change";
import { BRInfoMessage } from "./br-info-message";

const BRTransferSummary = () => {
  const { selectedData, transferBookingRequest } =
    useBookingRequestTransferChangeContext();
  const addToCartMutation = useTransferAddToCartMutation();
  const { changeBookingRequest, isLoading } = useBookingRequestTransferChange({
    detailKeys: selectedData!.selectedItems,
    searchId: selectedData!.searchId,
    searchItemKey: selectedData!.searchItemKey,
    transferBookingRequest,
  });
  const [message, setMessage] = useState<{
    requestId?: number;
    title: string;
    message: string;
    type: "information" | "error" | "success";
  } | null>(null);

  useEffect(() => {
    addToCartMutation.mutate({
      TransferCartProductRequest: {
        ProductKeys: selectedData!.selectedItems,
        SearchId: selectedData!.searchId!,
      },
    });
  }, []);
  const addToCardData = addToCartMutation.data?.result;

  if (!addToCardData)
    return (
      <div>
        <Spinner />
      </div>
    );

  const isReturn = addToCardData.transferItemList.length > 1;

  const sortedTransferItemsByGroupId = addToCardData.transferItemList.sort(
    (a, b) => a.groupId - b.groupId,
  );

  return (
    <div className="pb-10">
      <ReservationSummaryProvider>
        <ReservationSummaryTitle text="Transfer Bilgisi" />
        {sortedTransferItemsByGroupId.map((item, index) => (
          <>
            {index !== 0 && (
              <div>
                <ReservationSummarySeperator />
              </div>
            )}
            <div key={item.cartId}>
              {isReturn && (
                <div className="mb-1">
                  <span className="text-sm text-gray-500">
                    {index === 0 ? "Gidiş Transferi" : "Dönüş Transferi"}
                  </span>
                </div>
              )}
              <div className="flex items-start gap-2" key={item.cartId}>
                <ReservationSummaryImage
                  reservationSummaryImage={
                    selectedData?.info?.images?.[index] ?? DefautlImage
                  }
                />
                <div className="flex flex-col gap-1">
                  <span className="text-sm font-semibold text-gray-800">
                    {item.transferName}
                  </span>
                  <span className="text-sm text-gray-500">
                    {dayjs(item.startDate).format("DD MMMM YYYY")}
                  </span>
                </div>
              </div>
              <ReservationSummaryRoutes
                destination={item?.destination}
                origin={item?.origin}
              />
            </div>
          </>
        ))}

        <ReservationSummarySeperator />
        <div className="flex items-center justify-between">
          <span className="text-sm font-semibold text-gray-800">
            Yolcu Sayısı
          </span>
          <span className="text-sm text-gray-600">
            {addToCardData.passengersCount}
          </span>
        </div>

        <ReservationSummarySeperator />

        {isReturn && (
          <div>
            {sortedTransferItemsByGroupId.map((item, index) => (
              <div
                key={item.groupId}
                className="flex items-center justify-between"
              >
                <span className="text-sm">
                  {index === 0 ? "Gidiş Transferi" : "Dönüş Transferi"}
                </span>
                <span className="text-sm">
                  {PriceManager({
                    currency: item.totalPrice.slice(0, 3),
                    value: +item.totalPrice.slice(3),
                  })}
                </span>
              </div>
            ))}
          </div>
        )}
      </ReservationSummaryProvider>

      <Card className="mt-6">
        <div className="flex items-center justify-between">
          <div className="flex flex-col items-start gap-1">
            <span className="text-base font-medium text-gray-500">
              Toplam Tutar
            </span>
            <span className="text-lg font-semibold">
              {PriceManager({
                currency: addToCardData.totalPrice.slice(0, 3),
                value: +addToCardData.totalPrice.slice(3),
              })}
            </span>
          </div>
          <div className="flex gap-3">
            <Link
              href={`/transfer-request-detail?id=${transferBookingRequest.id}`}
            >
              <Button variant="outline">Vazgeç</Button>
            </Link>
            <Button
              variant="primary"
              onClick={async () => {
                try {
                  const resp = await changeBookingRequest({
                    cartId: addToCardData.cartId,
                  });
                  if (resp.informations && resp.informations.length > 0) {
                    let messages = resp.informations[0]?.message ?? "";

                    if (resp.errors && resp.errors.length > 0) {
                      messages += ` ${resp.errors[0]?.message}` ?? "";
                    }

                    setMessage({
                      title: "Talep Değiştirildi",
                      message: messages,
                      type: "success",
                      requestId: resp.result.requestId,
                    });
                  } else if (resp.errors && resp.errors.length > 0) {
                    setMessage({
                      title: "Hata",
                      message: resp.errors[0]?.message ?? "",
                      type: "error",
                    });
                  } else if (resp.result.requestId !== 0) {
                    setMessage({
                      title: "Talep Değiştirildi",
                      message: "Talep başarıyla değiştirildi.",
                      type: "success",
                      requestId: resp.result.requestId,
                    });
                  }
                } catch (error) {
                  setMessage({
                    title: "Hata",
                    message: "Bir hata oluştu!",
                    type: "error",
                  });
                }
              }}
              loading={isLoading}
            >
              Değiştir ve Onayla
            </Button>
          </div>
        </div>
      </Card>
      <BRInfoMessage
        variant={message?.type === "error" ? "error" : "success"}
        title={message?.title ?? ""}
        message={message?.message ?? ""}
        open={Boolean(message)}
        onClose={() => {
          if (message?.requestId) {
            window.location.href = `/transfer-request-detail?id=${message?.requestId}`;
          }
          setMessage(null);
        }}
        onOk={() => {
          window.location.href = `/transfer-request-detail?id=${message?.requestId}`;
          setMessage(null);
        }}
      />
    </div>
  );
};

export default BRTransferSummary;