/* eslint-disable @next/next/no-img-element */
import Image from "next/image";
import { type PropsWithChildren } from "react";

import { Badge } from "@/components/ui/badge/badge";
import Card from "@/components/ui/card/card";
import type { LIconProps } from "@/components/ui/lucid-icon/lucid-icon";
import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import { useLocale } from "@/hooks/useLocale";
import { cn } from "@/libs/utils";
import DefautlImage from "@/public/assets/images/defaultImage.jpg";
import type { Addons } from "@/services/eva-display/hotel/hotel-detail/hotel-detail-services.types";

export interface RezervationSummaryProps extends PropsWithChildren {
  className?: string;
}

interface RezervationSummaryTitleProps extends PropsWithChildren {
  title: string;
}

interface RezervationSummaryRoomInfoProps extends PropsWithChildren {
  hotelName: string;
}

interface RezervationSummaryRoomPropertyProps extends PropsWithChildren {
  icon: LIconProps;
}
interface HotelRezervationSummaryDateInfoProps {
  startDate: string;
  startTime?: string;
  endDate: string;
  endTime?: string;
  nightlyRateDescription: string;
}

interface HotelDiscountPriceProps {
  price: string;
  title: string;
}

interface HotelRezervationSummaryProps extends PropsWithChildren {
  image: string;
  hotelName: string;
  hotelLocation?: string;
}

interface HotelRezervationSummaryRoomInfoProps extends PropsWithChildren {
  title: string;
  passengerDescription: string;
  mealDescription: string;
  addons?: Addons[];
}

interface HotelPriceProps {
  nightlyRateDescription: string;
  discount: boolean;
  discountDescription?: string;
  price: string;
}

interface RezervationSummaryTotalPriceProps {
  price: string;
}

interface PriceDescription {
  description: string;
  price: string;
}
interface RezervationSummaryFlightPriceProps {
  priceDescription: PriceDescription[];
}

interface RezervationSummaryFlightInfoProps extends PropsWithChildren {
  destination: string;
  origin: string;
  date: string;
  time: string;
  flightTime: string;
  operatingAirline: string;
  flightNumber: string;
}

const RezervationSummaryProvider = ({
  children,
  className,
}: RezervationSummaryProps) => {
  return (
    <Card
      className={cn(
        "flex flex-col gap-4 border-none p-0 md:border-solid md:p-5",
        className,
      )}
    >
      {children}
    </Card>
  );
};

const RezervationSummaryTitle = ({
  title,
  children,
}: RezervationSummaryTitleProps) => {
  return (
    <div className="flex justify-between text-base font-semibold">
      <p>{title}</p>
      {children}
    </div>
  );
};

const RezervationSummaryDivider = () => {
  return <div className="h-1 border-b border-solid border-gray-200" />;
};

const RezervationSummaryRoomInfo = ({
  hotelName,
  children,
}: RezervationSummaryRoomInfoProps) => {
  return (
    <div className="flex flex-col gap-2">
      <p className="text-sm font-semibold">{hotelName}</p>
      {children}
    </div>
  );
};

const RezervationSummaryRoomProperty = ({
  children,
  icon,
}: RezervationSummaryRoomPropertyProps) => {
  return (
    <div className="flex items-center gap-2 text-sm text-gray-500">
      <LIcon size="12" {...icon} />
      {children}
    </div>
  );
};

const RezervationSummaryTotalPrice = ({
  price,
}: RezervationSummaryTotalPriceProps) => {
  const { t } = useLocale();
  return (
    <div className="flex justify-between text-sm font-semibold text-gray-800">
      <span>{`${t("Total")} ${t("Amount")}`}</span>
      <span>{price}</span>
    </div>
  );
};

const HotelCurrencyTotalPrice = ({
  price,
}: RezervationSummaryTotalPriceProps) => {
  return (
    <div className="flex justify-between text-sm font-semibold text-gray-800">
      <span>Otel Para Birimi (₺)</span>
      <span>{price}</span>
    </div>
  );
};

