import { StyleSheet, View, TouchableOpacity, ScrollView } from 'react-native';
import {
  CENTER,
  QUICK_PAY_STORAGE_KEY,
  SATSPERBITCOIN,
  USDB_TOKEN_ID,
} from '../../../../constants';
import { useCallback, useEffect, useRef, useState, useMemo } from 'react';
import { useGlobalContextProvider } from '../../../../../context-store/context';
import {
  CustomKeyboardAvoidingView,
  GlobalThemeView,
  ThemeText,
} from '../../../../functions/CustomElements';
import SendTransactionFeeInfo from './components/feeInfo';
import usePaymentValidation from './functions/paymentValidation';
import decodeSendAddress from './functions/decodeSendAdress';
import { useNavigation } from '@react-navigation/native';
// import {useWebView} from '../../../../../context-store/webViewContext';
import GetThemeColors from '../../../../hooks/themeColors';
import FormattedSatText from '../../../../functions/CustomElements/satTextDisplay';
import CustomSearchInput from '../../../../functions/CustomElements/searchInput';
import FullLoadingScreen from '../../../../functions/CustomElements/loadingScreen';
import AcceptButtonSendPage from './components/acceptButton';
import NumberInputSendPage from './components/numberInput';
import SendMaxComponent from './components/sendMaxComponent';
import FormattedBalanceInput from '../../../../functions/CustomElements/formattedBalanceInput';
import { useGlobalThemeContext } from '../../../../../context-store/theme';
import { useNodeContext } from '../../../../../context-store/nodeContext';
import { useAppStatus } from '../../../../../context-store/appStatus';
import hasAlredyPaidInvoice from './functions/hasPaid';
import { keyboardGoBack } from '../../../../functions/customNavigation';
import ErrorWithPayment from './components/errorScreen';
import SwipeButtonNew from '../../../../functions/CustomElements/sliderButton';
import { crashlyticsLogReport } from '../../../../functions/crashlyticsLogs';
import {
  isSendingPayingEventEmiiter,
  SENDING_PAYMENT_EVENT_NAME,
  useSparkWallet,
} from '../../../../../context-store/sparkContext';
import { sparkPaymenWrapper } from '../../../../functions/spark/payments';
import InvoiceInfo from './components/invoiceInfo';
import formatSparkPaymentAddress from './functions/formatSparkPaymentAddress';
import SelectLRC20Token from './components/selectLRC20Token';
import ChoosePaymentMethod from './components/choosePaymentMethodContainer';
import ChooseLRC20TokenContainer from './components/chooseLRC20TokenContainer';
import { useActiveCustodyAccount } from '../../../../../context-store/activeAccount';
import formatTokensNumber from '../../../../functions/lrc20/formatTokensBalance';
import { useTranslation } from 'react-i18next';
import {
  COLORS,
  HIDDEN_OPACITY,
  INSET_WINDOW_WIDTH,
  WINDOWWIDTH,
} from '../../../../constants/theme';
import { SliderProgressAnimation } from '../../../../functions/CustomElements/sendPaymentAnimation';
import { InputTypes } from 'bitcoin-address-parser';
import CustomSettingsTopBar from '../../../../functions/CustomElements/settingsTopBar';
import { useWebView } from '../../../../../context-store/webViewContext';
import NavBarWithBalance from '../../../../functions/CustomElements/navWithBalance';
import { useGlobalInsets } from '../../../../../context-store/insetsProvider';
import EmojiQuickBar from '../../../../functions/CustomElements/emojiBar';
import { useGlobalContacts } from '../../../../../context-store/globalContacts';
import { bulkUpdateSparkTransactions } from '../../../../functions/spark/transactions';
import { useKeysContext } from '../../../../../context-store/keys';
import { useUserBalanceContext } from '../../../../../context-store/userBalanceContext';
import CustomButton from '../../../../functions/CustomElements/button';
import { useFlashnet } from '../../../../../context-store/flashnetContext';
import SwapRatesChangedState from './components/swapRatesChangedState';
import {
  dollarsToSats,
  satsToDollars,
} from '../../../../functions/spark/flashnet';
import convertTextInputValue from '../../../../functions/textInputConvertValue';
import usePaymentMethodSelection from '../../../../hooks/usePaymentMethodSelection';
import usePaymentInputDisplay from '../../../../hooks/usePaymentInputDisplay';
import normalizeLNURLAddress from '../../../../functions/lnurl/normalizeLNURLAddress';
import { publishMessage } from '../../../../functions/messaging/publishMessage';
import customUUID from '../../../../functions/customUUID';

