import { StyleSheet, View, TouchableOpacity, ScrollView } from 'react-native';
import { CENTER, COLORS, FONT, SIZES } from '../../constants';
import { useNavigation } from '@react-navigation/native';
import { useEffect, useMemo, useRef, useState } from 'react';
import { GlobalThemeView, ThemeText } from '../../functions/CustomElements';
import CustomButton from '../../functions/CustomElements/button';
import LottieView from 'lottie-react-native';
import FormattedSatText from '../../functions/CustomElements/satTextDisplay';
import { copyToClipboard } from '../../functions';
import GetThemeColors from '../../hooks/themeColors';
import { openComposer } from 'react-native-email-link';
import { useGlobalThemeContext } from '../../../context-store/theme';
import {
  applyErrorAnimationTheme,
  updateConfirmAnimation,
} from '../../functions/lottieViewColorTransformer';
import { useToast } from '../../../context-store/toastManager';
import { useSparkWallet } from '../../../context-store/sparkContext';
import formatTokensNumber from '../../functions/lrc20/formatTokensBalance';
import { useTranslation } from 'react-i18next';
import { useAppStatus } from '../../../context-store/appStatus';
import DropdownMenu from '../../functions/CustomElements/dropdownMenu';
import displayCorrectDenomination from '../../functions/displayCorrectDenomination';
import { useGlobalContextProvider } from '../../../context-store/context';
import { useNodeContext } from '../../../context-store/nodeContext';
import customUUID from '../../functions/customUUID';
import { useGlobalContactsInfo } from '../../../context-store/globalContacts';
import { getSingleContact } from '../../../db';
import { getCachedProfileImage } from '../../functions/cachedImage';
import { HIDDEN_OPACITY, INSET_WINDOW_WIDTH } from '../../constants/theme';
import normalizeLNURLAddress from '../../functions/lnurl/normalizeLNURLAddress';
import { isBlitzLNURLAddress } from '../../functions/lnurl';
import { canonicalizePhonePaymentAddress } from '../../functions/sendBitcoin/getPhonePaymentAddress';
import FormattedBalanceInput from '../../functions/CustomElements/formattedBalanceInput';

