water-sys/app/screens/RechargeScreen.tsx

// 支付组件
import React, { useState, useEffect, useCallback } from "react";
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  Image,
  TouchableOpacity,
  SafeAreaView,
  ActivityIndicator,
  Alert,
  TextInput,
  Linking,
  Platform,
  Clipboard,
} from "react-native";
import fontSize from "../utils/fontsizeUtils";
import widthUtils from "../utils/widthUtils";
import CircleOutlineIcon from "../components/CircleOutlineIcon";
import CloseIcon from "../components/CloseIcon";
import CheckIcon from "../components/CheckIcon";
import BackIcon from "../components/BackIcon";

// 添加导航相关导入
import { useNavigation } from "@react-navigation/native";
import { navigationRef } from "../navigation/RootNavigation";

// 添加API服务
import { payApi } from "../services/api/payApi";

interface RechargeScreenProps {
  onClose: () => void;
}

const RechargeScreen = ({ onClose }: RechargeScreenProps) => {
  const [selectedPrice, setSelectedPrice] = useState("500,000");
  const [selectedOperator, setSelectedOperator] = useState<string | null>(null);
  const [activeTab, setActiveTab] = useState(0);
  const [showBlankPage, setShowBlankPage] = useState(false);
  // 添加货币转换相关状态
  const [isConverting, setIsConverting] = useState(false);

  // 指定导航类型为any
  const navigation = useNavigation<any>();
  const [convertedAmount, setConvertedAmount] = useState<
    {
      converted_amount: number;
      item_key: string;
      original_amount: number;
    }[]
  >([]);
  const [currentCurrency, setCurrentCurrency] = useState("USD");
  const [phoneNumber, setPhoneNumber] = useState("22660962235");
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [paymentParams, setPaymentParams] = useState<{
    originalAmount: number;
    amount: number;
    currency: string;
    payment_method: string;
    selectedPriceLabel: string;
  } | null>(null);

  const handlePriceSelect = (price: string) => {
    setSelectedPrice(price);

    // 如果当前已选择了货币转换，则重新计算转换后的金额
    if (selectedOperator === "currency" && currentCurrency !== "FCFA") {
      handleCurrencyConversion(price, currentCurrency);
    }
  };

  const handleOperatorSelect = (operator: string) => {
    setSelectedOperator(operator === selectedOperator ? null : operator);

    // 如果选择了货币支付方式，立即进行货币转换
    if (operator === "currency" && operator !== selectedOperator) {
      // 触发货币转换，使用默认的USD
      handleCurrencySelect("USD");
    }
  };

  const handleBackButton = () => {
    setShowBlankPage(false);
  };

  const handleButtonClick = () => {
    if (selectedOperator) {
      // 准备支付参数，方便后续发送
      const params = {
        originalAmount: parseFloat(selectedPrice.replace(/,/g, "")),
        amount: parseFloat(selectedPrice.replace(/,/g, "")),
        currency: "FCFA",
        payment_method: "",
        selectedPriceLabel: selectedPrice + " FCFA", // 选择的充值面额
      };

      // 根据selectedOperator确定支付方式
      if (selectedOperator === "orange") {
        params.payment_method = "Orange Money";
      } else if (selectedOperator === "mtn") {
        params.payment_method = "MTN MoMo";
      } else if (selectedOperator === "balance") {
        params.payment_method = "Balance";
      } else if (selectedOperator === "currency") {
        // 当选择了货币转换时
        params.payment_method = "paypal";
        params.currency = currentCurrency; // 使用选择的货币

        // 使用转换后的金额，如果有
        if (convertedAmount.length > 0) {
          const convertedTotal = convertedAmount.find(
            (item) => item.item_key === "total_amount"
          );
          if (convertedTotal) {
            params.amount = convertedTotal.converted_amount;
          }
        }
      }

      // 保存支付参数
      setPaymentParams(params);


      setShowBlankPage(true);
    }
  };

  // 提取一个专门用于货币转换的函数
  const handleCurrencyConversion = (price: string, currency: string) => {
    setIsConverting(true);

    // 格式化金额，去除逗号
    const amount = parseFloat(price.replace(/,/g, ""));

    // 如果金额为0或无效，则不进行转换
    if (!amount || isNaN(amount)) {
      console.warn("Invalid amount for currency conversion");
      setIsConverting(false);
      return;
    }

    console.log(`Converting ${amount} FCFA to ${currency}...`);

    // 调用货币转换API
    const data = {
      from_currency: "FCFA",
      to_currency: currency,
      amounts: {
        total_amount: amount,
        domestic_shipping_fee: 0,
        shipping_fee: 0,
      },
    };

    payApi
      .convertCurrency(data)
      .then((res) => {
        if (
          res &&
          res.converted_amounts_list &&
          res.converted_amounts_list.length > 0
        ) {
          console.log("Conversion successful:", res.converted_amounts_list);
          setConvertedAmount(res.converted_amounts_list);
        } else {
          console.error("Conversion response invalid:", res);
          // 使用近似汇率作为备用
          const fallbackRate = currency === "USD" ? 580.0 : 655.96; // 1 USD = 580 FCFA, 1 EUR = 655.96 FCFA
          const convertedValue = amount / fallbackRate;

          setConvertedAmount([
            {
              converted_amount: convertedValue,
              item_key: "total_amount",
              original_amount: amount,
            },
          ]);
        }
      })
      .catch((error) => {
        console.error("Currency conversion failed:", error);

        // 使用近似汇率作为备用
        const fallbackRate = currency === "USD" ? 580.0 : 655.96;
        const convertedValue = amount / fallbackRate;

        setConvertedAmount([
          {
            converted_amount: convertedValue,
            item_key: "total_amount",
            original_amount: amount,
          },
        ]);
      })
      .finally(() => {
        setIsConverting(false);
      });
  };

  // 修改货币选择函数，调用通用的转换函数
  const handleCurrencySelect = (currency: string) => {
    setCurrentCurrency(currency);
    handleCurrencyConversion(selectedPrice, currency);
  };

  // 更新处理支付提交的函数
  const handlePaySubmit = async () => {
    if (!paymentParams) {
      return;
    }

    // 验证电话号码（添加更严格的验证）
    if (!phoneNumber || phoneNumber.length < 8) {
      Alert.alert(
        "Erreur",
        "Veuillez entrer un numéro de téléphone valide (au moins 8 chiffres)"
      );
      return;
    }

    // 显示提交中状态
    setIsSubmitting(true);

    try {
      // 准备请求数据，添加电话号码
      const rechargeData = {
        amount: paymentParams.amount,
        currency: paymentParams.currency,
        payment_method: paymentParams.payment_method,
        phone: phoneNumber, // 注意：如果后端API不支持此参数，可能需要调整
      };

      console.log("Submitting recharge request:", rechargeData);

      // 调用充值接口（使用可选链避免错误）
      const response = await payApi.initiateRecharge(rechargeData);
      if (response && response.success) {
        const paymentInfo = response.payment;

        // 检查是否有支付URL
        if (paymentInfo && paymentInfo.payment_url) {
          onClose();
          // 打开支付页面
          setTimeout(() => {
            navigation.navigate("Pay", {
              payUrl: paymentInfo.payment_url,
            });
          }, 1000);
        } else {

          Alert.alert("Succès", "Votre recharge a été traitée avec succès!", [
            { text: "OK", onPress: onClose },
          ]);
        }
      } else {
        // 处理失败情况，显示错误消息
        const errorMessage =
          response?.msg ||
          "Une erreur s'est produite lors du traitement de la recharge. Veuillez réessayer.";

        Alert.alert("Erreur", errorMessage);
      }
    } catch (error) {
      // 处理异常
      console.error("Recharge error:", error);

      let errorMessage =
        "Une erreur s'est produite lors du traitement de la recharge. Veuillez réessayer.";

      // 尝试从错误对象中提取更具体的错误信息
      if (error instanceof Error) {
        errorMessage = error.message || errorMessage;
      }

      Alert.alert("Erreur", errorMessage);
    } finally {
      // 无论成功失败，都取消提交状态
      setIsSubmitting(false);
    }
  };

  return (
    <SafeAreaView style={styles.safeArea}>
      <View
        style={showBlankPage ? styles.mainContainer1 : styles.mainContainer}
      >
        <View style={styles.header}>
          <Text style={styles.title}>Recharger</Text>
          {!showBlankPage && (
            <TouchableOpacity onPress={onClose} style={styles.closeButton}>
              <CloseIcon size={fontSize(15)} />
            </TouchableOpacity>
          )}
          {showBlankPage && (
            <TouchableOpacity
              onPress={handleBackButton}
              style={styles.backButton}
            >
              <Text style={styles.backButtonText}>
                <BackIcon size={fontSize(18)} />
              </Text>
            </TouchableOpacity>
          )}
        </View>

        {!showBlankPage ? (
          <>
            <ScrollView contentContainerStyle={styles.scrollContent}>
              <View style={styles.container2}>
                <View style={styles.amountRechargeContainer}>
                  <Text style={styles.rechargePromptTextStyle}>
                    Choisissez ou entrez le montant à recharger
                  </Text>
                </View>
              </View>

              {/* 金额选择 */}
              <View style={styles.priceGroup}>
                <View style={styles.row}>
                  <TouchableOpacity
                    style={[
                      styles.priceBoxBlue,
                      selectedPrice === "500,000"
                        ? styles.priceBoxSelected
                        : styles.priceBoxUnselected,
                    ]}
                    onPress={() => handlePriceSelect("500,000")}
                  >
                    <Text
                      style={[
                        styles.priceTextBlue,
                        selectedPrice === "500,000"
                          ? styles.priceTextSelected
                          : styles.priceTextUnselected,
                      ]}
                    >
                      500,000
                    </Text>
                    <Text
                      style={[
                        styles.currencyTextBlue,
                        selectedPrice === "500,000"
                          ? styles.currencyTextSelected
                          : styles.currencyTextUnselected,
                      ]}
                    >
                      FCFA
                    </Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={[
                      styles.priceBoxWhite,
                      selectedPrice === "1000,000"
                        ? styles.priceBoxSelected
                        : styles.priceBoxUnselected,
                    ]}
                    onPress={() => handlePriceSelect("1000,000")}
                  >
                    <Text
                      style={[
                        styles.priceText,
                        selectedPrice === "1000,000"
                          ? styles.priceTextSelected
                          : styles.priceTextUnselected,
                      ]}
                    >
                      1000,000
                    </Text>
                    <Text
                      style={[
                        styles.currencyText,
                        selectedPrice === "1000,000"
                          ? styles.currencyTextSelected
                          : styles.currencyTextUnselected,
                      ]}
                    >
                      FCFA
                    </Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={[
                      styles.priceBoxWhite,
                      selectedPrice === "2000,000"
                        ? styles.priceBoxSelected
                        : styles.priceBoxUnselected,
                    ]}
                    onPress={() => handlePriceSelect("2000,000")}
                  >
                    <Text
                      style={[
                        styles.priceText,
                        selectedPrice === "2000,000"
                          ? styles.priceTextSelected
                          : styles.priceTextUnselected,
                      ]}
                    >
                      2000,000
                    </Text>
                    <Text
                      style={[
                        styles.currencyText,
                        selectedPrice === "2000,000"
                          ? styles.currencyTextSelected
                          : styles.currencyTextUnselected,
                      ]}
                    >
                      FCFA
                    </Text>
                  </TouchableOpacity>
                </View>
                <View style={styles.row}>
                  <TouchableOpacity
                    style={[
                      styles.priceBoxWhite,
                      selectedPrice === "3000,000"
                        ? styles.priceBoxSelected
                        : styles.priceBoxUnselected,
                    ]}
                    onPress={() => handlePriceSelect("3000,000")}
                  >
                    <Text
                      style={[
                        styles.priceText,
                        selectedPrice === "3000,000"
                          ? styles.priceTextSelected
                          : styles.priceTextUnselected,
                      ]}
                    >
                      3000,000
                    </Text>
                    <Text
                      style={[
                        styles.currencyText,
                        selectedPrice === "3000,000"
                          ? styles.currencyTextSelected
                          : styles.currencyTextUnselected,
                      ]}
                    >
                      FCFA
                    </Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={[
                      styles.priceBoxWhite,
                      selectedPrice === "5000,000"
                        ? styles.priceBoxSelected
                        : styles.priceBoxUnselected,
                    ]}
                    onPress={() => handlePriceSelect("5000,000")}
                  >
                    <Text
                      style={[
                        styles.priceText,
                        selectedPrice === "5000,000"
                          ? styles.priceTextSelected
                          : styles.priceTextUnselected,
                      ]}
                    >
                      5000,000
                    </Text>
                    <Text
                      style={[
                        styles.currencyText,
                        selectedPrice === "5000,000"
                          ? styles.currencyTextSelected
                          : styles.currencyTextUnselected,
                      ]}
                    >
                      FCFA
                    </Text>
                  </TouchableOpacity>
                </View>
              </View>

              {/* 支付方式标题 */}
              <View style={styles.section}>
                <Text style={styles.subtitle}>
                  Choisissez votre mode de paiement
                </Text>
              </View>

              {/* Tab Bar */}
              <View style={styles.tabContainer}>
                <TouchableOpacity
                  style={[styles.tab, activeTab === 0 && styles.activeTab]}
                  onPress={() => setActiveTab(0)}
                >
                  <Text
                    style={[
                      styles.tabText,
                      activeTab === 0 && styles.activeTabText,
                    ]}
                  >
                    Mode de paiement
                  </Text>
                </TouchableOpacity>
                <TouchableOpacity
                  style={[styles.tab, activeTab === 1 && styles.activeTab]}
                  onPress={() => setActiveTab(1)}
                >
                  <Text
                    style={[
                      styles.tabText,
                      activeTab === 1 && styles.activeTabText,
                    ]}
                  >
                    Autre
                  </Text>
                </TouchableOpacity>
              </View>

              {/* Tab Content */}
              {activeTab === 0 ? (
                <>
                  <View style={styles.operatorCard}>
                    <View
                      style={{
                        flexDirection: "row",
                        alignItems: "center",
                        justifyContent: "space-between",
                      }}
                    >
                      <View
                        style={{ flexDirection: "row", alignItems: "center" }}
                      >
                        <Image
                          source={require("../../assets/img/image_cb840273.png")}
                          style={styles.operatorImage}
                        />
                        <Text style={styles.orangeText}>
                          Nous ne supportons que{"\n"}les opérateurs affichés.
                        </Text>
                      </View>
                      <TouchableOpacity
                        onPress={() => handleOperatorSelect("orange")}
                      >
                        <View style={styles.checkboxContainer}>
                          <CircleOutlineIcon
                            size={fontSize(24)}
                            strokeColor={
                              selectedOperator === "orange"
                                ? "#007efa"
                                : undefined
                            }
                            fillColor={
                              selectedOperator === "orange"
                                ? "#007efa"
                                : undefined
                            }
                          />
                          {selectedOperator === "orange" && (
                            <View style={styles.checkmarkContainer}>
                              <CheckIcon size={fontSize(12)} color="#FFFFFF" />
                            </View>
                          )}
                        </View>
                      </TouchableOpacity>
                    </View>
                    <View style={styles.iconRow}>
                      <Image
                        source={require("../../assets/img/image_7337a807.png")}
                        style={styles.operatorIcon}
                      />
                      <Image
                        source={require("../../assets/img/image_96b927ad.png")}
                        style={styles.operatorIcon}
                      />
                      <Image
                        source={require("../../assets/img/image_1fee7e8b.png")}
                        style={styles.operatorIcon}
                      />
                    </View>
                  </View>

                  <View style={styles.cardContainer}>
                    <View style={styles.iconRow}>
                      <Image
                        source={require("../../assets/img/image_13d56c9.png")}
                        style={styles.operatorImage}
                      />
                    </View>

                    {/* 右侧圆圈图标 */}
                    <TouchableOpacity
                      onPress={() => handleOperatorSelect("mtn")}
                    >
                      <View style={styles.checkboxContainer}>
                        <CircleOutlineIcon
                          size={fontSize(24)}
                          strokeColor={
                            selectedOperator === "mtn" ? "#007efa" : undefined
                          }
                          fillColor={
                            selectedOperator === "mtn" ? "#007efa" : undefined
                          }
                        />
                        {selectedOperator === "mtn" && (
                          <View style={styles.checkmarkContainer}>
                            <CheckIcon size={fontSize(12)} color="#FFFFFF" />
                          </View>
                        )}
                      </View>
                    </TouchableOpacity>
                  </View>

                  <View style={styles.balanceInfoContainer}>
                    <View style={styles.leftInfo}>
                      <View style={styles.blueBox}>
                        {/* 圆形图标（左边） */}
                        <Image
                          source={require("../../assets/img/余额 icon.png")}
                          style={styles.operatorImage}
                        />
                      </View>
                      <Text style={styles.balanceText}>
                        Vous avez encore un solde{"\n"}de 650,000 FCFA
                      </Text>
                    </View>

                    {/* 圆形图标（右边） */}
                    <TouchableOpacity
                      onPress={() => handleOperatorSelect("balance")}
                    >
                      <View style={styles.checkboxContainer}>
                        <CircleOutlineIcon
                          size={fontSize(24)}
                          strokeColor={
                            selectedOperator === "balance"
                              ? "#007efa"
                              : undefined
                          }
                          fillColor={
                            selectedOperator === "balance"
                              ? "#007efa"
                              : undefined
                          }
                        />
                        {selectedOperator === "balance" && (
                          <View style={styles.checkmarkContainer}>
                            <CheckIcon size={fontSize(12)} color="#FFFFFF" />
                          </View>
                        )}
                      </View>
                    </TouchableOpacity>
                  </View>

                  <View style={styles.currencyContainer}>
                    <View style={styles.currencyRow}>
                      <Image
                        source={require("../../assets/img/image_8786995c.png")}
                        style={styles.currencyImage}
                      />
                      <TouchableOpacity
                        onPress={() => handleOperatorSelect("currency")}
                      >
                        <View style={styles.checkboxContainer}>
                          <CircleOutlineIcon
                            size={fontSize(24)}
                            strokeColor={
                              selectedOperator === "currency"
                                ? "#007efa"
                                : undefined
                            }
                            fillColor={
                              selectedOperator === "currency"
                                ? "#007efa"
                                : undefined
                            }
                          />
                          {selectedOperator === "currency" && (
                            <View style={styles.checkmarkContainer}>
                              <CheckIcon size={fontSize(12)} color="#FFFFFF" />
                            </View>
                          )}
                        </View>
                      </TouchableOpacity>
                    </View>
                    {selectedOperator === "currency" && (
                      <>
                        <Text style={styles.subtitle}>
                          Choisissez la devise
                        </Text>
                        <View style={styles.row}>
                          <TouchableOpacity
                            style={
                              currentCurrency === "USD"
                                ? styles.currencyButtonActive
                                : styles.currencyButtonInactive
                            }
                            onPress={() => handleCurrencySelect("USD")}
                          >
                            <Text
                              style={
                                currentCurrency === "USD"
                                  ? styles.buttonTextWhite
                                  : styles.buttonTextDark
                              }
                            >
                              USD
                            </Text>
                          </TouchableOpacity>
                          <TouchableOpacity
                            style={
                              currentCurrency === "EUR"
                                ? styles.currencyButtonActive
                                : styles.currencyButtonInactive
                            }
                            onPress={() => handleCurrencySelect("EUR")}
                          >
                            <Text
                              style={
                                currentCurrency === "EUR"
                                  ? styles.buttonTextWhite
                                  : styles.buttonTextDark
                              }
                            >
                              EUR
                            </Text>
                          </TouchableOpacity>
                        </View>
                        {isConverting ? (
                          <View
                            style={{
                              flexDirection: "row",
                              alignItems: "center",
                              marginTop: 16,
                            }}
                          >
                            <ActivityIndicator size="small" color="#ff5100" />
                            <Text
                              style={{ ...styles.totalText, marginLeft: 10 }}
                            >
                              Converting...
                            </Text>
                          </View>
                        ) : (
                          <Text style={styles.totalText}>
                            Total:{" "}
                            {convertedAmount.length > 0
                              ? `${currentCurrency === "USD" ? "$" : "€"}${
                                  convertedAmount
                                    .find(
                                      (item) => item.item_key === "total_amount"
                                    )
                                    ?.converted_amount.toFixed(2) || "0.00"
                                }`
                              : `$${(
                                  parseFloat(selectedPrice.replace(/,/g, "")) /
                                  580
                                ).toFixed(2)}`}
                          </Text>
                        )}
                      </>
                    )}
                  </View>

                  <View style={styles.cardContainer}>
                    <View style={styles.iconRow}>
                      <Image
                        source={require("../../assets/img/image_4e72f054.png")}
                        style={styles.operatorImage1}
                      />
                    </View>

                    {/* 右侧圆圈图标 */}
                    <TouchableOpacity
                      onPress={() => handleOperatorSelect("mtn")}
                    >
                      <View style={styles.checkboxContainer}>
                        <CircleOutlineIcon
                          size={fontSize(24)}
                          strokeColor={
                            selectedOperator === "mtn" ? "#007efa" : undefined
                          }
                          fillColor={
                            selectedOperator === "mtn" ? "#007efa" : undefined
                          }
                        />
                        {selectedOperator === "mtn" && (
                          <View style={styles.checkmarkContainer}>
                            <CheckIcon size={fontSize(12)} color="#FFFFFF" />
                          </View>
                        )}
                      </View>
                    </TouchableOpacity>
                  </View>
                </>
              ) : (
                <View style={styles.outerContainer}>
                  <View style={styles.flexContainer}>
                    <View style={styles.imageContainer}>
                      <Image
                        source={require("../../assets/img/image_c6aa9539.png")}
                        style={styles.imageStyle}
                        resizeMode="cover"
                      />
                    </View>
                    <View style={styles.verticalAlignEndContent}>
                      <View style={styles.svgContainer}>
                        <TouchableOpacity
                          onPress={() => handleOperatorSelect("mtn")}
                        >
                          <View style={styles.checkboxContainer}>
                            <CircleOutlineIcon
                              size={fontSize(24)}
                              strokeColor={
                                selectedOperator === "mtn"
                                  ? "#007efa"
                                  : undefined
                              }
                              fillColor={
                                selectedOperator === "mtn"
                                  ? "#007efa"
                                  : undefined
                              }
                            />
                            {selectedOperator === "mtn" && (
                              <View style={styles.checkmarkContainer}>
                                <CheckIcon
                                  size={fontSize(12)}
                                  color="#FFFFFF"
                                />
                              </View>
                            )}
                          </View>
                        </TouchableOpacity>
                      </View>
                    </View>
                  </View>

                  <View style={styles.flexContainer}>
                    <View style={styles.imageContainer}>
                      <Image
                        source={require("../../assets/img/Global 1.png")}
                        style={styles.imageStyle}
                        resizeMode="cover"
                      />
                    </View>
                    <View style={styles.verticalAlignEndContent}>
                      <View style={styles.svgContainer}>
                        <TouchableOpacity
                          onPress={() => handleOperatorSelect("mtn")}
                        >
                          <View style={styles.checkboxContainer}>
                            <CircleOutlineIcon
                              size={fontSize(24)}
                              strokeColor={
                                selectedOperator === "mtn"
                                  ? "#007efa"
                                  : undefined
                              }
                              fillColor={
                                selectedOperator === "mtn"
                                  ? "#007efa"
                                  : undefined
                              }
                            />
                            {selectedOperator === "mtn" && (
                              <View style={styles.checkmarkContainer}>
                                <CheckIcon
                                  size={fontSize(12)}
                                  color="#FFFFFF"
                                />
                              </View>
                            )}
                          </View>
                        </TouchableOpacity>
                      </View>
                    </View>
                  </View>
                </View>
              )}
            </ScrollView>

            {/* 操作按钮 - 固定在底部 */}
            <View style={styles.actionButtonsContainer}>
              <View style={styles.actionButtons}>
                <TouchableOpacity style={styles.cancelButton} onPress={onClose}>
                  <Text style={styles.buttonTextDark}>Annuler</Text>
                </TouchableOpacity>
                <TouchableOpacity
                  style={styles.confirmButton}
                  onPress={handleButtonClick}
                >
                  <Text style={styles.buttonTextWhite}>Confirmer</Text>
                </TouchableOpacity>
              </View>
            </View>
          </>
        ) : (
          <View style={styles.paymentConfirmContainer}>
            {/* 充值金额信息 */}
            <View style={styles.paymentSummaryCard}>
              <Text style={styles.paymentSummaryTitle}>
                Résumé de la recharge
              </Text>

              <View style={styles.paymentSummaryRow}>
                <Text style={styles.paymentSummaryLabel}>Montant:</Text>
                <Text style={styles.paymentSummaryValue}>
                  {paymentParams?.selectedPriceLabel || selectedPrice + " FCFA"}
                </Text>
              </View>

              {paymentParams?.currency !== "FCFA" && (
                <View style={styles.paymentSummaryRow}>
                  <Text style={styles.paymentSummaryLabel}>
                    Montant converti:
                  </Text>
                  <Text style={styles.paymentSummaryValueHighlight}>
                    {paymentParams?.currency === "USD" ? "$" : "€"}
                    {paymentParams?.amount.toFixed(2) || "0.00"}
                  </Text>
                </View>
              )}

              <View style={styles.paymentSummaryRow}>
                <Text style={styles.paymentSummaryLabel}>
                  Méthode de paiement:
                </Text>
                <Text style={styles.paymentSummaryValue}>
                  {paymentParams?.payment_method || "Non sélectionné"}
                </Text>
              </View>
            </View>

            {/* 电话号码输入 */}
            <View style={styles.phoneInputContainer}>
              <Text style={styles.phoneInputLabel}>Numéro de téléphone</Text>
              <View style={styles.phoneInputWrapper}>
                <View style={styles.countryCodeContainer}>
                  <Text style={styles.countryCodeText}>+89</Text>
                </View>
                <TextInput
                  style={styles.phoneInput}
                  value={phoneNumber}
                  onChangeText={setPhoneNumber}
                  keyboardType="phone-pad"
                  placeholder="Entrez votre numéro"
                  placeholderTextColor="#999"
                />
              </View>
            </View>

            {/* 支持的运营商 */}
            <View style={styles.supportedOperatorsContainer}>
              <Text style={styles.supportedOperatorsTitle}>
                Opérateurs pris en charge
              </Text>
              <View style={styles.operatorsRow}>
                <Image
                  source={require("../../assets/img/image_7337a807.png")}
                  style={styles.operatorSmallIcon}
                />
                <Image
                  source={require("../../assets/img/image_96b927ad.png")}
                  style={styles.operatorSmallIcon}
                />
                <Image
                  source={require("../../assets/img/image_1fee7e8b.png")}
                  style={styles.operatorSmallIcon}
                />
              </View>
            </View>

            {/* 支付按钮 */}
            <TouchableOpacity
              style={[
                styles.payButton,
                isSubmitting && styles.payButtonDisabled,
              ]}
              onPress={handlePaySubmit}
              disabled={isSubmitting}
            >
              {isSubmitting ? (
                <ActivityIndicator size="small" color="#fff" />
              ) : (
                <Text style={styles.payButtonText}>
                  PAYER{" "}
                  {paymentParams?.currency === "FCFA"
                    ? paymentParams.originalAmount.toLocaleString() +
                      " " +
                      paymentParams.currency
                    : paymentParams?.currency === "USD"
                    ? "$" + paymentParams?.amount.toFixed(2)
                    : paymentParams?.amount.toFixed(2) + " €"}
                </Text>
              )}
            </TouchableOpacity>
          </View>
        )}
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: "#f0f0f0",
  },
  mainContainer: {
    flex: 1,
    backgroundColor: "#f0f0f0",
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
  },
  mainContainer1: {
    flex: 1,
    backgroundColor: "#fff",
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
  },
  header: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    padding: 24,
    paddingBottom: 0,
    position: "relative",
    marginTop: 20,
    marginBottom: 20,
  },
  scrollContent: {
    padding: 24,
    paddingTop: 0,
  },
  container: {
    padding: 24,
    backgroundColor: "#f0f0f0",
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
  },
  title: {
    fontSize: 24,
    fontWeight: "700",
    textTransform: "capitalize",
    color: "black",
    position: "absolute",
    left: 0,
    right: 0,
    textAlign: "center",
  },
  section: {
    marginTop: 44,
  },
  subtitle: {
    fontSize: 16,
    fontWeight: "700",
    color: "black",
    textTransform: "capitalize",
    marginBottom: 12,
  },
  priceGroup: {
    marginTop: 10,
  },
  row: {
    flexDirection: "row",
    justifyContent: "flex-start",
    marginTop: 15,
  },
  priceBoxBlue: {
    width: "30%",
    backgroundColor: "#edf2fa",
    borderColor: "#002fa7",
    borderWidth: 1,
    borderRadius: 5,
    paddingVertical: 9,
    paddingHorizontal: 22,
    alignItems: "center",
    marginRight: "5%",
  },
  priceBoxWhite: {
    width: "30%",
    backgroundColor: "white",
    borderRadius: 5,
    paddingVertical: 9,
    paddingHorizontal: 22,
    alignItems: "center",
    marginRight: "5%",
  },
  priceTextBlue: {
    fontSize: fontSize(16),
    fontWeight: "700",
    color: "#002fa7",
  },
  currencyTextBlue: {
    fontSize: fontSize(10),
    color: "#002fa7",
    marginTop: 1,
  },
  priceText: {
    fontSize: fontSize(16),
    fontWeight: "700",
    color: "#333",
  },
  currencyText: {
    fontSize: fontSize(10),
    color: "#7f7e7e",
    marginTop: 1,
  },
  operatorCard: {
    backgroundColor: "white",
    padding: 16,
    borderRadius: 5,
    marginTop: 18,
  },
  operatorImage: {
    width: 80,
    height: 30,
    resizeMode: "contain",
  },
  operatorImage1: {
    width: 228,
    height: 30,
    resizeMode: "contain",
  },
  orangeText: {
    color: "#ff5100",
    fontSize: fontSize(12),
    fontWeight: "500",
    marginLeft: 12,
  },
  iconRow: {
    flexDirection: "row",
    gap: 10,
  },
  operatorIcon: {
    width: 60,
    height: 22,
    resizeMode: "contain",
  },
  currencyContainer: {
    backgroundColor: "white",
    padding: 10,
    borderRadius: 5,
    marginTop: 20,
  },
  currencyRow: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingRight: 6,
  },
  currencyImage: {
    width: 80,
    height: 30,
    resizeMode: "contain",
  },
  radioCircle: {
    width: 24,
    height: 24,
    borderRadius: 12,
    borderWidth: 2,
    borderColor: "#007AFF",
  },
  currencyButtonActive: {
    backgroundColor: "#002fa7",
    borderRadius: 18,
    width: widthUtils(36, 100).width,
    height: widthUtils(36, 100).height,
    justifyContent: "center",
    alignItems: "center",
  },
  currencyButtonInactive: {
    backgroundColor: "#eeeeee",
    borderRadius: 18,
    width: widthUtils(36, 100).width,
    height: widthUtils(36, 100).height,
    justifyContent: "center",
    alignItems: "center",
    marginLeft: 10,
  },
  buttonTextWhite: {
    color: "white",
    fontWeight: "600",
  },
  buttonTextDark: {
    color: "black",
    fontWeight: "500",
  },
  totalText: {
    marginTop: 16,
    fontWeight: "900",
    fontSize: fontSize(16),
    color: "#ff5100",
  },
  actionButtonsContainer: {
    padding: 24,
    paddingTop: 0,
    backgroundColor: "#f0f0f0",
  },
  actionButtons: {
    flexDirection: "row",
    justifyContent: "space-between",
    padding: 10,
  },
  cancelButton: {
    backgroundColor: "white",
    borderRadius: 25,
    width: widthUtils(50, 160).width,
    height: widthUtils(50, 160).height,
    justifyContent: "center",
    alignItems: "center",
    borderColor: "#ccc",
    borderWidth: 1,
  },
  confirmButton: {
    backgroundColor: "#002fa7",
    borderRadius: 25,
    width: widthUtils(50, 160).width,
    height: widthUtils(50, 160).height,
    justifyContent: "center",
    alignItems: "center",
  },
  balanceInfoContainer: {
    flexDirection: "row",
    backgroundColor: "white",
    borderRadius: 5,
    paddingHorizontal: 16,
    height: 50,
    alignItems: "center",
    justifyContent: "space-between",
    marginTop: 14,
  },
  leftInfo: {
    flexDirection: "row",
    alignItems: "center",
    flex: 1,
  },
  blueBox: {
    flexDirection: "row",
    backgroundColor: "#3955f6",
    paddingHorizontal: 7,
    paddingLeft: 6,
    alignItems: "center",
    borderRadius: 4,
  },
  saleText: {
    fontSize: 16,
    fontFamily: "Timmana",
    color: "white",
    marginLeft: 4,
  },
  balanceText: {
    marginLeft: 17,
    fontSize: fontSize(11),
    lineHeight: 14,
    fontWeight: "500",
    color: "#333333",
  },
  cardContainer: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    backgroundColor: "white",
    borderRadius: 5,
    paddingHorizontal: 16,
    height: 50,
    marginTop: 15,
  },

  imageSmall: {
    width: widthUtils(30, 24).width,
    height: widthUtils(30, 24).height,
    resizeMode: "contain",
  },
  imageLarge: {
    width: widthUtils(26, 44).width,
    height: widthUtils(26, 44).height,
    resizeMode: "contain",
  },
  emptyBox: {
    backgroundColor: "transparent",
    borderWidth: 0,
  },
  container1: {
    flexDirection: "row",
    gap: 10,
    alignItems: "center",
    marginTop: 10,
  },
  button: {
    width: widthUtils(36, 190).width,
    height: widthUtils(36, 190).height,
    borderRadius: 18,
    justifyContent: "center",
    alignItems: "center",
  },
  buttonActive: {
    backgroundColor: "#002fa7",
  },
  buttonInactive: {
    backgroundColor: "#fdfefe",
  },
  textActive: {
    color: "white",
    fontWeight: "600",
    fontSize: fontSize(15),
  },
  textInactive: {
    color: "black",
    fontSize: fontSize(15),
  },
  priceBoxSelected: {
    backgroundColor: "#edf2fa",
    borderColor: "#002fa7",
    borderWidth: 1,
  },
  priceBoxUnselected: {
    backgroundColor: "white",
    borderColor: "#dddddd",
    borderWidth: 1,
  },
  priceTextSelected: {
    color: "#002fa7",
  },
  priceTextUnselected: {
    color: "#333",
  },
  currencyTextSelected: {
    color: "#002fa7",
  },
  currencyTextUnselected: {
    color: "#7f7e7e",
  },
  closeButton: {
    padding: 5,
    position: "absolute",
    right: 24,
    zIndex: 1,
  },
  checkboxContainer: {
    position: "relative",
    width: fontSize(24),
    height: fontSize(24),
  },
  checkmarkContainer: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: "center",
    alignItems: "center",
  },

  container2: {
    width: "100%",
    marginTop: 20,
  },
  amountRechargeContainer: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    height: 60,
    backgroundColor: "white",
    borderRadius: 5,
  },
  rechargePromptTextStyle: {
    flex: 0,
    padding: 0,
    margin: 0,
    fontSize: 14,
    lineHeight: 14,
    color: "#747474",
    // Note: PingFang SC font might not be available by default in React Native
    // You may need to load custom fonts using expo-font or other methods
  },
  tabContainer: {
    flexDirection: "row",
    backgroundColor: "white",
    borderRadius: 5,
    marginTop: 10,
    padding: 5,
  },
  tab: {
    flex: 1,
    paddingVertical: 10,
    alignItems: "center",
    borderRadius: 5,
  },
  activeTab: {
    backgroundColor: "#002fa7",
  },
  tabText: {
    fontSize: fontSize(14),
    color: "#333",
    fontWeight: "500",
  },
  activeTabText: {
    color: "white",
    fontWeight: "600",
  },
  emptyTab: {
    backgroundColor: "white",
    borderRadius: 5,
    padding: 20,
    marginTop: 10,
    alignItems: "center",
    justifyContent: "center",
    height: 200,
  },
  emptyTabText: {
    color: "#666",
    fontSize: fontSize(14),
  },
  outerContainer: {
    width: "100%",
  },
  flexContainer: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
    height: 50,
    paddingRight: 16,
    paddingLeft: 16,
    backgroundColor: "white",
    borderRadius: 5,
    marginTop: 18,
  },
  imageContainer: {
    width: "26.54%",
  },
  imageStyle: {
    width: 80,
    height: 30,
    borderWidth: 0,
  },
  verticalAlignEndContent: {
    flexDirection: "column",
    alignItems: "flex-end",
    width: "73.46%",
  },
  svgContainer: {
    width: 24,
    height: 24,
  },
  backButton: {
    position: "absolute",
    left: 24,
    zIndex: 1,
  },
  backButtonText: {
    fontSize: fontSize(14),
    color: "#007AFF",
    fontWeight: "500",
  },
  blankPage: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f0f0f0",
  },
  blankPageText: {
    fontSize: fontSize(16),
    color: "#666",
  },
  paymentSection2: {
    paddingTop: 24,
    paddingRight: 20,
    paddingBottom: 333,
    paddingLeft: 20,
    backgroundColor: "white",
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
  },
  paymentSectionContainer: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
    width: "100%",
  },
  paymentSection: {
    width: "8.48%",
    paddingRight: 15,
  },
  svgContainer1: {
    width: 18,
    height: 18,
  },
  paymentSection1: {
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "flex-start",
    width: "91.52%",
    paddingRight: 33,
  },
  paymentHeadingStyle: {
    padding: 0,
    margin: 0,
    fontSize: 24,
    lineHeight: 22,
    color: "black",
    textTransform: "capitalize",
    fontFamily: "Montserrat-Bold",
  },
  transactionSummaryContainer1: {
    width: "100%",
  },
  transactionSummaryContainer: {
    width: "100%",
    paddingRight: 15,
    paddingLeft: 15,
    backgroundColor:
      "linear-gradient(90deg, rgba(206, 229, 255, 1) 0%, rgba(238, 244, 255, 1) 100%",
    borderRadius: 5,
  },
  flexContainerWithImages: {
    flexDirection: "row",
    alignItems: "flex-start",
    justifyContent: "flex-start",
  },
  imageContainerStyled: {
    width: 99,
    height: 36,
    borderWidth: 0,
  },
  imageContainerWithBorder: {
    width: 135,
    height: 140,
    marginLeft: 141,
    borderWidth: 0,
  },
  amountContainer: {
    width: "100%",
    paddingTop: 8,
    paddingRight: 11,
    paddingBottom: 10,
    paddingLeft: 11,
    marginTop: -83,
    backgroundColor: "white",
    borderWidth: 1,
    borderRadius: 5,
  },
  amountLabel: {
    padding: 0,
    margin: 0,
    fontSize: 12,
    color: "#7f7e7e",
    fontFamily: "PingFangSC-Medium",
  },
  amountContainer1: {
    flexDirection: "row",
    alignItems: "flex-start",
    justifyContent: "flex-start",
    marginTop: 1,
  },
  priceHeading: {
    padding: 0,
    paddingBottom: 5,
    margin: 0,
    fontSize: 24,
    lineHeight: 22,
    color: "#161616",
    fontFamily: "Montserrat-Bold",
  },
  priceLabel: {
    padding: 0,
    paddingTop: 5,
    margin: 0,
    marginLeft: 3,
    fontSize: 12,
    color: "#7f7e7e",
    fontFamily: "PingFangSC-Medium",
  },
  mobileInfoSection: {
    width: "100%",
    marginTop: 30,
  },
  mobileNumberSection: {
    width: "100%",
  },
  mobileNumberLabel: {
    padding: 0,
    margin: 0,
    fontSize: 14,
    lineHeight: 18,
    color: "black",
    fontFamily: "PingFangSC-Regular",
  },
  infoCard: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
    width: "100%",
    height: 50,
    paddingRight: 12,
    paddingLeft: 12,
    marginTop: 12,
    borderWidth: 1,
    borderColor: "#d8d8d8",
    borderRadius: 25,
  },
  flexRowWithIcon: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
  },
  maskedImageWithText: {
    width: 20,
    height: 12,
    borderWidth: 0,
  },
  highlightText: {
    padding: 0,
    margin: 0,
    marginLeft: 3,
    fontSize: 16,
    lineHeight: 22,
    color: "#1c284e",
    fontFamily: "PingFangSC-Semibold",
  },
  svgContainer2: {
    width: 12,
    height: 12,
    marginLeft: 12,
  },
  verticalDivider: {
    width: 1,
    height: 30,
    marginLeft: 8.5,
    borderLeftWidth: 1,
    borderColor: "#b1b1b1",
  },
  statisticText: {
    padding: 0,
    margin: 0,
    marginLeft: 19.5,
    fontSize: 16,
    lineHeight: 22,
    color: "#1c284e",
    fontFamily: "PingFangSC-Semibold",
  },
  mobileOperatorsContainer: {
    width: "100%",
    marginTop: 20,
  },
  operatorSupportContainer: {
    flexDirection: "row",
    gap: 10,
    alignItems: "center",
    justifyContent: "flex-start",
    marginTop: 12,
  },
  imageContainerWithBorder1: {
    width: 70,
    height: 26,
    borderWidth: 0,
  },
  blueBoxContainer: {
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "flex-start",
    width: "100%",
    marginTop: 50,
    backgroundColor: "#002fa7",
    borderRadius: 25,
  },
  paymentNotice1: {
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    height: 50,
  },
  paymentNotice: {
    padding: 0,
    margin: 0,
    fontSize: 16,
    color: "white",
    fontFamily: "Montserrat-Bold",
  },
  paymentConfirmContainer: {
    flex: 1,
    padding: 20,
    backgroundColor: "#fff",
  },
  paymentSummaryCard: {
    backgroundColor: "#f5f9ff",
    borderRadius: 10,
    padding: 20,
    marginBottom: 20,
  },
  paymentSummaryTitle: {
    fontSize: fontSize(18),
    fontWeight: "700",
    marginBottom: 15,
    color: "#333",
  },
  paymentSummaryRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginBottom: 10,
  },
  paymentSummaryLabel: {
    fontSize: fontSize(14),
    color: "#666",
  },
  paymentSummaryValue: {
    fontSize: fontSize(14),
    fontWeight: "500",
    color: "#333",
  },
  paymentSummaryValueHighlight: {
    fontSize: fontSize(14),
    fontWeight: "600",
    color: "#ff5100",
  },
  phoneInputContainer: {
    marginBottom: 20,
  },
  phoneInputLabel: {
    fontSize: fontSize(16),
    fontWeight: "500",
    marginBottom: 10,
    color: "#333",
  },
  phoneInputWrapper: {
    flexDirection: "row",
    borderWidth: 1,
    borderColor: "#ddd",
    borderRadius: 25,
    overflow: "hidden",
  },
  countryCodeContainer: {
    backgroundColor: "#f5f5f5",
    paddingHorizontal: 15,
    justifyContent: "center",
    borderRightWidth: 1,
    borderRightColor: "#ddd",
  },
  countryCodeText: {
    fontSize: fontSize(16),
    color: "#333",
  },
  phoneInput: {
    flex: 1,
    height: 50,
    paddingHorizontal: 15,
    fontSize: fontSize(16),
    color: "#333",
  },
  supportedOperatorsContainer: {
    marginBottom: 30,
  },
  supportedOperatorsTitle: {
    fontSize: fontSize(16),
    fontWeight: "500",
    marginBottom: 10,
    color: "#333",
  },
  operatorsRow: {
    flexDirection: "row",
    alignItems: "center",
  },
  operatorSmallIcon: {
    width: 70,
    height: 26,
    resizeMode: "contain",
    marginRight: 15,
  },
  payButton: {
    backgroundColor: "#002fa7",
    borderRadius: 25,
    height: 50,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 20,
  },
  payButtonDisabled: {
    backgroundColor: "#8da0d4",
    opacity: 0.7,
  },
  payButtonText: {
    color: "white",
    fontSize: fontSize(16),
    fontWeight: "700",
  },
});

export default RechargeScreen;