import { useSelector } from "react-redux";

import { MIcon } from "@components/common/MIcon";
import { TransferType } from "@components/common/TransferType";
import { useFetchQuote } from "@hooks/apis/useFetchQuote";
import { useFetchV2Quote } from "@hooks/apis/useFetchV2Quote";
import { useTheme } from "@hooks/useTheme";
import type { ReduxStateType } from "@store/types";
import { adjustDecimals } from "@utils/adjustDecimals";
import { getBorderRadius } from "@utils/getBorderRadius";
import { toFixedSafe } from "@utils/toFixedSafe";
import { RouteItem } from "./RouteItem";

export const CompareCard = ({ closePanel }: { closePanel: () => void }) => {
	const { borderRadius } = useTheme();
	const locale = useSelector((state: ReduxStateType) => state.settings.language);
	const { formattedData: gatewayData } = useFetchV2Quote();
	const { data: autoSwapData } = useFetchQuote();

	if (!gatewayData || gatewayData.length === 0 || !autoSwapData) return null;

	const { estimatedFulfilTime, primaryInput, primaryOutput } = autoSwapData;

	const getAutoSwapFees = () => {
		if (!primaryInput?.valueInUsd || !primaryOutput?.valueInUsd) return;
		const diff = toFixedSafe(primaryInput.valueInUsd - primaryOutput.valueInUsd);
		return adjustDecimals(diff, 4, locale);
	};

	const getDiffInFees = () => {
		if (
			!primaryInput?.valueInUsd ||
			!primaryOutput?.valueInUsd ||
			!gatewayData?.[0]?.totalFees
		)
			return;

		const autoSwapFees = Number(getAutoSwapFees()) || 0;
		const gatewayQuoteFees = Number(gatewayData?.[0]?.totalFees) || 0;

		return adjustDecimals(gatewayQuoteFees - autoSwapFees, 4, locale);
	};

	return (
		<div className="bn-pb-1">
			<div className="bn-px-5 bn-py-[14px] bn-border-0 bn-border-b bn-border-solid bn-border-primary bn-relative">
				<p className="bn-text-left bn-text-primary bn-text-base bn-font-semibold bn-mb-1 bn-leading-[19.2px]">
					Price Comparison
				</p>
				{getDiffInFees() && (
					<p className="bn-text-secondary bn-leading-[15.96px] bn-aeonik-font bn-text-sm bn-font-medium">
						You'll save <span className="bn-text-accent2">${getDiffInFees()} in fees</span>{" "}
						using Auto Swap
					</p>
				)}
				<button
					className="bn-size-6 bn-absolute bn-right-5 bn-top-0 bn-bottom-0 bn-flex bn-items-center bn-justify-center bn-cursor-pointer bn-bg-transparent bn-border-0 bn-my-auto"
					type="button"
					onClick={closePanel}
				>
					<MIcon name="close" classNames="bn-text-primary" />
				</button>
			</div>

			<div className="bn-px-5 bn-py-3">
				<div className="bn-text-secondary bn-capitalize bn-text-sm bn-font-normal bn-flex bn-justify-between">
					<span>Platform</span>
					<span>Total Fees</span>
				</div>

				<div className="bn-mt-3 bn-mb-2 bn-flex bn-items-center bn-justify-between">
					<AutoSwap estimatedFulfilTime={estimatedFulfilTime} fees={getAutoSwapFees()} />
				</div>

				<div
					className="bn-flex bn-flex-col bn-divide-y bn-divide-primary bn-space-y-[30px] bn-bg-layer-2 bn-p-3"
					style={{ borderRadius: getBorderRadius(borderRadius, 8) }}
				>
					{gatewayData?.slice(0, 2)?.map((route, index) => (
						<RouteItem key={route.routeId} route={route} />
					))}
				</div>
			</div>
		</div>
	);
};

const AutoSwap = ({
	estimatedFulfilTime,
	fees,
}: {
	estimatedFulfilTime: number;
	fees?: string;
}) => {
	const { borderRadius } = useTheme();
	return (
		<div
			className="bn-py-2 bn-px-4 bn-bg-layer-2 bn-flex bn-items-center bn-justify-between bn-w-full"
			style={{ borderRadius: getBorderRadius(borderRadius, 8) }}
		>
			<div className="bn-flex bn-items-center bn-space-x-2">
				<TransferType
					type="Auto"
					time={estimatedFulfilTime}
					iconProps={{ width: 24, height: 24 }}
				/>
				<span className="bn-text-xs bn-font-medium bn-aeonik-font bn-px-2 bn-py-1.5 bn-text-success bn-bg-success/5 bn-rounded-full bn-leading-[14px]">
					Best Price
				</span>
			</div>

			{fees && (
				<p className="bn-text-primary bn-text-sm bn-font-medium bn-aeonik-font">
					${fees}
				</p>
			)}
		</div>
	);
};