const confirmTxAnimation = require('../../assets/confirmTxAnimation.json');
const errorTxAnimation = require('../../assets/errorTxAnimation.json');
export default function ConfirmTxPage(props) {
  const { sparkInformation } = useSparkWallet();
  const { screenDimensions } = useAppStatus();
  const { masterInfoObject } = useGlobalContextProvider();
  const { fiatStats } = useNodeContext();
  const navigate = useNavigation();
  const { showToast } = useToast();
  const { backgroundOffset, textColor } = GetThemeColors();
  const { theme, darkModeType } = useGlobalThemeContext();
  const animationRef = useRef(null);
  const { t } = useTranslation();
  const { decodedAddedContacts } = useGlobalContactsInfo();
  const [isAddingContact, setIsAddingContact] = useState(false);
  const isLNURLAuth = props.route.params?.useLNURLAuth;
  const transaction = props.route.params?.transaction;
  const paymentInformation = transaction?.details || {};
  const hasError = props.route.params?.error || !paymentInformation;
  const lnurlAddress = normalizeLNURLAddress(props.route.params?.lnurlAddress);
  const isBlitzAddress = isBlitzLNURLAddress(lnurlAddress);
  const lnurlUsername = lnurlAddress?.split('@')[0]?.toLowerCase();
  const blitzContactInfo = props.route.params?.blitzContactInfo;
  const displayAmount = props.route.params?.displayAmount;
  // The display currency the user entered/reviewed the payment in (e.g. EUR),
  // passed from the send screens so the success amount matches what they saw.
  const paymentDisplay = props.route.params?.paymentDisplay;

  const didSucceed = !hasError || isLNURLAuth;

  const canonicalLnurl = lnurlAddress
    ? canonicalizePhonePaymentAddress(lnurlAddress)
    : null;

  const isAlreadyContact = lnurlAddress
    ? decodedAddedContacts.some(c =>
        isBlitzAddress
          ? c.uniqueName?.toLowerCase() === lnurlUsername
          : c.isLNURL &&
            (c.receiveAddress?.toLowerCase() === lnurlAddress.toLowerCase() ||
              (canonicalLnurl &&
                canonicalizePhonePaymentAddress(c.receiveAddress) ===
                  canonicalLnurl)),
      )
    : false;
  const showAddContact =
    didSucceed && !isLNURLAuth && lnurlAddress && !isAlreadyContact;

  const isAlreadyBlitzContact = blitzContactInfo
    ? decodedAddedContacts.some(c => c.uuid === blitzContactInfo.uuid)
    : false;
  const showAddBlitzContact =
    didSucceed && !isLNURLAuth && blitzContactInfo && !isAlreadyBlitzContact;

  const paymentNetwork = paymentInformation?.sendingUUID
    ? t('screens.inAccount.expandedTxPage.contactPaymentType')
    : paymentInformation?.isGift
    ? t('constants.gift')
    : transaction?.paymentType;

  const showPendingMessage = transaction?.paymentStatus === 'pending';
  const isFlashnetStablecoinPending =
    paymentInformation?.isFlashnetStablecoin &&
    transaction?.paymentStatus === 'pending';

  const paymentFee = paymentInformation?.fee;

  const errorMessage = hasError || t('errormessages.genericError');

  const amount = paymentInformation?.amount || 0;

  const isLRC20Payment = paymentInformation?.isLRC20Payment;
  const token = isLRC20Payment
    ? sparkInformation.tokens?.[paymentInformation?.LRC20Token]
    : '';

  const formattedTokensBalance = formatTokensNumber(
    amount,
    token?.tokenMetadata?.decimals,
  );

  const confirmAnimation = useMemo(() => {
    return updateConfirmAnimation(
      confirmTxAnimation,
      theme ? (darkModeType ? 'lightsOut' : 'dark') : 'light',
    );
  }, [theme, darkModeType]);

  const errorAnimation = useMemo(() => {
    return applyErrorAnimationTheme(
      errorTxAnimation,
      theme ? (darkModeType ? 'lightsOut' : 'dark') : 'light',
    );
  }, [theme, darkModeType]);

  useEffect(() => {
    animationRef.current?.play();
  }, []);

  if (isFlashnetStablecoinPending) {
    return (
      <GlobalThemeView useStandardWidth={true} styles={styles.globalConatianer}>
        <LottieView
          ref={animationRef}
          source={didSucceed ? confirmAnimation : errorAnimation}
          loop={false}
          style={{
            width: screenDimensions.width / 1.5,
            height: screenDimensions.width / 1.5,
            maxWidth: 400,
            maxHeight: 400,
          }}
        />
        <ThemeText
          styles={{ fontSize: SIZES.large, marginBottom: 10 }}
          content={t('wallet.stablecoinSend.swapInProgress')}
        />
        <ThemeText
          styles={{
            opacity: HIDDEN_OPACITY,
            width: '95%',
            maxWidth: 300,
            textAlign: 'center',
            marginBottom: 50,
            fontSize: SIZES.smedium,
          }}
          content={t('wallet.stablecoinSend.swapInProgressDescription')}
        />
        <View style={styles.paymentTable}>
          <View style={styles.paymentTableRow}>
            <ThemeText
              CustomNumberOfLines={1}
              styles={styles.labelText}
              content={t('constants.fee')}
            />
            <ThemeText
              content={displayCorrectDenomination({
                amount: paymentFee,
                masterInfoObject,
                fiatStats,
              })}
            />
          </View>
          <View style={styles.paymentTableRow}>
            <ThemeText
              CustomNumberOfLines={1}
              styles={styles.labelText}
              content={t('constants.type')}
            />
            <ThemeText
              styles={{ textTransform: 'capitalize' }}
              content={t('screens.inAccount.expandedTxPage.chainSwap', {
                context:
                  paymentInformation.destinationChain === 'lightning'
                    ? 'lightning'
                    : 'other',
              })}
            />
          </View>
        </View>

        <CustomButton
          buttonStyles={{
            width: INSET_WINDOW_WIDTH,
            backgroundColor: !theme ? COLORS.primary : COLORS.darkModeText,
            marginTop: 'auto',
            paddingHorizontal: 15,
          }}
          textStyles={{
            ...styles.buttonText,
            color: !theme ? COLORS.darkModeText : COLORS.lightModeText,
          }}
          actionFunction={() => {
            requestAnimationFrame(() => {
              requestAnimationFrame(() => {
                navigate.popToTop();
              });
            });
          }}
          textContent={t('constants.continue')}
        />
      </GlobalThemeView>
    );
  }

  if (props.route.params?.isSplitPayment && props.route.params?.isRequset) {
    return (
      <GlobalThemeView useStandardWidth={true} styles={styles.globalConatianer}>
        <LottieView
          ref={animationRef}
          source={didSucceed ? confirmAnimation : errorAnimation}
          loop={false}
          style={{
            width: screenDimensions.width / 1.5,
            height: screenDimensions.width / 1.5,
            maxWidth: 400,
            maxHeight: 400,
          }}
        />
        <ThemeText
          styles={{ fontSize: SIZES.large, marginBottom: 10 }}
          content={t('screens.inAccount.confirmTxPage.bulkSuccess')}
        />
        <CustomButton
          buttonStyles={{
            width: INSET_WINDOW_WIDTH,
            backgroundColor: !theme ? COLORS.primary : COLORS.darkModeText,
            marginTop: 'auto',
            paddingHorizontal: 15,
          }}
          textStyles={{
            ...styles.buttonText,
            color: !theme ? COLORS.darkModeText : COLORS.lightModeText,
          }}
          actionFunction={() => {
            requestAnimationFrame(() => {
              requestAnimationFrame(() => {
                navigate.popToTop();
              });
            });
          }}
          textContent={t('constants.continue')}
        />
      </GlobalThemeView>
    );
  }

  return (
    <GlobalThemeView useStandardWidth={true} styles={styles.globalConatianer}>
      <LottieView
        ref={animationRef}
        source={didSucceed ? confirmAnimation : errorAnimation}
        loop={false}
        style={{
          width: screenDimensions.width / 1.5,
          height: screenDimensions.width / 1.5,
          maxWidth: 400,
          maxHeight: 400,
        }}
      />
      {!isLNURLAuth && (
        <ThemeText
          styles={{ fontSize: SIZES.large, marginBottom: 10 }}
          content={
            !didSucceed
              ? t('screens.inAccount.confirmTxPage.failedToSend')
              : t('screens.inAccount.confirmTxPage.confirmMessage', {
                  context:
                    paymentInformation.direction?.toLowerCase() === 'outgoing'
                      ? 'sent'
                      : 'received',
                })
          }
        />
      )}

      {didSucceed && !isLNURLAuth && (
        <View style={{ marginBottom: 10 }}>
          {displayAmount && paymentDisplay ? (
            <FormattedBalanceInput
              maxWidth={0.7}
              amountValue={displayAmount}
              inputDenomination={paymentDisplay.denomination}
              forceCurrency={paymentDisplay.forceCurrency}
              forceFiatStats={paymentDisplay.forceFiatStats}
              customCurrencyCode={token?.tokenMetadata?.tokenTicker}
              maxDecimals={
                isLRC20Payment ? token?.tokenMetadata?.decimals ?? 0 : 2
              }
            />
          ) : (
            <FormattedSatText
              styles={{
                fontSize: 45,
                includeFontPadding: false,
              }}
              neverHideBalance={true}
              balance={isLRC20Payment ? formattedTokensBalance : amount}
              useCustomLabel={isLRC20Payment}
              customLabel={token?.tokenMetadata?.tokenTicker}
              useMillionDenomination={true}
              globalBalanceDenomination={
                paymentDisplay && !isLRC20Payment
                  ? paymentDisplay.denomination
                  : undefined
              }
              forceCurrency={
                paymentDisplay && !isLRC20Payment
                  ? paymentDisplay.forceCurrency
                  : null
              }
              forceFiatStats={
                paymentDisplay && !isLRC20Payment
                  ? paymentDisplay.forceFiatStats
                  : null
              }
            />
          )}
        </View>
      )}

      {isLNURLAuth && (
        <ThemeText
          styles={{
            width: '95%',
            maxWidth: 300,
            textAlign: 'center',
            marginBottom: 40,
          }}
          content={t('screens.inAccount.confirmTxPage.lnurlAuthSuccess')}
        />
      )}

      <ThemeText
        styles={{
          opacity: 0.6,
          width: '95%',
          maxWidth: 300,
          textAlign: 'center',
          marginBottom: 40,
        }}
        content={
          didSucceed
            ? ''
            : t('screens.inAccount.confirmTxPage.paymentErrorMessage')
        }
      />

      {didSucceed && !isLNURLAuth && (
        <View style={styles.paymentTable}>
          <View style={styles.paymentTableRow}>
            <ThemeText
              CustomNumberOfLines={1}
              styles={styles.labelText}
              content={t('constants.fee')}
            />
            <ThemeText
              content={displayCorrectDenomination({
                amount: paymentFee,
                masterInfoObject,
                fiatStats,
              })}
            />
          </View>
          <View style={styles.paymentTableRow}>
            <ThemeText
              CustomNumberOfLines={1}
              styles={styles.labelText}
              content={t('constants.type')}
            />
            <ThemeText
              styles={{ textTransform: 'capitalize' }}
              content={paymentNetwork}
            />
          </View>
        </View>
      )}
      {!didSucceed && !isLNURLAuth && (
        <View
          style={{
            flex: 1,
            backgroundColor: backgroundOffset,
            borderRadius: 8,
            width: '95%',
            maxWidth: 300,
            minHeight: 100,
          }}
        >
          <ScrollView contentContainerStyle={{ padding: 10 }}>
            <ThemeText content={t('errormessages.paymentError')} />
          </ScrollView>
        </View>
      )}
      {!didSucceed && !isLNURLAuth && (
        <View style={{ marginTop: 10, marginBottom: 20 }}>
          <DropdownMenu
            options={[
              {
                label: t('screens.inAccount.confirmTxPage.emailReport'),
                value: 'email',
              },
              {
                label: t('screens.inAccount.confirmTxPage.copyReport'),
                value: 'clipboard',
              },
            ]}
            selectedValue=""
            placeholder={t('screens.inAccount.confirmTxPage.sendReport')}
            onSelect={async item => {
              if (item.value === 'email') {
                try {
                  await openComposer({
                    to: 'blake@blitzwalletapp.com',
                    subject: 'Payment Failed',
                    body: String(errorMessage),
                  });
                } catch (err) {
                  console.log('Email composer error:', err);
                }
              } else if (item.value === 'clipboard') {
                copyToClipboard(String(errorMessage), showToast);
              }
            }}
            showClearIcon={false}
            showVerticalArrows={false}
            translateLabelText={false}
            customButtonStyles={{
              backgroundColor: 'transparent',
            }}
            textStyles={{
              ...CENTER,
              textDecorationLine: 'underline',
            }}
          />
        </View>
      )}

      <CustomButton
        buttonStyles={{
          width: INSET_WINDOW_WIDTH,
          backgroundColor:
            didSucceed && !theme ? COLORS.primary : COLORS.darkModeText,
          marginTop: 'auto',
          paddingHorizontal: 15,
        }}
        textStyles={{
          ...styles.buttonText,
          color:
            didSucceed && !theme ? COLORS.darkModeText : COLORS.lightModeText,
        }}
        actionFunction={() => {
          // This will go to whatever the base homsecreen is set to
          requestAnimationFrame(() => {
            requestAnimationFrame(() => {
              navigate.popToTop();
            });
          });
        }}
        textContent={t('constants.continue')}
      />

      {showAddContact && (
        <CustomButton
          textStyles={{ color: textColor }}
          buttonStyles={{
            width: INSET_WINDOW_WIDTH,
            paddingHorizontal: 15,
            backgroundColor: 'unset',
          }}
          loadingColor={textColor}
          useLoading={isAddingContact}
          disabled={isAddingContact}
          actionFunction={async () => {
            if (isAddingContact) return;
            if (isBlitzAddress) {
              setIsAddingContact(true);
              try {
                const username = lnurlAddress.split('@')[0];
                const results = await getSingleContact(username);
                if (!results.length) {
                  setIsAddingContact(false);
                  return;
                }
                const user = results[0];
                await getCachedProfileImage(user.contacts.myProfile.uuid);
                const newContact = {
                  name: user.contacts.myProfile.name || '',
                  bio: user.contacts.myProfile.bio || '',
                  uniqueName: user.contacts.myProfile.uniqueName || '',
                  uuid: user.contacts.myProfile.uuid,
                  isFavorite: false,
                  transactions: [],
                  unlookedTransactions: 0,
                  isAdded: true,
                };
                navigate.replace('ExpandedAddContactsPage', { newContact });
              } catch (_) {
                setIsAddingContact(false);
              }
            } else {
              const uuid = customUUID();
              if (!uuid) return;
              const newContact = {
                name: lnurlAddress.split('@')[0],
                bio: '',
                uniqueName: '',
                isFavorite: false,
                transactions: [],
                unlookedTransactions: 0,
                receiveAddress: lnurlAddress,
                isAdded: true,
                isLNURL: true,
                profileImage: '',
                uuid,
              };
              navigate.replace('ExpandedAddContactsPage', { newContact });
            }
          }}
          textContent={t('contacts.contactsPage.addContactButton')}
        />
      )}

      {showAddBlitzContact && (
        <CustomButton
          textStyles={{ color: textColor }}
          buttonStyles={{
            width: INSET_WINDOW_WIDTH,
            paddingHorizontal: 15,
            backgroundColor: 'unset',
          }}
          actionFunction={() => {
            const newContact = {
              name: blitzContactInfo.name || '',
              bio: blitzContactInfo.bio || '',
              uniqueName: blitzContactInfo.uniqueName || '',
              uuid: blitzContactInfo.uuid,
              isFavorite: false,
              transactions: [],
              unlookedTransactions: 0,
              isAdded: true,
            };
            navigate.replace('ExpandedAddContactsPage', { newContact });
          }}
          textContent={t('contacts.contactsPage.addContactButton')}
        />
      )}
    </GlobalThemeView>
  );
}

const styles = StyleSheet.create({
  globalConatianer: {
    flex: 1,
    alignItems: 'center',
  },
  buttonText: {
    fontFamily: FONT.Descriptoin_Regular,
  },
  paymentConfirmedMessage: {
    width: '90%',
    fontSize: SIZES.medium,

    fontFamily: FONT.Title_Regular,
    textAlign: 'center',
    marginTop: 20,
  },
  lottie: {
    width: 300, // adjust as necessary
    height: 300, // adjust as necessary
  },
  paymentTable: {
    rowGap: 20,
  },
  paymentTableRow: {
    width: '100%',
    minWidth: 200,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  labelText: {
    flexShrink: 1,
    marginRight: 5,
  },
});
