import React, {
  useState,
  useMemo,
  useCallback,
  useEffect,
  useRef,
} from "react";
import {
  ArrowLeft,
  ArrowDownUp,
  PencilLine,
  ChevronRight,
  ChevronUp,
  ChevronDown,
} from "lucide-react";
import MessagePopup from "../MessagePopup";
import Spinner from "../ui/Spinner";
import TokenSelector from "../TokenSelector";
import { lookupUser } from "../../services/addressValidation";
import {
  executeTransferFlow,
  executeBitcoinTransfer,
} from "../../services/services";
import { ethers, formatUnits } from "ethers";
import SelectNetwork from "../SelectNetwork";
import {
  availableNetworks,
  getNetworkName,
  NETWORK_LOGO_URLS,
  NETWORK_NAME_TO_CHAIN_ID,
} from "../utils";
import SelectSingleNetwork from "../SelectSingleNetwork";
import RecipientSearch from "./RecipientSearch";
import ReviewTransfer from "./ReviewTransfer";
import ActivityDetails from "../Activity/ActivityDetails";
import { useWallet } from "../WalletProvider";
import { validateNumericInput, handleNumericKeyDown } from "../utils";

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

interface SendToUser {
  status: boolean;
  username?: string;
  walletAddress?: string;
  solanaWalletAddress?: string;
  ensName?: string;
  sns?: string;
  bitcoinWalletAddress?: string;
}

interface ValidationResponse {
  value: boolean;
  username: string;
  walletAddress: string;
  ensName?: string;
}

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

// Simple debounce implementation
const debounce = <T extends (...args: any[]) => any>(
  func: T,
  wait: number
): ((...args: Parameters<T>) => void) => {
  let timeout: NodeJS.Timeout;
  return (...args: Parameters<T>) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), wait);
  };
};

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>
);

