import React, {
  useState,
  useEffect,
  useMemo,
  useRef,
  useCallback,
} from "react";
import ReviewOrder from "./ReviewOrder";
import {
  ArrowDownUp,
  ArrowLeft,
  ChevronDown,
  ChevronRight,
  ChevronUp,
} from "lucide-react";
import MessagePopup from "../MessagePopup";
import TokenSelector from "../TokenSelector";
import {
  getMultiRelaySwapQuote,
  getMultiToBTCRelaySwapQuote,
  OutputDetails,
  executeSwapFlow,
  executeBungeeSwapFlow,
  executeCCTPSwapFlow,
  executeCCTPV2SwapFlow,
  executeLiFiSwapFlow,
  executeToBTCSwapFlow,
  executeFromBTCSwapFlow,
  getAllTokens,
  TokenInfo,
  getMultiFromBTCRelaySwapQuote,
} from "../../services/services";
import Spinner from "../ui/Spinner";
import SelectNetwork from "../SelectNetwork";
import {
  getNetworkName,
  NETWORK_LOGO_URLS,
  NETWORK_NAME_TO_CHAIN_ID,
  availableNetworks,
  formatAmount,
  ProtocolProvider,
  getProviderIcon,
  getProviderName,
} from "../utils";
import SelectSingleNetwork from "../SelectSingleNetwork";
import ActivityDetails from "../Activity/ActivityDetails";
import { validateNumericInput, handleNumericKeyDown } from "../utils";
import { ethers } from "ethers";
import { parseUnits, formatUnits } from "ethers";
import { TokenLogo } from "../ui/TokenLogo";
import { Tooltip } from "../ui";
import { motion, AnimatePresence } from "framer-motion";

interface NetworkAllocation {
  name: string;
  chainId: number;
  amount: string;
}

export interface Token {
  symbol: string;
  name: string;
  icon?: string;
  logoURI?: string;
  address: string;
  chainId: number;
  decimals: number;
  balance?: string;
  amount?: string;
  chainIds?: any[];
  priceUsd?: number;
  price?: number;
}

const NetworkAllocationDisplay = ({
  network,
  amount,
  symbol,
}: {
  network: string;
  amount: string;
  symbol: string;
}) => (
  <div
    style={{
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center",
      width: "100%",
      padding: "8px 0",
    }}
  >
    <div
      style={{
        display: "flex",
        alignItems: "center",
        gap: "8px",
      }}
    >
      <img
        src={NETWORK_LOGO_URLS[NETWORK_NAME_TO_CHAIN_ID[network]]}
        alt={network}
        style={{ width: 24, height: 24, borderRadius: "50%" }}
      />
      <span style={{ fontSize: 14, color: "#000000", fontWeight: 500 }}>
        {network}
      </span>
    </div>
    <span style={{ fontSize: 14, color: "#535862" }}>
      {amount} {symbol}
    </span>
  </div>
);

// Add this helper function at the top level
const calculateTotalAmount = (
  networks: NetworkAllocation[],
  decimals: number = 6
) => {
  return networks.reduce((total, network) => {
    if (!network.amount) return total;
    try {
      const amountWei = parseUnits(network.amount, decimals);
      const totalWei = parseUnits(total.toString(), decimals);
      return parseFloat(formatUnits(totalWei + amountWei, decimals));
    } catch {
      return total;
    }
  }, 0);
};

// Add this helper function at the top level after the existing helper functions
const getNetworkBalance = (
  combinedBalance: any,
  symbol: string,
  chainId: number
) => {
  if (!combinedBalance?.data) return "0";
  const token = combinedBalance.data.find((t: any) => t.symbol === symbol);
  if (!token) return "0";

  const chainData = token.chainIds?.find(
    (chain: any) => chain.chainId === chainId
  );
  return chainData?.balance || "0";
};

// Add this helper function to check if a token is BTC
const isBTCToken = (token: Token | null) => {
  return token?.symbol === "BTC" || token?.symbol === "WBTC";
};

// Add this helper function to check if both tokens are USDC
const isBothTokensUSDC = (fromToken: Token | null, toToken: Token | null) => {
  return fromToken?.symbol === "USDC" && toToken?.symbol === "USDC";
};

// Helper function to find token in combined balance by chainIds matching
const findTokenByChainIds = (combinedBalance: any, token: Token | null) => {
  if (!combinedBalance?.data || !token || !token.chainIds) return null;

  return combinedBalance.data.find((t: any) => {
    if (!t.chainIds || !Array.isArray(t.chainIds)) return false;

    // Check if any chainId and address combination matches
    return token.chainIds!.some((tokenChain: any) =>
      t.chainIds.some(
        (balanceChain: any) =>
          balanceChain.chainId === tokenChain.chainId &&
          balanceChain.address?.toLowerCase() ===
            tokenChain.address?.toLowerCase()
      )
    );
  });
};

// Helper function to format estimated time
const formatEstimatedTime = (estimatedTime: number) => {
  // estimatedTime is already in seconds
  const timeDiff = estimatedTime;

  if (timeDiff <= 0) {
    return "~10s";
  }

  if (timeDiff < 60) {
    return `~${Math.round(timeDiff)}s`;
  } else {
    const minutes = Math.floor(timeDiff / 60);
    return `~${minutes}m`;
  }
};

