import React, { useState, useMemo, useCallback, useEffect } from "react";
import {
  ArrowLeft,
  ArrowRight,
  SquareCheck,
  ArrowDownUp,
  PencilLine,
  SendHorizontal,
  CircleAlert,
  ChevronRight,
  ChevronUp,
  ChevronDown,
} from "lucide-react";
import MessagePopup from "../MessagePopup";
import Spinner from "../Spinner";
import TokenSelector from "../TokenSelector";
import { lookupUser } from "../../services/addressValidation";
import { useCryptoBalance } from "../../context/CryptoBalanceContext";
import { executeTransferFlow } from "../../services/services";
import { formatUnits } from "ethers";
import SelectNetwork from "../SelectNetwork";
import { getNetworkName, NETWORK_LOGO_URLS } from "../utils";
import SelectSingleNetwork from "../SelectSingleNetwork";
import RecipientSearch from "./RecipientSearch";
import ReviewTransfer from "./ReviewTransfer";

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

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

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

const TOKEN_FILTER = ["ETH", "SOL", "USDC"];

// Add this mapping at the top (after TOKEN_NETWORKS)
const NETWORK_NAME_TO_CHAIN_ID: Record<string, number> = {
  Arbitrum: 42161,
  Optimism: 10,
  Base: 8453,
  Solana: 792703809,
};

// Add chain ID to explorer URL mapping
const CHAIN_ID_TO_EXPLORER: Record<number, string> = {
  42161: "https://arbiscan.io/tx/", // Arbitrum
  10: "https://optimistic.etherscan.io/tx/", // Optimism
  8453: "https://basescan.org/tx/", // Base
  792703809: "https://solscan.io/tx/", // Solana
  1: "https://etherscan.io/tx/", // Ethereum Mainnet
};