const RezervationSummaryTotalPriceMobile = ({
  price,
}: RezervationSummaryTotalPriceProps) => {
  const { t } = useLocale();
  return (
    <div className="flex flex-col">
      <span className="text-xs text-gray-500">{t("Total")}</span>
      <span className="text-xl font-semibold">{price}</span>
    </div>
  );
};

const HotelRezervationSummaryDateInfo = ({
  startDate,
  startTime,
  endDate,
  endTime,
  nightlyRateDescription,
}: HotelRezervationSummaryDateInfoProps) => {
  const { t } = useLocale();
  return (
    <div className="flex justify-between">
      <div className="flex flex-col gap-2">
        <span className="text-xs text-gray-500">{t("Check-in")}:</span>
        <div className="flex flex-col">
          <span className="text-sm font-medium text-gray-800">{startDate}</span>
          {startTime && (
            <span className="text-xs text-gray-500">({startTime})</span>
          )}
        </div>
      </div>
      <div className="flex flex-col gap-2">
        <span className="text-xs text-gray-500">{t("Check-out")}:</span>
        <div className="flex flex-col">
          <span className="text-sm font-medium text-gray-800">{endDate}</span>
          {endTime && (
            <span className="text-xs text-gray-500">({endTime})</span>
          )}
        </div>
      </div>
      <div className="flex flex-col gap-2">
        <span className="text-xs text-gray-500">{t("Number of Nights")}</span>
        <span className="text-sm font-medium text-gray-800">
          {nightlyRateDescription}
        </span>
      </div>
    </div>
  );
};

const HotelRezervationSummary = ({
  image,
  hotelName,
  hotelLocation,
  children,
}: HotelRezervationSummaryProps) => {
  const imgURL = !image ? DefautlImage : image;
  return (
    <div className="flex flex-col gap-4">
      <div className="flex gap-2">
        <Image
          width={88}
          height={66}
          src={imgURL}
          alt=""
          className="rounded-primary"
        />
        <div className="flex flex-col">
          <span className="text-sm font-semibold text-gray-800">
            {hotelName}
          </span>
          {hotelLocation && (
            <span className="text-sm text-gray-500">{hotelLocation}</span>
          )}
        </div>
      </div>
      {children}
    </div>
  );
};

const HotelRezervationSummaryRoomInfo = ({
  title,
  passengerDescription,
  mealDescription,
  children,
  addons,
}: HotelRezervationSummaryRoomInfoProps) => {
  return (
    <div className="flex flex-col gap-2">
      <span className="text-sm font-semibold text-gray-800">{title}</span>
      <RezervationSummaryRoomProperty icon={{ name: "User" }}>
        {passengerDescription}
      </RezervationSummaryRoomProperty>
      {addons?.map((addon) => (
        <span key={addon.key} className="text-sm text-gray-800">
          {addon.description}
        </span>
      ))}
      <span className="text-sm text-gray-800">{mealDescription}</span>
      {children}
    </div>
  );
};

const HotelPrice = ({
  nightlyRateDescription,
  discount,
  discountDescription,
  price,
}: HotelPriceProps) => {
  return (
    <div className="flex justify-between">
      <span className="text-sm text-gray-800">{nightlyRateDescription}</span>
      <div className="flex gap-2">
        {discount && discountDescription ? (
          <>
            <Badge variant="success">{discountDescription}</Badge>
            <span
              data-discount={discount}
              className="text-sm text-gray-800 data-[discount='true']:line-through"
            >
              {price}
            </span>
          </>
        ) : (
          <div className="text-sm text-gray-800">{price}</div>
        )}
      </div>
    </div>
  );
};

const HotelDiscountPrice = ({
  price,
}: Omit<HotelDiscountPriceProps, "title">) => {
  const { t } = useLocale();
  return (
    <div className="flex justify-between">
      <span className="text-sm text-gray-800">{t("Discounted Price")}</span>
      <span className="text-sm text-gray-800">{price}</span>
    </div>
  );
};

