import {
  StyleSheet,
  View,
  TouchableOpacity,
  ScrollView,
  Platform,
  ActivityIndicator,
} from 'react-native';
import {
  APPROXIMATE_SYMBOL,
  CENTER,
  COLORS,
  SIZES,
  TOKEN_TICKER_MAX_LENGTH,
  USDB_TOKEN_ID,
} from '../../constants';
import { useNavigation } from '@react-navigation/native';
import { GlobalThemeView, ThemeText } from '../../functions/CustomElements';
import FormattedSatText from '../../functions/CustomElements/satTextDisplay';
import CustomButton from '../../functions/CustomElements/button';
import GetThemeColors from '../../hooks/themeColors';
import { useGlobalThemeContext } from '../../../context-store/theme';
import { useSparkWallet } from '../../../context-store/sparkContext';
import formatTokensNumber from '../../functions/lrc20/formatTokensBalance';
import { useTranslation } from 'react-i18next';
import { useGlobalInsets } from '../../../context-store/insetsProvider';
import { useAppStatus } from '../../../context-store/appStatus';
import { useToast } from '../../../context-store/toastManager';
import { formatLocalTimeShort } from '../../functions/timeFormatter';
import { useEffect, useMemo, useRef, useState } from 'react';
import CustomSearchInput from '../../functions/CustomElements/searchInput';
import {
  bulkUpdateSparkTransactions,
  getSingleSparkTransaction,
  getSwapResultTransaction,
  SPARK_TX_UPDATE_ENVENT_NAME,
  sparkTransactionsEventEmitter,
} from '../../functions/spark/transactions';
import { keyboardNavigate } from '../../functions/customNavigation';
import displayCorrectDenomination from '../../functions/displayCorrectDenomination';
import { useNodeContext } from '../../../context-store/nodeContext';
import { useGlobalContextProvider } from '../../../context-store/context';
import ContactProfileImage from '../../components/admin/homeComponents/contacts/internalComponents/profileImage';
import { useGlobalContactsInfo } from '../../../context-store/globalContacts';
import { useImageCache } from '../../../context-store/imageCache';
import { KeyboardAwareScrollView } from 'react-native-keyboard-controller';
import CustomSettingsTopBar from '../../functions/CustomElements/settingsTopBar';
import { currentPriceAinBToPriceDollars } from '../../functions/spark/flashnet';
import { formatBalanceAmount, copyToClipboard } from '../../functions';
import ThemeIcon from '../../functions/CustomElements/themeIcon';
import {
  claimSparkHodlLightningPayment,
  querySparkHodlLightningPayments,
} from '../../functions/spark';
import { useKeysContext } from '../../../context-store/keys';
import { decryptMessage } from '../../functions/messaging/encodingAndDecodingMessages';
import { useActiveCustodyAccount } from '../../../context-store/activeAccount';
import useAdaptiveButtonLayout from '../../hooks/useAdaptiveButtonLayout';
import { useNavigateToContact } from '../../components/admin/homeComponents/contacts/utils/navigateToExpandedContact';
import { INSET_WINDOW_WIDTH, WINDOWWIDTH } from '../../constants/theme';
import ProfileImageRow from '../../components/admin/homeComponents/contacts/internalComponents/profileImageRow';
import { isOrchestraSwapFailed } from '../../functions/spark/orchestraLightning';
import { openComposer } from 'react-native-email-link';
import { getRootstockSwapStatusLabel } from '../../functions/boltz/rootstock/swapProgress';
import { uses24HourClock } from 'react-native-localize';