const TransferToken: React.FC<{
  onBack: () => void;
  onClose: () => void;
  walletSdkKey: string;
  username: string;
}> = ({ onBack, onClose, walletSdkKey, username }) => {
  const {
    cryptoBalance: combinedBalance,
    loading,
    refreshBalance,
  } = useWallet();

  const [selectedToken, setSelectedToken] = useState<Token | null>(null);
  const [recipient, setRecipient] = useState("");
  const [step, setStep] = useState<
    | "recipient"
    | "amount"
    | "selectNetworks"
    | "allocateTokens"
    | "confirm"
    | "done"
  >("recipient");
  const [amount, setAmount] = useState("");
  const [showMessage, setShowMessage] = useState(false);
  const [usernamecheckLoading, setUsernamecheckLoading] = useState(false);
  const [selectedFromNetworksPay, setSelectedFromNetworksPay] = useState<
    NetworkAllocation[]
  >([]);
  const [sendToUser, setSendToUser] = useState<SendToUser>({
    status: false,
    username: undefined,
    walletAddress: undefined,
    solanaWalletAddress: undefined,
    ensName: undefined,
    bitcoinWalletAddress: undefined,
  });
  const [addressToSend, setAddressToSend] = useState("");
  const [isTransferring, setIsTransferring] = useState(false);
  const [transferError, setTransferError] = useState<string | null>(null);

  const [showPreviewNetworks, setShowPreviewNetworks] = useState(false);
  const [proActive, setProActive] = useState(false);
  const [showSelectToNetworks, setShowSelectToNetworks] = useState(false);
  const [selectedToNetworksPay, setSelectedToNetworksPay] = useState<
    { name: string; chainId: number }[]
  >([]);
  const [transactionId, setTransactionId] = useState<string | null>(null);

  const [showActivity, setShowActivity] = useState(false);

  // Transform combinedBalance data into token options
  const tokenOptions = useMemo(() => {
    if (!combinedBalance?.data) return [];

    return combinedBalance.data.map((token: any) => ({
      symbol: token.symbol,
      name: token.name,
      icon: token.logoURI || token.icon,
      logoURI: token.logoURI,
      address: token.chainIds?.[0]?.address || token.address || "",
      chainId: token.chainIds?.[0]?.chainId || token.chainId || 0,
      decimals: token.decimals,
      balance: token.balance || "0",
      amount: token.amount?.toString() || "0",
      chainIds: token.chainIds || [],
      priceUsd: token.priceUsd,
    }));
  }, [combinedBalance]);

  // Reset selected networks when token changes
  useEffect(() => {
    if (selectedToken) {
      setSelectedToNetworksPay([
        {
          name: getNetworkName(selectedToken.chainIds?.[0]?.chainId),
          chainId: selectedToken.chainIds?.[0]?.chainId,
        },
      ]);
    } else {
      setSelectedToNetworksPay([]);
    }
  }, [selectedToken]);

  // Add this helper function at the top level
  const calculateTotalAmount = (networks: NetworkAllocation[]) => {
    return networks.reduce((total, network) => {
      return total + (parseFloat(network.amount) || 0);
    }, 0);
  };

  const handleUsernameCheck = useCallback(
    async (value: string) => {
      if (value && value.length > 0) {
        setUsernamecheckLoading(true);
        console.log("Validating input:", value);

        const res = await lookupUser(value, walletSdkKey);
        setUsernamecheckLoading(false);
        console.log("Lookup result:", res);

        if (res?.status === 1) {
          console.log("Setting valid user data:", res);

          setSendToUser({
            status: true,
            username: res.username || "",
            walletAddress: res.walletAddress || "",
            solanaWalletAddress: res.solanaWalletAddress || "",
            ensName: res.ens || "",
            sns: res.sns || "",
            bitcoinWalletAddress: res.bitcoinWalletAddress || "",
          });
          setAddressToSend(
            selectedToNetworksPay[0].chainId ===
              NETWORK_NAME_TO_CHAIN_ID.Bitcoin
              ? res.bitcoinWalletAddress
              : selectedToNetworksPay[0].chainId ===
                NETWORK_NAME_TO_CHAIN_ID.Solana
              ? res.solanaWalletAddress
              : res.walletAddress
          );
        } else {
          console.log("No valid user data found");
          setSendToUser({
            status: false,
            username: undefined,
            walletAddress: undefined,
            solanaWalletAddress: undefined,
            ensName: undefined,
            sns: undefined,
            bitcoinWalletAddress: undefined,
          });
          setAddressToSend(value);
        }
        setUsernamecheckLoading(false);
      }
    },
    [walletSdkKey]
  );

  // Calculate total amount
  const totalAmount = useMemo(() => {
    return calculateTotalAmount(selectedFromNetworksPay);
  }, [selectedFromNetworksPay]);

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

  // Helper to reset all state
  const resetAllState = () => {
    setRecipient("");
    setSendToUser({
      status: false,
      username: undefined,
      walletAddress: undefined,
      solanaWalletAddress: undefined,
      ensName: undefined,
      sns: undefined,
      bitcoinWalletAddress: undefined,
    });
    setSelectedToken(null);
    setAmount("");
    setShowMessage(false);
    setUsernamecheckLoading(false);
    setAddressToSend("");
    setTransferError(null);
    setIsTransferring(false);
    setStep("recipient");
  };

  console.log("Selected Token: ", selectedToken);

  const handleConfirm = async () => {
    if (!selectedToken || !amount || !recipient || !sendToUser) {
      console.error("Missing required fields:", {
        selectedToken,
        amount,
        recipient,
        sendToUser,
      });
      return;
    }

    setIsTransferring(true);
    setTransferError(null);

    try {
      // Convert amount to smallest unit based on token decimals
      const inputAmount = ethers
        .parseUnits(amount, selectedToken.decimals || 6)
        .toString();

      // Get the actual balance from the chainIds array
      const availableBalance = selectedToken.balance || "0";

      // Validate balance
      if (BigInt(availableBalance) < BigInt(inputAmount)) {
        throw new Error(
          `Insufficient balance. Required: ${inputAmount}, Available: ${availableBalance}`
        );
      }

      let response;

      // Handle Bitcoin transfers differently
      if (selectedToken.symbol === "BTC") {
        const btcTransferParams = {
          username: username,
          inputAmount: inputAmount,
          recipient: selectedToken?.chainIds?.find(
            (chain) => chain.chainId === NETWORK_NAME_TO_CHAIN_ID.Bitcoin
          )
            ? (sendToUser.bitcoinWalletAddress as string)
            : selectedToNetworksPay[0].chainId ===
              NETWORK_NAME_TO_CHAIN_ID.Solana
            ? (sendToUser.solanaWalletAddress as string)
            : (sendToUser.walletAddress as string),
          outputChainId: selectedToNetworksPay[0].chainId,
          metadata: {
            token: {
              tokenSymbol: selectedToken.symbol,
              tokenName: selectedToken.name,
              decimals: selectedToken.decimals,
              logoURI: selectedToken.logoURI,
            },
            receiver: {
              username: sendToUser.username || "",
              walletAddress: sendToUser.walletAddress || "",
              solanaWalletAddress: sendToUser.solanaWalletAddress || "",
              ensName: sendToUser.ensName || "",
              sns: sendToUser.sns || "",
              bitcoinWalletAddress: sendToUser.bitcoinWalletAddress || "",
            },
          },
        };

        response = await executeBitcoinTransfer(
          btcTransferParams,
          walletSdkKey
        );
      } else {
        // Handle other token transfers
        if (!selectedToNetworksPay) {
          throw new Error(
            "No available balance found for the selected token and network"
          );
        }

        // Structure the userBalance data correctly
        const userBalance = proActive
          ? selectedFromNetworksPay.map((network) => ({
              chainId: network.chainId,
              address: selectedToken.chainIds?.find(
                (chain) => chain.chainId === network.chainId
              )?.address,
              balance: ethers
                .parseUnits(network.amount, selectedToken.decimals || 6)
                .toString(),
            }))
          : selectedToken.chainIds?.map((chain: any) => ({
              chainId: chain.chainId,
              address: chain.address,
              balance: chain.balance,
              decimals: selectedToken.decimals || 6,
              symbol: selectedToken.symbol,
            })) || [];

        const transferParams = {
          username: username,
          inputAmount,
          outputToken: selectedToken.chainIds?.find(
            (chain) => chain.chainId === selectedToNetworksPay[0].chainId
          )?.address,
          outputDecimals: selectedToken.decimals || 6,
          outputChainId: selectedToNetworksPay[0].chainId,
          recipient: selectedToken?.chainIds?.find(
            (chain) => chain.chainId === NETWORK_NAME_TO_CHAIN_ID.Bitcoin
          )
            ? (sendToUser.bitcoinWalletAddress as string)
            : selectedToNetworksPay[0].chainId ===
              NETWORK_NAME_TO_CHAIN_ID.Solana
            ? (sendToUser.solanaWalletAddress as string)
            : (sendToUser.walletAddress as string),
          userBalance,
          metadata: {
            token: {
              tokenSymbol: selectedToken.symbol,
              tokenName: selectedToken.name,
              decimals: selectedToken.decimals,
              logoURI: selectedToken.logoURI,
            },
            receiver: {
              username: sendToUser.username || "",
              walletAddress: sendToUser.walletAddress || "",
              solanaWalletAddress: sendToUser.solanaWalletAddress || "",
              ensName: sendToUser.ensName || "",
              sns: sendToUser.sns || "",
            },
          },
          proMode: proActive,
        };

        response = await executeTransferFlow(transferParams, walletSdkKey);
      }

      if (response) {
        const txResponse = response as any;
        if (
          txResponse.transactionDetails.overallStatus === "PENDING" ||
          txResponse.transactionDetails.overallStatus === "COMPLETED"
        ) {
          setShowMessage(true);
          setTransactionId(txResponse.transactionDetails.multiTransactionId);
        } else {
          setTransferError("Something went wrong");
          setShowMessage(true);
        }
      }
    } catch (error: any) {
      console.error("Transfer error details:", {
        error,
        message: error.message,
        response: error.response?.data,
      });
      setTransferError(error.message || "Transfer failed. Please try again.");
      setShowMessage(true);
    } finally {
      setIsTransferring(false);
    }
  };

  const handleDone = () => {
    if (transferError) {
      setShowMessage(false);
      setStep("amount");
      setTransferError(null);
    } else {
      resetAllState();
      onClose();
    }
  };

  const handleBack = () => {
    resetAllState();
    onBack();
  };

  // Per-step back handlers
  const handleBackFromConfirm = () => {
    setStep("amount");
  };

  const handleBackFromAllocateTokens = () => {
    setStep("selectNetworks");
  };

  const handleBackFromSelectNetworks = () => {
    setStep("amount");
  };

  const handleBackFromAmount = () => {
    setStep("recipient");
    setAmount("");
    // Optionally reset other amount-step-specific state
  };

  const handleBackFromRecipient = () => {
    resetAllState();
    onBack();
  };

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

    const chainBalance = selectedToken?.balance ?? "0";
    if (!chainBalance || chainBalance === "0") return;

    try {
      if (percentage === 100) {
        // Max - use formatUnits to get the full balance
        const formattedBalance = formatUnits(
          chainBalance,
          selectedToken?.decimals || 6
        );
        setAmount(formattedBalance);
      } else {
        // Calculate percentage using BigInt arithmetic
        const balanceBigInt = BigInt(chainBalance);
        const percentageAmount =
          (balanceBigInt * BigInt(percentage)) / BigInt(100);
        const formattedAmount = formatUnits(
          percentageAmount,
          selectedToken?.decimals || 6
        );
        setAmount(formattedAmount);
      }
    } catch (error) {
      console.error("Error calculating preset amount:", error);
    }
  };

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

  // Create memoized debounced function
  const debouncedUsernameCheck = useMemo(
    () => debounce(handleUsernameCheck, 500),
    [handleUsernameCheck]
  );

  if (showActivity) {
    return (
      <ActivityDetails
        apiKey={walletSdkKey}
        onBack={handleBack}
        activityId={transactionId || ""}
      />
    );
  }

  if (showSelectToNetworks) {
    return (
      <SelectSingleNetwork
        availableNetworks={availableNetworks}
        selectedToNetworksPay={selectedToNetworksPay}
        setSelectedToNetworksPay={setSelectedToNetworksPay}
        toToken={selectedToken}
        onBack={() => setShowSelectToNetworks(false)}
        onDone={() => {
          setShowSelectToNetworks(false);
        }}
      />
    );
  }

  if (showMessage) {
    return (
      <MessagePopup
        handleDone={handleDone}
        type={transferError ? "error" : "success"}
        transactionClick={handleTransactionClick}
        customContent={
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              justifyContent: "center",
              maxWidth: 400,
              gap: 24,
            }}
          >
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              <h1
                style={{ fontSize: 22, fontWeight: 700, textAlign: "center" }}
              >
                {transferError ? "Something went wrong" : "Sent!"}
              </h1>
              {!transferError ? (
                <p
                  style={{
                    textAlign: "center",
                    color: "#535862",
                    fontSize: 15,
                  }}
                >
                  Your tokens were successfully sent to{" "}
                  {sendToUser.username || recipient}
                  <br />(
                  <span style={{ fontFamily: "monospace" }}>
                    {addressToSend
                      ? selectedToNetworksPay[0].chainId ===
                        NETWORK_NAME_TO_CHAIN_ID.Solana
                        ? `${sendToUser.solanaWalletAddress?.slice(
                            0,
                            6
                          )}...${sendToUser.solanaWalletAddress?.slice(-4)}`
                        : selectedToNetworksPay[0].chainId ===
                          NETWORK_NAME_TO_CHAIN_ID.Bitcoin
                        ? `${sendToUser.bitcoinWalletAddress?.slice(
                            0,
                            6
                          )}...${sendToUser.bitcoinWalletAddress?.slice(-4)}`
                        : `${sendToUser.walletAddress?.slice(
                            0,
                            6
                          )}...${sendToUser.walletAddress?.slice(-4)}`
                      : "Transaction completed"}
                  </span>
                  )
                </p>
              ) : (
                <p
                  style={{
                    textAlign: "center",
                    color: "#535862",
                    fontSize: 15,
                  }}
                >
                  We couldn't complete your transaction at the moment. This
                  might be due to network issues, insufficient liquidity, or a
                  failed quote.
                </p>
              )}
            </div>
          </div>
        }
      />
    );
  }

  if (step === "selectNetworks" && selectedToken) {
    if (proActive) {
      return (
        <SelectNetwork
          type="TRANSFER"
          availableNetworks={availableNetworks}
          selectedNetworksPay={selectedFromNetworksPay.map((network) => ({
            name: network.name,
            chainId: NETWORK_NAME_TO_CHAIN_ID[network.name],
            amount: "0",
          }))}
          setSelectedNetworksPay={(networks) => {
            setSelectedFromNetworksPay(
              networks.map((network) => ({
                name: network.name,
                chainId: NETWORK_NAME_TO_CHAIN_ID[network.name],
                amount: network.amount || "0",
              }))
            );
          }}
          fromToken={selectedToken}
          onBack={handleBackFromSelectNetworks}
          onDone={(networks) => {
            setSelectedFromNetworksPay(
              networks.map((network) => ({
                name: network.name,
                chainId: NETWORK_NAME_TO_CHAIN_ID[network.name],
                amount: network.amount || "0",
              }))
            );
            setStep("amount");
          }}
        />
      );
    }
  }

  if (step === "confirm" && selectedToken) {
    return (
      <ReviewTransfer
        proActive={proActive}
        selectedToken={selectedToken}
        amount={amount}
        recipient={recipient}
        sendToUser={sendToUser}
        addressToSend={addressToSend}
        selectedToNetworksPay={selectedToNetworksPay}
        selectedFromNetworksPay={selectedFromNetworksPay}
        isTransferring={isTransferring}
        transferError={transferError}
        onBack={handleBackFromConfirm}
        onConfirm={handleConfirm}
      />
    );
  }

  if (step === "amount" && selectedToken) {
    return (
      <div
        style={{
          width: "100%",
          background: "#fff",
          borderRadius: 20,
          fontFamily: "Inter, sans-serif",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          paddingBottom: 24,
        }}
      >
        <div
          style={{
            display: "flex",
            alignItems: "center",
            marginBottom: 18,
            position: "relative",
            width: "100%",
          }}
        >
          <button
            onClick={handleBackFromAmount}
            style={{
              background: "none",
              border: "none",
              fontSize: 22,
              color: "#222",
              cursor: "pointer",
              position: "absolute",
              left: 0,
              fontFamily: "Inter, sans-serif",
            }}
          >
            <ArrowLeft style={{ width: 24, height: 24, color: "#717680" }} />
          </button>
          <span
            style={{
              fontWeight: 600,
              fontSize: 20,
              width: "100%",
              textAlign: "center",
              color: "#181D27",
              marginLeft: "50px",
            }}
          >
            Enter amount
          </span>
          <div style={{ marginLeft: 8, fontFamily: "Inter, sans-serif" }}>
            <button
              type="button"
              aria-pressed={proActive}
              onClick={() => setProActive((v) => !v)}
              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>
        <div style={{ width: "100%", marginBottom: 24 }}>
          <label
            style={{
              fontWeight: 600,
              fontSize: 14,
              marginBottom: 8,
              display: "block",
            }}
          >
            Recipient
          </label>
          <div
            style={{
              position: "relative",
              display: "flex",
              alignItems: "center",
              gap: 0,
              marginBottom: 8,
            }}
          >
            <input
              type="text"
              placeholder="Enter public address / ENS / username"
              value={(() => {
                const truncatedRecipient = sendToUser.username
                  ? sendToUser.username.length > 10
                    ? sendToUser.username.slice(0, 10) + "..."
                    : sendToUser.username
                  : recipient;

                if (addressToSend) {
                  let walletToShow = "";
                  if (
                    selectedToNetworksPay[0]?.chainId ===
                    NETWORK_NAME_TO_CHAIN_ID.Solana
                  ) {
                    walletToShow = sendToUser.solanaWalletAddress || "";
                  } else if (
                    selectedToNetworksPay[0]?.chainId ===
                    NETWORK_NAME_TO_CHAIN_ID.Bitcoin
                  ) {
                    walletToShow = sendToUser.bitcoinWalletAddress || "";
                  } else {
                    walletToShow = sendToUser.walletAddress || "";
                  }

                  if (walletToShow) {
                    const truncatedAddress = `(${walletToShow.slice(
                      0,
                      6
                    )}...${walletToShow.slice(-4)})`;
                    return `${truncatedRecipient} ${truncatedAddress}`;
                  }
                }

                return truncatedRecipient;
              })()}
              readOnly={true}
              style={{
                flex: 1,
                width: "100%",
                padding: recipient ? "10px 48px 10px 14px" : "10px 14px",
                borderRadius: 10,
                border: "1px solid #E0E0E0",
                backgroundColor: "white",
                fontSize: 16,
                color: "#222",
                outline: "none",
              }}
            />
            {recipient && sendToUser.status && !usernamecheckLoading && (
              <button
                style={{
                  position: "absolute",
                  right: 8,
                  top: "50%",
                  transform: "translateY(-50%)",
                  background: "#F6F8FE",
                  border: "none",
                  borderRadius: "50%",
                  width: 36,
                  height: 36,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  cursor: "pointer",
                  padding: 0,
                }}
                onClick={() => {
                  handleBackFromAmount();
                }}
              >
                <PencilLine
                  style={{ width: 18, height: 18, color: "#717680" }}
                />
              </button>
            )}
            {usernamecheckLoading && (
              <div
                style={{
                  position: "absolute",
                  right: 8,
                  top: "50%",
                  transform: "translateY(-50%)",
                  width: 36,
                  height: 36,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                <Spinner />
              </div>
            )}
          </div>
          <div style={{ marginBottom: 16 }}>
            <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>
                {selectedToNetworksPay.length > 0 ? (
                  <div
                    style={{
                      display: "flex",
                      alignItems: "center",
                      gap: 6,
                      color: "#1E1E1E",
                      fontSize: 16,
                      fontWeight: 400,
                    }}
                  >
                    <img
                      src={NETWORK_LOGO_URLS[selectedToNetworksPay[0].chainId]}
                      alt={selectedToNetworksPay[0].name}
                      style={{ width: 20, height: 20 }}
                    />
                    <span>{selectedToNetworksPay[0].name}</span>
                  </div>
                ) : (
                  "Select Networks"
                )}
              </span>
              <ChevronRight
                style={{ width: 20, height: 20, color: "#A0A4AB" }}
              />
            </button>
          </div>
        </div>

        <p
          style={{
            textAlign: "left",
            fontSize: 14,
            color: "#181D27",
            width: "100%",
            marginBottom: 8,
            fontWeight: 600,
          }}
        >
          You Pay
        </p>
        <div
          style={{
            background: proActive ? "#EBF0FF" : "transparent",
            borderRadius: 8,
            padding: 16,
            border: proActive ? "1px solid #3662E3" : "none",
            width: "100%",
          }}
        >
          {proActive && (
            <div style={{ marginBottom: 16 }}>
              {selectedFromNetworksPay.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,
                      }}
                    >
                      {selectedFromNetworksPay.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" }}>
                        {selectedFromNetworksPay.map((network, index) => (
                          <div
                            style={{
                              borderTop:
                                index === 0 ? "1px solid #D5D7DA" : "none",
                            }}
                          >
                            <NetworkAllocationDisplay
                              key={network.name}
                              network={network.name}
                              amount={network.amount}
                              symbol={selectedToken?.symbol || ""}
                            />
                          </div>
                        ))}
                      </div>
                      <div style={{ padding: "8px 16px 16px" }}>
                        <button
                          onClick={() => setStep("selectNetworks")}
                          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={() => setStep("selectNetworks")}
                  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>
          )}
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              margin: "0 0 0 0",
              width: "100%",
            }}
          >
            <input
              type="text"
              value={amount}
              onChange={(e) =>
                setAmount(
                  validateNumericInput(e.target.value, selectedToken?.decimals)
                )
              }
              onKeyDown={(e) =>
                handleNumericKeyDown(e, amount, selectedToken?.decimals)
              }
              placeholder="0.00"
              readOnly={proActive}
              style={{
                fontWeight: 700,
                fontSize: 48,
                width: "50%",
                textAlign: "right",
                border: "none",
                outline: "none",
                background: "transparent",
                color: "#181D27",
                WebkitAppearance: "none",
                MozAppearance: "textfield",
              }}
            />
            <span
              style={{
                fontWeight: 700,
                fontSize: 48,
                marginLeft: 8,
                color: "#181D27",
                width: "50%",
              }}
            >
              {selectedToken.symbol && selectedToken.symbol.length > 5
                ? `${selectedToken.symbol.slice(0, 5)}..`
                : selectedToken.symbol}
            </span>
          </div>

          {/* USD Value */}
          <div
            style={{
              textAlign: "center",
              color: "#717680",
              fontSize: 20,
              margin: "16px 0 0 0",
              width: "100%",
              fontWeight: 500,
            }}
          >
            $
            {(parseFloat(amount || "0") * (selectedToken.price || 0)).toFixed(
              2
            )}
          </div>
        </div>
        {/* Available Balance */}
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            background: "#F4F6FF",
            borderRadius: 8,
            padding: "12px 16px",
            margin: "24px 0 0 0",
            width: "100%",
          }}
        >
          <div style={{ display: "flex", flexDirection: "column" }}>
            <span style={{ color: "#535862", fontSize: 10 }}>
              Available Balance
            </span>
            <span style={{ color: "#414651", fontWeight: 600, fontSize: 16 }}>
              {(() => {
                // Get balance for the selected token
                const chainBalance = selectedToken?.balance ?? "0";
                return parseFloat(
                  formatUnits(chainBalance, selectedToken?.decimals || 6)
                ).toFixed(6);
              })()}{" "}
              {selectedToken.symbol}
            </span>
          </div>
          {!proActive && (
            <div style={{ display: "flex", gap: 4 }}>
              <button
                style={{
                  color: "#3662E3",
                  background: "white",
                  border: "1px solid #D5D7DA",
                  borderRadius: 4,
                  padding: "4px 8px",
                  fontWeight: 600,
                  fontSize: 12,
                  cursor: "pointer",
                }}
                onClick={() => handlePresetClick(25)}
              >
                25%
              </button>
              <button
                style={{
                  color: "#3662E3",
                  background: "white",
                  border: "1px solid #D5D7DA",
                  borderRadius: 4,
                  padding: "4px 8px",
                  fontWeight: 600,
                  fontSize: 12,
                  cursor: "pointer",
                }}
                onClick={() => handlePresetClick(50)}
              >
                50%
              </button>
              <button
                style={{
                  color: "#3662E3",
                  background: "white",
                  border: "1px solid #D5D7DA",
                  borderRadius: 4,
                  padding: "4px 8px",
                  fontWeight: 600,
                  fontSize: 12,
                  cursor: "pointer",
                }}
                onClick={() => handlePresetClick(100)}
              >
                Max
              </button>
            </div>
          )}
        </div>
        {/* Buttons */}
        <div style={{ display: "flex", gap: 12, width: "100%", marginTop: 32 }}>
          <button
            onClick={handleBackFromAmount}
            style={{
              flex: 1,
              border: "1px solid #D5D7DA",
              background: "#fff",
              color: "#414651",
              fontWeight: 600,
              fontSize: 16,
              borderRadius: 8,
              padding: "12px 0",
              cursor: "pointer",
            }}
          >
            Cancel
          </button>
          <button
            onClick={() => setStep("confirm")}
            style={{
              flex: 1,
              border: "none",
              background: "#4664E9",
              color: "#fff",
              fontWeight: 600,
              fontSize: 16,
              borderRadius: 8,
              padding: "12px 0",
              cursor: "pointer",
              opacity:
                !amount ||
                parseFloat(amount) <= 0 ||
                selectedToNetworksPay.length === 0 ||
                (selectedToken?.balance &&
                  ethers.parseUnits(
                    amount || "0",
                    selectedToken.decimals || 6
                  ) > BigInt(selectedToken.balance))
                  ? 0.5
                  : 1,
            }}
            disabled={Boolean(
              !amount ||
                parseFloat(amount) <= 0 ||
                selectedToNetworksPay.length === 0 ||
                (selectedToken?.balance &&
                  ethers.parseUnits(
                    amount || "0",
                    selectedToken.decimals || 6
                  ) > BigInt(selectedToken.balance))
            )}
          >
            {selectedToken?.balance &&
            ethers.parseUnits(amount || "0", selectedToken.decimals || 6) >
              BigInt(selectedToken.balance)
              ? "Insufficient Balance"
              : "Next"}
          </button>
        </div>
      </div>
    );
  }

  if (step === "recipient" && selectedToken) {
    // TODO: Replace with actual recent recipients from user data or API
    const recents: any[] = [];

    return (
      <RecipientSearch
        recipient={recipient}
        setRecipient={setRecipient}
        handleBackFromRecipient={handleBackFromRecipient}
        setStep={setStep}
        sendToUser={sendToUser}
        setSendToUser={setSendToUser}
        setAddressToSend={setAddressToSend}
        walletSdkKey={walletSdkKey}
        selectedToken={selectedToken}
      />
    );
  }

  return (
    <TokenSelector
      title="Select token to be transferred"
      tokens={tokenOptions}
      onTokenSelect={(token) => setSelectedToken(token)}
      onBack={handleBack}
      isLoading={!combinedBalance}
      apiKey={walletSdkKey}
    />
  );
};

export default TransferToken;