/* eslint-disable no-unsafe-optional-chaining */
import dayjs from "dayjs";

import { Button } from "@/components/ui/button/button";
import Card from "@/components/ui/card/card";
import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import Spinner from "@/components/ui/spinner";
import FlightListItemContent from "@/features/flight/components/flight-list/components/flight-list-item/components/flight-list-item-content";
import { getCityName } from "@/libs/helpers/flight-helper";
import { PriceManager } from "@/libs/price-manager/price-manager";
import type { IFlightBookingRequest } from "@/models/booking-request.model";
import { useFlightDetailQuery } from "@/services/eva-display/flight/flight-detail/flight-detail.service";

import BRFCCartData from "./brfc-cart-data";

interface BRFCDetailDataProps {
  flightBookingRequest: IFlightBookingRequest;
  productKey: string;
  searchId: string;
  pricingCombinationKeys: string[];
}

const BRFCDetailData = (props: BRFCDetailDataProps) => {
  const flightDetailQuery = useFlightDetailQuery({
    FlightDetailRequest:
      props.pricingCombinationKeys.length > 1
        ? {
            ProductKey: "",
            searchId: props.searchId,
            CombinationGroupKeys: props.pricingCombinationKeys,
          }
        : {
            ProductKey: props.productKey,
            searchId: props.searchId,
          },
  });

  if (!flightDetailQuery.data && flightDetailQuery.isLoading) {
    return (
      <div className="flex items-center justify-center">
        <Spinner />
      </div>
    );
  }

  const errros = (flightDetailQuery as any)?.errors?.[0]?.message;

  if (!flightDetailQuery.data || !!errros) {
    return (
      <div className="flex items-center justify-center">
        <div className="text-center">
          {!errros && <p>{errros}</p>}
          <p>
            Uçuş detayları çekilirken bir hata oluştu. Lütfen tekrar deneyiniz.
          </p>
          <Button
            variant="primary-text"
            onClick={() => {
              window.location.reload();
            }}
          >
            Sayfayı Yenile&nbsp;
            <LIcon name="RefreshCcw" size={15} />
          </Button>
        </div>
      </div>
    );
  }
  const { pricingCombinations } = flightDetailQuery.data;

  const isGroupedFlight =
    (pricingCombinations[0]?.combinationGroups || [])?.length > 1;

  const isRoundTrip = pricingCombinations.length > 1 || isGroupedFlight;

  const departureFlight = !isGroupedFlight
    ? pricingCombinations
        .find((x) => x.combinationGroups.find((y) => y.groupId === 0))
        ?.combinationGroups.find((x) => x.groupId === 0)
    : pricingCombinations[0]?.combinationGroups.find((x) => x.groupId === 0);

  const returnFlight = !isGroupedFlight
    ? pricingCombinations
        .find((x) => x.combinationGroups.find((y) => y.groupId === 1))
        ?.combinationGroups.find((x) => x.groupId === 1)
    : pricingCombinations[0]?.combinationGroups.find((x) => x.groupId === 1);

  return (
    <div className="flex flex-col gap-10">
      <Card>
        <div className="mb-4">
          <span className="text-base font-medium">Uçuş Bilgileri</span>
        </div>
        <div className="mb-2 flex justify-start gap-4">
          <div className="text-md font-medium text-gray-800">{`${getCityName(
            departureFlight?.flightSegments[0]?.origin,
          )} - ${getCityName(
            departureFlight?.flightSegments[0]?.destination,
          )}`}</div>
          <div>
            <div className="text-md text-gray-600">
              {dayjs(departureFlight?.flightSegments[0]?.departureTime).format(
                "DD MMMM YYYY ddd",
              )}
            </div>
          </div>
        </div>
        <Card className="bg-gray-50">
          <FlightListItemContent
            pricingCombination={pricingCombinations[0]!}
            combinationGroup={departureFlight!}
            passengerCount={1}
            renderActionButton={() => <div />}
            price={PriceManager({
              currency: departureFlight?.totalPrice.slice(0, 3) || "TRY",
              value:
                +departureFlight!.totalPrice?.slice(3) /
                props.flightBookingRequest.passengerInformations?.length!,
            })}
          />
        </Card>

        {isRoundTrip && returnFlight && (
          <>
            <div className="mb-2 mt-6 flex justify-start gap-4">
              <div className="text-md font-medium text-gray-800">{`${getCityName(
                returnFlight?.flightSegments[0]?.origin,
              )} - ${getCityName(
                returnFlight?.flightSegments[0]?.destination,
              )}`}</div>
              <div>
                <div className="text-md text-gray-600">
                  {dayjs(returnFlight?.flightSegments[0]?.departureTime).format(
                    "DD MMMM YYYY ddd",
                  )}
                </div>
              </div>
            </div>
            <Card className="bg-gray-50">
              <FlightListItemContent
                pricingCombination={pricingCombinations[0]!}
                combinationGroup={returnFlight!}
                passengerCount={1}
                renderActionButton={() => <div />}
                price={PriceManager({
                  currency: returnFlight?.totalPrice.slice(0, 3) || "TRY",
                  value:
                    +returnFlight!.totalPrice?.slice(3) /
                    props.flightBookingRequest.passengerInformations?.length!,
                })}
              />
            </Card>
          </>
        )}
      </Card>
      <div>
        <BRFCCartData
          detailData={flightDetailQuery.data}
          cartId={props.pricingCombinationKeys?.[0] || ""}
          flightBookingRequest={props.flightBookingRequest}
          pricingCombinationKeys={flightDetailQuery.data.pricingCombinations.map(
            (pricingCombination) => pricingCombination.key,
          )}
          searchId={props.searchId}
        />
      </div>
    </div>
  );
};

export default BRFCDetailData;