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

import { Image } from 'expo-image';
import { useRouter } from 'expo-router';
import React from 'react';
import { 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 }> = {
  A: { title: '超神款', color: '#fff', bgColor: '#FF4444' },
  B: { title: '欧皇款', color: '#fff', bgColor: '#FF9900' },
  C: { title: '隐藏款', color: '#fff', bgColor: '#9966FF' },
  D: { title: '普通款', color: '#fff', bgColor: '#00CCFF' },
};

const ignoreRatio0 = (val: number) => {
  // 将小数转换为百分比，保留两位小数
  const percent = val * 100;
  // 如果是整数则不显示小数点
  if (percent === Math.floor(percent)) {
    return String(Math.floor(percent));
  }
  // 保留两位小数，去除末尾的0
  return percent.toFixed(2).replace(/\.?0+$/, '');
};

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) => {
    // 找到该产品在原始列表中的索引
    const index = products.findIndex((p) => p.id === item.id);
    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} 
                style={styles.productItem}
                onPress={() => handleProductPress(item)}
                activeOpacity={0.8}
              >
                {/* 商品图片 */}
                <View style={styles.productImageBox}>
                  <Image
                    source={{ uri: cover }}
                    style={styles.productImage}
                    contentFit="contain"
                  />
                </View>
                {/* 等级标签 - 显示概率和等级名称 */}
                <View style={[styles.levelTag, { backgroundColor: config.bgColor }]}>
                  <Text style={styles.levelTagLabel}>概率</Text>
                  <Text style={styles.levelTagText}>{ignoreRatio0(item.probability)}%</Text>
                </View>
              </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: 90,
    marginRight: 10,
    alignItems: 'center',
  },
  productImageBox: {
    width: 90,
    height: 90,
    backgroundColor: '#fff',
    borderRadius: 4,
    overflow: 'hidden',
  },
  productImage: {
    width: 90,
    height: 90,
  },
  levelTag: {
    width: 80,
    height: 26,
    borderRadius: 2,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: -8,
  },
  levelTagLabel: {
    fontSize: 10,
    color: '#fff',
    marginRight: 2,
  },
  levelTagText: {
    fontSize: 12,
    color: '#fff',
    fontWeight: 'bold',
  },
});