const EarlyBookingDiscount = ({ price, title }: HotelDiscountPriceProps) => {
  return (
    <div className="flex justify-between">
      <span className="text-sm text-gray-800">{title}</span>
      <span className="whitespace-nowrap text-sm text-gray-800">- {price}</span>
    </div>
  );
};

const RezervationSummaryFlightInfo = ({
  destination,
  origin,
  date,
  time,
  flightTime,
  operatingAirline,
  flightNumber,
  children,
}: RezervationSummaryFlightInfoProps) => {
  return (
    <div className="flex flex-col">
      <div className="flex flex-col gap-1">
        <div className="flex items-center justify-between text-sm">
          <div className="flex items-center gap-2 text-sm font-semibold text-gray-800">
            <span>{origin}</span>
            <LIcon className="font-semibold" name="ArrowRight" size="12" />
            <span>{destination}</span>
          </div>
          {children}
        </div>
        <div className="text-sm">{`${date} / ${time} (${flightTime})`}</div>
        <div className="flex flex-col text-sm font-normal text-gray-800">
          <span className="text-xs">{`${operatingAirline} - ${flightNumber}`}</span>
        </div>
      </div>
    </div>
  );
};

const RezervationSummaryFlightPriceDescription = ({
  description,
  price,
}: PriceDescription) => {
  return (
    <div className="flex justify-between text-sm font-normal text-gray-800">
      <span>{description}</span>
      <span>{price}</span>
    </div>
  );
};

const RezervationSummaryFlightPrice = ({
  priceDescription,
}: RezervationSummaryFlightPriceProps) => {
  return (
    <div className="flex flex-col gap-4">
      <h2 className="text-base font-semibold text-gray-800">Fiyat Özeti</h2>
      {priceDescription.map((item, index) => (
        <RezervationSummaryFlightPriceDescription
          key={+index}
          description={item.description}
          price={item.price}
        />
      ))}
    </div>
  );
};

const RezervationSummaryFlightTotalPrice = ({
  price,
}: RezervationSummaryTotalPriceProps) => {
  const { t } = useLocale();
  return (
    <div className="flex items-center justify-between rounded-primary border bg-white p-3">
      <span className="text-sm font-normal text-gray-500">{`${t("Total")} ${t(
        "Amount",
      )}`}</span>
      <span className="text-xl font-semibold text-gray-800">{price}</span>
    </div>
  );
};

interface ReservationSummaryAdditionalServiceProps {
  title: string;
  itemName: string;
  itemNameExtra?: string;
  price: string;
  minusOrPlus: "-" | "+";
}

const ReservationSummaryAdditionalService = ({
  title,
  itemName,
  itemNameExtra,
  price,
  minusOrPlus,
}: ReservationSummaryAdditionalServiceProps) => {
  return (
    <div className="flex flex-col gap-2">
      <span className="text-sm font-semibold text-gray-800">{title}</span>
      <div className="flex justify-between">
        <span className="text-sm text-gray-800">
          {itemName}
          {itemNameExtra && (
            <span className="text-xs text-gray-500"> {itemNameExtra}</span>
          )}
        </span>
        <span className="whitespace-nowrap text-sm font-semibold text-gray-800">
          {minusOrPlus + price}
        </span>
      </div>
    </div>
  );
};

export {
  EarlyBookingDiscount,
  HotelCurrencyTotalPrice,
  HotelDiscountPrice,
  HotelPrice,
  HotelRezervationSummary,
  HotelRezervationSummaryDateInfo,
  HotelRezervationSummaryRoomInfo,
  ReservationSummaryAdditionalService,
  RezervationSummaryDivider,
  RezervationSummaryFlightInfo,
  RezervationSummaryFlightPrice,
  RezervationSummaryFlightTotalPrice,
  RezervationSummaryProvider,
  RezervationSummaryRoomInfo,
  RezervationSummaryRoomProperty,
  RezervationSummaryTitle,
  RezervationSummaryTotalPrice,
  RezervationSummaryTotalPriceMobile,
};