export default function SendPaymentScreen(props) {
  console.log('CONFIRM SEND PAYMENT SCREEN');
  const navigate = useNavigation();
  const {
    btcAdress,
    fromPage,
    publishMessageFunc,
    comingFromAccept,
    enteredPaymentInfo = {},
    errorMessage,
    contactInfo,
    masterTokenInfo = {},
    selectedPaymentMethod = '',
    preSelectedPaymentMethod,
    selectedContact,
    retrivedContact,
  } = props.route.params;

  const paramsRef = useRef({
    btcAdress,
  });

  const { poolInfoRef, swapLimits, swapUSDPriceDollars } = useFlashnet();
  const { t } = useTranslation();
  const { bitcoinBalance, dollarBalanceSat, dollarBalanceToken } =
    useUserBalanceContext();
  const { sendWebViewRequest } = useWebView();
  const { currentWalletMnemoinc } = useActiveCustodyAccount();
  const { screenDimensions } = useAppStatus();
  const { accountMnemoinc, contactsPrivateKey } = useKeysContext();
  const { sparkInformation, showTokensInformation, sparkInfoRef } =
    useSparkWallet();
  const { masterInfoObject } = useGlobalContextProvider();
  const { liquidNodeInformation, fiatStats } = useNodeContext();

  const { globalContactsInformation } = useGlobalContacts();
  const { theme, darkModeType } = useGlobalThemeContext();
  const { textColor, backgroundOffset, backgroundColor } = GetThemeColors();
  const { bottomPadding } = useGlobalInsets();
  const [rerenderInput, setRerenderInput] = useState(0);
  const useAltLayout = screenDimensions.height < 720;
  const [isAmountFocused, setIsAmountFocused] = useState(true);
  const [showProgressAnimation, setShowProgressAnimation] = useState(false);
  const progressAnimationRef = useRef(null);
  const hasTriggeredFastPay = useRef(false);
  const convertedSendAmountRef = useRef(null);
  const determinePaymentMethodRef = useRef(null);
  const didRequireChoiceRef = useRef(false);
  const uiStateRef = useRef(null);
  const primaryDisplayRef = useRef(null);
  const conversionFiatStatsRef = useRef(null);

  // Drives the SWAP_RATES_CHANGED uiState when Flashnet rate drift breaks swap viability.
  const [rateChangeDetected, setRateChangeDetected] = useState(false);
  // Captures swapUSDPriceDollars on CONFIRM_PAYMENT entry (ref = no extra re-render).
  const rateAtConfirmEntryRef = useRef(null);

  const [didSelectPaymentMethod, setDidSelectPaymentMethod] = useState(false);
  const [isDecoding, setIsDecoding] = useState(false);
  const [paymentInfo, setPaymentInfo] = useState({});

  const prevSelectedPaymentInfo = useRef({
    preSelectedPaymentMethod,
    enteredInfo: enteredPaymentInfo?.inputCurrency,
    selectedPaymentMethod,
  });

  const paymentMode =
    preSelectedPaymentMethod === 'USD' ||
    enteredPaymentInfo?.inputCurrency === 'USD' ||
    selectedPaymentMethod === 'USD'
      ? 'USD'
      : 'BTC';

  const [userSetInputDenomination, setUserSetInputDenomination] =
    useState(null);

  const inputDenomination = userSetInputDenomination
    ? userSetInputDenomination
    : paymentMode === 'USD'
    ? 'fiat'
    : masterInfoObject.userBalanceDenomination !== 'fiat'
    ? 'sats'
    : 'fiat';

  const inputDenominationRef = useRef(inputDenomination);
  const [paymentDescription, setPaymentDescription] = useState('');
  const [loadingMessage, setLoadingMessage] = useState(
    sparkInformation.didConnect
      ? t('wallet.sendPages.sendPaymentScreen.initialLoadingMessage')
      : t('wallet.sendPages.sendPaymentScreen.connectToSparkMessage'),
  );
  const [refreshDecode, setRefreshDecode] = useState(0);
  const isSendingPayment = useRef(null);
  const userPaymentMethod = selectedPaymentMethod || preSelectedPaymentMethod;
  const combinedPaymentDescription =
    paymentDescription ||
    paymentInfo?.data?.label ||
    paymentInfo?.data?.message ||
    '';

  // Payment type flags
  const isLightningPayment = paymentInfo?.paymentNetwork === 'lightning';
  const isLiquidPayment = paymentInfo?.paymentNetwork === 'liquid';
  const isBitcoinPayment = paymentInfo?.paymentNetwork === 'Bitcoin';
  const isSparkPayment = paymentInfo?.paymentNetwork === 'spark';
  const isLNURLPayment = paymentInfo?.type === InputTypes.LNURL_PAY;

  const isBTCdenominated =
    inputDenomination === 'hidden' || inputDenomination === 'sats';

  const enabledLRC20 = showTokensInformation;
  const defaultToken = enabledLRC20
    ? masterInfoObject?.defaultSpendToken || 'Bitcoin'
    : 'Bitcoin';

  const tokensObject = sparkInformation?.tokens ?? {};
  const tokensList = useMemo(() => {
    return Object.entries(tokensObject)
      .filter(token => {
        const [key, value] = token;
        return !!value?.balance;
      })
      .map(item => item[0]);
  }, [tokensObject]);

  const useFullTokensDisplay =
    (tokensList.length >= 2 ||
      (tokensList.length === 1 && !tokensList.includes(USDB_TOKEN_ID)) ||
      (masterInfoObject.enabledBTKNTokens && tokensList.length)) &&
    isSparkPayment &&
    paymentInfo?.data?.expectedToken !== USDB_TOKEN_ID &&
    !contactInfo;

  const showSendMax = !dollarBalanceSat && !bitcoinBalance;

  // finds the true min swap amount
  const min_usd_swap_amount = useMemo(() => {
    return Math.round(
      dollarsToSats(swapLimits.usd, poolInfoRef.currentPriceAInB),
    );
  }, [poolInfoRef.currentPriceAInB, swapLimits]);

  const minLNURLSatAmount = isLNURLPayment
    ? paymentInfo?.data?.minSendable / 1000
    : 0;
  const maxLNURLSatAmount = isLNURLPayment
    ? paymentInfo?.data?.maxSendable / 1000
    : 0;

  const selectedLRC20Asset = masterTokenInfo?.tokenName || defaultToken;
  const seletctedToken =
    masterTokenInfo?.details ||
    sparkInformation?.tokens?.[selectedLRC20Asset] ||
    {};
  const tokenDecimals = seletctedToken?.tokenMetadata?.decimals ?? 0;
  const tokenBalance = seletctedToken?.balance ?? 0;
  const sparkBalance = sparkInformation?.balance ?? 0;
  const isUsingLRC20 = selectedLRC20Asset?.toLowerCase() !== 'bitcoin';

  const sendingAmount = paymentInfo?.sendAmount || 0;
  const canEditAmount = paymentInfo?.canEditPayment === true;

  const paymentFee =
    (paymentInfo?.paymentFee || 0) + (paymentInfo?.supportFee || 0);
  console.log(paymentInfo, 'payment info');

  const {
    determinePaymentMethod,
    needsToChoosePaymentMethod,
    hasBothUSDAndBitcoinBalance,
  } = usePaymentMethodSelection({
    paymentInfo,
    paymentFee,
    sparkBalance,
    bitcoinBalance,
    dollarBalanceSat,
    dollarBalanceToken,
    convertedSendAmount,
    min_usd_swap_amount,
    swapLimits,
    isUsingLRC20,
    useFullTokensDisplay,
    selectedPaymentMethod: userPaymentMethod,
    didSelectPaymentMethod,
    sparkInformation,
  });

  const {
    primaryDisplay,
    secondaryDisplay,
    conversionFiatStats,
    convertSatsToDisplay,
    convertDisplayToSats,
    getNextDenomination,
    convertForToggle,
  } = usePaymentInputDisplay({
    paymentMode:
      enteredPaymentInfo?.fromContacts &&
      !enteredPaymentInfo?.payingContactsRequest
        ? paymentMode
        : determinePaymentMethod,
    inputDenomination,
    fiatStats,
    usdFiatStats: { coin: 'USD', value: swapUSDPriceDollars },
    masterInfoObject,
    isSendingPayment: isSendingPayment.current,
  });

  const displayAmount = canEditAmount
    ? sendingAmount // User is editing, so sendingAmount is in current display denomination
    : convertSatsToDisplay(sendingAmount); // Fixed from invoice, convert sats to display

  const convertedSendAmount = !isUsingLRC20
    ? canEditAmount
      ? convertDisplayToSats(sendingAmount) // User entered amount, convert to sats
      : Number(sendingAmount) // Fixed invoice amount, already in sats
    : Number(sendingAmount);

  // use stablepool info ref so the fiat amount doesnt change in between inputs leading to a false amount being sent.
  const fiatValueConvertedSendAmount = Math.round(
    satsToDollars(
      convertedSendAmount,
      enteredPaymentInfo?.stablePoolInfoRef?.currentPriceAInB ||
        poolInfoRef.currentPriceAInB,
    ).toFixed(2) * Math.pow(10, 6),
  );

  useEffect(() => {
    primaryDisplayRef.current = primaryDisplay;
  }, [primaryDisplay]);
  useEffect(() => {
    conversionFiatStatsRef.current = conversionFiatStats;
  }, [conversionFiatStats]);

  useEffect(() => {
    determinePaymentMethodRef.current = determinePaymentMethod;
  }, [determinePaymentMethod]);

  useEffect(() => {
    inputDenominationRef.current = inputDenomination;
  }, [inputDenomination]);

  useEffect(() => {
    if (needsToChoosePaymentMethod && !didRequireChoiceRef.current) {
      didRequireChoiceRef.current = true;
    }
  }, [needsToChoosePaymentMethod]);

  // Fast pay logic
  const canUseFastPay =
    sparkInformation.didConnect &&
    Object.keys(paymentInfo || {}).length > 0 &&
    masterInfoObject[QUICK_PAY_STORAGE_KEY]?.isFastPayEnabled &&
    masterInfoObject[QUICK_PAY_STORAGE_KEY]?.fastPayThresholdSats >=
      convertedSendAmount &&
    !isUsingLRC20 &&
    (!didRequireChoiceRef.current || didSelectPaymentMethod) &&
    determinePaymentMethod !== 'user-choice' &&
    convertedSendAmount >= paymentFee;

  const receiverExpectsCurrency = paymentInfo?.data?.expectedReceive || 'sats';

  // Check if user has sufficient balance
  const hasSufficientBalance = useMemo(() => {
    if (!sendingAmount) return false;
    if (isUsingLRC20) return true;
    if (!determinePaymentMethod) return false;

    const totalCost = convertedSendAmount + paymentFee;

    // Check if we need a swap and if it meets minimums
    const needsSwap =
      (determinePaymentMethod === 'USD' &&
        receiverExpectsCurrency === 'sats') ||
      (determinePaymentMethod === 'BTC' &&
        receiverExpectsCurrency === 'tokens');

    if (needsSwap) {
      if (determinePaymentMethod === 'USD') {
        // USD → BTC swap
        if (convertedSendAmount < min_usd_swap_amount) return false;
      } else {
        // BTC → USD swap
        if (convertedSendAmount < swapLimits.bitcoin) return false;
      }
    }

    if (determinePaymentMethod === 'USD') {
      return dollarBalanceSat >= totalCost;
    } else {
      return sparkBalance >= totalCost;
    }
  }, [
    sendingAmount,
    convertedSendAmount,
    paymentFee,
    determinePaymentMethod,
    paymentInfo?.data?.expectedCurrency,
    dollarBalanceSat,
    sparkBalance,
    min_usd_swap_amount,
    swapLimits.bitcoin,
    isUsingLRC20,
    receiverExpectsCurrency,
  ]);

  const uiState = useMemo(() => {
    if (canEditAmount && !isSendingPayment.current) {
      return 'EDIT_AMOUNT'; // Show number pad + description input
    }

    // Rate-change intercept: show before CHOOSE_METHOD / CONFIRM_PAYMENT so it
    // takes over the screen whenever the Flashnet rate broke swap viability.
    if (rateChangeDetected) {
      return 'SWAP_RATES_CHANGED';
    }

    if (
      (needsToChoosePaymentMethod || !didSelectPaymentMethod) &&
      !isSendingPayment.current &&
      !isBitcoinPayment &&
      !isUsingLRC20 &&
      !canUseFastPay &&
      !preSelectedPaymentMethod &&
      hasBothUSDAndBitcoinBalance
    ) {
      return 'CHOOSE_METHOD'; // Show info screen with button to select method
    }

    return 'CONFIRM_PAYMENT'; // Show swipe button
  }, [
    canEditAmount,
    rateChangeDetected,
    needsToChoosePaymentMethod,
    didSelectPaymentMethod,
    isBitcoinPayment,
    isUsingLRC20,
    canUseFastPay,
    hasBothUSDAndBitcoinBalance,
    preSelectedPaymentMethod,
  ]);
  console.log(
    needsToChoosePaymentMethod,
    didSelectPaymentMethod,
    isBitcoinPayment,
    isUsingLRC20,
    canUseFastPay,
    hasBothUSDAndBitcoinBalance,
    preSelectedPaymentMethod,
    uiState,
  );

  useEffect(() => {
    uiStateRef.current = uiState;
  }, [uiState]);

  useEffect(() => {
    if (
      prevSelectedPaymentInfo.current.preSelectedPaymentMethod !==
        preSelectedPaymentMethod ||
      prevSelectedPaymentInfo.current.enteredInfo !==
        enteredPaymentInfo?.inputCurrency ||
      prevSelectedPaymentInfo.current.selectedPaymentMethod !==
        selectedPaymentMethod
    ) {
      console.log(
        'Payment method or input currency changed, resetting payment info',
      );
      if (uiStateRef.current !== 'EDIT_AMOUNT') return;
      console.log('Resetting payment info for new selection');
      setPaymentInfo(prev => ({
        ...prev,
        sendAmount: '',
      }));
      setUserSetInputDenomination(null);
      prevSelectedPaymentInfo.current = {
        preSelectedPaymentMethod,
        enteredInfo: enteredPaymentInfo?.inputCurrency,
        selectedPaymentMethod,
      };
    }
  }, [
    preSelectedPaymentMethod,
    enteredPaymentInfo?.inputCurrency,
    selectedPaymentMethod,
  ]);

  const paymentValidation = usePaymentValidation({
    paymentInfo,
    convertedSendAmount,
    paymentFee,
    determinePaymentMethod,
    selectedPaymentMethod: userPaymentMethod,
    bitcoinBalance,
    dollarBalanceSat,
    dollarBalanceToken,
    min_usd_swap_amount,
    swapLimits,
    isUsingLRC20,
    seletctedToken,
    minLNURLSatAmount,
    maxLNURLSatAmount,
    isDecoding,
    canEditAmount,
    t,
    masterInfoObject,
    fiatStats,
    inputDenomination: primaryDisplay.denomination,
    primaryDisplay,
    conversionFiatStats,
    sparkInformation,
  });
  console.log(paymentValidation);

  const canSendPayment =
    paymentValidation.canProceed &&
    sendingAmount !== 0 &&
    uiState === 'CONFIRM_PAYMENT';

  const isUsingFastPay = canUseFastPay && canSendPayment && !canEditAmount;

  // Rate-sensitive swap path: only Flashnet swaps (USD→BTC / BTC→USDB) are affected
  // by live rate changes. Mirrors needsSwap in hasSufficientBalance / paymentValidation.
  const needsRateSwap =
    (determinePaymentMethod === 'USD' && receiverExpectsCurrency === 'sats') ||
    (determinePaymentMethod === 'BTC' && receiverExpectsCurrency === 'tokens');

  // Snapshot + detection effect.
  // Captures the rate on CONFIRM_PAYMENT entry; when a subsequent rate tick
  // breaks swap viability (convertedSendAmount shrinks, min_usd_swap_amount rises),
  // sets rateChangeDetected → transitions to SWAP_RATES_CHANGED uiState.
  // Resets completely when the user leaves the confirm flow.
  useEffect(() => {
    if (uiState === 'CONFIRM_PAYMENT') {
      // Capture rate once on entry
      if (rateAtConfirmEntryRef.current === null) {
        rateAtConfirmEntryRef.current = swapUSDPriceDollars;
      }
      // Detect drift that broke viability
      if (
        rateAtConfirmEntryRef.current !== null &&
        swapUSDPriceDollars !== rateAtConfirmEntryRef.current &&
        !paymentValidation.canProceed &&
        needsRateSwap &&
        !isSendingPayment.current
      ) {
        setRateChangeDetected(true);
      }
    } else if (uiState !== 'SWAP_RATES_CHANGED') {
      // Leaving the confirm flow entirely (EDIT / CHOOSE / back) — full reset.
      // Guard against SWAP_RATES_CHANGED so the state doesn't clear itself.
      rateAtConfirmEntryRef.current = null;
      setRateChangeDetected(false);
    }
  }, [
    uiState,
    swapUSDPriceDollars,
    paymentValidation.canProceed,
    needsRateSwap,
  ]);

  const handleRateChangedReset = useCallback(() => {
    rateAtConfirmEntryRef.current = null;
    setRateChangeDetected(false);
    if (isLNURLPayment || isSparkPayment) {
      // Full reset — mirrors hasParamsChanged effect sequence exactly
      setIsAmountFocused(true);
      setPaymentInfo({});
      isSendingPayment.current = null;
      setPaymentDescription('');
      hasTriggeredFastPay.current = false;
      didRequireChoiceRef.current = false;
      setUserSetInputDenomination(null);
      setLoadingMessage(
        sparkInformation.didConnect && sparkInformation.identityPubKey
          ? t('wallet.sendPages.sendPaymentScreen.initialLoadingMessage')
          : t('wallet.sendPages.sendPaymentScreen.connectToSparkMessage'),
      );
      setDidSelectPaymentMethod(false);
      setShowProgressAnimation(false);
      setRefreshDecode(x => x + 1);
    } else {
      navigate.goBack();
    }
  }, [
    isLNURLPayment,
    isSparkPayment,
    navigate,
    sparkInformation.didConnect,
    sparkInformation.identityPubKey,
    t,
  ]);

  const errorMessageNavigation = useCallback(
    reason => {
      navigate.navigate('ConfirmPaymentScreen', {
        btcAdress: '',
        fromPage: '',
        publishMessageFunc: null,
        comingFromAccept: null,
        enteredPaymentInfo: {},
        errorMessage:
          reason ||
          t('wallet.sendPages.sendPaymentScreen.fallbackErrorMessage'),
      });
    },
    [navigate, t],
  );

  useEffect(() => {
    const currentParams = { btcAdress };
    const prevParams = paramsRef.current;

    const hasParamsChanged =
      currentParams.btcAdress &&
      currentParams.btcAdress !== prevParams.btcAdress;

    if (hasParamsChanged) {
      setIsAmountFocused(true);
      setPaymentInfo({});
      isSendingPayment.current = null;
      setPaymentDescription('');
      hasTriggeredFastPay.current = false;
      didRequireChoiceRef.current = false;
      setLoadingMessage(
        !!sparkInformation.didConnect && !!sparkInformation.identityPubKey
          ? t('wallet.sendPages.sendPaymentScreen.initialLoadingMessage')
          : t('wallet.sendPages.sendPaymentScreen.connectToSparkMessage'),
      );
      setDidSelectPaymentMethod(false);
      setShowProgressAnimation(false);
      setRefreshDecode(x => x + 1);
      paramsRef.current = currentParams;
    }
  }, [
    btcAdress,
    sparkInformation.didConnect,
    sparkInformation.identityPubKey,
    t,
  ]);

  useEffect(() => {
    convertedSendAmountRef.current = convertedSendAmount;
  }, [convertedSendAmount]);

  useEffect(() => {
    async function decodePayment() {
      crashlyticsLogReport('Starting decode address');
      setIsDecoding(true);
      await decodeSendAddress({
        fiatStats,
        btcAdress: paramsRef.current.btcAdress,
        goBackFunction: errorMessageNavigation,
        setPaymentInfo,
        liquidNodeInformation,
        masterInfoObject: {
          ...masterInfoObject,
          userBalanceDenomination: inputDenominationRef.current,
        },
        // setWebViewArgs,
        // webViewRef,
        navigate,
        // maxZeroConf:
        //   minMaxLiquidSwapAmounts?.submarineSwapStats?.limits?.maximalZeroConf,
        comingFromAccept: enteredPaymentInfo.fromContacts,
        enteredPaymentInfo,
        setLoadingMessage,
        paymentInfo,
        fromPage,
        sparkInformation,
        seletctedToken,
        currentWalletMnemoinc,
        t,
        sendWebViewRequest,
        contactInfo,
        globalContactsInformation,
        accountMnemoinc,
        usablePaymentMethod:
          userPaymentMethod || determinePaymentMethodRef.current,
        bitcoinBalance,
        dollarBalanceSat,
        convertedSendAmount: convertedSendAmountRef.current,
        poolInfoRef,
        swapLimits,
        // usd_multiplier_coefiicent,
        min_usd_swap_amount,
        primaryDisplay: primaryDisplayRef.current,
        conversionFiatStats: conversionFiatStatsRef.current,
      });
      setIsDecoding(false);
    }

    if (!sparkInformation.didConnect || !sparkInformation.identityPubKey)
      return;
    if (isSendingPayment.current) return;

    requestAnimationFrame(() => {
      decodePayment();
    });
  }, [
    sparkInformation.didConnect,
    sparkInformation.identityPubKey,
    refreshDecode,
    // selectedPaymentMethod,
  ]);

  // Fast pay auto-trigger
  useEffect(() => {
    if (
      !isUsingFastPay ||
      hasTriggeredFastPay.current ||
      isSendingPayment.current
    )
      return;

    setShowProgressAnimation(true);

    if (progressAnimationRef.current) {
      requestAnimationFrame(() => {
        progressAnimationRef.current.startAtBeginning();
      });
    }

    const fastPayTrigger = setTimeout(() => {
      hasTriggeredFastPay.current = true;
      if (progressAnimationRef.current) {
        progressAnimationRef.current.startProgress();
      }
      sendPayment();
    }, 250);

    return () => {
      clearTimeout(fastPayTrigger);
    };
  }, [isUsingFastPay]);

  const publishMessageFuncForContact = useCallback(
    txid => {
      const UUID = customUUID();
      const sendObject = {
        amountMsat: convertedSendAmountRef.current * 1000,
        uuid: UUID,
        wasSeen: null,
        didSend: null,
        isRedeemed: null,
        description: combinedPaymentDescription || '',
        isRequest: false,
        paymentDenomination: inputDenominationRef.current || 'BTC',
        amountDollars:
          inputDenominationRef.current === 'USD'
            ? satsToDollars(
                convertedSendAmount,
                poolInfoRef.currentPriceAInB,
              ).toFixed(2)
            : null,
        ...(globalContactsInformation.myProfile?.uniqueName
          ? {
              senderProfileSnapshot: {
                uniqueName: globalContactsInformation.myProfile.uniqueName,
              },
            }
          : {}),
      };
      publishMessage({
        toPubKey: selectedContact.uuid,
        fromPubKey: globalContactsInformation.myProfile.uuid,
        data: {
          ...sendObject,
          txid,
          name:
            globalContactsInformation.myProfile?.name ||
            globalContactsInformation.myProfile?.uniqueName,
        },
        globalContactsInformation,
        selectedContact,
        isLNURLPayment: selectedContact?.isLNURL,
        privateKey: contactsPrivateKey,
        retrivedContact,
        currentTime: Date.now(),
        masterInfoObject,
      });
    },
    [
      selectedContact,
      retrivedContact,
      globalContactsInformation,
      contactsPrivateKey,
      masterInfoObject,
      combinedPaymentDescription,
    ],
  );
  const effectivePublishMessageFunc =
    paymentInfo?.publishMessageFunc ||
    publishMessageFunc ||
    (selectedContact ? publishMessageFuncForContact : null);

  const sendPayment = useCallback(async () => {
    if (!paymentValidation.isValid) {
      const error = paymentValidation.getErrorMessage(
        paymentValidation.primaryError,
      );
      navigate.navigate('ErrorScreen', { errorMessage: error });
      return;
    }

    if (isSendingPayment.current) return;

    isSendingPayment.current = true;
    setShowProgressAnimation(true);

    try {
      const formattedSparkPaymentInfo = formatSparkPaymentAddress(
        paymentInfo,
        selectedLRC20Asset?.toLowerCase() !== 'bitcoin',
      );

      const memo =
        paymentInfo.type === InputTypes.BOLT11
          ? enteredPaymentInfo?.description || combinedPaymentDescription
          : combinedPaymentDescription || enteredPaymentInfo?.description;

      const paymentObject = {
        getFee: false,
        ...formattedSparkPaymentInfo,
        isUsingLRC20,
        amountSats: isUsingLRC20
          ? paymentInfo?.sendAmount * 10 ** tokenDecimals
          : paymentInfo?.type === 'Bitcoin'
          ? convertedSendAmount + (paymentInfo?.paymentFee || 0)
          : convertedSendAmount,
        masterInfoObject,
        fee: paymentFee,
        memo,
        userBalance: sparkBalance,
        sparkInformation: sparkInfoRef.current,
        feeQuote: paymentInfo.feeQuote,
        swapPaymentQuote: paymentInfo.swapPaymentQuote,
        usingZeroAmountInvoice: paymentInfo.usingZeroAmountInvoice,
        seletctedToken: selectedLRC20Asset,
        mnemonic: currentWalletMnemoinc,
        sendWebViewRequest,
        contactInfo,
        fromMainSendScreen: true,
        usablePaymentMethod: determinePaymentMethod,
        paymentInfo,
        fiatValueConvertedSendAmount,
        poolInfoRef,
      };

      const paymentResponse = await sparkPaymenWrapper(paymentObject);

      // Handle deferred save if identityPubKey wasn't available during payment
      if (paymentResponse.shouldSave) {
        let retries = 0;
        const maxRetries = 20; // 10 seconds max wait

        while (!sparkInfoRef.current.identityPubKey && retries < maxRetries) {
          console.log('WATIINT FOR IDENTITY PUBKEY');
          await new Promise(res => setTimeout(res, 500));
          retries++;
        }

        if (sparkInfoRef.current.identityPubKey) {
          const tx = {
            ...paymentResponse.response,
            accountId: sparkInfoRef.current.identityPubKey,
          };
          await bulkUpdateSparkTransactions([tx], 'paymentWrapperTx', 0);
        } else {
          console.error('Failed to get identityPubKey after waiting');
        }

        isSendingPayingEventEmiiter.emit(SENDING_PAYMENT_EVENT_NAME, false);
      }

      if (progressAnimationRef.current) {
        progressAnimationRef.current.completeProgress();
        await new Promise(res => setTimeout(res, 600));
      }

      if (paymentResponse.didWork) {
        if (
          (fromPage === 'contacts' && paymentResponse.response?.id) ||
          fromPage === 'paylink'
        ) {
          effectivePublishMessageFunc(paymentResponse.response.id);
        }
        requestAnimationFrame(() => {
          requestAnimationFrame(() => {
            navigate.reset({
              index: 0,
              routes: [
                {
                  name: 'HomeAdmin',
                  params: {
                    screen: 'Home',
                  },
                },
                {
                  name: 'ConfirmTxPage',
                  params: {
                    transaction: paymentResponse.response,
                    lnurlAddress:
                      paymentInfo?.type === InputTypes.LNURL_PAY
                        ? normalizeLNURLAddress(paymentInfo?.data?.address)
                        : undefined,
                    blitzContactInfo: paymentInfo?.blitzContactInfo,
                  },
                },
              ],
            });
          });
        });
      } else {
        requestAnimationFrame(() => {
          requestAnimationFrame(() => {
            navigate.reset({
              index: 0,
              routes: [
                {
                  name: 'HomeAdmin',
                  params: {
                    screen: 'Home',
                  },
                },
                {
                  name: 'ConfirmTxPage',
                  params: {
                    transaction: paymentResponse.response,
                    error: paymentResponse.error,
                    lnurlAddress:
                      paymentInfo?.type === InputTypes.LNURL_PAY
                        ? normalizeLNURLAddress(paymentInfo?.data?.address)
                        : undefined,
                    blitzContactInfo: paymentInfo?.blitzContactInfo,
                  },
                },
              ],
            });
          });
        });
      }
    } catch (error) {
      console.error('Error in sendPayment:', error);
      // Reset state on error
      isSendingPayment.current = false;
      setShowProgressAnimation(false);
      // Optionally show error to user
      errorMessageNavigation(error.message);
    }
  }, [
    canSendPayment,
    paymentInfo,
    selectedLRC20Asset,
    enteredPaymentInfo,
    combinedPaymentDescription,
    isUsingLRC20,
    tokenDecimals,
    convertedSendAmount,
    masterInfoObject,
    paymentFee,
    sparkBalance,
    sparkInformation,
    currentWalletMnemoinc,
    sendWebViewRequest,
    contactInfo,
    fromPage,
    effectivePublishMessageFunc,
    navigate,
    errorMessageNavigation,
    determinePaymentMethod,
    fiatValueConvertedSendAmount,
    paymentValidation,
  ]);

  const handleSelectPaymentMethod = useCallback(
    showNextScreen => {
      setRerenderInput(prev => (prev += 1));
      if (showNextScreen) {
        if (!paymentValidation.isValid) {
          const error = paymentValidation.getErrorMessage(
            paymentValidation.primaryError,
          );
          navigate.navigate('ErrorScreen', { errorMessage: error });
          return;
        }

        setDidSelectPaymentMethod(true);
      } else {
        navigate.navigate('CustomHalfModal', {
          wantedContent: 'SelectPaymentMethod',
          selectedPaymentMethod: determinePaymentMethod,
        });
      }
    },
    [navigate, paymentValidation, determinePaymentMethod],
  );
  const handleSelectTokenPress = useCallback(() => {
    navigate.navigate('CustomHalfModal', {
      wantedContent: 'SelectLRC20Token',
    });
  }, [navigate]);

  const handleEmoji = newDescription => {
    setPaymentDescription(newDescription);
  };

  const handleDenominationToggle = () => {
    if (!isAmountFocused) return;
    if (!canEditAmount) {
      // For fixed amounts, just change the display denomination
      const nextDenom = getNextDenomination();
      setUserSetInputDenomination(nextDenom);
      // No need to convert sendingAmount - it stays in sats
      // The display will automatically update via convertSatsToDisplay
    } else {
      // For editable amounts, convert the user-entered value
      const nextDenom = getNextDenomination();
      const convertedValue = convertForToggle(
        sendingAmount,
        convertTextInputValue,
      );

      setUserSetInputDenomination(nextDenom);
      setPaymentInfo(prev => ({
        ...prev,
        sendAmount: convertedValue,
      }));
    }
  };

  const memorizedKeyboardStyle = useMemo(() => {
    return {
      paddingBottom: !isAmountFocused ? 0 : bottomPadding,
    };
  }, [isAmountFocused]);

  const sendingAsset =
    selectedLRC20Asset === 'Bitcoin'
      ? !isLightningPayment &&
        !isBitcoinPayment &&
        !(isSparkPayment && receiverExpectsCurrency === 'sats')
        ? t('constants.dollars_upper')
        : t('constants.bitcoin_upper')
      : seletctedToken?.tokenMetadata?.tokenTicker;

  if (
    (!Object.keys(paymentInfo).length && !errorMessage) ||
    !sparkInformation.didConnect
  ) {
    return (
      <GlobalThemeView useStandardWidth={true}>
        <CustomSettingsTopBar />
        <FullLoadingScreen text={loadingMessage} />
      </GlobalThemeView>
    );
  }

  if (errorMessage) {
    return <ErrorWithPayment reason={errorMessage} />;
  }

  return (
    <CustomKeyboardAvoidingView globalThemeViewStyles={memorizedKeyboardStyle}>
      <View style={styles.replacementContainer}>
        <CustomSettingsTopBar
          label={t('constants.send') + ' ' + sendingAsset}
        />
        <ScrollView contentContainerStyle={styles.balanceScrollContainer}>
          {/* Amount display */}
          {uiState !== 'SWAP_RATES_CHANGED' && (
            <TouchableOpacity
              activeOpacity={1}
              onPress={handleDenominationToggle}
            >
              <FormattedBalanceInput
                maxWidth={0.9}
                amountValue={displayAmount}
                inputDenomination={primaryDisplay.denomination}
                forceCurrency={primaryDisplay.forceCurrency}
                forceFiatStats={primaryDisplay.forceFiatStats}
                activeOpacity={!sendingAmount ? 0.5 : 1}
                customCurrencyCode={
                  isUsingLRC20 ? seletctedToken?.tokenMetadata?.tokenTicker : ''
                }
              />

              {/* Alternate denomination display */}
              {/* {isUsingLRC20 && (
          <FormattedSatText
            neverHideBalance={true}
            containerStyles={{opacity: !sendingAmount ? 0.5 : 1}}
            styles={{includeFontPadding: false, ...styles.satValue}}
            customLabel={seletctedToken?.tokenMetadata?.tokenTicker}
            useCustomLabel={true}
            balance={formatTokensNumber(
              convertedSendAmount,
              seletctedToken?.tokenMetadata?.decimals,
            )}
          />
        )} */}
              {!isUsingLRC20 && (
                <FormattedSatText
                  containerStyles={{
                    opacity: !sendingAmount ? HIDDEN_OPACITY : 1,
                  }}
                  neverHideBalance={true}
                  styles={{
                    includeFontPadding: false,
                    ...styles.satValue,
                  }}
                  globalBalanceDenomination={secondaryDisplay.denomination}
                  forceCurrency={secondaryDisplay.forceCurrency}
                  balance={convertedSendAmount}
                  forceFiatStats={secondaryDisplay.forceFiatStats}
                />
              )}
            </TouchableOpacity>
          )}

          {/* Send max button for edit mode */}
          {!useAltLayout && uiState === 'EDIT_AMOUNT' && showSendMax && (
            <SendMaxComponent
              fiatStats={fiatStats}
              sparkInformation={sparkInformation}
              paymentInfo={paymentInfo}
              setPaymentInfo={setPaymentInfo}
              masterInfoObject={masterInfoObject}
              paymentFee={paymentFee}
              paymentType={paymentInfo?.paymentNetwork}
              // minMaxLiquidSwapAmounts={minMaxLiquidSwapAmounts}
              selectedLRC20Asset={selectedLRC20Asset}
              seletctedToken={seletctedToken}
              useAltLayout={useAltLayout}
            />
          )}

          {/* Fee info for fixed amount */}
          {uiState === 'CONFIRM_PAYMENT' && (
            <SendTransactionFeeInfo
              paymentFee={paymentFee}
              isLightningPayment={isLightningPayment}
              isLiquidPayment={isLiquidPayment}
              isBitcoinPayment={isBitcoinPayment}
              isSparkPayment={isSparkPayment}
              isDecoding={isDecoding}
            />
          )}

          {/* Invoice info */}
          {uiState === 'CONFIRM_PAYMENT' && (
            <InvoiceInfo
              paymentInfo={paymentInfo}
              contactInfo={contactInfo || paymentInfo?.blitzContactInfo}
              fromPage={
                fromPage || (paymentInfo?.blitzContactInfo ? 'contacts' : '')
              }
              theme={theme}
              darkModeType={darkModeType}
            />
          )}
          {uiState === 'CHOOSE_METHOD' && (
            <ChoosePaymentMethod
              theme={theme}
              darkModeType={darkModeType}
              determinePaymentMethod={determinePaymentMethod}
              handleSelectPaymentMethod={handleSelectPaymentMethod}
              bitcoinBalance={bitcoinBalance}
              dollarBalanceToken={dollarBalanceToken}
              masterInfoObject={masterInfoObject}
              fiatStats={fiatStats}
              uiState={uiState}
              t={t}
            />
          )}

          {/* SWAP_RATES_CHANGED — rate drifted and broke swap viability */}
          {uiState === 'SWAP_RATES_CHANGED' && <SwapRatesChangedState />}
        </ScrollView>

        {/* EDIT_AMOUNT State - Show input controls */}
        {uiState === 'EDIT_AMOUNT' && (
          <>
            {/* Token selector for Spark LRC20 payments */}
            {enabledLRC20 &&
              paymentInfo.type === 'spark' &&
              canEditAmount &&
              useFullTokensDisplay && (
                <ChooseLRC20TokenContainer
                  theme={theme}
                  darkModeType={darkModeType}
                  determinePaymentMethod={determinePaymentMethod}
                  handleSelectPaymentMethod={handleSelectTokenPress}
                  bitcoinBalance={bitcoinBalance}
                  dollarBalanceToken={dollarBalanceToken}
                  masterInfoObject={masterInfoObject}
                  fiatStats={fiatStats}
                  uiState={uiState}
                  seletctedToken={seletctedToken}
                  selectedLRC20Asset={selectedLRC20Asset}
                  t={t}
                />
              )}
            {!(
              enabledLRC20 &&
              paymentInfo.type === 'spark' &&
              canEditAmount &&
              useFullTokensDisplay
            ) && (
              <ChoosePaymentMethod
                theme={theme}
                darkModeType={darkModeType}
                determinePaymentMethod={determinePaymentMethod}
                handleSelectPaymentMethod={handleSelectPaymentMethod}
                bitcoinBalance={bitcoinBalance}
                dollarBalanceToken={dollarBalanceToken}
                masterInfoObject={masterInfoObject}
                fiatStats={fiatStats}
                uiState={uiState}
                t={t}
                showBitcoinCardOnly={isBitcoinPayment}
              />
            )}
            <CustomSearchInput
              onFocusFunction={() => setIsAmountFocused(false)}
              onBlurFunction={() => setIsAmountFocused(true)}
              placeholderText={t('constants.paymentDescriptionPlaceholder')}
              setInputText={setPaymentDescription}
              inputText={combinedPaymentDescription}
              textInputMultiline={true}
              textAlignVertical={'baseline'}
              maxLength={paymentInfo?.data?.commentAllowed || 150}
              containerStyles={{
                width: INSET_WINDOW_WIDTH,
                marginTop: 10,
                maxWidth: 350,
              }}
            />

            {/* {useAltLayout && (
              <View style={styles.maxAndAcceptContainer}>
                {showSendMax && (
                  <SendMaxComponent
                    fiatStats={fiatStats}
                    sparkInformation={sparkInformation}
                    paymentInfo={paymentInfo}
                    setPaymentInfo={setPaymentInfo}
                    masterInfoObject={masterInfoObject}
                    paymentFee={paymentFee}
                    paymentType={paymentInfo?.paymentNetwork}
                    // minMaxLiquidSwapAmounts={minMaxLiquidSwapAmounts}
                    selectedLRC20Asset={selectedLRC20Asset}
                    seletctedToken={seletctedToken}
                    useAltLayout={useAltLayout}
                  />
                )}
                <AcceptButtonSendPage
                  isLiquidPayment={isLiquidPayment}
                  canSendPayment={canSendPayment}
                  decodeSendAddress={decodeSendAddress}
                  errorMessageNavigation={errorMessageNavigation}
                  btcAdress={btcAdress}
                  paymentInfo={paymentInfo}
                  convertedSendAmount={convertedSendAmount}
                  paymentDescription={paymentDescription}
                  setPaymentInfo={setPaymentInfo}
                  setLoadingMessage={setLoadingMessage}
                  fromPage={fromPage}
                  // webViewRef={webViewRef}
                  minLNURLSatAmount={minLNURLSatAmount}
                  maxLNURLSatAmount={maxLNURLSatAmount}
                  sparkInformation={sparkInformation}
                  seletctedToken={seletctedToken}
                  isLRC20Payment={isUsingLRC20}
                  useAltLayout={useAltLayout}
                  sendWebViewRequest={sendWebViewRequest}
                  globalContactsInformation={globalContactsInformation}
                  canUseFastPay={canUseFastPay}
                  selectedPaymentMethod={determinePaymentMethod}
                  bitcoinBalance={bitcoinBalance}
                  dollarBalanceSat={dollarBalanceSat}
                  needsToChoosePaymentMethod={needsToChoosePaymentMethod}
                  isDecoding={isDecoding}
                  poolInfoRef={poolInfoRef}
                  swapLimits={swapLimits}
                  // usd_multiplier_coefiicent={usd_multiplier_coefiicent}
                  min_usd_swap_amount={min_usd_swap_amount}
                  hasSufficientBalance={hasSufficientBalance}
                  inputDenomination={inputDenomination}
                  paymentValidation={paymentValidation}
                  setDidSelectPaymentMethod={setDidSelectPaymentMethod}
                />
              </View>
            )} */}

            {isAmountFocused && (
              <NumberInputSendPage
                key={`${rerenderInput}-${inputDenomination}`}
                paymentInfo={paymentInfo}
                setPaymentInfo={setPaymentInfo}
                fiatStats={conversionFiatStats}
                selectedLRC20Asset={selectedLRC20Asset}
                seletctedToken={seletctedToken}
                inputDenomination={inputDenomination}
                primaryDisplay={primaryDisplay}
              />
            )}

            {
              // !useAltLayout &&
              isAmountFocused && (
                <AcceptButtonSendPage
                  isLiquidPayment={isLiquidPayment}
                  canSendPayment={canSendPayment}
                  decodeSendAddress={decodeSendAddress}
                  errorMessageNavigation={errorMessageNavigation}
                  btcAdress={btcAdress}
                  paymentInfo={paymentInfo}
                  convertedSendAmount={convertedSendAmount}
                  paymentDescription={combinedPaymentDescription}
                  setPaymentInfo={setPaymentInfo}
                  setLoadingMessage={setLoadingMessage}
                  fromPage={fromPage}
                  // webViewRef={webViewRef}
                  minLNURLSatAmount={minLNURLSatAmount}
                  maxLNURLSatAmount={maxLNURLSatAmount}
                  sparkInformation={sparkInformation}
                  seletctedToken={seletctedToken}
                  isLRC20Payment={isUsingLRC20}
                  useAltLayout={false} //will be useAltLayout in future
                  sendWebViewRequest={sendWebViewRequest}
                  globalContactsInformation={globalContactsInformation}
                  canUseFastPay={canUseFastPay}
                  selectedPaymentMethod={determinePaymentMethod}
                  bitcoinBalance={bitcoinBalance}
                  dollarBalanceSat={dollarBalanceSat}
                  needsToChoosePaymentMethod={needsToChoosePaymentMethod}
                  isDecoding={isDecoding}
                  poolInfoRef={poolInfoRef}
                  swapLimits={swapLimits}
                  // usd_multiplier_coefiicent={usd_multiplier_coefiicent}
                  min_usd_swap_amount={min_usd_swap_amount}
                  hasSufficientBalance={hasSufficientBalance}
                  inputDenomination={inputDenomination}
                  paymentValidation={paymentValidation}
                  setDidSelectPaymentMethod={setDidSelectPaymentMethod}
                  conversionFiatStats={conversionFiatStats}
                  primaryDisplay={primaryDisplay}
                />
              )
            }
          </>
        )}

        {/* SELECT_PAYMENT method state - show button to take user to select half modal */}
        {uiState === 'CHOOSE_METHOD' && (
          <CustomButton
            buttonStyles={{
              ...CENTER,
              width: INSET_WINDOW_WIDTH,
              opacity: paymentValidation.isValid ? 1 : HIDDEN_OPACITY,
            }}
            actionFunction={() => handleSelectPaymentMethod(true)}
            textContent={t('constants.review')}
          />
        )}

        {/* SWAP_RATES_CHANGED — primary CTA to re-enter amount */}
        {uiState === 'SWAP_RATES_CHANGED' && (
          <CustomButton
            buttonStyles={{
              ...CENTER,
            }}
            actionFunction={handleRateChangedReset}
            textContent={t(
              'wallet.sendPages.sendPaymentScreen.swapRatesChangedButton',
            )}
          />
        )}

        {/* CONFIRM_PAYMENT State - Show swipe button or progress animation */}
        {uiState === 'CONFIRM_PAYMENT' && (
          <View style={styles.buttonContainer}>
            {showProgressAnimation || isUsingFastPay ? (
              <SliderProgressAnimation
                ref={progressAnimationRef}
                isVisible={showProgressAnimation || isUsingFastPay}
                textColor={COLORS.darkModeText}
                backgroundColor={
                  theme && darkModeType ? backgroundOffset : COLORS.primary
                }
                width={0.95}
              />
            ) : (
              <SwipeButtonNew
                onSwipeSuccess={sendPayment}
                width={0.85}
                resetAfterSuccessAnimDuration={true}
                // shouldAnimateViewOnSuccess={true}
                shouldResetAfterSuccess={!canSendPayment}
                // shouldDisplaySuccessState={isSendingPayment}
                containerStyles={{
                  opacity: canSendPayment ? 1 : HIDDEN_OPACITY,
                }}
                thumbIconStyles={{
                  backgroundColor:
                    theme && darkModeType ? backgroundOffset : backgroundColor,
                  borderColor:
                    theme && darkModeType ? backgroundOffset : backgroundColor,
                }}
                railStyles={{
                  backgroundColor:
                    theme && darkModeType ? backgroundOffset : backgroundColor,
                  borderColor:
                    theme && darkModeType ? backgroundOffset : backgroundColor,
                }}
              />
            )}
          </View>
        )}
      </View>

      {/* Emoji bar for description input */}
      {!isAmountFocused && uiState === 'EDIT_AMOUNT' && (
        <EmojiQuickBar
          description={combinedPaymentDescription}
          onEmojiSelect={handleEmoji}
        />
      )}
    </CustomKeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  replacementContainer: {
    flexGrow: 1,
    width: WINDOWWIDTH,
    ...CENTER,
  },
  balanceScrollContainer: {
    flexGrow: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 10,
  },
  maxAndAcceptContainer: {
    width: INSET_WINDOW_WIDTH,
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 10,
    ...CENTER,
  },
  buttonContainer: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  selectTokenText: {
    textDecorationLine: 'underline',
    paddingVertical: 10,
    textAlign: 'center',
  },
  selectMethodButton: {
    width: INSET_WINDOW_WIDTH,
    marginBottom: 20,
  },
});