export default function ExpandedTx(props) {
  const { decodedAddedContacts } = useGlobalContactsInfo();
  const { cache } = useImageCache();
  const { screenDimensions } = useAppStatus();
  const { sparkInformation } = useSparkWallet();
  const navigate = useNavigation();
  const { theme, darkModeType } = useGlobalThemeContext();
  const { backgroundOffset, backgroundColor } = GetThemeColors();
  const { t } = useTranslation();
  const { bottomPadding } = useGlobalInsets();
  const { fiatStats } = useNodeContext();
  const { masterInfoObject } = useGlobalContextProvider();
  const { contactsPrivateKey, publicKey: contactsPublicKey } = useKeysContext();
  const [isClaimingHtlc, setIsClaimingHtlc] = useState(false);
  const { currentWalletMnemoinc } = useActiveCustodyAccount();
  const isInitialRender = useRef(true);

  const techicalDetailsLabel = t('screens.inAccount.expandedTxPage.detailsBTN');
  const claimHTLCLabel = t('screens.inAccount.expandedTxPage.claimPayment');
  const contactSupportLabel = t(
    'screens.inAccount.expandedTxPage.contactSupport',
  );
  const viewProgressLabel = t('screens.inAccount.expandedTxPage.viewProgress');
  const { showToast } = useToast();

  const [transaction, setTransaction] = useState(
    props.route.params.transaction,
  );

  const isBulkPayment = !!transaction.details?.isBulkPayment;
  const bulkPaymentGroup = transaction.details?.bulkPaymentGroup ?? [];

  const showLNOrchestraAsFailed = isOrchestraSwapFailed(transaction);

  const isFailedPayment =
    transaction.paymentStatus === 'failed' || showLNOrchestraAsFailed;
  const isPending = transaction.paymentStatus === 'pending';

  const showViewProgress =
    isPending &&
    transaction.paymentType === 'bitcoin' &&
    !!transaction.details?.onChainTxid;

  const secondaryLabel = isFailedPayment
    ? contactSupportLabel
    : showViewProgress
    ? viewProgressLabel
    : null;

  const { shouldStack, containerProps, getLabelProps } =
    useAdaptiveButtonLayout(
      [techicalDetailsLabel, secondaryLabel].filter(Boolean),
    );

  // Contacts for ProfileImageRow — successful recipients only
  const bulkContacts = bulkPaymentGroup
    .filter(e => e.status !== 'failed')
    .map(e => ({ uuid: e.contactUUID }));
  const showSuccessActionLabel = transaction.details?.successAction;

  useEffect(() => {
    const selectedTx = props.route.params.transaction;
    const isSwap = !!selectedTx.details?.performSwaptoUSD;

    async function handleUpdate() {
      try {
        const txFromDB = isSwap
          ? await getSwapResultTransaction(selectedTx.sparkID)
          : await getSingleSparkTransaction(selectedTx.id);
        if (!txFromDB) return;

        setTransaction(prev => {
          if (prev.paymentStatus !== txFromDB.paymentStatus) {
            return txFromDB; // details already parsed
          }
          return prev;
        });
      } catch (err) {
        console.log('Error updating tx in expanded view', err.message);
      }
    }

    sparkTransactionsEventEmitter.on(SPARK_TX_UPDATE_ENVENT_NAME, handleUpdate);
    return () => {
      sparkTransactionsEventEmitter.removeListener(
        SPARK_TX_UPDATE_ENVENT_NAME,
        handleUpdate,
      );
    };
  }, []);

  const localContact = useMemo(() => {
    if (!decodedAddedContacts) return undefined;
    return decodedAddedContacts?.find(
      contact => contact.uuid === transaction.details?.sendingUUID,
    );
  }, [decodedAddedContacts, transaction.details?.sendingUUID]);

  const remoteContact = transaction?.details?.remoteContactPayment;

  const selectedContact = localContact || remoteContact;
  const sendingContactUUID = selectedContact?.uuid;

  const showConversionLine =
    transaction?.details?.showSwapLabel &&
    !!transaction?.details?.currentPriceAInB;

  const transactionPaymentType =
    isBulkPayment && !transaction.details.isGift
      ? t('screens.inAccount.expandedTxPage.splitPayment')
      : showConversionLine
      ? t('constants.swap')
      : sendingContactUUID
      ? t('screens.inAccount.expandedTxPage.contactPaymentType')
      : transaction.details.isGift
      ? t('screens.inAccount.expandedTxPage.gift')
      : transaction.paymentType;

  const isSuccessful = !isFailedPayment && !isPending;
  const paymentDate = new Date(transaction.details.time);
  const amount = transaction?.details?.amount;
  const description = transaction.details.description || '';

  // const month = paymentDate.toLocaleString('default', { month: 'short' });
  // const day = paymentDate.getDate();
  // const year = paymentDate.getFullYear();

  console.log(transaction);

  const navigateToExpandedContact = useNavigateToContact();

  const handleSave = async memoText => {
    try {
      if (memoText === transaction.details.description) return;
      // deep copy
      let newTx = JSON.parse(JSON.stringify(transaction));
      newTx.details.description = memoText;
      newTx.useTempId = true;
      newTx.id = transaction.sparkID;
      newTx.tempID = transaction.sparkID;

      await bulkUpdateSparkTransactions(
        [newTx],
        undefined,
        undefined,
        undefined,
        true,
      );

      setTransaction(newTx);
    } catch (err) {
      console.log(err);
    }
  };

  const claimHTLC = async () => {
    try {
      setIsClaimingHtlc(true);
      const decodedPreimage = decryptMessage(
        contactsPrivateKey,
        contactsPublicKey,
        transaction.details.encryptedPreimage,
      );

      const response = await claimSparkHodlLightningPayment({
        preimage: decodedPreimage,
        mnemonic: currentWalletMnemoinc,
      });
      const responseStatus = await querySparkHodlLightningPayments({
        paymentHashes: [transaction.details.paymentHash],
        mnemonic: currentWalletMnemoinc,
      });

      if (!response.didWork) throw new Error('Failed to claim preimage');
      if (response.didWork) {
        const htlcTrueStatus = responseStatus.paidPreimages;
        let newTx = JSON.parse(JSON.stringify(transaction));
        newTx.details.didClaimHTLC = true;
        newTx.details.preimage = decodedPreimage;
        newTx.id = transaction.sparkID;
        newTx.paymentStatus =
          htlcTrueStatus[0].status === 1 ? 'completed' : 'failed';
        await bulkUpdateSparkTransactions(
          [newTx],
          undefined,
          undefined,
          undefined,
          true,
        );
        setTransaction(newTx);
      }
    } catch (err) {
      console.log('Error claiming htlc in tx detials', err);

      const htlcStatus = await querySparkHodlLightningPayments({
        paymentHashes: [transaction.details.paymentHash],
        mnemonic: currentWalletMnemoinc,
      });

      if (htlcStatus.paidPreimages?.length) {
        const htlc = htlcStatus.paidPreimages[0];

        if (htlc.status === 2 || htlc.status === 1) {
          let newTx = JSON.parse(JSON.stringify(transaction));
          newTx.details.didClaimHTLC = true;
          newTx.id = transaction.sparkID;
          newTx.paymentStatus = htlc.status === 1 ? 'completed' : 'failed';

          await bulkUpdateSparkTransactions(
            [newTx],
            undefined,
            undefined,
            undefined,
            true,
          );
          setTransaction(newTx);
        } else {
          navigate.navigate('ErrorScreen', {
            errorMessage: 'Error when claiming payment.',
          });
        }
      }
    } finally {
      setIsClaimingHtlc(false);
    }
  };

  const handleContactSupport = async () => {
    const fields = [
      ['Payment ID', transaction.sparkID],
      ['Quote ID', transaction.details?.quoteId],
      ['Destination Address', transaction.details?.destinationAddress],
      ['Destination Asset', transaction.details?.destinationAsset],
      ['Destination Chain', transaction.details?.destinationChain],
      ['Preimage', transaction.details?.preimage],
      ['Address', transaction.details?.address],
      ['Bitcoin TX ID', transaction.details?.onChainTxid],
    ];
    const body = fields
      .filter(([, v]) => v)
      .map(([k, v]) => `${k}: ${v}`)
      .join('\n');

    try {
      await openComposer({
        to: 'blake@blitzwalletapp.com',
        subject: 'Failed Payment Support',
        body,
      });
    } catch {
      copyToClipboard('blake@blitzwalletapp.com', showToast, null);
    }
  };

  const isFlashnetStablecoin = !!transaction.details?.isFlashnetStablecoin;
  const isRootstockSwap = !!transaction.details?.isRootstockSwap;

  const isLRC20Payment = transaction.details.isLRC20Payment;
  const selectedToken = isLRC20Payment
    ? sparkInformation.tokens?.[transaction.details.LRC20Token]
    : '';
  const formattedTokensBalance = formatTokensNumber(
    transaction?.details?.amount,
    selectedToken?.tokenMetadata?.decimals,
  );

  const getStatusColors = () => {
    if (isPending) {
      return {
        outer: theme
          ? COLORS.expandedTxDarkModePendingOuter
          : COLORS.expandedTXLightModePendingOuter,
        inner: theme
          ? COLORS.expandedTxDarkModePendingInner
          : COLORS.expandedTXLightModePendingInner,
        text: theme
          ? COLORS.darkModeText
          : COLORS.expandedTXLightModePendingInner,
        bg: theme
          ? COLORS.expandedTxDarkModePendingInner
          : COLORS.expandedTXLightModePendingOuter,
      };
    }

    if (isFailedPayment) {
      return {
        outer: !theme ? COLORS.expandedTXLightModeFailed : backgroundOffset,
        inner: !theme ? COLORS.cancelRed : COLORS.white,
        text: !theme ? COLORS.cancelRed : COLORS.white,
        bg: !theme ? COLORS.expandedTXLightModeFailed : backgroundColor,
      };
    }

    return {
      outer: theme
        ? COLORS.expandedTXDarkModeConfirmd
        : COLORS.expandedTXLightModeConfirmd,
      inner: theme ? COLORS.darkModeText : COLORS.primary,
      text: theme ? COLORS.darkModeText : COLORS.primary,
      bg: theme
        ? COLORS.expandedTXDarkModeConfirmd
        : COLORS.expandedTXLightModeConfirmd,
    };
  };

  const statusColors = getStatusColors();

  const renderStatusIcon = () => {
    const iconColor = isPending
      ? theme
        ? COLORS.darkModeText
        : backgroundColor
      : backgroundColor;

    return (
      <ThemeIcon
        colorOverride={iconColor}
        iconName={isPending ? 'Clock' : isFailedPayment ? 'X' : 'Check'}
      />
    );
  };

  const renderPaymentStatus = () => (
    <View style={styles.paymentStatusContainer}>
      <ThemeText
        styles={{ includeFontPadding: false }}
        content={t('screens.inAccount.expandedTxPage.paymentStatus')}
      />
      <View style={[styles.statusBadge, { backgroundColor: statusColors.bg }]}>
        <ThemeText
          styles={{ ...styles.statusText, color: statusColors.text }}
          content={
            isPending
              ? t('transactionLabelText.pending')
              : isFailedPayment
              ? t('transactionLabelText.failed')
              : t('transactionLabelText.successful')
          }
        />
      </View>
    </View>
  );

  const renderInfoRow = (label, value, isLarge = false, customStyles = {}) => (
    <View style={styles.infoRow}>
      <ThemeText content={label} />

      <ThemeText
        content={value}
        CustomNumberOfLines={1}
        styles={{
          ...styles.infoValue,
          ...customStyles,
        }}
      />
    </View>
  );

  const renderLRC20TokenRow = () => {
    if (!isLRC20Payment) return null;

    return (
      <View style={styles.infoRow}>
        <ThemeText content={t('constants.token')} />
        <ThemeText
          CustomNumberOfLines={1}
          content={selectedToken?.tokenMetadata?.tokenTicker
            ?.toUpperCase()
            ?.slice(0, TOKEN_TICKER_MAX_LENGTH)}
          styles={styles.tokenText}
        />
      </View>
    );
  };

  const renderContactRow = () => {
    const brantaMerchantName = transaction.details?.brantaMerchantName;
    if (brantaMerchantName) {
      return (
        <View style={styles.contactRow}>
          <View style={[styles.profileImage, { backgroundColor }]}>
            <ContactProfileImage
              updated={undefined}
              uri={transaction.details?.brantaMerchantLogo}
              darkModeType={darkModeType}
              theme={theme}
            />
          </View>
          <ThemeText
            styles={styles.addressText}
            CustomNumberOfLines={1}
            content={brantaMerchantName}
          />
        </View>
      );
    }

    if (isBulkPayment) {
      return <ProfileImageRow contacts={bulkContacts} />;
    }

    // Single-contact payment (unchanged)
    if (!sendingContactUUID) return null;
    return (
      <TouchableOpacity
        onPress={() =>
          localContact && navigateToExpandedContact(localContact, 'expandedTx')
        }
        disabled={!localContact}
        style={styles.contactRow}
      >
        <View
          style={[
            styles.profileImage,
            {
              backgroundColor: backgroundColor,
            },
          ]}
        >
          <ContactProfileImage
            updated={cache[sendingContactUUID]?.updated}
            uri={cache[sendingContactUUID]?.localUri}
            darkModeType={darkModeType}
            theme={theme}
          />
        </View>
        <ThemeText
          styles={styles.addressText}
          CustomNumberOfLines={1}
          content={selectedContact?.name || selectedContact?.uniqueName}
        />
      </TouchableOpacity>
    );
  };

  const renderDescription = () => {
    return (
      <MemoSection initialDescription={description} onSave={handleSave} t={t} />
    );
  };

  const renderSuccessAction = () => {
    if (!showSuccessActionLabel) return null;
    const { tag, message, description, url } = showSuccessActionLabel;

    if (tag === 'url') {
      return (
        <View style={styles.successActionContainer}>
          <TouchableOpacity
            onPress={() =>
              navigate.navigate('CustomWebView', {
                webViewURL: url,
                headerText: description,
              })
            }
            style={[
              styles.descriptionContent,
              styles.successActionUrlRow,
              { backgroundColor },
            ]}
          >
            <ThemeText
              content={description}
              styles={{ flex: 1, includeFontPadding: false }}
            />
            <ThemeIcon iconName={'ExternalLink'} size={18} />
          </TouchableOpacity>
        </View>
      );
    }

    return null;
  };

  const formatTime = date => {
    const hours = date.getHours();
    const minutes = date.getMinutes().toString().padStart(2, '0');

    if (uses24HourClock()) {
      return `${hours}:${minutes}`;
    }

    const ampm = hours >= 12 ? 'PM' : 'AM';
    const formattedHours = hours % 12 === 0 ? 12 : hours % 12;
    return `${formattedHours}:${minutes} ${ampm}`;
  };

  return (
    <GlobalThemeView useStandardWidth={true} styles={styles.container}>
      <View style={styles.content}>
        {/* Header */}
        <CustomSettingsTopBar
          containerStyles={{ marginBottom: 0 }}
          shouldDismissKeyboard={true}
        />

        <KeyboardAwareScrollView
          showsVerticalScrollIndicator={false}
          contentContainerStyle={[
            styles.scrollContent,
            { paddingBottom: bottomPadding },
          ]}
          keyboardShouldPersistTaps="handled"
          bottomOffset={150}
        >
          <View
            style={[
              styles.receiptContainer,
              { backgroundColor: theme ? backgroundOffset : COLORS.white },
            ]}
          >
            {/* Status Circle */}
            <View style={[styles.statusOuterCircle, { backgroundColor }]}>
              <View
                style={[
                  styles.statusFirstCircle,
                  { backgroundColor: statusColors.outer },
                ]}
              >
                <View
                  style={[
                    styles.statusSecondCircle,
                    { backgroundColor: statusColors.inner },
                  ]}
                >
                  {renderStatusIcon()}
                </View>
              </View>
            </View>

            {/* Transaction Message */}
            <ThemeText
              styles={styles.confirmMessage}
              content={t('screens.inAccount.expandedTxPage.confirmMessage', {
                context:
                  transaction.details.direction === 'OUTGOING' ||
                  isFailedPayment
                    ? 'sent'
                    : 'received',
              })}
            />

            {/* Amount */}
            <FormattedSatText
              containerStyles={styles.amountContainer}
              neverHideBalance={true}
              styles={styles.primaryAmount}
              balance={isLRC20Payment ? formattedTokensBalance : amount}
              useCustomLabel={isLRC20Payment}
              customLabel={selectedToken?.tokenMetadata?.tokenTicker}
              useMillionDenomination={true}
            />

            {/* Secondary Amount Display */}
            {!isLRC20Payment && amount >= 1_000_000 && (
              <FormattedSatText
                containerStyles={styles.secondaryAmountContainer}
                neverHideBalance={true}
                styles={styles.secondaryAmount}
                balance={amount}
              />
            )}

            {/* Payment Status */}
            {renderPaymentStatus()}

            {/* Divider */}
            <Border screenDimensions={screenDimensions} />

            {renderContactRow()}

            {/* Transaction Details */}
            <View style={styles.detailsSection}>
              {renderInfoRow(
                t('transactionLabelText.date'),
                formatLocalTimeShort(paymentDate),
                true,
              )}

              {renderInfoRow(
                t('transactionLabelText.time'),
                formatTime(paymentDate),
                true,
              )}

              {renderInfoRow(
                t('constants.fee'),
                displayCorrectDenomination({
                  amount: transaction.details.fee || 0,
                  fiatStats,
                  masterInfoObject,
                }),
                true,
              )}

              {renderInfoRow(
                t('constants.type'),
                isFlashnetStablecoin
                  ? t('screens.inAccount.expandedTxPage.chainSwap', {
                      context:
                        transaction.details.destinationChain === 'lightning'
                          ? 'lightning'
                          : 'other',
                    })
                  : transactionPaymentType,
                true,
                {
                  textTransform:
                    !showConversionLine &&
                    !sendingContactUUID &&
                    !transaction.details.isGift
                      ? 'capitalize'
                      : 'none',
                },
              )}

              {renderLRC20TokenRow()}

              {isRootstockSwap &&
                transaction?.paymentStatus !== 'completed' &&
                renderInfoRow(
                  t('screens.inAccount.expandedTxPage.swapStatus'),
                  getRootstockSwapStatusLabel(
                    transaction.details.rootstockSwapStatus,
                  ),
                  true,
                )}

              {isFlashnetStablecoin &&
                transaction.paymentStatus !== 'completed' &&
                renderInfoRow(
                  t('wallet.stablecoinSend.swapStatus'),
                  transaction.paymentStatus,
                  true,
                  { textTransform: 'capitalize' },
                )}

              {showConversionLine &&
                renderInfoRow(
                  t('constants.rate'),
                  `${APPROXIMATE_SYMBOL} ${displayCorrectDenomination({
                    amount: formatBalanceAmount(
                      Number(
                        currentPriceAinBToPriceDollars(
                          transaction.details.currentPriceAInB,
                        ),
                      ).toFixed(2),
                      false,
                      masterInfoObject,
                    ),
                    masterInfoObject: {
                      ...masterInfoObject,
                      userBalanceDenomination: 'fiat',
                    },
                    forceCurrency: 'USD',
                    convertAmount: false,
                  })}`,
                  true,
                )}

              {isPending &&
                transaction.paymentType === 'bitcoin' &&
                renderInfoRow(
                  t('screens.inAccount.expandedTxPage.confReqired'),
                  '3',
                  true,
                )}
            </View>

            {renderSuccessAction()}

            {/* Description */}
            {renderDescription()}

            <View
              {...containerProps}
              style={[
                styles.actionContainer,
                shouldStack
                  ? styles.actionContainerStacked
                  : styles.actionContainerRow,
              ]}
            >
              <TouchableOpacity
                onPress={() => {
                  keyboardNavigate(() => {
                    navigate.navigate('TechnicalTransactionDetails', {
                      transaction: transaction,
                    });
                  });
                }}
                style={[
                  styles.button,
                  {
                    backgroundColor: theme
                      ? COLORS.darkModeText
                      : COLORS.primary,
                  },
                  shouldStack ? styles.buttonStacked : styles.buttonColumn,
                ]}
              >
                <ThemeText
                  styles={{
                    includeFontPadding: false,
                    color: theme ? COLORS.lightModeText : COLORS.darkModeText,
                  }}
                  {...getLabelProps(0)}
                  content={techicalDetailsLabel}
                />
              </TouchableOpacity>
              {isFailedPayment && (
                <TouchableOpacity
                  onPress={handleContactSupport}
                  style={[
                    styles.button,
                    {
                      backgroundColor: theme
                        ? COLORS.darkModeText
                        : COLORS.primary,
                    },
                    shouldStack ? styles.buttonStacked : styles.buttonColumn,
                  ]}
                >
                  <ThemeText
                    styles={{
                      includeFontPadding: false,
                      color: theme ? COLORS.lightModeText : COLORS.darkModeText,
                    }}
                    {...getLabelProps(1)}
                    content={contactSupportLabel}
                  />
                </TouchableOpacity>
              )}
              {showViewProgress && (
                <TouchableOpacity
                  onPress={() =>
                    navigate.navigate('CustomWebView', {
                      webViewURL: `https://mempool.space/tx/${transaction.details.onChainTxid}`,
                      headerText: viewProgressLabel,
                    })
                  }
                  style={[
                    styles.button,
                    {
                      backgroundColor: theme
                        ? COLORS.darkModeText
                        : COLORS.primary,
                    },
                    shouldStack ? styles.buttonStacked : styles.buttonColumn,
                  ]}
                >
                  <ThemeText
                    styles={{
                      includeFontPadding: false,
                      color: theme ? COLORS.lightModeText : COLORS.darkModeText,
                    }}
                    {...getLabelProps(1)}
                    content={viewProgressLabel}
                  />
                </TouchableOpacity>
              )}
            </View>

            {/* Receipt Dots */}
            <ReceiptDots screenDimensions={screenDimensions} />
          </View>
        </KeyboardAwareScrollView>
      </View>
    </GlobalThemeView>
  );
}

