asios/app/award-detail/components/ProductList.tsx

import { Image } from 'expo-image';
import { useRouter } from 'expo-router';
import React from 'react';
import { ImageBackground, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';

import { Images } from '@/constants/images';

interface ProductItem {
  id: string;
  name: string;
  cover: string;
  level: string;
  probability: number;
  price?: number;
  quantity?: number;
  spu?: {
    id: string;
    cover: string;
    name: string;
  };
}

interface ProductListProps {
  products: ProductItem[];
  levelList?: any[];
  poolId: string;
  price: number;
}

// 等级配置 - 对应小程序的 LEVEL_MAP
const LEVEL_CONFIG: Record<string, { title: string; color: string; bgColor: string; productItem: string }> = {
  A: { title: '超神款', color: '#fff', bgColor: '#FF4444', productItem: Images.box.detail.productItemA },
  B: { title: '欧皇款', color: '#fff', bgColor: '#FF9900', productItem: Images.box.detail.productItemB },
  C: { title: '隐藏款', color: '#fff', bgColor: '#9966FF', productItem: Images.box.detail.productItemC },
  D: { title: '普通款', color: '#fff', bgColor: '#00CCFF', productItem: Images.box.detail.productItemD },
};

const ignoreRatio0 = (val: number) => {
  // Revert to original logic: Do NOT multiply. Assume API sends WYSIWYG value (e.g. 99.05 or 0.001)
  // Just format string to remove trailing zeros.
  let str = String(val);
  // Match original logic: strip trailing zeros if decimal
  if (str.indexOf('.') > -1) {
      str = str.replace(/0+$/, '').replace(/\.$/, '');
  }
  return str;
};

export const ProductList: React.FC<ProductListProps> = ({ products, levelList, poolId }) => {
  const router = useRouter();
  
  // 按等级分组
  const groupedProducts = products.reduce(
    (acc, item) => {
      const level = item.level || 'D';
      if (!acc[level]) acc[level] = [];
      acc[level].push(item);
      return acc;
    },
    {} as Record<string, ProductItem[]>
  );

  // 计算各等级概率
  const getLevelProbability = (level: string) => {
    const item = levelList?.find((e) => e.level === level);
    return item ? `${item.probability}%` : '0%';
  };

  // 点击产品跳转到详情页
  const handleProductPress = (item: ProductItem) => {
    // Look up by object reference to handle duplicate IDs correctly
    const index = products.indexOf(item);
    router.push({
      pathname: '/award-detail/swipe' as any,
      params: { poolId, index: index >= 0 ? index : 0 },
    });
  };

  const renderLevelSection = (level: string, items: ProductItem[]) => {
    const config = LEVEL_CONFIG[level] || LEVEL_CONFIG['D'];

    return (
      <View key={level} style={styles.levelBox}>
        {/* 等级标题行 */}
        <View style={styles.levelTitleRow}>
          <Text style={[styles.levelTitle, { color: config.bgColor }]}>{config.title}</Text>
          <View style={styles.levelProportion}>
            <Text style={styles.probabilityLabel}>概率：</Text>
            <Text style={styles.probabilityValue}>{getLevelProbability(level)}</Text>
          </View>
        </View>

        {/* 商品横向滚动列表 */}
        <ScrollView
          horizontal
          showsHorizontalScrollIndicator={false}
          contentContainerStyle={styles.scrollContent}
        >
          {items.map((item, index) => {
            const cover = item.spu?.cover || item.cover;
            return (
              <TouchableOpacity 
                key={item.id || index} 
                onPress={() => handleProductPress(item)}
                activeOpacity={0.8}
              >
                <ImageBackground 
                    source={{ uri: Images.box.detail.levelBoxBg }}
                    style={styles.productItem}
                    resizeMode="stretch"
                >
                    {/* 商品图片 */}
                    <Image
                        source={{ uri: cover }}
                        style={styles.productImage}
                        contentFit="contain"
                    />
                    
                    {/* 概率标签背景 */}
                    <ImageBackground
                        source={{ uri: config.productItem }}
                        style={styles.levelTagBg}
                        resizeMode="stretch"
                    >
                         <View style={styles.levelTagContent}>
                            <Text style={styles.levelTagLabel}>概率：</Text>
                            <Text style={styles.levelTagText}>{ignoreRatio0(item.probability)}%</Text>
                         </View>
                    </ImageBackground>
                </ImageBackground>
              </TouchableOpacity>
            );
          })}
        </ScrollView>
      </View>
    );
  };

  const levelOrder = ['A', 'B', 'C', 'D'];

  return (
    <View style={styles.container}>
      {/* 标题 */}
      <View style={styles.titleBox}>
        <Image source={{ uri: Images.box.detail.productTitle }} style={styles.titleImg} contentFit="contain" />
      </View>

      {levelOrder.map((level) => {
        const items = groupedProducts[level];
        if (!items || items.length === 0) return null;
        return renderLevelSection(level, items);
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 10,
    marginTop: -40,
  },
  titleBox: {
    alignItems: 'center',
    marginBottom: 15,
  },
  titleImg: {
    width: 121,
    height: 29,
  },
  levelBox: {
    marginBottom: 20,
  },
  levelTitleRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 14,
    paddingBottom: 10,
    position: 'relative',
  },
  levelTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    textShadowColor: '#000',
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 1,
  },
  levelProportion: {
    position: 'absolute',
    right: 0,
    bottom: 10,
    flexDirection: 'row',
    alignItems: 'center',
  },
  probabilityLabel: {
    fontSize: 12,
    color: '#ffc901',
  },
  probabilityValue: {
    fontSize: 12,
    color: '#fff',
  },
  scrollContent: {
    paddingHorizontal: 5,
  },
  productItem: {
    width: 88, 
    height: 110,
    marginRight: 10,
    alignItems: 'center',
  },
  productImage: {
    width: 88,
    height: 90,
  },
  levelTagBg: {
    width: 88,
    height: 53,
    marginTop: -18, 
    justifyContent: 'center',
    paddingTop: 12, 
  },
  levelTagContent: {
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
  },
  levelTagLabel: {
      fontSize: 8,
      color: '#fff',
  },
  levelTagText: {
    fontSize: 9,
    color: '#fff',
    fontWeight: 'bold',
  },
});