import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@radix-ui/react-accordion";
import type { PropsWithChildren } from "react";

import Card from "@/components/ui/card/card";

import { FlightBrand, FlightTime } from "../../flight-card/flight-card";

export type RezervationInfo = {
  label: string;
  value: string;
  icon?: React.ReactNode;
};

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

interface RezervationInfoProps {
  data: RezervationInfo[];
}
export interface BookingRequestRezervationInformationProps
  extends PropsWithChildren {}

interface RezervationSuccessTotalPriceProps {
  price: string;
}

const RezervationFlightInfo = ({ data }: RezervationInfoProps) => {
  return (
    <div className="grid grid-cols-12 items-center gap-4">
      {data.map((item, index) => (
        <div key={+index} className="col-span-6">
          <div className="flex flex-col gap-1">
            <span className="text-sm font-normal text-gray-500">
              {item.label}
            </span>
            <div className="flex gap-2">
              {item.icon && item.icon}
              <span className="text-sm font-semibold text-gray-800">
                {item.value}
              </span>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

interface RezervationFlightCardProps {
  destination: string;
  origin: string;
  date: string;
  logoSrc: string;
  brandName: string;
  flightCode: string;
  totalFlightHours: string;
  flightStartTime: string;
  startIATACode: string;
  endStartTime: string;
  endIATACode: string;
  transferInformation: string;
  transferIATACodes?: string;
  totalPrice?: string;
}

const RezervationFlightCard = ({
  destination,
  origin,
  date,
  logoSrc,
  brandName,
  flightCode,
  totalFlightHours,
  flightStartTime,
  startIATACode,
  endStartTime,
  endIATACode,
  transferInformation,
  transferIATACodes,
  totalPrice,
}: RezervationFlightCardProps) => {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center justify-between">
        <div className="flex gap-2 text-sm md:gap-4 md:text-base">
          <span className="font-medium text-gray-800 ">
            {`${origin} - ${destination}`}
          </span>
          <span className=" font-normal text-gray-600">{date}</span>
        </div>
        {/* <Button variant="link">Detaylı bilgi</Button> */}
      </div>
      <Card className="flex flex-col justify-between bg-gray-25 md:flex-row">
        <FlightBrand
          logoSrc={logoSrc}
          brandName={brandName}
          flightCode={flightCode}
        />
        <FlightTime
          totalFlightHours={totalFlightHours}
          flightStartTime={flightStartTime}
          endStartTime={endStartTime}
          transferInformation={transferInformation}
          startIATACode={startIATACode}
          endIATACode={endIATACode}
          transferIATACodes={transferIATACodes}
        />
        {totalPrice && (
          <div className="flex flex-col justify-between gap-2">
            <span className="text-sm font-medium text-gray-500">
              Toplam Tutar
            </span>
            <span className="text-base font-semibold text-gray-800">
              {totalPrice}
            </span>
          </div>
        )}
      </Card>
    </div>
  );
};

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

const RezervationSuccessFlightPrice = ({
  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) => (
        <RezervationSuccessFlightPriceDescription
          key={+index}
          description={item.description}
          price={item.price}
        />
      ))}
    </div>
  );
};

const RezervationSuccessTotalPrice = ({
  price,
}: RezervationSuccessTotalPriceProps) => {
  return (
    <div className="flex items-center justify-between rounded-primary border bg-white p-3">
      <span className="text-sm font-normal text-gray-500">Toplam Tutar</span>
      <span className="text-xl font-semibold text-gray-800">{price}</span>
    </div>
  );
};

const BookingRequestRezervationInformation = ({
  children,
}: BookingRequestRezervationInformationProps) => {
  return (
    <Card>
      <Accordion type="single" defaultValue="item-1" collapsible>
        <AccordionItem value="item-1" className="border-b-0">
          <AccordionTrigger className="p-0 text-xl font-semibold">
            Rezervasyon Bilgileri
          </AccordionTrigger>
          <AccordionContent className="flex flex-col gap-4">
            <hr className="my-2" />
            {children}
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </Card>
  );
};

export {
  BookingRequestRezervationInformation,
  RezervationFlightCard,
  RezervationFlightInfo,
  RezervationSuccessFlightPrice,
  RezervationSuccessTotalPrice,
};