/* eslint-disable react/no-unused-prop-types */
import Image from "next/image";
import type { PropsWithChildren } from "react";

import type { ButtonProps } from "@/components/ui/button/button";
import { Button } from "@/components/ui/button/button";
import Card from "@/components/ui/card/card";
import { Carousel } from "@/components/ui/carousel/carousel";
import type { LIconProps } from "@/components/ui/lucid-icon/lucid-icon";
import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import { cn } from "@/libs/utils";

export interface FlightBrandProps {
  logoSrc: string;
  brandName: string;
  flightCode: string;
}

interface FlightTimeProps {
  totalFlightHours: string;
  flightStartTime: string;
  startIATACode: string;
  endStartTime: string;
  endIATACode: string;
  transferInformation: string;
  transferIATACodes?: string;
}

interface FlightInformationProps extends PropsWithChildren {
  seatInformation?: string;
  baggageInformation?: string;
  flightClass: string;
}

interface FlightPriceProps {
  price: string;
  isOptimal?: boolean;
}

interface FlightDetailActionProps {
  infoText?: string;
  onClick: () => void;
  isOpen: boolean;
  operatingCompanies?: string[];
  buttonVariant?: ButtonProps["variant"];
  buttonText?: string;
  renderActionButton?: () => React.ReactNode;
}

interface FlightDetailProps extends PropsWithChildren {
  active: boolean;
}

interface FlightProperties {
  icon?: LIconProps;
  text: string;
}

interface FlightDetailCardProps {
  flightClass: string;
  price: string;
  properties: FlightProperties[];
  buttonOnClick?: () => void;
}

const FlightCard = ({ children }: PropsWithChildren) => {
  return (
    <Card>
      <div className="flex flex-col gap-2">{children}</div>
    </Card>
  );
};

const FlightBrand = ({ logoSrc, brandName, flightCode }: FlightBrandProps) => {
  return (
    <div className="flex gap-2">
      <Image
        width={38}
        height={38}
        className="size-[38px] md:size-[24px]"
        src={logoSrc}
        alt=""
      />
      <div className="flex flex-col gap-1">
        <span className="whitespace-nowrap text-sm font-semibold text-gray-800">
          {brandName}
        </span>
        <span className="text-xs text-gray-500">{flightCode}</span>
      </div>
    </div>
  );
};

const FlightTime = ({
  totalFlightHours,
  flightStartTime,
  startIATACode,
  endStartTime,
  endIATACode,
  transferInformation,
  transferIATACodes,
}: FlightTimeProps) => {
  return (
    <div className="-mt-3 flex flex-col items-center justify-center pt-3 md:w-80 md:pt-0">
      <span className="text-xs text-gray-500">{totalFlightHours}</span>
      <div className="flex w-full justify-between gap-2 md:w-auto">
        <div className="flex items-center gap-1">
          <span className="text-sm font-semibold text-gray-800">
            {flightStartTime}
          </span>
          <span className="text-xs text-gray-500">{startIATACode}</span>
        </div>
        <div className="flex items-center gap-1 text-gray-500">
          <span>----</span>
          <LIcon className="rotate-45" size="20" name="Plane" />
          <div className="flex items-center gap-0">----{">"}</div>
        </div>
        <div className="flex items-center gap-1">
          <span className="text-sm font-semibold text-gray-800">
            {endStartTime}
          </span>
          <span className="text-xs text-gray-500">{endIATACode}</span>
        </div>
      </div>
      <div className="flex items-center gap-1">
        <span className=" text-xs font-medium capitalize text-gray-800 md:text-gray-500">
          {transferInformation}
        </span>
        <span className="text-xs text-gray-500">{transferIATACodes}</span>
      </div>
    </div>
  );
};

const FlightInformation = ({
  seatInformation,
  baggageInformation,
  flightClass,
  children,
}: FlightInformationProps) => {
  return (
    <div className="flex flex-col md:gap-1">
      {seatInformation && (
        <span className="text-xs text-red-500">{seatInformation}</span>
      )}
      {baggageInformation && (
        <div className="flex gap-1 text-xs text-gray-500">
          <LIcon name="Luggage" size="15" />
          <span>{baggageInformation}</span>
          <span>/</span>
        </div>
      )}
      <span className="text-sm text-gray-500">{flightClass}</span>
      <div>{children}</div>
    </div>
  );
};

const FlightPrice = ({ price }: FlightPriceProps) => {
  return (
    <div className="flex flex-col gap-2">
      {/* 
      This field hidden. When you need it, you can use it.
      {isOptimal && <Badge variant="success">En uygun fiyat</Badge>} 
      */}
      <div className="flex flex-col flex-nowrap items-end">
        <span className="text-nowrap font-semibold text-gray-800">{price}</span>
        <span className="text-xs text-gray-500">Kişi Başı</span>
      </div>
    </div>
  );
};

const FlightDetailAction = ({
  infoText,
  operatingCompanies,
  onClick,
  buttonVariant,
  buttonText,
  renderActionButton,
}: FlightDetailActionProps) => {
  return (
    <div
      className={cn(
        "flex",
        infoText || operatingCompanies ? "justify-between" : "justify-end",
      )}
    >
      <div className="flex flex-col gap-2">
        <div className="flex gap-1">
          {operatingCompanies &&
            operatingCompanies.map((item, key) => (
              <div key={+key} className="flex">
                <LIcon name="Plus" className="w-4" />
                <span className="text-gray-800">{item}</span>
              </div>
            ))}
        </div>
        {infoText && (
          <div className="flex items-center gap-1 text-xs text-gray-500">
            <LIcon name="Info" className="w-4" />
            {infoText}
          </div>
        )}
      </div>
      {renderActionButton?.() ?? (
        <Button
          onClick={onClick}
          variant={buttonVariant || "primary"}
          className="min-w-[100px]"
        >
          {buttonText || "Seç"}
        </Button>
      )}
    </div>
  );
};

const FlightDetail = ({ active, children }: FlightDetailProps) => {
  return (
    <div data-active={active} className="data-[active='false']:hidden">
      <Carousel
        navigation={false}
        pagination={false}
        spaceBetween={10}
        sliderPerView={3.5}
      >
        {children}
      </Carousel>
    </div>
  );
};

const FligtDetailCardProperties = ({ icon, text }: FlightProperties) => {
  return (
    <div className="flex items-center gap-1 text-sm text-gray-500">
      {icon && <LIcon size="12" {...icon} />}
      <span>{text}</span>
    </div>
  );
};

const FlightDetailCard = ({
  flightClass,
  price,
  properties,
  buttonOnClick,
}: FlightDetailCardProps) => {
  return (
    <Card className="flex min-h-[310px] flex-col justify-between">
      <div className="flex flex-col gap-2">
        <span className="font-semibold text-gray-800">{flightClass}</span>
        {properties.map((item, key) => (
          <FligtDetailCardProperties
            key={+key}
            icon={{ name: "Luggage" }}
            text={item.text}
          />
        ))}
      </div>
      <div className="flex flex-col items-end">
        <span className="font-semibold  text-gray-800">{price}</span>
        <Button
          className="w-9 !text-xs !font-normal"
          variant="primary"
          onClick={buttonOnClick || undefined}
        >
          Seç
        </Button>
      </div>
    </Card>
  );
};

export {
  FlightBrand,
  FlightCard,
  FlightDetail,
  FlightDetailAction,
  FlightDetailCard,
  FlightInformation,
  FlightPrice,
  FlightTime,
};