function Border({ screenDimensions }) {
  const { theme } = useGlobalThemeContext();
  const dotsWidth = screenDimensions.width * 0.95 - 30;
  const numDots = Math.floor(dotsWidth / 25);

  const dotElements = Array.from({ length: numDots }, (_, index) => (
    <View
      key={index}
      style={[
        styles.borderDot,
        {
          backgroundColor: theme
            ? COLORS.darkModeText
            : COLORS.lightModeBackground,
        },
      ]}
    />
  ));

  return <View style={styles.borderContainer}>{dotElements}</View>;
}

function ReceiptDots({ screenDimensions }) {
  const { backgroundColor } = GetThemeColors();
  const dotsWidth = screenDimensions.width * 0.95 - 30;
  const numDots = Math.floor(dotsWidth / 25);

  const dotElements = Array.from({ length: numDots }, (_, index) => (
    <View key={index} style={[styles.receiptDot, { backgroundColor }]} />
  ));

  return <View style={styles.receiptDotsContainer}>{dotElements}</View>;
}

const MemoSection = ({ initialDescription, onSave, t }) => {
  const { theme } = useGlobalThemeContext();
  const { backgroundColor, textColor } = GetThemeColors();
  const [isEditing, setIsEditing] = useState(false);
  const [memoText, setMemoText] = useState(initialDescription || '');
  const textInputRef = useRef(null);
  const didCancelRef = useRef(null);
  const didRunSubmit = useRef(null);

  const runSaveFunction = async () => {
    if (didRunSubmit.current) return;
    didRunSubmit.current = true;
    if (!didCancelRef.current) {
      await onSave(memoText);
    }
    requestAnimationFrame(() => {
      if (isEditing) {
        setIsEditing(false);
      }
      if (textInputRef.current?.isFocused()) {
        textInputRef.current?.blur();
      }
    });
  };

  const handleEdit = () => {
    if (isEditing) return;
    didCancelRef.current = false;
    didRunSubmit.current = false;
    setIsEditing(true);
    requestAnimationFrame(() => {
      setTimeout(() => {
        textInputRef.current?.focus();
      }, 0);
    });
  };

  const handleCancel = () => {
    didCancelRef.current = true;
    setMemoText(initialDescription || '');
    setIsEditing(false);
    textInputRef.current?.blur();
  };

  return (
    <View style={styles.descriptionContainer}>
      {/* Header with Edit Button */}
      <View style={styles.memoHeader}>
        <ThemeText
          content={t('transactionLabelText.memo')}
          styles={styles.descriptionHeader}
        />

        <TouchableOpacity
          activeOpacity={isEditing ? 1 : 0.2}
          onPress={handleEdit}
          style={styles.editButton}
        >
          <ThemeIcon
            size={20}
            colorOverride={theme ? COLORS.darkModeText : COLORS.primary}
            iconName={'SquarePen'}
          />
        </TouchableOpacity>
      </View>

      {/* Memo Input/Display */}
      {(initialDescription || isEditing) && (
        <View style={[styles.descriptionContent, { backgroundColor }]}>
          {isEditing ? (
            <CustomSearchInput
              inputText={memoText}
              setInputText={setMemoText}
              textInputRef={textInputRef}
              containerStyles={{ width: '100%', margin: 0 }}
              textAlignVertical={'top'}
              maxLength={200}
              textInputStyles={{
                paddingTop: 0,
                paddingBottom: 0,
                paddingLeft: 0,
                paddingRight: 0,
                backgroundColor: 'transparent',
                color: textColor,
              }}
              textInputMultiline={true}
              onFocusFunction={() => setIsEditing(true)}
              onBlurFunction={runSaveFunction}
            />
          ) : (
            <ScrollView
              nestedScrollEnabled={true}
              showsVerticalScrollIndicator={false}
            >
              <ThemeText content={memoText} />
            </ScrollView>
          )}
        </View>
      )}

      {/* Action Buttons (only show when editing) */}
      {isEditing && (
        <View style={styles.actionButtons}>
          <CustomButton
            buttonStyles={{
              ...styles.actionButton,
              backgroundColor: backgroundColor,
            }}
            textStyles={{
              ...styles.actionButtonText,
              color: textColor,
            }}
            actionFunction={handleCancel}
            textContent={t('constants.cancel')}
          />

          <CustomButton
            buttonStyles={{
              ...styles.actionButton,
              backgroundColor: theme ? COLORS.darkModeText : COLORS.primary,
            }}
            textStyles={{
              ...styles.actionButtonText,
              color: theme ? COLORS.lightModeText : COLORS.darkModeText,
            }}
            actionFunction={runSaveFunction}
            textContent={t('constants.save')}
          />
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingBottom: 0,
  },
  content: {
    flex: 1,
  },
  backButton: {
    marginRight: 'auto',
  },
  scrollContent: {
    width: WINDOWWIDTH,
    flexGrow: 1,
    alignItems: 'center',
    justifyContent: 'center',
    ...CENTER,
  },
  receiptContainer: {
    width: '100%',
    borderTopRightRadius: 20,
    borderTopLeftRadius: 20,
    paddingHorizontal: 20,
    paddingVertical: 15,
    paddingTop: 40,
    ...CENTER,
    alignItems: 'center',
    marginTop: 50,
    // marginBottom: 20,
  },
  statusOuterCircle: {
    width: 100,
    height: 100,
    position: 'absolute',
    top: -50,
    borderRadius: 50,
    alignItems: 'center',
    justifyContent: 'center',
  },
  statusFirstCircle: {
    width: 80,
    height: 80,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 40,
  },
  statusSecondCircle: {
    width: 60,
    height: 60,
    borderRadius: 30,
    alignItems: 'center',
    justifyContent: 'center',
  },
  contactRow: {
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 10,
    padding: 10,
    borderRadius: 8,
  },

  profileImage: {
    width: 50,
    height: 50,
    borderRadius: 25,
    alignItems: 'center',
    justifyContent: 'center',
    overflow: 'hidden',
    marginRight: 10,
  },
  addressText: {
    includeFontPadding: false,
    flexShrink: 1,
    fontSize: SIZES.large,
  },
  confirmMessage: {
    marginTop: 20,
    includeFontPadding: false,
    textAlign: 'center',
  },
  amountContainer: {
    marginTop: 8,
  },
  primaryAmount: {
    fontSize: SIZES.xxLarge,
    includeFontPadding: false,
    textAlign: 'center',
  },
  secondaryAmountContainer: {
    marginTop: 4,
  },
  secondaryAmount: {
    fontSize: SIZES.small,
    includeFontPadding: false,
    textAlign: 'center',
    opacity: 0.7,
  },
  paymentStatusContainer: {
    width: '100%',
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row',
    marginTop: 24,
  },
  statusBadge: {
    paddingVertical: 6,
    paddingHorizontal: 16,
    borderRadius: 16,
  },
  statusText: {
    includeFontPadding: false,
    fontSize: SIZES.small,
  },
  borderContainer: {
    width: '100%',
    justifyContent: 'space-between',
    flexDirection: 'row',
    marginTop: 20,
    marginBottom: 10,
  },
  borderDot: {
    width: 20,
    height: 2,
    borderRadius: 1,
  },
  detailsSection: {
    width: '100%',
    gap: 12, // Using gap for consistent spacing
  },
  infoRow: {
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  infoValue: {
    fontSize: SIZES.medium,
    marginLeft: 10,
    flexShrink: 1,
    width: '100%',
    textAlign: 'right',
  },
  infoValueLarge: {
    // fontSize: SIZES.large,
  },
  tokenText: {
    textTransform: 'uppercase',
    flex: 1,
    textAlign: 'right',
    marginLeft: 10,
  },
  descriptionContent: {
    width: '100%',
    maxHeight: 120,
    minHeight: 100,
    padding: 12,
    borderRadius: 8,
  },
  successActionContainer: {
    width: '100%',
    alignItems: 'center',
    marginTop: 20,
  },
  successActionUrlRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    minHeight: 50,
  },

  receiptDotsContainer: {
    position: 'absolute',
    bottom: Platform.OS === 'ios' ? -10 : -8,
    width: '100%',
    justifyContent: 'space-between',
    flexDirection: 'row',
  },
  receiptDot: {
    width: 20,
    height: 20,
    borderRadius: 10,
  },
  // memo
  descriptionContainer: {
    width: '100%',
    alignItems: 'center',
    marginTop: 10,
  },
  memoHeader: {
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 12,
  },
  descriptionHeader: {
    marginBottom: 0,
  },
  editButton: {
    padding: 4,
  },

  actionButtons: {
    width: '100%',
    flexDirection: 'row',
    gap: 12,
    marginTop: 12,
  },
  actionButton: {
    flex: 1,
  },

  actionButtonText: {
    fontSize: SIZES.medium,
    includeFontPadding: false,
  },

  actionContainer: {
    width: '100%',
    gap: 10,
    alignItems: 'center',
    marginVertical: 20,
  },
  actionContainerRow: {
    flexDirection: 'row',
    justifyContent: 'center',
  },
  actionContainerStacked: {
    flexDirection: 'column',
    justifyContent: 'flex-start',
  },
  button: {
    minHeight: 50,
    paddingHorizontal: 12,
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonColumn: {
    flex: 1,
  },
  buttonStacked: {
    width: '100%',
  },
  disabled: {
    opacity: 0.4,
  },
});