// 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,
  } = useCryptoBalance();

  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,
  });
  const [addressToSend, setAddressToSend] = useState("");
  const [isTransferring, setIsTransferring] = useState(false);
  const [transferError, setTransferError] = useState<string | null>(null);
  const [transactionHash, setTransactionHash] = useState<string | null>(null);
  const [transactionChainId, setTransactionChainId] = useState<number | null>(
    null
  );
  const [tokenAllocations, setTokenAllocations] = useState<{
    [network: string]: string;
  }>({});

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

  // 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([]);
      setTokenAllocations({});
    }
  }, [selectedToken]);

  const networks = [
    {
      name: "Solana",
      icon: "https://firebasestorage.googleapis.com/v0/b/enclave-wallet.appspot.com/o/wallet-sdk%2FSolana.svg?alt=media&token=1185c7a8-3837-4aed-910a-6e7f8f92c45c",
    },
    {
      name: "Arbitrum",
      icon: "https://firebasestorage.googleapis.com/v0/b/enclave-wallet.appspot.com/o/wallet-sdk%2FArbitrum.svg?alt=media&token=1185c7a8-3837-4aed-910a-6e7f8f92c45c",
    },
    {
      name: "Optimism",
      icon: "https://firebasestorage.googleapis.com/v0/b/enclave-wallet.appspot.com/o/wallet-sdk%2FOptimism.svg?alt=media&token=1185c7a8-3837-4aed-910a-6e7f8f92c45c",
    },
    {
      name: "Base",
      icon: "https://firebasestorage.googleapis.com/v0/b/enclave-wallet.appspot.com/o/wallet-sdk%2FBase.svg?alt=media&token=1185c7a8-3837-4aed-910a-6e7f8f92c45c",
    },
  ];
  // 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);
        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,
          });
          setAddressToSend(
            res.walletAddress || res.solanaWalletAddress || value
          );
        } else {
          console.log("No valid user data found");
          setSendToUser({
            status: false,
            username: undefined,
            walletAddress: undefined,
            solanaWalletAddress: undefined,
            ensName: undefined,
            sns: 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,
    });
    setSelectedToken(null);
    setAmount("");
    setShowMessage(false);
    setUsernamecheckLoading(false);
    setAddressToSend("");
    setTransactionHash(null);
    setTransactionChainId(null);
    setTransferError(null);
    setIsTransferring(false);
    setTokenAllocations({});
    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 {
      // Use the first selected network and its allocation

      if (!selectedToNetworksPay) {
        throw new Error(
          "No available balance found for the selected token and network"
        );
      }

      // Convert amount to smallest unit based on token decimals
      const inputAmount = (
        parseFloat(amount) * Math.pow(10, 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}`
        );
      }

      // 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: (
              parseFloat(network.amount) * Math.pow(10, selectedToken.decimals)
            ).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:
          selectedToNetworksPay[0].chainId === 792703809
            ? (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,
      };

      console.log(
        "Final Transfer params:",
        JSON.stringify(transferParams, null, 2)
      );

      const response = await executeTransferFlow(transferParams, walletSdkKey);

      if (response) {
        setShowMessage(true);
        // Extract transaction data from the API response
        const txResponse = response as any;

        // Look for transaction hash in transformedResults first, then fallback to other locations
        let txHash = null;
        let chainId = null;

        // Check if transformedResults exists and has transactions
        if (
          txResponse.transformedResults &&
          Array.isArray(txResponse.transformedResults) &&
          txResponse.transformedResults.length > 0
        ) {
          const firstTransaction = txResponse.transformedResults[0];
          txHash = firstTransaction.txnHash;
          chainId = firstTransaction.chainId;
        } else if (txResponse.onChainTransfer?.txHash) {
          // Fallback to onChainTransfer
          txHash = txResponse.onChainTransfer.txHash;
          chainId = txResponse.onChainTransfer.chainId;
        } else {
          // Final fallback to direct hash properties
          txHash = txResponse?.hash || txResponse?.transactionHash || null;
          chainId = selectedToNetworksPay[0].chainId; // Use the selected chain ID as fallback
        }

        setTransactionHash(txHash);
        setTransactionChainId(chainId);
      }
    } catch (error: any) {
      console.error("Transfer error details:", {
        error,
        message: error.message,
        response: error.response?.data,
      });
      setTransferError(error.message || "Transfer failed. Please try again.");
    } finally {
      setIsTransferring(false);
    }
  };

  const handleDone = () => {
    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();
  };

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

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

  if (showMessage) {
    const explorerUrl =
      transactionChainId && transactionHash
        ? (() => {
            const explorerBaseUrl = CHAIN_ID_TO_EXPLORER[transactionChainId];
            return explorerBaseUrl
              ? `${explorerBaseUrl}${transactionHash}`
              : `https://etherscan.io/tx/${transactionHash}`;
          })()
        : undefined;

    return (
      <MessagePopup
        handleDone={handleDone}
        type="success"
        transactionLink={explorerUrl}
        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" }}
              >
                Sent!
              </h1>
              <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 === 792703809
                      ? `${sendToUser.solanaWalletAddress?.slice(
                          0,
                          6
                        )}...${sendToUser.solanaWalletAddress?.slice(-4)}`
                      : `${addressToSend.slice(0, 6)}...${addressToSend.slice(
                          -4
                        )}`
                    : "Transaction completed"}
                </span>
                )
              </p>
            </div>
          </div>
        }
      />
    );
  }

  if (step === "selectNetworks" && selectedToken) {
    if (proActive) {
      return (
        <SelectNetwork
          type="TRANSFER"
          availableNetworks={networks}
          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",
              }))
            );
            setTokenAllocations(
              networks.reduce(
                (acc, network) => ({
                  ...acc,
                  [network.name]: 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",
              }))
            );
            setTokenAllocations(
              networks.reduce(
                (acc, network) => ({
                  ...acc,
                  [network.name]: 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%",
          minWidth: 430,
          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",
            }}
          >
            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={recipient}
              onChange={(e) => {
                setRecipient(e.target.value);
                refreshBalance();
                debouncedUsernameCheck(e.target.value);
              }}
              style={{
                flex: 1,
                width: "100%",
                padding: recipient ? "10px 48px 10px 14px" : "10px 14px",
                borderRadius: 10,
                border: "1px solid #E0E0E0",
                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={(e) => {
                  e.preventDefault();
                  const input =
                    e.currentTarget.parentElement?.querySelector("input");
                  if (input) {
                    input.focus();
                    input.select();
                  }
                }}
              >
                <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="number"
              value={amount}
              onChange={(e) => setAmount(e.target.value)}
              placeholder="0.00"
              readOnly={proActive}
              style={{
                fontWeight: 700,
                fontSize: 48,
                width: 160,
                textAlign: "right",
                border: "none",
                outline: "none",
                background: "transparent",
                color: "#181D27",
                WebkitAppearance: "none",
                MozAppearance: "textfield",
              }}
            />
            <span
              style={{
                fontWeight: 700,
                fontSize: 48,
                marginLeft: 8,
                color: "#181D27",
              }}
            >
              {selectedToken.symbol}
            </span>
          </div>
          {/* Swap Icon */}
          <div
            style={{
              display: "flex",
              justifyContent: "center",
              margin: "8px 0 0 0",
              width: "100%",
            }}
          >
            <button
              style={{
                background: "#F6F8FE",
                border: "none",
                borderRadius: 100,
                padding: 10,
                cursor: "pointer",
              }}
            >
              <ArrowDownUp size={24} color="#717680" />
            </button>
          </div>
          {/* USD Value */}
          <div
            style={{
              textAlign: "center",
              color: "#717680",
              fontSize: 20,
              margin: "16px 0 0 0",
              width: "100%",
              fontWeight: 500,
            }}
          >
            $
            {(
              parseFloat(amount || "0") * (selectedToken.priceUsd || 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 formatUnits(chainBalance, selectedToken?.decimals || 6);
              })()}{" "}
              {selectedToken.symbol}
            </span>
          </div>
          <button
            style={{
              color: "#3662E3",
              background: "none",
              border: "none",
              fontWeight: 600,
              fontSize: 15,
              cursor: "pointer",
              marginLeft: 8,
            }}
            onClick={() => {
              // Get balance for the selected network
              const chainBalance = selectedToken?.balance ?? "0";
              const formattedBalance =
                parseFloat(chainBalance) /
                Math.pow(10, selectedToken?.decimals || 6);
              setAmount(formattedBalance.toString());
            }}
          >
            Send All
          </button>
        </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
                  ? 0.5
                  : 1,
            }}
            disabled={
              !amount ||
              parseFloat(amount) <= 0 ||
              selectedToNetworksPay.length === 0
            }
          >
            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}
      />
    );
  }

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

export default TransferToken;