import { useSelector } from "react-redux";

import { RefuelCheckbox } from "@components/Home/Refuel";
import { useIsVeryLowSlippage } from "@components/Home/Warnings/SlippageWarning";
import { ExchangeRate } from "@components/common/ExchangeRate";
import { DoubleChevronRight, Stars } from "@components/common/Icons";
import { MIcon } from "@components/common/MIcon";
import { ReviewItem } from "@components/common/ReviewItem";
import { TokenIcon } from "@components/common/TokenIcon";
import { TokenIconWithAmount } from "@components/common/TokenIconWithLabel";
import { Tooltip } from "@components/common/Tooltip";
import type { AutoRefuel, ManualRefuel } from "@hooks/apis/common/quote/types";
import { useActiveRoute } from "@hooks/apis/common/quote/useActiveRoute";
import { isAutoQuote, isManualQuote } from "@hooks/apis/common/quote/utils";
import type { ReduxStateType } from "@store/types";
import { adjustDecimals } from "@utils/adjustDecimals";
import { calculatePriceImpact } from "@utils/calculatePriceImpact";
import { formatValue } from "@utils/formatValue";
import { RefundWarning } from "./RefundWarning";

export const ReviewSection = () => {
	const locale = useSelector(
		(state: ReduxStateType) => state.settings.language,
	);
	const suggestedSlippage = useSelector(
		(state: ReduxStateType) => state.settings.dynamicSlippage,
	);
	const { data: activeRoute, isRefetching } = useActiveRoute();

	const {
		primaryInput,
		slippage,
		srcToDestRate,
		destToSrcRate,
		minOutput,
		primaryOutput,
	} = activeRoute || {};

	const toToken = primaryOutput?.token;
	const rewards = isAutoQuote(activeRoute) ? activeRoute?.rewards : undefined;
	const formattedRewardAmount = rewards
		? formatValue(rewards.totalRewardAmount, rewards.token.decimals)
		: "";

	const minReceivedLabel = `Min. ${toToken?.symbol}`;

	const isManualMode = isManualQuote(activeRoute);
	const priceImpact = calculatePriceImpact(
		primaryInput?.valueInUsd,
		primaryOutput?.valueInUsd,
	);

	return (
		<>
			<div className="bn-pt-[14px]">
				{minOutput?.amount && (
					<ReviewItem
						label={minReceivedLabel}
						isLoading={isRefetching}
						key={toToken?.address}
					>
						<div className="bn-text-primary bn-text-sm bn-font-medium bn-aeonik-font bn-flex bn-items-center bn-space-x-1">
							<TokenIcon url={toToken?.logoURI || ""} classNames="bn-size-4" />
							<Tooltip content={minOutput.formattedAmount}>
								<span>
									{adjustDecimals({
										value: minOutput.formattedAmount,
										decimals: 3,
										locale,
									})}
								</span>
							</Tooltip>
							{minOutput?.valueInUsd && (
								<span
									className={`${
										priceImpact ? "bn-text-accent-4" : "bn-text-secondary"
									}`}
								>
									($
									{adjustDecimals({
										value: minOutput.valueInUsd,
										decimals: 2,
										locale,
										showApproximateZero: true,
									})}
									)
								</span>
							)}
						</div>
					</ReviewItem>
				)}

				{isAutoQuote(activeRoute) && activeRoute?.rewards && (
					<ReviewItem label="Est. Reward:">
						<div className="bn-flex bn-items-center bn-text-accent-3">
							<Stars className="bn-text-accent-3 bn-mr-1" />
							<p>
								+
								{adjustDecimals({
									value: formattedRewardAmount,
									decimals: 2,
									locale,
								})}{" "}
								{rewards?.token.symbol}
							</p>
						</div>
					</ReviewItem>
				)}

				{Boolean(srcToDestRate && destToSrcRate) && (
					<ReviewItem label="Exchange Rate:" isLoading={isRefetching}>
						<ExchangeRate />
					</ReviewItem>
				)}

				{slippage && (
					<ReviewItem
						label={isManualMode ? "Swap Slippage:" : "Slippage:"}
						isLoading={isRefetching}
					>
						<SlippageDisplay
							autoSlippage={suggestedSlippage}
							slippage={slippage ?? undefined}
						/>
					</ReviewItem>
				)}

				{/* {!isSwapRoute && !isSolanaChain && (
					<ReviewItem label="Refuel:" isLoading={isRefetching}>
						{refuel ? <RefuelInfo refuel={refuel} /> : <RefuelCheckbox />}
					</ReviewItem>
				)} */}
			</div>

			<RefundWarning />
		</>
	);
};

const SlippageDisplay = ({
	autoSlippage,
	slippage,
}: {
	autoSlippage: boolean;
	slippage?: number;
}) => {
	const isVeryLowSlippage = useIsVeryLowSlippage();

	return (
		<span className="bn-font-medium bn-flex bn-items-center bn-space-x-1">
			{autoSlippage ? (
				<span>
					<span className="bn-aeonik-font bn-text-primary">{slippage}% ~ </span>
					<span className="bn-text-secondary">Suggested</span>
				</span>
			) : slippage ? (
				<span className="bn-flex bn-items-center bn-justify-end bn-space-x-1 bn-w-[200px]">
					{isVeryLowSlippage && (
						<Tooltip content="Using a lower slippage than suggested might prevent your swap from going through.">
							<MIcon
								name="warning"
								classNames="bn-text-accent-4 bn-text-base"
							/>
						</Tooltip>
					)}
					<span>{slippage}%</span>
				</span>
			) : null}
		</span>
	);
};

export const RefuelInfo = ({
	refuel,
}: {
	refuel: AutoRefuel | ManualRefuel;
}) => {
	if ("input" in refuel && refuel.input) {
		return (
			<div className="bn-flex bn-items-center bn-space-x-2">
				<TokenIconWithAmount
					amount={refuel.input.amount}
					token={refuel.input.token}
				/>
				<DoubleChevronRight />
				<TokenIconWithAmount
					amount={refuel.output.amount}
					token={refuel.output.token}
				/>
			</div>
		);
	}

	return (
		<div className="bn-flex bn-items-center bn-space-x-2">
			<TokenIconWithAmount
				amount={refuel.output.amount}
				token={refuel.output.token}
			/>
			<RefuelCheckbox />
		</div>
	);
};
