import React, { useEffect } from "react";
import {
  View,
  Text,
  Image,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
  Dimensions,
  useWindowDimensions,
  Animated,
  BackHandler,
  ActivityIndicator,
} from "react-native";
import fontSize from "../utils/fontsizeUtils";
import widthUtils from "../utils/widthUtils";
import DiagonalArrowIcon from "../components/DiagonalArrowIcon";
import Carousel from "react-native-reanimated-carousel";
import WhiteCircleIcon from "../components/WhiteCircleIconIcon";
import ShoppingCartIcon from "../components/ShoppingCartIcon";
import { useState } from "react";
import {
  productApi,
  ProductDetailParams,
  Similars,
  SkuAttribute,
  ProductGroupList
} from "../services/api/productApi";
import { useNavigation, useRoute } from "@react-navigation/native";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import { RouteProp } from "@react-navigation/native";
import BackIcon from "../components/BackIcon";
import CameraIcon from "../components/CameraIcon";
import ProductCard from "./ProductCard";
type ProductDetailRouteParams = {
  offer_id: string;
  searchKeyword?: string;
  price: number;
};



export const ProductDetailScreen = () => {
  const { width } = useWindowDimensions(); // 移动到组件内部
  const navigation = useNavigation<NativeStackNavigationProp<any>>();
  const route =
    useRoute<RouteProp<Record<string, ProductDetailRouteParams>, string>>();
  const [activeIndex, setActiveIndex] = useState(0);
  const screenWidth = Dimensions.get("window").width;
  const [expandedGroups, setExpandedGroups] = useState<{
    [key: string]: boolean;
  }>({});

  const [product, setProduct] = useState<ProductDetailParams>();
  const [groupList, setGroupList] = useState<ProductGroupList[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  const [similars, setSimilars] = useState<Similars>();
  const [isSimilarsFlag, setIsSimilarsFlag] = useState(false);
  const [imageUrls, setImageUrls] = useState<any[]>([]);
  const [imageHeights, setImageHeights] = useState<{ [key: string]: number }>({});
  const [priceSelectedSku, setPriceSelectedSku] = useState<any>();
  const [showBottomSheet, setShowBottomSheet] = useState(false);

  const groupData = (res: ProductDetailParams,priceSelectedSku:SkuAttribute[]) => {
    let result = {} as any;
    // 遍历数据
    res.skus.forEach((item) => {
      item.attributes.forEach((attribute) => {
        const { attribute_name, value } = attribute;
        // 如果结果对象中没有对应的属性名，则创建一个空数组
        if (!result[attribute_name]) {
          result[attribute_name] = [];
        }
  
        // 如果当前属性的值（value）已经存在于该组内，跳过
        if (
          !result[attribute_name].some(
            (existingAttribute: any) => existingAttribute.value === value
          )
        ) {
          result[attribute_name].push(attribute);
        }
      });
    });
  
    const list: ProductGroupList[] = [];
  
    // Iterate over each attribute and transform the data
    for (const [attributeName, attributes] of Object.entries(result)) {
      const withImage: any[] = [];
      const withoutImage: any[] = [];
  
      // @ts-ignore
      attributes.forEach((attribute) => {
        attribute.has_color = false;
        // Check if sku_image_url is not null or undefined
        const hasImage =
          attribute.sku_image_url !== null &&
          attribute.sku_image_url !== undefined;
  
        // Push the attribute to the appropriate array
        if (hasImage) {
          withImage.push(attribute);
        } else {
          withoutImage.push(attribute);
        }
      });
  
      // Add has_image to the list item
      list.push({
        attribute_name: attributeName,
        has_image: withImage.length > 0, // If there are any items with images, set has_image to true
        attributes: [...withImage, ...withoutImage],
      });
    }

    if(!priceSelectedSku){
      list.forEach(item => {
        item.attributes[0].has_color = true;
      })
      return list;
    }
    
    if(priceSelectedSku.length >= 1){
      priceSelectedSku.forEach(item => {
        list.forEach(item1 => {          
          item1.attributes.forEach(attribute => {
            if(attribute.value === item.value){              
              attribute.has_color = true;
            }
          })
        })
      })
      return list;
    }
    return list;
  };
  
  // 处理展开/收起
  const toggleExpand = (attributeName: string) => {
    setExpandedGroups((prev) => ({
      ...prev,
      [attributeName]: !prev[attributeName],
    }));
  };

  // 获取要显示的属性
  const getDisplayAttributes = (attributes: any[], attributeName: string) => {
    if (expandedGroups[attributeName]) {
      return attributes;
    }
    return attributes.slice(0, 6);
  };

  // 处理尺码选择
  const handleSizeSelect = (size: string, index: number) => {
    const newGroupList = [...groupList];
    const attributeIndex = newGroupList[index]?.attributes.findIndex(
      (item) => item.value === size
    );
    if (attributeIndex !== -1) {
      newGroupList[index].attributes = newGroupList[index].attributes.map(
        (item, i) => {
          if (i === attributeIndex) {
            return { ...item, has_color: true };
          }
          return { ...item, has_color: false };
        }
      );
      setGroupList(newGroupList);
    }
    const selectedSku:SkuAttribute[] = []
    groupList.forEach(item => {
      item.attributes.forEach(attribute => {
        if(attribute.has_color){
          selectedSku.push(attribute);
        }
      })
    })
   
    let price = 0
    product?.skus.forEach(item => {
      const values1 = item.attributes.map(item => item.value).sort();
      const values2 = selectedSku.map(item => item.value).sort();
      if(values1.every((val, index) => val === values2[index])){
        if(item.offer_price){
          price = item.offer_price
        }else{
          price = product.sale_info.price_range_list[product.sale_info.price_range_list.length - 1].price
        }
      }
    })
    if(product) {
      setProduct({
        ...product,
        price: price === 0 ? '无货' : price
      })
    }
  };

  // 处理颜色选择
  const handleColorSelect = (colorId: string, index: number) => {
    const newGroupList = [...groupList];
    const attributeIndex = newGroupList[index]?.attributes.findIndex(
      (item) => item.value === colorId
    );
    if (attributeIndex !== -1) {
      newGroupList[index].attributes = newGroupList[index].attributes.map(
        (item, i) => {
          if (i === attributeIndex) {
            return { ...item, has_color: true };
          }
          return { ...item, has_color: false };
        }
      );
      setGroupList(newGroupList);
    }
    
    const selectedSku:SkuAttribute[] = []
    groupList.forEach(item => {
      item.attributes.forEach(attribute => {
        if(attribute.has_color){          
          selectedSku.push(attribute);
        }
      })
    })
   
    let price = 0
    product?.skus.forEach(item => {
      const values1 = item.attributes.map(item => item.value).sort();
      const values2 = selectedSku.map(item => item.value).sort();
      
      if(values1.every((val, index) => val === values2[index])){
        if(item.offer_price){
          price = item.offer_price
        }else{
          price = product?.sale_info?.price_range_list[product?.sale_info?.price_range_list?.length - 1]?.price
        }
      }
    })
    if(product) {
      setProduct({
        ...product,
        price: price === 0 ? '无货' : price
      })
    }
  };

  const getProductDetail = async () => {
    if (!route.params?.offer_id) return;
    setIsLoading(true);
    try {
      const res = await productApi.getProductDetail(route.params.offer_id);
      if (res.skus != null) {
        const priceSelectedSku = res.skus.find(
          (item) => item.offer_price === route.params.price
        );
        if (priceSelectedSku) {
          res.price = priceSelectedSku.offer_price;
        } else {
          res.price = res?.sale_info?.price_range_list[res?.sale_info?.price_range_list?.length - 1]?.price;
        }
      }else{
        res.price = route.params.price
      }
      if (res.skus != null) {
      const priceSelectedSku = res.skus.find(item => item.offer_price  === route.params.price)
      if (priceSelectedSku) {
        setPriceSelectedSku({
          price:route.params.price,
        })
      } 
    }   
      setPriceSelectedSku(priceSelectedSku)
      setProduct(res);
      let list:ProductGroupList[] = []
      if(res.skus != null){
       list = groupData(res,priceSelectedSku?.attributes as SkuAttribute[]);
      }else{
        list =  []
      }
      const imageUrls = [];
      const regex = /<img[^>]+src="([^"]+)"/g;
      let match;
      while ((match = regex.exec(res.description)) !== null) {
        imageUrls.push(match[1]); // match[1] 是 src 属性的值
      }
      setImageUrls(imageUrls);
      setGroupList(list);
    } catch (error) {
      console.error("Error fetching product details:", error);
    } finally {
      setIsLoading(false);
    }
  };

  const getSimilars = () => {
    productApi.getSimilarProducts(route.params.offer_id).then((res) => {
      setSimilars(res);
      setIsSimilarsFlag(true);
    });
  };
  useEffect(() => {
    getProductDetail();
    getSimilars();
  }, []);

  useEffect(() => {
    const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
      if (showBottomSheet) {
        setShowBottomSheet(false);
        return true;
      }
      return false;
    });

    return () => backHandler.remove();
  }, [showBottomSheet]);

  const handleImageLoad = (src: string, event: any) => {
    const { width: imageWidth, height: imageHeight } = event.nativeEvent.source;
    const aspectRatio = imageHeight / imageWidth;
    const calculatedHeight = width * aspectRatio;
    setImageHeights(prev => ({
      ...prev,
      [src]: calculatedHeight
    }));
  };

  return (
    <View style={{ flex: 1 }}>
      {isLoading ? (
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="large" color="#FF5100" />
          <Text style={styles.loadingText}>Loading product details...</Text>
        </View>
      ) : (
        <>
          <ScrollView
            style={styles.scrollView}
            contentContainerStyle={styles.scrollViewContent}
          >
            <View style={styles.productDetailsContainer3}>
              <View style={styles.timeCardContainer}>
                <View style={styles.searchContainer1}>
                  <TouchableOpacity onPress={() => {
                    if (showBottomSheet) {
                      setShowBottomSheet(false);
                    } else {
                      navigation.goBack();
                    }
                  }}>
                    <View style={styles.svgContainer}>
                      <BackIcon size={fontSize(20)}/>
                    </View>
                  </TouchableOpacity>
                 
                  <View style={styles.searchContainer2}>
                    <Text style={styles.searchTitleTextStyle}>Recherche</Text>
                    <View style={styles.svgContainer1}>
                      <CameraIcon color="#373737" size={fontSize(18)}/>
                      {/* Replace with your SVG component or icon */}
                    </View>
                  </View>
                  <View style={styles.searchContainer}>
                    <View style={styles.svgContainer1}>
                      {/* Replace with your SVG component or icon */}
                    </View>
                    <View style={styles.svgContainer2}>
                      {/* Replace with your SVG component or icon */}
                    </View>
                  </View>
                </View>
              </View>
              <View style={styles.centerColumnWithPagination}>
                <View style={{ position: "relative" }}>
                  <Carousel
                    loop
                    width={screenWidth}
                    data={product?.product_image_urls as string[]}
                    height={widthUtils(430, 430).height}
                    onSnapToItem={(index) => setActiveIndex(index)}
                    modeConfig={{
                      parallaxScrollingScale: 0.9,
                      parallaxScrollingOffset: 50,
                    }}
                    renderItem={({ item }) => (
                      <View
                        style={{
                          flex: 1,
                          justifyContent: "center",
                          alignItems: "center",
                          backgroundColor: "#f2f2f2",
                          borderRadius: 10,
                        }}
                      >
                        <Image
                          source={{ uri: item }}
                          style={{ width: "100%", height: "100%" }}
                        />
                      </View>
                    )}
                  />

                  {/* 底部指示灯 - 固定在右下角 */}
                  <View
                    style={{
                      position: "absolute",
                      bottom: 20,
                      right: 20,
                      backgroundColor: "gray", // 可选，看得清楚
                      borderRadius: 13,
                      justifyContent: "center",
                      alignItems: "center",
                    }}
                  >
                    <Text style={styles.activeIndexText}>
                      {activeIndex + 1}/{product?.product_image_urls.length}
                    </Text>
                  </View>
                </View>
              </View>
              <View style={styles.productDetailsContainer2}>
                <View style={styles.nightLampProductCard}>
                  <Text style={styles.creativeHeading}>{product?.subject}</Text>
                  <View style={styles.productInfoContainer1}>
                    <View style={styles.productInfoContainer}>
                      <View style={styles.salesInfoContainer}>
                        <Text style={styles.highlightedText}>{product?.price}</Text>
                        <Text style={styles.orangeHighlightedText}>FCFA</Text>
                        <View style={styles.priceBox}>
                          <Text style={styles.priceLabel}>3000FCFA</Text>
                          <View style={styles.priceContainer}></View>
                        </View>
                      </View>

                      <Text style={styles.salesCountLabel}>
                        {product?.sold_out} ventes
                      </Text>
                    </View>

                    <View style={styles.discountInfoContainer}>
                      <Text style={styles.emphasizedTextWidget}>-5%</Text>
                      <View style={styles.svgContainer4}>
                        {/* Replace with your SVG component or icon */}
                      </View>
                    </View>
                    <View style={styles.specialHighlightedSection}>
                      <View style={styles.svgContainer5}>
                        {/* Replace with your SVG component or icon */}
                      </View>
                    </View>
                    <View style={styles.vipStatusContainer}>
                      <View style={styles.vipBadgeContainer}>
                        <Text style={styles.vipStatusNumeric}>
                          <Text style={styles.emphasizedTextVip}>VIP</Text>
                          <Text style={styles.emphasizedText}> 1</Text>
                        </Text>
                      </View>
                    </View>
                  </View>
                </View>
                <View style={styles.productDetailsContainer}>
                  <View style={styles.productDetailsContainer1}>
                    <View style={styles.blackThemeContainer}>
                      {groupList.map((item, index) =>
                        item.has_image ? (
                          <View key={item.attribute_name}>
                            <Text style={styles.uniqueTextBlock}>
                              {item.attribute_name} : {item.attributes.find(item => item.has_color)?.value}
                            </Text>
                            <View style={styles.horizontalFlexContainer}>
                              {getDisplayAttributes(
                                item.attributes,
                                item.attribute_name
                              ).map((attribute) => (
                                <TouchableOpacity
                                  key={attribute.value}
                                  onPress={() =>
                                    handleColorSelect(attribute.value, index)
                                  }
                                  style={[
                                    styles.colorImageContainer,
                                    attribute.has_color &&
                                      styles.selectedColorImageContainer,
                                  ]}
                                >
                                  <Image
                                    source={{ uri: attribute.sku_image_url }}
                                    style={styles.imageContainer}
                                  />
                                </TouchableOpacity>
                              ))}

                              {!expandedGroups[item.attribute_name] &&
                                item.attributes.length > 6 && (
                                  <TouchableOpacity
                                    style={styles.expandButton}
                                    onPress={() =>
                                      toggleExpand(item.attribute_name)
                                    }
                                  >
                                    <Text style={styles.expandButtonText}>
                                      更多
                                    </Text>
                                  </TouchableOpacity>
                                )}

                              {expandedGroups[item.attribute_name] && (
                                <TouchableOpacity
                                  style={styles.expandButton}
                                  onPress={() => toggleExpand(item.attribute_name)}
                                >
                                  <Text style={styles.expandButtonText}>收起</Text>
                                </TouchableOpacity>
                              )}
                            </View>
                            
                            {
                              groupList.length > 1 && index === 0 && (
                                <TouchableOpacity style={styles.svgContainer6} onPress={() => setShowBottomSheet(true)}>
                              <View style={styles.svgContainer6}>
                                <DiagonalArrowIcon size={fontSize(18)}/>
                              </View>
                            </TouchableOpacity>
                              )
                            }
                            {
                              groupList.length === 1 && index === 0 && (
                                <TouchableOpacity style={styles.svgContainer6} onPress={() => setShowBottomSheet(true)}>
                              <View style={styles.svgContainer6}>
                                <DiagonalArrowIcon size={fontSize(18)}/>
                              </View>
                            </TouchableOpacity>
                              )
                            }
                          </View>
                        ) : (
                          <View key={item.attribute_name}>
                            <Text style={styles.uniqueTextBlock}>
                              {item.attribute_name}
                            </Text>

                            <View style={styles.horizontalFlexContainer}>
                              {getDisplayAttributes(
                                item.attributes,
                                item.attribute_name
                              ).map((attribute) => (
                                <TouchableOpacity
                                  key={attribute.value}
                                  onPress={() =>
                                    handleSizeSelect(attribute.value, index)
                                  }
                                  style={[
                                    styles.sizeButton,
                                    attribute.has_color &&
                                      styles.selectedSizeButton,
                                  ]}
                                >
                                  <Text
                                    style={[
                                      styles.sizeButtonText,
                                      attribute.has_color &&
                                        styles.selectedSizeText,
                                    ]}
                                  >
                                    {attribute.value}
                                  </Text>
                                </TouchableOpacity>
                              ))}

                              {!expandedGroups[item.attribute_name] &&
                                item.attributes.length > 6 && (
                                  <TouchableOpacity
                                    style={styles.expandButton}
                                    onPress={() =>
                                      toggleExpand(item.attribute_name)
                                    }
                                  >
                                    <Text style={styles.expandButtonText}>
                                      更多
                                    </Text>
                                  </TouchableOpacity>
                                )}

                              {expandedGroups[item.attribute_name] && (
                                <TouchableOpacity
                                  style={styles.expandButton}
                                  onPress={() => toggleExpand(item.attribute_name)}
                                >
                                  <Text style={styles.expandButtonText}>收起</Text>
                                </TouchableOpacity>
                              )}
                            </View>
                            {
                              groupList.length === 1 && (
                                <TouchableOpacity style={styles.svgContainer6} onPress={() => setShowBottomSheet(true)}>
                              <View style={styles.svgContainer6}>
                                <DiagonalArrowIcon size={fontSize(18)}/>
                              </View>
                            </TouchableOpacity>
                              )
                            }

                          {
                              groupList.length === 2 && index === 0 && (
                                <TouchableOpacity style={styles.svgContainer6} onPress={() => setShowBottomSheet(true)}>
                              <View style={styles.svgContainer6}>
                                <DiagonalArrowIcon size={fontSize(18)}/>
                              </View>
                            </TouchableOpacity>
                              )
                            }
                          </View>
                        )
                      )}
                    </View>
                  </View>
                </View>
                <View style={styles.storeRecommendationsContainer}>
                  <View style={styles.storeInfoContainer}>
                    <Text style={styles.storeSectionTitle}>
                      More from this store
                    </Text>
                    <Text style={styles.storeMoreLink}>View All</Text>
                  </View>

                  <ScrollView
                    horizontal
                    showsHorizontalScrollIndicator={false}
                    contentContainerStyle={styles.productGridContainer}
                  >
                    {isSimilarsFlag &&
                      similars?.map((item) => (
                        <View style={styles.productCard} key={item.offer_id}>
                          <View style={styles.cardContainerWithPrice}>
                            <Image
                              source={{ uri: item.product_image_urls[0] }}
                              style={styles.imageContainerCompact}
                            />
                          </View>
                          <View style={styles.priceContainerFlex}>
                            <Text style={styles.highlightedText1}>
                              {item.max_price}
                            </Text>
                            <Text style={styles.highlightedTextWithBorder}>
                              FCFA
                            </Text>
                          </View>
                        </View>
                      ))}
                  </ScrollView>
                </View>
                <View style={{ width: "100%" }}>
                  {imageUrls.map((src, index) => (
                    <View key={index} style={{ width: "100%" }}>
                      <Image
                        style={{
                          width: "100%",
                          height: imageHeights[src] || 200,
                          backgroundColor: "#f5f5f5",
                        }}
                        source={{ uri: src }}
                        resizeMode="contain"
                        onLoad={(event) => handleImageLoad(src, event)}
                      />
                    </View>
                  ))}
                </View>
              </View>
            </View>
          </ScrollView>
          <View style={styles.fixedBottomBar}>
            <TouchableOpacity style={styles.chatNowButton}>
              <WhiteCircleIcon color="#fff" size={fontSize(20)} />
              <Text style={styles.chatNowText}>chatNow</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.addToCartButton}
              // onPress={() => setShowBottomSheet(true)}
            >
              <ShoppingCartIcon color="#fff" size={fontSize(20)} />
              <Text style={styles.addToCartText}>addToCart</Text>
            </TouchableOpacity>
          </View>

          {showBottomSheet && product && (
             <View style={styles.bottomSheetOverlay}>
               <Animated.View
                style={[
                  styles.bottomSheet,
                ]}
               >
                <ProductCard onClose={() => setShowBottomSheet(false)} product={product} groupList={groupList}></ProductCard>
               </Animated.View>
             </View>
          )}
        </>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    flex: 1,
    backgroundColor: "white",
  },
  scrollViewContent: {
    flexGrow: 1,
  },
  productDetailsContainer3: {
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
    width: "100%",
    backgroundColor: "white",
  },
  timeCardContainer: {
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
    paddingTop: 3,
    paddingBottom: 15,
    paddingLeft: 18,
  },
  timeInfoContainer: {
    flexDirection: "row",
    gap: 8,
    alignItems: "center",
    justifyContent: "space-between",
    paddingLeft: 38,
  },
  timeDisplay: {
    width: 42,
    fontWeight: "600",
    fontSize: fontSize(17),
    color: "black",
    textAlign: "center",
  },
  timeDisplayContainer: {
    width: widthUtils(54,154).width,
    height: widthUtils(54,54).height,
  },
  searchContainer1: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
    marginTop: 2,
  },
  svgContainer: {
    width: widthUtils(18,18).width,
    height: widthUtils(18,18).height,
  },
  searchContainer2: {
    flex: 1,
    flexDirection: "row",
    gap: 8,
    alignItems: "center",
    justifyContent: "space-between",
    height: widthUtils(50,50).height,
    paddingRight: 20,
    paddingLeft: 16,
    marginLeft: 4,
    backgroundColor: "#f4f4f4",
    borderWidth: 1,
    borderColor: "#eeeeee",
    borderRadius: 25,
  },
  searchTitleTextStyle: {
    fontWeight: "600",
    fontSize: fontSize(16),
    color: "#747474",
  },
  svgContainer1: {
    width: widthUtils(24,24).width,
    height: widthUtils(24,24).height,
    color: "#373737",
  },
  searchContainer: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
    marginLeft: 9,
  },
  svgContainer2: {
    width: widthUtils(24,24).width,
    height: widthUtils(24,24).height,
    marginLeft: 11,
    color: "#373737",
  },
  productDetailsContainer2: {
    backgroundColor: "#f4f4f4",
  },
  centerColumnWithPagination: {
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "center",
    width: "100%",
    backgroundColor: "#f4f4f4",
  },
  centerContentWithPaginationButton: {
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
  },
  sidebarContainer: {
    paddingLeft: 350,
  },
  centerIconContainer: {
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    width: widthUtils(40,40).width,
    height: widthUtils(40,40).height,
    backgroundColor: "#efefef",
    borderRadius: 25,
  },
  centerBox1: {
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    width: widthUtils(60,60).width,
    height: widthUtils(60,60).height,
    marginTop: 125,
    backgroundColor: "rgba(92, 92, 92, 0.6)",
    borderWidth: 1,
    borderColor: "white",
    borderRadius: 35,
  },
  svgContainer3: {
    width: widthUtils(20,20).width,
    height: widthUtils(20,20).height,
    color: "#ffffff",
  },
  darkButton: {
    alignSelf: "flex-end",
    width: widthUtils(26,50).width,
    height: widthUtils(26,50).height,

    minWidth: 50,
    marginTop: 147,
    fontWeight: "600",
    fontSize: fontSize(12),
    color: "white",
    backgroundColor: "rgba(44, 44, 44, 0.7)",
    borderRadius: 13,
  },
  nightLampProductCard: {
    width: "100%",
    padding: 16,
    paddingLeft: 19,
    paddingBottom: 23,
    backgroundColor: "white",
  },
  creativeHeading: {
    width: "100%",
    fontWeight: "600",
    fontSize: fontSize(18),
    lineHeight: 22,
    color: "black",
    textAlign: "left",
  },
  productInfoContainer1: {
    flexDirection: "row",
    alignItems: "flex-end",
    justifyContent: "flex-start",
    marginTop: 10.5,
  },
  productInfoContainer: {
    alignSelf: "flex-start",
  },
  salesInfoContainer: {
    flexDirection: "row",
    alignItems: "flex-start",
    justifyContent: "flex-start",
  },
  highlightedText: {
    fontWeight: "700",
    fontSize: fontSize(30),
    color: "#ff5100",
  },
  orangeHighlightedText: {
    fontWeight: "700",
    fontSize: fontSize(14),
    marginLeft: 1.25,
    color: "#ff5100",
    lineHeight: 28,
  },
  salesCountLabel: {
    marginTop: 6.75,
    fontWeight: "600",
    fontSize: fontSize(14),
    color: "#7c7c7c",
  },
  priceBox: {
    paddingTop: 12,
    marginLeft: -0.2,
  },
  priceLabel: {
    fontWeight: "600",
    fontSize: fontSize(12),
    color: "#9a9a9a",
  },
  priceContainer: {
    width: "100%",
    marginTop: -4.75,
    borderTopWidth: 1,
    borderTopColor: "#9a9a9a",
  },
  discountInfoContainer: {
    flexDirection: "column",
    alignItems: "center",
    alignSelf: "flex-start",
    justifyContent: "flex-start",
    paddingBottom: 16,
    marginLeft: 10.5,
  },
  emphasizedTextWidget: {
    fontStyle: "italic",
    fontWeight: "900",
    fontSize: fontSize(11),
    color: "#4e2000",
  },
  svgContainer4: {
    width: widthUtils(32,32).width,
    height: widthUtils(32,32).height,
    marginTop: -26,
  },
  specialHighlightedSection: {
    paddingBottom: 20.5,
    marginLeft: -1.75,
  },
  svgContainer5: {
    width: widthUtils(10,10).width,
    height: widthUtils(10,10).height,
    color: "#3b3b3b",
  },
  vipStatusContainer: {
    paddingBottom: 21,
    marginLeft: -2.5,
  },
  vipBadgeContainer: {
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-end",
    paddingRight: 10,
    paddingLeft: 10,
    backgroundColor: "#3b3b3b",
    borderRadius: 5,
    borderBottomLeftRadius: 0,
  },
  vipStatusNumeric: {
    fontStyle: "italic",
    fontWeight: "900",
    fontSize: fontSize(14),
  },
  emphasizedTextVip: {
    fontStyle: "italic",
    fontWeight: "900",
    fontSize: fontSize(14),
  },
  emphasizedText: {
    fontStyle: "italic",
    fontWeight: "900",
    fontSize: fontSize(14),
    letterSpacing: -2,
  },
  productDetailsContainer: {
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
    width: "100%",
    padding: 10,
    paddingLeft: 19,
    paddingBottom: 13,
    marginTop: 8,
    backgroundColor: "white",
  },
  productDetailsContainer1: {
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
  },
  blackThemeContainer: {},
  uniqueTextBlock: {
    fontWeight: "600",
    fontSize: fontSize(16),
    lineHeight: 20,
    color: "black",
  },
  horizontalFlexContainer: {
    width: "100%",
    flexDirection: "row",
    flexWrap: "wrap",
    gap: 10,
    alignItems: "center",
    justifyContent: "flex-start",
    marginTop: 8,
  },
  imageContainer: {
    width: widthUtils(40,40).width,
    height: widthUtils(40,40).height,
    borderRadius: 5,
  },
  centerBox: {
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "center",
    width: widthUtils(40,40).width,
    backgroundColor: "#e0e0e0",
    borderRadius: 5,
  },
  imageContainerStyles: {
    height: widthUtils(40,40).height,
  },
  svgContainer6: {
    alignSelf: "flex-end",
    width: widthUtils(18,18).width,
    height: widthUtils(18,18).height,
  },
  sizeSelector: {
    marginTop: 0,
  },
  numericHighlightedTextContainer: {
    alignItems: "center",
    justifyContent: "center",
    height: widthUtils(30, 30).height,
    paddingHorizontal: 11,
    fontWeight: "400",
    fontSize: fontSize(14),
    color: "#ff5100",
    backgroundColor: "#fff5f0",
    borderWidth: 1,
    borderColor: "#ff5100",
    borderRadius: 5,
  },
  numberBadge: {
    alignItems: "center",
    justifyContent: "center",
    height: widthUtils(30, 40).height,
    paddingHorizontal: 11,
    fontWeight: "400",
    fontSize: fontSize(14),
    color: "#373737",
    backgroundColor: "#efefef",
    borderRadius: 5,
    lineHeight: widthUtils(40, 40).height,
    marginBottom: 10,
  },
  sizeButton: {
    alignItems: "center",
    justifyContent: "center",
    height: widthUtils(30, 40).height,
    paddingHorizontal: 11,
    backgroundColor: "#efefef",
    borderRadius: 5,
    marginBottom: 10,
  },
  sizeButtonText: {
    fontWeight: "400",
    fontSize: fontSize(14),
    color: "#373737",
    lineHeight: widthUtils(40, 40).height,
  },
  selectedSizeButton: {
    backgroundColor: "#fff5f0",
    borderWidth: 1,
    borderColor: "#ff5217",
  },
  selectedSizeText: {
    color: "#ff5217",
    fontWeight: "600",
  },
  expandButton: {
    alignItems: "center",
    justifyContent: "center",
    height: widthUtils(30, 40).height,
    paddingHorizontal: 11,
    fontWeight: "600",
    fontSize: fontSize(14),
    color: "#ff5100",
    backgroundColor: "#fff5f0",
    borderRadius: 5,
    lineHeight: widthUtils(40, 40).height,
    marginBottom: 10,
    borderWidth: 1,
    borderColor: "#ff5100",
  },
  expandButtonText: {
    color: "#ff5100",
    fontWeight: "600",
  },
  storeRecommendationsContainer: {
    width: "100%",
    padding: 10,
    paddingLeft: 19,
    paddingBottom: 19,
    marginTop: 8,
    backgroundColor: "white",
  },
  storeInfoContainer: {
    flexDirection: "row",
    gap: 8,
    alignItems: "center",
    justifyContent: "space-between",
    width: "100%",
  },
  storeSectionTitle: {
    fontWeight: "600",
    fontSize: fontSize(16),
    lineHeight: 20,
    color: "black",
  },
  storeMoreLink: {
    fontWeight: "600",
    fontSize: fontSize(12),
    color: "#747474",
  },
  productGridContainer: {
    flexDirection: "row",
    alignItems: "flex-start",
    justifyContent: "flex-start",
    marginTop: 12,
    paddingRight: 10,
  },
  productCard: {
    width: widthUtils(115,90).width,
    height: widthUtils(115,90).height,
    marginRight: 10,
  },
  cardContainerWithPrice: {
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "center",
    width: "100%",
    backgroundColor: "#e0e0e0",
    borderRadius: 5,
  },
  imageContainerCompact: {
    height: widthUtils(90,90).height,
    width: widthUtils(90,90).width,
  },
  priceContainerFlex: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
    marginTop: 2,
  },
  highlightedText1: {
    fontWeight: "700",
    fontSize: fontSize(16),
    lineHeight: 20,
    color: "#ff5100",
  },
  highlightedTextWithBorder: {
    fontWeight: "700",
    fontSize: fontSize(10),
    marginLeft: 1.25,
    color: "#ff5100",
  },
  productImageContainer: {
    width: "100%",
    height: widthUtils(90,90).height,
    borderRadius: 5,
  },
  orangeHighlightTextStyle: {
    fontWeight: "700",
    fontSize: fontSize(16),
    lineHeight: widthUtils(20,20).height,
    marginTop: 2,
    color: "#ff5100",
  },
  productDetailsContainer4: {
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "flex-start",
    width: "100%",
    marginTop: 8,
    backgroundColor: "white",
  },
  productDetailsContainer5: {
    padding: 10,
    paddingLeft: 19,
    paddingBottom: 183,
  },
  productDetailsDescription: {
    width: "100%",
    marginTop: 8,
    fontWeight: "400",
    fontSize: fontSize(14),
    lineHeight: widthUtils(20,20).height,
    color: "#373737",
    textAlign: "left",
  },
  imageContainer1: {
    marginTop: -165,
    marginRight: 20,
    marginLeft: 20,
  },
  imageContainerStyles1: {
    width: widthUtils(229,390).width,
    height: widthUtils(229,390).height,
  },
  flexCenterButtons: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    height: widthUtils(64,64).height,
    paddingRight: 20,
    paddingLeft: 20,
    marginTop: -64,
    backgroundColor: "white",
  },
  gradientButton: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    gap: 4,
    width: widthUtils(50,160).width,
    height: widthUtils(50,160).height,
    minWidth: 160,
    fontWeight: "700",
    fontSize: fontSize(18),
    lineHeight: 22,
    color: "white",
    backgroundColor:
      "linear-gradient(90deg, rgba(0, 183, 68, 1) 0%, rgba(28, 207, 95, 1) 100%)",
    borderRadius: 30,
  },
  svgContainer7: {
    width: widthUtils(24,24).width,
    height: widthUtils(24,24).height,
    color: "#ffffff",
  },
  orangeGradientButton: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    gap: 7,
    width: widthUtils(50,220).width,
    height: widthUtils(50,220).height,
    minWidth: 220,
    marginLeft: 10,
    fontWeight: "700",
    fontSize: fontSize(18),
    lineHeight: 22,
    color: "white",
    backgroundColor:
      "linear-gradient(90deg, rgba(255, 128, 0, 1) 0%, rgba(255, 81, 0, 1) 100%)",
    borderRadius: 30,
  },
  activeIndexText: {
    color: "white",
    fontSize: fontSize(12),
    width: widthUtils(26, 50).width,
    height: widthUtils(26, 50).height,
    textAlign: "center",
    lineHeight: widthUtils(26, 50).height + 2,
  },
  colorImageContainer: {
    padding: 2,
    borderRadius: 5,
  },
  selectedColorImageContainer: {
    backgroundColor: "#fff5f0",
    borderWidth: 1,
    borderColor: "#ff5217",
  },
  fixedBottomBar: {
    position: "absolute",
    bottom: 10,
    left: 0,
    right: 0,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    paddingHorizontal: 15,
    backgroundColor: "transparent",
    zIndex: 100,
    height: widthUtils(60,60).height,
  },
  chatNowButton: {
    width: "40%",
    height: widthUtils(50, 50).height,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    paddingVertical: 0,
    borderRadius: 30,
    backgroundColor: "#4CAF50",
    marginRight: 10,
    elevation: 4,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 3,
  },
  chatNowText: {
    fontSize: fontSize(18),
    color: "#fff",
    fontWeight: "bold",
    marginLeft: 8,
  },
  addToCartButton: {
    width: "60%",
    height: widthUtils(50,50).height,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    paddingVertical: 0,
    borderRadius: 30,
    backgroundColor: "#FF5722",
    marginLeft: 10,
    elevation: 4,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 3,
  },
  addToCartText: {
    fontSize: fontSize(18),
    color: "#fff",
    fontWeight: "bold",
    marginLeft: 8,
  },
  modalContainer: {
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'flex-end',
  },
  modalContent: {
    height: '90%',
    backgroundColor: 'white',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    padding: 20,
  },
  closeButton: {
    alignSelf: 'flex-end',
    padding: 10,
  },
  closeButtonText: {
    fontSize: fontSize(16),
    color: '#333',
  },
  bottomSheetOverlay: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: "flex-end",
    zIndex: 200,
  },
  bottomSheet: {
    backgroundColor: "#fff",
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    height: "85%",
    zIndex: 1,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  loadingText: {
    marginTop: 10,
    fontSize: fontSize(16),
    color: '#666',
  },
});