export const SwapToken: React.FC<{
  onBack: () => void;
  walletSDKKey: string;
  slippage?: number; // percent
  gasFee?: number; // in USD
  maxFromAmount?: number;
  combinedBalance: any;
  initialFromToken?: Token;
  initialToToken?: Token;
  initialAmount?: string;
  tokenOptions: TokenInfo[];
  tokensLoading: boolean;
}> = ({
  onBack,
  walletSDKKey,
  combinedBalance,
  initialFromToken,
  initialToToken,
  initialAmount = "",
  tokenOptions: externalTokenOptions,
  tokensLoading,
}) => {
  const [amount, setAmount] = useState(initialAmount);
  const [debouncedAmount, setDebouncedAmount] = useState(initialAmount);
  const [proActive, setProActive] = useState(false);
  const [showReviewOrder, setShowReviewOrder] = useState(false);
  const [selectedNetworksPay, setSelectedNetworksPay] = useState<
    NetworkAllocation[]
  >([]);
  const [selectedNetworksReceive, setSelectedNetworksReceive] = useState<
    { name: string; chainId: number }[]
  >([]);
  const [quoteDetails, setQuoteDetails] = useState<any>("");
  const [isLoadingQuote, setIsLoadingQuote] = useState(false);
  const [quoteError, setQuoteError] = useState<string>("");
  const [isLoading, setIsLoading] = useState(false);
  const [showMessagePopup, setShowMessagePopup] = useState(false);
  const [messageType, setMessageType] = useState<"success" | "error">(
    "success"
  );
  const [showFromTokenSelector, setShowFromTokenSelector] = useState(false);
  const [showToTokenSelector, setShowToTokenSelector] = useState(false);

  const [tokenOptions, setTokenOptions] = useState<Token[]>([]);
  const [showSelectFromNetworks, setShowSelectFromNetworks] = useState(false);
  const [showPreviewNetworks, setShowPreviewNetworks] = useState(false);
  const [showSelectToNetworks, setShowSelectToNetworks] = useState(false);
  const [transactionId, setTransactionId] = useState<string | null>(null);
  const [showActivity, setShowActivity] = useState(false);

  // Add polling interval ref
  const pollingIntervalRef = useRef<NodeJS.Timeout | null>(null);

  // Add debounce timeout ref
  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);

  // Add state for selected execution option
  const [selectedOption, setSelectedOption] = useState<
    "best-price" | "fastest"
  >("best-price");

  // Add states for formatted estimated times
  const [bestQuoteTime, setBestQuoteTime] = useState<string>("~1m");
  const [fastestQuoteTime, setFastestQuoteTime] = useState<string>("~10s");

  // Debounce effect for amount input
  useEffect(() => {
    if (debounceTimeoutRef.current) {
      clearTimeout(debounceTimeoutRef.current);
    }

    debounceTimeoutRef.current = setTimeout(() => {
      setDebouncedAmount(amount);
    }, 500);

    return () => {
      if (debounceTimeoutRef.current) {
        clearTimeout(debounceTimeoutRef.current);
      }
    };
  }, [amount]);

  // Add style tag for number input
  React.useEffect(() => {
    const style = document.createElement("style");
    style.textContent = `
      .no-spinners::-webkit-outer-spin-button,
      .no-spinners::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
      .no-spinners {
        -moz-appearance: textfield;
      }
    `;
    document.head.appendChild(style);
    return () => {
      document.head.removeChild(style);
    };
  }, []);

  // Transform external token options to internal Token format
  useEffect(() => {
    if (externalTokenOptions.length > 0) {
      setTokenOptions(
        externalTokenOptions.map((token: TokenInfo) => ({
          symbol: token.symbol,
          name: token.name,
          icon: token.logoURI || token.icon,
          address: token.chainIds?.[0]?.address || token.address || "",
          chainId: token.chainIds?.[0]?.chainId || token.chainId || 0,
          chainIds: token.chainIds,
          decimals: token.decimals,
          balance: token.balance || "0",
          amount: (token.amount || 0).toString(),
          priceUsd: token.price || 0,
        }))
      );
    }
  }, [externalTokenOptions]);

  // Initialize fromToken and toToken with initial values or first two available tokens
  const [fromToken, setFromToken] = useState<Token | null>(null);
  const [toToken, setToToken] = useState<Token | null>(null);

  useEffect(() => {
    // Only set tokens if they haven't been set yet
    if (tokensLoading) {
      return;
    }

    if (!fromToken && !toToken && tokenOptions.length >= 2) {
      if (initialFromToken) {
        setFromToken(initialFromToken);
      } else {
        setFromToken(tokenOptions[0]);
      }

      if (initialToToken) {
        setToToken(initialToToken);
        setSelectedNetworksReceive([
          {
            name: getNetworkName(initialToToken.chainId),
            chainId: initialToToken.chainId,
          },
        ]);
      } else {
        setToToken(tokenOptions[1]);
        setSelectedNetworksReceive([
          {
            name: getNetworkName(tokenOptions[1].chainId),
            chainId: tokenOptions[1].chainId,
          },
        ]);
      }
    }
  }, [tokenOptions, initialFromToken, initialToToken, tokensLoading]);

  useEffect(() => {
    console.log("toToken", toToken, selectedNetworksReceive);
    if (selectedNetworksReceive.length === 0) {
      setSelectedNetworksReceive([
        {
          name: getNetworkName(toToken?.chainIds?.[0]?.chainId || 0),
          chainId: toToken?.chainIds?.[0]?.chainId || 0,
        },
      ]);
    }
  }, [toToken]);

  const getTokenBalance = (token: Token | null) => {
    const tokenData = findTokenByChainIds(combinedBalance, token);
    return tokenData?.amount || 0;
  };

  // Button state variables
  const isButtonDisabled =
    isLoadingQuote ||
    (typeof quoteDetails === "string" &&
      quoteDetails.includes("Insufficient")) ||
    !amount ||
    parseFloat(amount) <= 0 ||
    !fromToken ||
    !toToken ||
    (!proActive &&
      fromToken.symbol === toToken.symbol &&
      fromToken.name === toToken.name &&
      fromToken.decimals === toToken.decimals) ||
    quoteError !== "" ||
    amount > getTokenBalance(fromToken);

  const buttonBackground = isButtonDisabled ? "#E9EAEB" : "#4664E9";
  const buttonTextColor = isButtonDisabled ? "#717680" : "#fff";
  const buttonCursor = isButtonDisabled ? "not-allowed" : "pointer";

  const getButtonText = () => {
    if (!fromToken || !toToken) {
      return "Loading tokens...";
    }
    if (
      !proActive &&
      fromToken.symbol === toToken.symbol &&
      fromToken.name === toToken.name &&
      fromToken.decimals === toToken.decimals
    ) {
      return "Select different tokens";
    }

    if (isLoadingQuote) {
      return (
        <>
          <Spinner />
          <span>Calculating...</span>
        </>
      );
    }
    if (quoteError) {
      return quoteError;
    }
    if (amount > getTokenBalance(fromToken)) {
      return "Insufficient funds";
    }

    if (
      typeof quoteDetails === "string" &&
      quoteDetails.includes("Insufficient")
    ) {
      return "Insufficient funds";
    }
    if (!amount || parseFloat(amount) <= 0) {
      return "Enter an amount";
    }
    return "Review Order";
  };

  const userName = (window as any).__walletSDKInstance.getUsername();

  const calculateWidth = (amount: string) => {
    const length = amount.length;
    if (length > 0) {
      return `${length * 20}px`;
    }
    return "20%";
  };

  const handleTransactionClick = () => {
    setShowMessagePopup(false);
    setShowActivity(true);
  };

  // Update the quote effect
  useEffect(() => {
    const fetchQuote = async (isPolling: boolean = false) => {
      if (tokensLoading) {
        return;
      }
      if (!toToken || !fromToken) {
        return;
      }
      // Don't fetch if amount is empty or zero or tokens are not set
      if (
        !debouncedAmount ||
        parseFloat(debouncedAmount) <= 0 ||
        !fromToken ||
        !toToken
      ) {
        return;
      }

      // Don't fetch quote if tokens are the same
      if (
        !proActive &&
        fromToken.symbol === toToken.symbol &&
        fromToken.name === toToken.name &&
        fromToken.decimals === toToken.decimals
      ) {
        return;
      }

      // Only reset states and show loading on initial fetch, not during polling
      if (!isPolling) {
        setQuoteDetails("");
        setQuoteError("");
        setIsLoadingQuote(true);
      }

      try {
        let quote;
        // Check if fromToken is BTC
        if (isBTCToken(fromToken)) {
          quote = await getMultiFromBTCRelaySwapQuote(
            {
              username: userName,
              amount: ethers
                .parseUnits(debouncedAmount, fromToken.decimals)
                .toString(),
              outputToken: toToken?.chainIds?.find(
                (chain: any) =>
                  chain.chainId === selectedNetworksReceive[0].chainId
              )?.address,
              outputChainId: selectedNetworksReceive[0].chainId,
            },
            walletSDKKey
          );
        } else if (isBTCToken(toToken)) {
          // Handle swapping to BTC
          quote = await getMultiToBTCRelaySwapQuote(
            {
              username: userName,
              userBalance: proActive
                ? selectedNetworksPay.map((network) => ({
                    chainId: network.chainId,
                    address: findTokenByChainIds(
                      combinedBalance,
                      fromToken
                    )?.chainIds?.find(
                      (chain: any) => chain.chainId === network.chainId
                    )?.address,
                    balance: ethers
                      .parseUnits(network.amount, fromToken.decimals)
                      .toString()
                      .toString(),
                  }))
                : findTokenByChainIds(combinedBalance, fromToken)?.chainIds || [
                    {
                      chainId: fromToken.chainId,
                      address: fromToken.address,
                      balance: 0,
                    },
                  ],
              inputAmount: ethers
                .parseUnits(debouncedAmount, fromToken.decimals)
                .toString(),
              proMode: proActive,
            },
            walletSDKKey
          );
        } else {
          // Regular swap quote
          quote = await getMultiRelaySwapQuote(
            {
              username: userName,
              userBalance: proActive
                ? selectedNetworksPay.map((network) => ({
                    chainId: network.chainId,
                    address: findTokenByChainIds(
                      combinedBalance,
                      fromToken
                    )?.chainIds?.find(
                      (chain: any) => chain.chainId === network.chainId
                    )?.address,
                    balance: ethers
                      .parseUnits(network.amount, fromToken.decimals)
                      .toString()
                      .toString(),
                  }))
                : findTokenByChainIds(combinedBalance, fromToken)?.chainIds || [
                    {
                      chainId: fromToken.chainId,
                      address: fromToken.address,
                      balance: 0,
                    },
                  ],
              outputToken: toToken?.chainIds?.find(
                (chain: any) =>
                  chain.chainId === selectedNetworksReceive[0].chainId
              )?.address,
              outputChainId: selectedNetworksReceive[0].chainId,
              inputAmount: ethers
                .parseUnits(debouncedAmount, fromToken.decimals)
                .toString(),
              proMode: proActive,
              metadata: {
                inputToken: {
                  tokenName: fromToken?.name as string,
                  tokenSymbol: fromToken?.symbol as string,
                  tokenAddress: fromToken?.address as string,
                  decimals: fromToken?.decimals as number,
                  logoURI: fromToken?.icon || (fromToken?.logoURI as string),
                },
                outputToken: {
                  tokenName: toToken?.name as string,
                  tokenSymbol: toToken?.symbol as string,
                  tokenAddress: toToken?.address as string,
                  decimals: toToken?.decimals as number,
                  logoURI: toToken?.icon || (toToken?.logoURI as string),
                },
              },
            },
            walletSDKKey
          );
        }

        if (quote?.error) {
          if (quote?.message?.includes("Insufficient")) {
            setQuoteError("Insufficient funds");
          } else {
            setQuoteError("Unable to fetch quote");
          }
        } else {
          setQuoteDetails(quote);
          // Update formatted times when quote is received
          if (quote?.bestQuote?.estimatedTime) {
            setBestQuoteTime(
              formatEstimatedTime(quote.bestQuote.estimatedTime)
            );
          }
          if (quote?.fastestQuote?.estimatedTime) {
            setFastestQuoteTime(
              formatEstimatedTime(quote.fastestQuote.estimatedTime)
            );
          }
        }
      } catch (error) {
        console.error("No quote found:", error);
        if (!isPolling) {
          setQuoteError("Error fetching quote");
          setQuoteDetails("");
        }
      } finally {
        if (!isPolling) {
          setIsLoadingQuote(false);
        }
      }
    };

    // Initial fetch
    fetchQuote(false);

    // Set up polling interval
    pollingIntervalRef.current = setInterval(() => fetchQuote(true), 20000);

    return () => {
      if (pollingIntervalRef.current) {
        clearInterval(pollingIntervalRef.current);
        pollingIntervalRef.current = null;
      }
    };
  }, [
    debouncedAmount,
    fromToken,
    toToken,
    userName,
    walletSDKKey,
    selectedNetworksReceive,
    tokensLoading,
  ]);

  // Update the output amount based on quote details - use bestQuote by default, or selected option
  const getSelectedQuote = () => {
    if (typeof quoteDetails === "string" || !quoteDetails) return null;
    if (selectedOption === "fastest") {
      return quoteDetails.fastestQuote;
    }
    return quoteDetails.bestQuote;
  };

  const selectedQuote = getSelectedQuote();

  const outputAmount =
    typeof quoteDetails === "string" || !selectedQuote
      ? ""
      : selectedQuote?.outputDetails?.minimumAmount || "";

  const outputAmountUsd =
    typeof quoteDetails === "string" || !selectedQuote
      ? ""
      : selectedQuote?.outputDetails?.amountUsd || "";

  const calculateRate = () => {
    if (
      typeof quoteDetails === "string" ||
      !selectedQuote?.outputDetails?.amountFormatted
    )
      return "0";

    const rate =
      parseFloat(amount) /
      parseFloat(selectedQuote.outputDetails.amountFormatted);
    if (rate > 0 && rate < 0.0001) {
      return "<0.0001";
    }
    return rate.toFixed(6);
  };

  const handleReviewOrder = () => {
    setShowReviewOrder(true);
  };

  const handleBack = () => {
    if (showReviewOrder) {
      setShowReviewOrder(false);
    } else if (showFromTokenSelector || showToTokenSelector) {
      setShowFromTokenSelector(false);
      setShowToTokenSelector(false);
    } else {
      onBack();
    }
  };

  const handleFromTokenSelect = (token: Token) => {
    console.log("token", token);
    setFromToken(token);
    setSelectedNetworksPay([]);
    setShowFromTokenSelector(false);
    setQuoteDetails("");
  };

  const handleToTokenSelect = (token: Token) => {
    setToToken(token);
    setSelectedNetworksReceive([]);
    setShowToTokenSelector(false);
    setQuoteDetails("");
  };

  const handleConfirm = async () => {
    if (!fromToken || !toToken) {
      return;
    }
    try {
      setIsLoading(true);

      let data;
      if (isBTCToken(fromToken)) {
        // Execute swap from BTC flow
        data = await executeFromBTCSwapFlow(
          {
            username: userName,
            amount: ethers
              .parseUnits(amount, fromToken?.decimals || 0)
              .toString(),
            outputToken: toToken?.chainIds?.find(
              (chain: any) =>
                chain.chainId === selectedNetworksReceive[0].chainId
            )?.address,
            outputChainId: selectedNetworksReceive[0].chainId,
            metadata: {
              inputToken: {
                tokenName: fromToken?.name as string,
                tokenSymbol: fromToken?.symbol as string,
                tokenAddress: fromToken?.address as string,
                decimals: fromToken?.decimals as number,
                logoURI: fromToken?.icon || (fromToken?.logoURI as string),
              },
              outputToken: {
                tokenName: toToken?.name as string,
                tokenSymbol: toToken?.symbol as string,
                tokenAddress: toToken?.address as string,
                decimals: toToken?.decimals as number,
                logoURI: toToken?.icon || (toToken?.logoURI as string),
              },
            },
          },
          walletSDKKey
        );
      } else if (isBTCToken(toToken)) {
        // Execute swap to BTC flow
        data = await executeToBTCSwapFlow(
          {
            username: userName,
            userBalance: proActive
              ? selectedNetworksPay.map((network) => ({
                  chainId: network.chainId,
                  address: findTokenByChainIds(
                    combinedBalance,
                    fromToken
                  )?.chainIds?.find(
                    (chain: any) => chain.chainId === network.chainId
                  )?.address,
                  balance: ethers
                    .parseUnits(network.amount, fromToken.decimals)
                    .toString(),
                }))
              : findTokenByChainIds(combinedBalance, fromToken)?.chainIds || [],
            inputAmount: ethers
              .parseUnits(amount, fromToken?.decimals || 0)
              .toString(),
            proMode: proActive,
            metadata: {
              inputToken: {
                tokenName: fromToken?.name as string,
                tokenSymbol: fromToken?.symbol as string,
                tokenAddress: fromToken?.address as string,
                decimals: fromToken?.decimals as number,
                logoURI: fromToken?.icon || (fromToken?.logoURI as string),
              },
              outputToken: {
                tokenName: toToken?.name as string,
                tokenSymbol: toToken?.symbol as string,
                tokenAddress: toToken?.address as string,
                decimals: toToken?.decimals as number,
                logoURI: toToken?.icon || (toToken?.logoURI as string),
              },
            },
          },
          walletSDKKey
        );
      } else {
        // Execute regular swap flow - use appropriate endpoint based on tokens/provider
        const swapParams = {
          username: userName,
          userBalance: proActive
            ? selectedNetworksPay.map((network) => ({
                chainId: network.chainId,
                address: findTokenByChainIds(
                  combinedBalance,
                  fromToken
                )?.chainIds?.find(
                  (chain: any) => chain.chainId === network.chainId
                )?.address,
                balance: ethers
                  .parseUnits(network.amount, fromToken.decimals)
                  .toString(),
              }))
            : findTokenByChainIds(combinedBalance, fromToken)?.chainIds || [],
          outputToken: toToken?.chainIds?.find(
            (chain: any) => chain.chainId === selectedNetworksReceive[0].chainId
          )?.address,
          outputChainId: selectedNetworksReceive[0].chainId,
          inputAmount: ethers
            .parseUnits(amount, fromToken?.decimals || 0)
            .toString(),
          metadata: {
            inputToken: {
              tokenName: fromToken?.name as string,
              tokenSymbol: fromToken?.symbol as string,
              tokenAddress: fromToken?.address as string,
              decimals: fromToken?.decimals as number,
              logoURI: fromToken?.icon || (fromToken?.logoURI as string),
            },
            outputToken: {
              tokenName: toToken?.name as string,
              tokenSymbol: toToken?.symbol as string,
              tokenAddress: toToken?.address as string,
              decimals: toToken?.decimals as number,
              logoURI: toToken?.icon || (toToken?.logoURI as string),
            },
          },
          proMode: proActive,
        };

        // Check which endpoint to use based on provider
        if (selectedQuote?.provider === ProtocolProvider.CCTP_V1) {
          data = await executeCCTPSwapFlow(swapParams, walletSDKKey);
        } else if (
          selectedQuote?.provider === ProtocolProvider.CCTP_V2_STANDARD ||
          selectedQuote?.provider === ProtocolProvider.CCTP_V2_FAST
        ) {
          // Extract transfer type from provider name
          const transferType =
            selectedQuote.provider === ProtocolProvider.CCTP_V2_FAST
              ? "fast"
              : "standard";

          // Add transferType to swapParams for v2
          const cctpV2Params = {
            ...swapParams,
            transferType: transferType,
          };

          data = await executeCCTPV2SwapFlow(cctpV2Params, walletSDKKey);
        } else if (selectedQuote?.provider === ProtocolProvider.BUNGEE) {
          data = await executeBungeeSwapFlow(swapParams, walletSDKKey);
        } else if (selectedQuote?.provider === ProtocolProvider.LIFI) {
          data = await executeLiFiSwapFlow(swapParams, walletSDKKey);
        } else if (selectedQuote?.provider === ProtocolProvider.RELAY) {
          data = await executeSwapFlow(swapParams, walletSDKKey);
        } else {
          if (quoteDetails?.bestQuote?.provider === ProtocolProvider.LIFI) {
            data = await executeLiFiSwapFlow(swapParams, walletSDKKey);
          } else if (
            quoteDetails?.bestQuote?.provider === ProtocolProvider.BUNGEE
          ) {
            data = await executeBungeeSwapFlow(swapParams, walletSDKKey);
          } else {
            data = await executeSwapFlow(swapParams, walletSDKKey);
          }
        }
      }

      if (
        data?.transactionDetails?.overallStatus === "PENDING" ||
        data?.transactionDetails?.overallStatus === "COMPLETED"
      ) {
        console.log("Transaction successful:", data);
        setTransactionId(data.transactionDetails.multiTransactionId);
        console.log("Transaction ID: ", transactionId);
        setShowMessagePopup(true);
        setMessageType("success");
      } else {
        console.error("Transaction failed:", data);
        setShowMessagePopup(true);
        setMessageType("error");
      }
    } catch (error) {
      console.error("Error making transaction:", error);
      setShowMessagePopup(true);
      setMessageType("error");
    } finally {
      setIsLoading(false);
    }
  };

  // Calculate total amount
  const totalAmount = useMemo(() => {
    return calculateTotalAmount(selectedNetworksPay, fromToken?.decimals || 6);
  }, [selectedNetworksPay, fromToken?.decimals]);

  useEffect(() => {
    if (totalAmount > 0) {
      setAmount(totalAmount.toString());
    }
  }, [totalAmount]);

  const switchTokens = () => {
    setFromToken(toToken);
    setToToken(fromToken);
    setSelectedNetworksPay([]);
    setSelectedNetworksReceive([]);
    setAmount("");
    setQuoteDetails("");
  };

  // Add preset amount handler
  const handlePresetClick = (percentage: number) => {
    if (!fromToken) return;

    const balance = getTokenBalance(fromToken).toString();
    if (!balance || balance === "0") return;

    try {
      if (percentage === 100) {
        setAmount(
          ethers
            .formatUnits(
              BigInt(
                findTokenByChainIds(combinedBalance, fromToken)?.balance || "0"
              ),
              fromToken.decimals
            )
            .toString()
        );
      } else {
        // Calculate percentage
        const parsedBalance = ethers.parseUnits(balance, fromToken.decimals);
        const amount = (parsedBalance * BigInt(percentage)) / BigInt(100);
        const formattedAmount = ethers.formatUnits(amount, fromToken.decimals);
        setAmount(formattedAmount);
      }
    } catch (error) {
      console.error("Error calculating preset amount:", error);
    }
  };

  // Add loading screen for tokens
  if (tokensLoading) {
    return (
      <motion.div
        initial={{ opacity: 0, height: 550 }}
        animate={{ opacity: 1, height: 550 }}
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          height: "550px !important",
          padding: "24px",
          background: "#fff",
          borderRadius: "20px",
          width: "100%",
          fontFamily: "Inter, sans-serif",
        }}
      >
        <Spinner />
        <div style={{ marginTop: "16px", color: "#535862" }}>
          Initializing tokens...
        </div>
      </motion.div>
    );
  }

  if (showActivity) {
    return (
      <motion.div
        key="activity-details"
        initial={{ opacity: 0, height: 550 }}
        animate={{ opacity: 1, height: "auto" }}
        exit={{ opacity: 0, height: 550 }}
        transition={{ duration: 0.2, ease: "easeInOut" }}
      >
        <ActivityDetails
          apiKey={walletSDKKey}
          onBack={onBack}
          activityId={transactionId || ""}
        />
      </motion.div>
    );
  }

  if (showMessagePopup) {
    return (
      <motion.div
        key="message-popup"
        initial={{ opacity: 0, height: 550 }}
        animate={{ opacity: 1, height: "auto" }}
        exit={{ opacity: 0, height: 550 }}
        transition={{ duration: 0.2, ease: "easeInOut" }}
      >
        <MessagePopup
          transactionClick={handleTransactionClick}
          handleDone={() => {
            if (messageType === "success") {
              onBack();

              setShowMessagePopup(false);
            } else {
              setShowMessagePopup(false);
              setShowReviewOrder(false);
            }
          }}
          type={messageType}
          customContent={
            messageType === "success" ? (
              <div
                style={{
                  display: "flex",
                  flexDirection: "column",
                  gap: 8,
                  alignItems: "center",
                  justifyContent: "center",
                  textAlign: "center",
                }}
              >
                <h1
                  style={{ fontSize: 18, fontWeight: 600, fontFamily: "Inter" }}
                >
                  Transaction successful
                </h1>
                <p
                  style={{
                    fontSize: 15,
                    color: "#535862",
                    fontFamily: "Inter",
                  }}
                >
                  Please check your balance.
                </p>
              </div>
            ) : (
              <div style={{ textAlign: "center" }}>
                <h1
                  style={{ fontSize: 18, fontWeight: 600, fontFamily: "Inter" }}
                >
                  Transaction failed
                </h1>
                <p
                  style={{
                    fontSize: 15,
                    color: "#535862",
                    fontFamily: "Inter",
                    marginTop: 8,
                  }}
                >
                  We couldn't complete your transaction at the moment. This
                  might be due to network issues, insufficient liquidity, or a
                  failed quote.
                </p>
              </div>
            )
          }
        />
      </motion.div>
    );
  }

  if (showSelectToNetworks) {
    return (
      <motion.div
        key="select-to-networks"
        initial={{ opacity: 0, height: 550 }}
        animate={{ opacity: 1, height: "auto" }}
        exit={{ opacity: 0, height: 550 }}
        transition={{ duration: 0.2, ease: "easeInOut" }}
      >
        <SelectSingleNetwork
          availableNetworks={availableNetworks}
          selectedToNetworksPay={selectedNetworksReceive}
          setSelectedToNetworksPay={setSelectedNetworksReceive}
          toToken={toToken}
          onBack={() => setShowSelectToNetworks(false)}
          onDone={() => {
            setShowSelectToNetworks(false);
          }}
        />
      </motion.div>
    );
  }

  if (showSelectFromNetworks) {
    return (
      <motion.div
        key="select-from-networks"
        initial={{ opacity: 0, height: 550 }}
        animate={{ opacity: 1, height: "auto" }}
        exit={{ opacity: 0, height: 550 }}
        transition={{ duration: 0.2, ease: "easeInOut" }}
      >
        <SelectNetwork
          availableNetworks={availableNetworks}
          selectedNetworksPay={selectedNetworksPay}
          setSelectedNetworksPay={setSelectedNetworksPay}
          fromToken={
            combinedBalance?.data?.find(
              (token: any) => token.symbol === fromToken?.symbol
            ) || {}
          }
          onBack={() => setShowSelectFromNetworks(false)}
          onDone={(networks) => {
            setSelectedNetworksPay(networks);
            setShowSelectFromNetworks(false);
          }}
        />
      </motion.div>
    );
  }
  // Show From Token Selector
  if (showFromTokenSelector) {
    return (
      <motion.div
        key="from-token-selector"
        initial={{ opacity: 0, height: 550 }}
        animate={{ opacity: 1, height: "auto" }}
        exit={{ opacity: 0, height: 550 }}
        transition={{ duration: 0.2, ease: "easeInOut" }}
      >
        <TokenSelector
          title="Select token to pay"
          tokens={tokenOptions}
          onTokenSelect={handleFromTokenSelect}
          onBack={() => setShowFromTokenSelector(false)}
          isLoading={!combinedBalance?.data}
          inSwap={true}
          apiKey={walletSDKKey}
        />
      </motion.div>
    );
  }

  // Show To Token Selector
  if (showToTokenSelector) {
    return (
      <motion.div
        key="to-token-selector"
        initial={{ opacity: 0, height: 550 }}
        animate={{ opacity: 1, height: "auto" }}
        exit={{ opacity: 0, height: 550 }}
        transition={{ duration: 0.2, ease: "easeInOut" }}
      >
        <TokenSelector
          title="Select token to receive"
          tokens={tokenOptions}
          onTokenSelect={handleToTokenSelect}
          onBack={() => setShowToTokenSelector(false)}
          isLoading={!combinedBalance?.data}
          inSwap={true}
          apiKey={walletSDKKey}
        />
      </motion.div>
    );
  }

  return (
    <motion.div
      initial={{ opacity: 0, height: 550 }}
      animate={{ opacity: 1, height: "auto" }}
      transition={{ duration: 0.2, ease: "easeInOut" }}
      style={{
        background: "#fff",
        borderRadius: 20,
        width: "100%",
        margin: "0 auto",
        position: "relative",
        fontFamily: "Inter, sans-serif",
      }}
    >
      {/* Header */}
      <div
        style={{
          display: "flex",
          alignItems: "center",
          marginBottom: 28,
          fontFamily: "Inter, sans-serif",
        }}
      >
        <button
          onClick={handleBack}
          style={{
            background: "none",
            border: "none",
            fontSize: 22,
            color: "#222",
            cursor: "pointer",
            marginRight: 8,
            fontFamily: "Inter, sans-serif",
            padding: 0,
          }}
        >
          <ArrowLeft style={{ width: 24, height: 24, color: "#717680" }} />
        </button>
        <div
          style={{
            flex: 1,
            textAlign: "center",
            fontWeight: 600,
            fontSize: 22,
            fontFamily: "Inter, sans-serif",
          }}
        >
          {showReviewOrder ? "Review Order" : "Swap tokens instantly"}
        </div>
        {/* PRO Toggle */}
        {!showReviewOrder && (
          <div style={{ marginLeft: 8, fontFamily: "Inter, sans-serif" }}>
            <button
              type="button"
              aria-pressed={proActive}
              onClick={() => {
                setProActive((v) => !v);
                setQuoteDetails("");
                setAmount("");
                setSelectedNetworksPay([]);
                setSelectedNetworksReceive([]);
              }}
              style={{
                width: 50,
                height: 27,
                background: proActive ? "#4664E9" : "#E9EAEB",
                borderRadius: 28,
                display: "flex",
                alignItems: "center",
                position: "relative",
                boxShadow: proActive
                  ? "0 2px 8px rgba(70,100,233,0.15)"
                  : "0 2px 8px rgba(0,0,0,0.06)",
                border: "none",
                cursor: "pointer",
                transition: "background 0.2s cubic-bezier(.4,0,.2,1)",
                padding: 0,
                outline: proActive ? "2px solid #4664E9" : "none",
                fontFamily: "Inter, sans-serif",
              }}
            >
              <span
                style={{
                  width: 24,
                  height: 24,
                  background: "#fff",
                  borderRadius: "50%",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  position: "absolute",
                  left: proActive ? 24 : 0,
                  top: "50%",
                  transform: "translateY(-50%)",
                  boxShadow: "0 2px 8px rgba(70,100,233,0.15)",
                  transition: "left 0.2s cubic-bezier(.4,0,.2,1)",
                  zIndex: 3,
                  fontWeight: 700,
                  fontSize: 8,
                  color: proActive ? "#4664E9" : "#A0A4AB",
                  userSelect: "none",
                  fontFamily: "Inter, sans-serif",
                }}
              >
                PRO
              </span>
            </button>
          </div>
        )}
      </div>
      {/* Content */}
      <AnimatePresence mode="wait">
        {showReviewOrder ? (
          <motion.div
            key="review-order"
            animate={{ opacity: 1, height: "auto" }}
            transition={{ duration: 0.2, ease: "easeInOut" }}
          >
            <ReviewOrder
              rate={calculateRate()}
              slippage={"1%"}
              fromToken={fromToken!}
              toToken={toToken!}
              fromAmount={amount}
              toAmount={
                outputAmount
                  ? Number(
                      formatUnits(outputAmount, toToken?.decimals || 6)
                    ).toFixed(6)
                  : ""
              }
              onBack={handleBack}
              onConfirm={handleConfirm}
              selectedNetworksPay={selectedNetworksPay}
              selectedNetworksReceive={selectedNetworksReceive}
              proActive={proActive}
              isLoading={isLoading}
            />
          </motion.div>
        ) : (
          <motion.div
            key="swap-form"
            initial={{ opacity: 0, height: 550 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 550 }}
            transition={{ duration: 0.2, ease: "easeInOut" }}
          >
            {/* You Pay */}
            <div>
              <div
                style={{
                  border: "none",
                  borderRadius: 32,
                  padding: 0,
                  marginBottom: 16,
                  background: "none",
                  fontFamily: "Inter, sans-serif",
                }}
              >
                <div
                  style={{
                    color: "#1E1E1E",
                    fontSize: 14,
                    marginBottom: 8,
                    marginTop: 32,
                    fontWeight: 500,
                    fontFamily: "Inter, sans-serif",
                  }}
                >
                  You Pay
                  <div
                    style={{
                      float: "right",
                      display: "flex",
                      alignItems: "center",
                      gap: 8,
                    }}
                  >
                    {!proActive && (
                      <div style={{ display: "flex", gap: 4 }}>
                        <button
                          onClick={() => handlePresetClick(25)}
                          style={{
                            background: "none",
                            border: "1px solid #D5D7DA",
                            borderRadius: 4,
                            padding: "2px 6px",
                            fontSize: 11,
                            color: "#4664E9",
                            cursor: "pointer",
                            fontFamily: "Inter, sans-serif",
                            fontWeight: 500,
                          }}
                        >
                          25%
                        </button>
                        <button
                          onClick={() => handlePresetClick(50)}
                          style={{
                            background: "none",
                            border: "1px solid #D5D7DA",
                            borderRadius: 4,
                            padding: "2px 6px",
                            fontSize: 11,
                            color: "#4664E9",
                            cursor: "pointer",
                            fontFamily: "Inter, sans-serif",
                            fontWeight: 500,
                          }}
                        >
                          50%
                        </button>
                        <button
                          onClick={() => handlePresetClick(100)}
                          style={{
                            background: "none",
                            border: "1px solid #D5D7DA",
                            borderRadius: 4,
                            padding: "2px 6px",
                            fontSize: 11,
                            color: "#4664E9",
                            cursor: "pointer",
                            fontFamily: "Inter, sans-serif",
                            fontWeight: 500,
                          }}
                        >
                          Max
                        </button>
                      </div>
                    )}
                    <span style={{ fontSize: 13, color: "#B4B4B6" }}>
                      {fromToken ? getTokenBalance(fromToken).toFixed(6) : 0}{" "}
                      {fromToken?.symbol || ""}
                    </span>
                  </div>
                </div>
                <div
                  style={{
                    padding: 12,
                    border: proActive ? "1px solid #3662E3" : "none",
                    background: "#F4F6FF",
                    borderRadius: 12,
                    fontFamily: "Inter, sans-serif",
                  }}
                >
                  <div>
                    <div
                      style={{
                        padding: "12px 14px",
                        border: "1px solid #D5D7DA",
                        borderRadius: 8,
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "space-between",
                        background: "white",
                        marginBottom: 8,
                      }}
                      onClick={() => setShowFromTokenSelector(true)}
                    >
                      <div style={{ display: "flex", alignItems: "center" }}>
                        <TokenLogo
                          logoURI={fromToken?.icon || fromToken?.logoURI}
                          symbol={fromToken?.symbol || ""}
                          name={fromToken?.name || ""}
                          size={44}
                        />

                        <div
                          style={{
                            marginLeft: 8,
                            display: "flex",
                            flexDirection: "column",
                            gap: 2,
                          }}
                        >
                          <span
                            style={{
                              fontSize: 16,
                              color: "#414651",
                              fontWeight: 600,
                            }}
                          >
                            {fromToken?.symbol}
                          </span>
                          <span style={{ fontSize: 12, color: "#535862" }}>
                            {fromToken?.name}
                          </span>
                        </div>
                      </div>
                      <ChevronRight
                        style={{ width: 16, height: 16, color: "#717680" }}
                      />
                    </div>

                    {proActive && (
                      <>
                        {" "}
                        {selectedNetworksPay.length > 0 ? (
                          <div
                            style={{
                              borderRadius: 8,
                              overflow: "hidden",
                              background: "white",
                            }}
                          >
                            <button
                              onClick={() => setShowPreviewNetworks((v) => !v)}
                              style={{
                                width: "100%",
                                background: "white",
                                border: "none",
                                padding: "12px 16px",
                                display: "flex",
                                justifyContent: "space-between",
                                alignItems: "center",
                                cursor: "pointer",
                                textAlign: "left",
                              }}
                            >
                              <span
                                style={{
                                  fontSize: 16,
                                  color: "#1E1E1E",
                                  fontWeight: 400,
                                }}
                              >
                                {selectedNetworksPay.length} Networks
                              </span>
                              {showPreviewNetworks ? (
                                <ChevronUp
                                  style={{
                                    width: 16,
                                    height: 16,
                                    color: "#717680",
                                  }}
                                />
                              ) : (
                                <ChevronDown
                                  style={{
                                    width: 16,
                                    height: 16,
                                    color: "#717680",
                                  }}
                                />
                              )}
                            </button>
                            {showPreviewNetworks && (
                              <>
                                <div style={{ padding: "1px 16px" }}>
                                  {selectedNetworksPay.map((network, index) => (
                                    <div
                                      style={{
                                        borderTop:
                                          index === 0
                                            ? "1px solid #D5D7DA"
                                            : "none",
                                      }}
                                    >
                                      <NetworkAllocationDisplay
                                        key={network.name}
                                        network={network.name}
                                        amount={network.amount}
                                        symbol={fromToken?.symbol || ""}
                                      />
                                    </div>
                                  ))}
                                </div>
                                <div style={{ padding: "8px 16px 16px" }}>
                                  <button
                                    onClick={() =>
                                      setShowSelectFromNetworks(true)
                                    }
                                    style={{
                                      width: "100%",
                                      height: 44,
                                      background: "white",
                                      border: "1px solid #3662E3",
                                      borderRadius: 8,
                                      color: "#3662E3",
                                      fontSize: 15,
                                      fontWeight: 500,
                                      cursor: "pointer",
                                    }}
                                  >
                                    Edit Allocation
                                  </button>
                                </div>
                              </>
                            )}
                          </div>
                        ) : (
                          <button
                            onClick={() => setShowSelectFromNetworks(true)}
                            style={{
                              width: "100%",
                              height: 48,
                              fontSize: 16,
                              color: "#A0A4AB",
                              fontWeight: 500,
                              background: "#fff",
                              border: "1px solid #D5D7DA",
                              borderRadius: 8,
                              cursor: "pointer",
                              display: "flex",
                              alignItems: "center",
                              justifyContent: "space-between",
                              gap: 8,
                              padding: "0 16px",
                            }}
                          >
                            <span>Select Networks</span>
                            <ChevronRight
                              style={{
                                width: 20,
                                height: 20,
                                color: "#A0A4AB",
                              }}
                            />
                          </button>
                        )}
                      </>
                    )}

                    <div
                      style={{
                        marginTop: 16,
                        padding: "24px",
                        background: "#F6F8FC",
                        borderRadius: 8,
                        display: "flex",
                        flexDirection: "column",
                        alignItems: "center",
                        gap: 4,
                      }}
                    >
                      <div
                        style={{
                          display: "flex",
                          alignItems: "baseline",
                          gap: 8,
                          width: "100%",
                          justifyContent: "center",
                        }}
                      >
                        {proActive ? (
                          <input
                            type="text"
                            value={amount}
                            placeholder="0.00"
                            disabled
                            className="no-spinners"
                            style={{
                              fontSize: 32,
                              fontWeight: 600,
                              color: "#1E1E1E",
                              fontFamily: "Inter",
                              border: "none",
                              outline: "none",
                              background: "transparent",
                              width: calculateWidth(amount),
                              maxWidth: "75%",
                              minWidth: "75px",
                              textAlign: "right",
                            }}
                          />
                        ) : (
                          <input
                            type="text"
                            value={amount}
                            onChange={(e) =>
                              setAmount(
                                validateNumericInput(
                                  e.target.value,
                                  fromToken?.decimals
                                )
                              )
                            }
                            onKeyDown={(e) =>
                              handleNumericKeyDown(
                                e,
                                amount,
                                fromToken?.decimals
                              )
                            }
                            placeholder="0.00"
                            className="no-spinners"
                            style={{
                              fontSize: 32,
                              fontWeight: 600,
                              color: "#1E1E1E",
                              fontFamily: "Inter",
                              border: "none",
                              outline: "none",
                              background: "transparent",
                              width: calculateWidth(amount),
                              minWidth: "75px",
                              maxWidth: "75%",
                              textAlign: "right",
                            }}
                          />
                        )}
                        <span
                          style={{
                            fontSize: 32,
                            fontWeight: 600,
                            color: "#1E1E1E",
                            fontFamily: "Inter",
                          }}
                        >
                          {fromToken?.symbol && fromToken.symbol.length > 5
                            ? `${fromToken.symbol.slice(0, 5)}..`
                            : fromToken?.symbol}
                        </span>
                      </div>
                      <span
                        style={{
                          fontSize: 15,
                          color: "#717680",
                          fontFamily: "Inter",
                        }}
                      >
                        ${selectedQuote?.inputDetails?.amountUsd || 0}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              {/* Swap Arrow */}
              <div
                style={{
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                  margin: "40px 0 20px 0",
                  borderBottom: "1px solid #D5D7DA",
                  zIndex: 2,
                }}
              >
                <div
                  style={{
                    border: "1px solid #D5D7DA",
                    background: "white",
                    position: "absolute",
                    borderRadius: 6,
                    width: 32,
                    height: 32,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    outline: "10px solid #ffffff",
                    cursor: "pointer",
                  }}
                  onClick={() => switchTokens()}
                >
                  <ArrowDownUp
                    style={{ width: 20, height: 20, color: "black" }}
                  />
                </div>
              </div>
              {/* You Receive */}
              <div>
                <div
                  style={{
                    color: "#1E1E1E",
                    fontSize: 14,
                    marginBottom: 8,
                    fontWeight: 500,
                    fontFamily: "Inter, sans-serif",
                  }}
                >
                  You receive
                </div>
                <div
                  style={{
                    padding: proActive ? 12 : 0,
                    border: proActive ? "1px solid #3662E3" : "none",
                    background: proActive ? "#EBF0FF" : "none",
                    borderRadius: 12,
                    fontFamily: "Inter, sans-serif",
                  }}
                >
                  <div
                    style={{
                      padding: "12px 14px",
                      border: "1px solid #D5D7DA",
                      borderRadius: 8,
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "space-between",
                      background: "white",
                      marginBottom: 8,
                    }}
                    onClick={() => setShowToTokenSelector(true)}
                  >
                    <div style={{ display: "flex", alignItems: "center" }}>
                      <TokenLogo
                        logoURI={toToken?.icon || toToken?.logoURI}
                        symbol={toToken?.symbol || ""}
                        name={toToken?.name || ""}
                        size={44}
                      />
                      <div
                        style={{
                          marginLeft: 8,
                          display: "flex",
                          flexDirection: "column",
                          gap: 2,
                        }}
                      >
                        <span
                          style={{
                            fontSize: 16,
                            color: "#414651",
                            fontWeight: 600,
                          }}
                        >
                          {toToken?.symbol}
                        </span>
                        <span style={{ fontSize: 12, color: "#535862" }}>
                          {toToken?.name}
                        </span>
                      </div>
                    </div>
                    <div
                      style={{ display: "flex", alignItems: "center", gap: 4 }}
                    >
                      <span
                        style={{
                          fontSize: 18,
                          color: "#181D27",
                          fontWeight: 600,
                        }}
                      >
                        {isLoadingQuote ? (
                          <Spinner />
                        ) : (
                          <div
                            style={{
                              display: "flex",
                              alignItems: "center",
                              gap: 4,
                              flexDirection: "column",
                              textAlign: "right",
                            }}
                          >
                            <span
                              style={{
                                width: "100%",
                                fontSize: 16,
                                fontWeight: 600,
                                textAlign: "right",
                              }}
                            >
                              {outputAmount
                                ? Number(
                                    formatUnits(
                                      outputAmount,
                                      toToken?.decimals || 6
                                    )
                                  ).toFixed(6)
                                : ""}
                            </span>
                            <span
                              style={{
                                fontSize: 12,
                                color: "#535862",
                                textAlign: "right",
                                width: "100%",
                              }}
                            >
                              {outputAmountUsd ? `$${outputAmountUsd}` : ""}
                            </span>
                          </div>
                        )}
                      </span>

                      <ChevronRight
                        style={{ width: 16, height: 16, color: "#717680" }}
                      />
                    </div>
                  </div>

                  <div style={{ marginTop: 10 }}>
                    <button
                      onClick={() => setShowSelectToNetworks(true)}
                      style={{
                        width: "100%",
                        height: 48,
                        fontSize: 16,
                        color: "#A0A4AB",
                        fontWeight: 500,
                        background: "#fff",
                        border: "1px solid #D5D7DA",
                        borderRadius: 8,
                        cursor: "pointer",
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "space-between",
                        gap: 8,
                        padding: "0 16px",
                      }}
                    >
                      <span>
                        {selectedNetworksReceive.length > 0 ? (
                          <div
                            style={{
                              display: "flex",
                              alignItems: "center",
                              gap: 6,
                              color: "#1E1E1E",
                              fontSize: 16,
                              fontWeight: 400,
                            }}
                          >
                            <img
                              src={
                                NETWORK_LOGO_URLS[
                                  selectedNetworksReceive[0].chainId
                                ]
                              }
                              alt={selectedNetworksReceive[0].name}
                              style={{ width: 20, height: 20 }}
                            />
                            <span>{selectedNetworksReceive[0].name}</span>
                          </div>
                        ) : (
                          "Select Networks"
                        )}
                      </span>
                      <ChevronRight
                        style={{ width: 20, height: 20, color: "#A0A4AB" }}
                      />
                    </button>
                  </div>
                </div>
              </div>
              {/* Execution Options - Show only when providers are different */}
              {quoteDetails &&
                typeof quoteDetails !== "string" &&
                quoteDetails?.bestQuote?.provider !==
                  quoteDetails?.fastestQuote?.provider && (
                  <div
                    style={{
                      marginTop: 24,
                      marginBottom: 16,
                      fontFamily: "Inter, sans-serif",
                    }}
                  >
                    <div
                      style={{
                        display: "flex",
                        gap: 8,
                        width: "100%",
                      }}
                    >
                      {/* Best Price Card */}
                      <div
                        onClick={() => setSelectedOption("best-price")}
                        style={{
                          flex: 1,
                          padding: 16,
                          borderRadius: 12,
                          border:
                            selectedOption === "best-price"
                              ? "1px solid #4664E9"
                              : "1px solid #E9EAEB",
                          background:
                            selectedOption === "best-price"
                              ? "#F4F6FF"
                              : "#FFFFFF",
                          cursor: "pointer",
                          position: "relative",
                          transition: "all 0.2s ease",
                        }}
                      >
                        <Tooltip
                          content={getProviderName(
                            quoteDetails?.bestQuote?.provider
                          )}
                          position="top"
                          style={{ position: "absolute", top: 8, left: 12 }}
                        >
                          <div
                            style={{
                              background: "#4664E9",
                              color: "white",
                              fontSize: 10,
                              fontWeight: 700,
                              padding: "2px 6px",
                              borderRadius: 8,
                              textTransform: "uppercase",
                              display: "flex",
                              alignItems: "center",
                              gap: 4,
                            }}
                          >
                            {getProviderIcon(
                              quoteDetails?.bestQuote?.provider
                            ) && (
                              <img
                                src={
                                  getProviderIcon(
                                    quoteDetails?.bestQuote?.provider
                                  ) || ""
                                }
                                alt="Provider"
                                style={{
                                  width: 12,
                                  height: 12,
                                  borderRadius: "50%",
                                }}
                              />
                            )}
                            BEST PRICE
                          </div>
                        </Tooltip>

                        <div
                          style={{
                            marginTop: 20,
                          }}
                        >
                          <div
                            style={{
                              fontSize: 18,
                              fontWeight: 600,
                              color: "#000",
                              marginBottom: 4,
                            }}
                          >
                            {quoteDetails?.bestQuote?.outputDetails
                              ?.minimumAmount
                              ? `${Number(
                                  formatUnits(
                                    quoteDetails.bestQuote.outputDetails
                                      .minimumAmount,
                                    toToken?.decimals || 6
                                  )
                                ).toFixed(6)} ${toToken?.symbol}`
                              : `0.000000 ${toToken?.symbol}`}
                          </div>
                          <div
                            style={{
                              fontSize: 14,
                              color: "#666",
                              marginBottom: 8,
                            }}
                          >
                            $
                            {formatAmount(
                              quoteDetails?.bestQuote?.outputDetails
                                ?.amountUsd || "0.00"
                            )}
                          </div>
                          <div
                            style={{
                              display: "flex",
                              alignItems: "center",
                              gap: 6,
                              fontSize: 12,
                              color: "#666",
                            }}
                          >
                            <div
                              style={{
                                width: 6,
                                height: 6,
                                borderRadius: "50%",
                                background: "#00D26B",
                              }}
                            />
                            <span>{bestQuoteTime}</span>
                            <span>•</span>
                            <span>
                              ⛽ ${quoteDetails?.bestQuote?.fees || "0.000"}
                            </span>
                          </div>
                        </div>
                      </div>

                      {/* Fastest Card */}
                      <div
                        onClick={() => setSelectedOption("fastest")}
                        style={{
                          flex: 1,
                          padding: 16,
                          borderRadius: 12,
                          border:
                            selectedOption === "fastest"
                              ? "1px solid #4664E9"
                              : "1px solid #E9EAEB",
                          background:
                            selectedOption === "fastest"
                              ? "#F4F6FF"
                              : "#FFFFFF",
                          cursor: "pointer",
                          position: "relative",
                          transition: "all 0.2s ease",
                        }}
                      >
                        <Tooltip
                          content={getProviderName(
                            quoteDetails?.fastestQuote?.provider
                          )}
                          position="top"
                          style={{ position: "absolute", top: 8, left: 12 }}
                        >
                          <div
                            style={{
                              background: "#4664E9",
                              color: "#fff",
                              fontSize: 10,
                              fontWeight: 700,
                              padding: "2px 6px",
                              borderRadius: 8,
                              textTransform: "uppercase",
                              display: "flex",
                              alignItems: "center",
                              gap: 4,
                            }}
                          >
                            {getProviderIcon(
                              quoteDetails?.fastestQuote?.provider
                            ) && (
                              <img
                                src={
                                  getProviderIcon(
                                    quoteDetails?.fastestQuote?.provider
                                  ) || ""
                                }
                                alt="Provider"
                                style={{
                                  width: 12,
                                  height: 12,
                                  borderRadius: "50%",
                                }}
                              />
                            )}
                            FASTEST
                          </div>
                        </Tooltip>

                        <div style={{ marginTop: 20 }}>
                          <div
                            style={{
                              fontSize: 18,
                              fontWeight: 600,
                              color: "#000",
                              marginBottom: 4,
                            }}
                          >
                            {quoteDetails?.fastestQuote?.outputDetails
                              ?.minimumAmount
                              ? `${Number(
                                  formatUnits(
                                    quoteDetails.fastestQuote.outputDetails
                                      .minimumAmount,
                                    toToken?.decimals || 6
                                  )
                                ).toFixed(6)} ${toToken?.symbol}`
                              : `0.000000 ${toToken?.symbol}`}
                          </div>
                          <div
                            style={{
                              fontSize: 14,
                              color: "#666",
                              marginBottom: 8,
                            }}
                          >
                            $
                            {formatAmount(
                              quoteDetails?.fastestQuote?.outputDetails
                                ?.amountUsd || "0.00"
                            )}
                          </div>
                          <div
                            style={{
                              display: "flex",
                              alignItems: "center",
                              gap: 6,
                              fontSize: 12,
                              color: "#666",
                            }}
                          >
                            <span>{fastestQuoteTime}</span>
                            <span>•</span>
                            <span>
                              ⚡ ${quoteDetails?.fastestQuote?.fees || "0.000"}
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                )}

              {/* Summary Box */}
              <div
                style={{
                  background: "#f6f8fc",
                  borderRadius: 14,
                  padding: "18px 18px 10px 18px",
                  marginTop: 24,
                  marginBottom: 8,
                  fontSize: 16,
                  fontFamily: "Inter, sans-serif",
                }}
              >
                <>
                  <div
                    style={{
                      display: "flex",
                      justifyContent: "space-between",
                      marginBottom: 8,
                    }}
                  >
                    <span style={{ fontSize: 16, fontWeight: 500 }}>Rate</span>
                    {typeof quoteDetails === "string" ? (
                      <span
                        style={{
                          fontSize: 16,
                          fontWeight: 500,
                          color: "#535862",
                        }}
                      >
                        -
                      </span>
                    ) : (
                      <span
                        style={{
                          fontSize: 16,
                          fontWeight: 500,
                          color: "#535862",
                        }}
                      >
                        1 {toToken?.symbol || ""} ≈ {calculateRate()}{" "}
                        {fromToken?.symbol || ""}
                      </span>
                    )}
                  </div>
                  <div
                    style={{
                      display: "flex",
                      justifyContent: "space-between",
                      marginBottom: 8,
                    }}
                  >
                    <span style={{ fontSize: 16, fontWeight: 500 }}>
                      Slippage
                    </span>
                    <span
                      style={{
                        fontSize: 16,
                        fontWeight: 500,
                        color: "#535862",
                      }}
                    >
                      1%
                    </span>
                  </div>
                </>
              </div>
              {/* Review Order Button */}
              <button
                style={{
                  margin: "24px 0",
                  width: "100%",
                  background: buttonBackground,
                  color: buttonTextColor,
                  fontWeight: 600,
                  fontSize: 16,
                  border: "none",
                  borderRadius: 8,
                  padding: "10px 0",
                  cursor: buttonCursor,
                  fontFamily: "Inter, sans-serif",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  gap: "8px",
                }}
                disabled={isButtonDisabled}
                onClick={() => handleReviewOrder()}
              >
                {getButtonText()}
              </button>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  );
};