// 支付组件
import React, { useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  Image,
  TouchableOpacity,
  SafeAreaView,
} 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";

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

const RechargeScreen: React.FC<RechargeScreenProps> = ({ onClose }) => {
  const [selectedPrice, setSelectedPrice] = useState("500,000");
  const [selectedOperator, setSelectedOperator] = useState<string | null>(null);
  const [activeTab, setActiveTab] = useState(0);
  const [showBlankPage, setShowBlankPage] = useState(false);

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

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

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

  const handleButtonClick = () => {
    if (selectedOperator) {
      setShowBlankPage(true);
    }
  };

  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={styles.currencyButtonActive}>
                            <Text style={styles.buttonTextWhite}>USD</Text>
                          </TouchableOpacity>
                          <TouchableOpacity style={styles.currencyButtonInactive}>
                            <Text style={styles.buttonTextDark}>FCFA</Text>
                          </TouchableOpacity>
                        </View>
                        <Text style={styles.totalText}>Total: ＄121.97</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.outerContainer}>
      <View style={styles.paymentSection2}>
        {/* Header with back button and title */}


        {/* Transaction summary */}
        <View style={styles.transactionSummaryContainer1}>
          <View style={styles.transactionSummaryContainer}>
            <View style={styles.flexContainerWithImages}>
              <Image 
                source={require('../../assets/img/image_cb840273.png')}
                style={styles.imageContainerStyled}
                resizeMode="cover"
              />
              <Image 
                source={require('../../assets/img/image_b05c3ffe.png')}
                style={styles.imageContainerWithBorder}
                resizeMode="cover"
              />
            </View>
            <View style={styles.amountContainer}>
              <Text style={styles.amountLabel}>Montant</Text>
              <View style={styles.amountContainer1}>
                <Text style={styles.priceHeading}>500,000</Text>
                <Text style={styles.priceLabel}>FCFA</Text>
              </View>
            </View>
          </View>

          {/* Mobile info section */}
          <View style={styles.mobileInfoSection}>
            <View style={styles.mobileNumberSection}>
              <Text style={styles.mobileNumberLabel}>Indicatif pays et numéro de mobile</Text>
              <View style={styles.infoCard}>
                <View style={styles.flexRowWithIcon}>
                  <View style={styles.flexRowWithIcon}>
                    <Image 
                      source={require('../../assets/img/image_de4ca740.png')}
                      style={styles.maskedImageWithText}
                      resizeMode="cover"
                    />
                    <Text style={styles.highlightText}>+89</Text>
                  </View>
                  <View style={styles.svgContainer2}>
                    {/* <Svg width={12} height={12} viewBox="0 0 12 12" fill="none">
                      <ClipPath id="clip3_296_2233">
                        <Rect width={12} height={12} fill="white" x={12.0004} y={0} rotation={90} />
                      </ClipPath>
                      <G clipPath="url(#clip3_296_2233)">
                        <Path 
                          d="M11.4464,3.658l-1.01,-1.035l-4.413,4.638l-4.4136,-4.638l-1.0098,1.035l5.4234,5.672z" 
                          fill="black" 
                        />
                      </G>
                    </Svg> */}
                  </View>
                  <View style={styles.verticalDivider} />
                </View>
                <Text style={styles.statisticText}>22660962235</Text>
              </View>
            </View>

            {/* Mobile operators */}
            <View style={styles.mobileOperatorsContainer}>
              <Text style={styles.mobileNumberLabel}>Opérateurs pris en charge</Text>
              <View style={styles.operatorSupportContainer}>
                <Image 
                  source={require('../../assets/img/image_7337a807.png')}
                  style={styles.imageContainerWithBorder1}
                  resizeMode="cover"
                />
                <Image 
                  source={require('../../assets/img/image_96b927ad.png')}
                  style={styles.imageContainerWithBorder1}
                  resizeMode="cover"
                />
                <Image 
                  source={require('../../assets/img/image_1fee7e8b.png')}
                  style={styles.imageContainerWithBorder1}
                  resizeMode="cover"
                />
              </View>
            </View>

            {/* Payment button */}
            <View style={styles.blueBoxContainer}>
              <View style={styles.paymentNotice1}>
                <Text style={styles.paymentNotice}>PAY 500,000 FCFA</Text>
              </View>
            </View>
          </View>
        </View>
      </View>
    </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',
  },
});

export default RechargeScreen;