/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable no-console */
/* eslint-disable @next/next/no-img-element */
import dayjs from "dayjs";
import { useState } from "react";
import { useMediaQuery } from "usehooks-ts";

import { Button } from "@/components/ui/button/button";
import Card from "@/components/ui/card/card";
import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import { Modal } from "@/components/ui/modal/modal";
import { Undefined } from "@/components/widget/booking-request-card-detail/booking-request-card-detail";
import {
  DateHelper,
  getFormatedFlightTime,
} from "@/libs/helpers/date-time-helper";
import {
  getAirportCode,
  getCityName,
  getWaitingTime,
} from "@/libs/helpers/flight-helper";
import type { IPlaneReservationData } from "@/services/eva-display/demand/flight-reservation-data/flight-reservation-data";

import FlightInformationModal from "../../flight-information-modal/flight-information-modal";

interface PlaneOneWayCardProps {
  reservationData: IPlaneReservationData;
  totalPrice?: string | number;
}

const FlightMultipleWayCard = ({
  totalPrice,
  reservationData,
}: PlaneOneWayCardProps) => {
  const isDesktop = useMediaQuery("(min-width: 768px)");

  const [detailModals, setDetailModals] = useState<string[]>([]);
  if (!reservationData?.DetailResponse?.PricingCombinations) return null;

  const pricingCombinations = reservationData.DetailResponse.PricingCombinations
    .length
    ? reservationData.DetailResponse.PricingCombinations
    : [reservationData.DetailResponse.PricingCombinations[0]];

  if (pricingCombinations.length === 0) {
    console.log("pricingCombinations", pricingCombinations);
    return null;
  }

  const combinationGroups = pricingCombinations?.flatMap((item) =>
    item?.CombinationGroups?.sort((a, b) => a.GroupId - b.GroupId),
  );

  const tripLength = combinationGroups && combinationGroups.length;

  return (
    <div className="flex w-full flex-col gap-4">
      {combinationGroups &&
        combinationGroups.map((combination) => {
          if (
            !combination?.FlightSegments ||
            combination?.FlightSegments?.length === 0
          ) {
            return null;
          }

          const flightSegments = combination.FlightSegments.sort(
            (a, b) =>
              dayjs(a.DepartureTime).valueOf() -
              dayjs(b.DepartureTime).valueOf(),
          );

          if (
            !flightSegments ||
            !Array.isArray(flightSegments) ||
            flightSegments.length === 0 ||
            !flightSegments[0]
          )
            return null;

          const departureSegment = flightSegments[0];
          const arrivalSegment = flightSegments[flightSegments.length - 1]!;
          const direct = combination.GroupId === 0 ? "Gidiş" : "Dönüş";

          return (
            <div key={departureSegment.Key}>
              {totalPrice && (
                <div className="my-2 flex items-center justify-between text-sm">
                  <div className="flex gap-2">
                    <span className="font-medium">
                      {`${getCityName(
                        departureSegment?.Origin || "",
                      )} - ${getCityName(departureSegment?.Destination || "")}`}
                    </span>
                    <span>
                      {DateHelper.dayjs(departureSegment.DepartureTime).format(
                        "DD MMMM YYYY dddd",
                      )}
                    </span>
                  </div>
                  {isDesktop && (
                    <Button
                      className="!m-0  !h-[10px] !p-0"
                      variant="primary-text"
                      onClick={() => {
                        setDetailModals((prev) => [...prev, combination.Key]);
                      }}
                    >
                      Detaylı Bilgi
                    </Button>
                  )}
                </div>
              )}
              <Card
                key={departureSegment.Key}
                className="flex w-full gap-4 bg-gray-50 p-4"
              >
                <div className="flex w-full flex-col items-center justify-between gap-2 md:flex-row">
                  <div className="flex w-full flex-col md:w-auto">
                    {tripLength === 2 && (
                      <p className="mb-1 text-sm font-medium">{direct}</p>
                    )}
                    <div className="flex items-center justify-center gap-2 whitespace-nowrap md:justify-normal">
                      <img
                        className="size-6"
                        src={`https://concorecdn.jollytur.com/concore/media/site/assets/img/theme/${departureSegment?.OperatingAirlineCode}-42x42.gif?v1040`}
                        alt={departureSegment?.OperatingAirlineCode as string}
                      />
                      <div>
                        <p className="text-sm font-semibold">
                          {departureSegment?.MarketingAirline || Undefined()}
                        </p>
                        <p className="text-xs text-gray-500">
                          {departureSegment?.FlightNumber || Undefined()}
                        </p>
                      </div>
                    </div>
                  </div>
                  <div className="flex flex-col items-center gap-1 overflow-hidden">
                    <p className="text-xs text-gray-500">
                      {getFormatedFlightTime(combination?.TravelTime || "") ||
                        Undefined()}
                    </p>
                    <div className="flex w-full items-center gap-3 overflow-hidden">
                      <div className="flex w-full items-center gap-1">
                        <p className="text-base font-semibold">
                          {DateHelper.dateToTime(
                            departureSegment.DepartureTime,
                          )}
                        </p>
                        <p className="text-sm" title={departureSegment?.Origin}>
                          {getAirportCode(departureSegment?.Origin || "")! ||
                            Undefined()}
                        </p>
                      </div>

                      <LIcon
                        className="shrink-0 text-gray-300"
                        name="Minus"
                        size={20}
                      />
                      <LIcon
                        className="shrink-0 rotate-45 text-gray-500"
                        size="20"
                        name="Plane"
                      />
                      <LIcon
                        className="shrink-0 text-gray-300"
                        name="MoveRight"
                        size={20}
                      />

                      <div className="flex w-full items-center gap-1">
                        <p className="text-base font-semibold">
                          {DateHelper.dateToTime(arrivalSegment.ArrivalTime)}
                        </p>
                        <p
                          className="text-sm"
                          title={arrivalSegment?.Destination}
                        >
                          {getAirportCode(arrivalSegment?.Destination || "")! ||
                            Undefined()}
                        </p>
                      </div>
                    </div>
                    <p className="text-sm">
                      {`${
                        combination.FlightSegments.length >= 2
                          ? `${
                              combination.FlightSegments.length - 1
                            } Aktarmalı ( ${[
                              ...new Set(
                                flightSegments
                                  .filter((_, i) => i !== 0)
                                  .map((x) => getAirportCode(x.Origin)),
                              ),
                            ].join(", ")} )`
                          : "Aktarmasız"
                      }`}
                      <span className="capitalize">
                        {`, ${
                          combination.CabinClassTitle?.toLowerCase() ?? ""
                        }`}
                      </span>
                    </p>
                  </div>
                  {totalPrice && (
                    <div className="flex w-full items-center justify-between gap-2 border-t pt-2 text-right md:w-auto md:flex-col md:border-none md:pt-0">
                      {!isDesktop && (
                        <Button
                          className="!m-0  !h-[10px] !p-0"
                          variant="primary-text"
                          onClick={() => {
                            setDetailModals((prev) => [
                              ...prev,
                              combination.Key,
                            ]);
                          }}
                        >
                          {" "}
                          Detaylı Bilgi{" "}
                        </Button>
                      )}
                      {tripLength === 1 && (
                        <div>
                          <p className="text-sm text-gray-500">Toplam Tutar</p>
                          <p className="font-semibold">{totalPrice}</p>
                        </div>
                      )}
                    </div>
                  )}
                </div>
              </Card>
              <Modal
                size="lg"
                open={detailModals.includes(combination.Key)}
                onClose={() => {
                  setDetailModals((prev) =>
                    prev.filter((x) => x !== combination.Key),
                  );
                }}
                title="Detaylı Bilgi"
                footer
              >
                <div className="mt-5 flex flex-col gap-4 overflow-auto">
                  {flightSegments.map((flightSegmentItem, key) => (
                    <FlightInformationModal
                      key={+key}
                      marketingAirlineCode={
                        flightSegmentItem.OperatingAirlineCode
                      }
                      origin={flightSegmentItem.Origin}
                      destination={flightSegmentItem.Destination}
                      departureTime={DateHelper.dayjs(
                        flightSegmentItem.DepartureTime,
                      ).format("HH:mm , DD MMMM YYYY dddd")}
                      arrivalTime={DateHelper.dayjs(
                        flightSegmentItem.ArrivalTime,
                      ).format("HH:mm , DD MMMM YYYY dddd")}
                      flightTime={getFormatedFlightTime(
                        flightSegmentItem.FlightTime,
                      )}
                      brandName={flightSegmentItem.OperatingAirline}
                      flightCode={flightSegmentItem.FlightNumber}
                      infoText={
                        flightSegmentItem.MarketingAirline ===
                        flightSegmentItem.OperatingAirline
                          ? ""
                          : `Uçuş hizmetinizin bir bölümü ${flightSegmentItem.OperatingAirline} tarafından yürütülecektir.`
                      }
                      lastSegment={key === flightSegments.length - 1}
                      waitingTime={getWaitingTime(
                        flightSegmentItem.ArrivalTime as unknown as string,
                        flightSegments[key + 1]
                          ?.DepartureTime as unknown as string,
                      )}
                    />
                  ))}
                  <div className="flex flex-col gap-2 rounded-primary border p-3">
                    <div className="flex justify-between text-sm text-gray-800">
                      <span className="font-semibold">Varış Tarihi</span>
                      <span className="font-normal">
                        {DateHelper.dayjs(
                          flightSegments[flightSegments.length - 1]
                            ?.ArrivalTime as unknown as Date,
                        ).format("DD MMMM YYYY ddd HH:mm")}
                      </span>
                    </div>
                    <div className="flex justify-between text-sm text-gray-800">
                      <span className="font-semibold">Seyahat Süresi</span>
                      <span className="font-normal">
                        {getFormatedFlightTime(combination.TravelTime)}
                      </span>
                    </div>
                  </div>
                </div>
              </Modal>
            </div>
          );
        })}
    </div>
  );
};

export default FlightMultipleWayCard;