asios/components/award-detail-yfs/BoxSelectionModal.tsx

import { Images } from '@/constants/images';
import { getBoxList } from '@/services/award';
import { Image, ImageBackground } from 'expo-image';
import React, { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
import {
    ActivityIndicator,
    Dimensions,
    FlatList,
    Modal,
    StyleSheet,
    Text,
    TouchableOpacity,
    View
} from 'react-native';

const { width: SCREEN_WIDTH } = Dimensions.get('window');

interface BoxSelectionModalProps {
  poolId: string;
  onSelect: (box: any) => void;
}

export interface BoxSelectionModalRef {
  show: () => void;
  close: () => void;
}

const TABS = [
  { title: '全部', value: '' },
  { title: '超神款', value: 'A' },
  { title: '欧皇款', value: 'B' },
  { title: '隐藏款', value: 'C' },
  { title: '普通款', value: 'D' },
];

export const BoxSelectionModal = forwardRef<BoxSelectionModalRef, BoxSelectionModalProps>(
  ({ poolId, onSelect }, ref) => {
    const [visible, setVisible] = useState(false);
    const [activeTab, setActiveTab] = useState(TABS[0]);
    const [list, setList] = useState<any[]>([]);
    const [loading, setLoading] = useState(false);
    const [refreshing, setRefreshing] = useState(false);
    const [page, setPage] = useState(1);
    const [hasMore, setHasMore] = useState(true);

    const loadData = useCallback(async (pageNum = 1, tabValue = '', isRefresh = false) => {
      if (isRefresh) setRefreshing(true);
      if (pageNum === 1 && !isRefresh) setLoading(true);

      try {
        const res = await getBoxList(poolId, tabValue as any, pageNum, 20); // Using 20 as pageSize
        const newData = res?.records || []; // Assuming standard paginated response
        
        if (pageNum === 1) {
            setList(newData);
        } else {
            setList(prev => [...prev, ...newData]);
        }
        
        setHasMore(newData.length >= 20);
        setPage(pageNum);
      } catch (error) {
        console.error('Failed to load boxes:', error);
      } finally {
        setLoading(false);
        setRefreshing(false);
      }
    }, [poolId]);

    useImperativeHandle(ref, () => ({
      show: () => {
        setVisible(true);
        setActiveTab(TABS[0]);
        loadData(1, TABS[0].value);
      },
      close: () => {
        setVisible(false);
      },
    }));

    const handleTabChange = (tab: typeof TABS[0]) => {
      setActiveTab(tab);
      loadData(1, tab.value);
    };

    const handleLoadMore = () => {
        if (!loading && hasMore) {
            loadData(page + 1, activeTab.value);
        }
    };

    const handleRefresh = () => {
        loadData(1, activeTab.value, true);
    }

    const renderItem = ({ item, index }: { item: any; index: number }) => {
        if (item.leftQuantity <= 0) return null;

        return (
            <TouchableOpacity 
                style={styles.item} 
                onPress={() => {
                    setVisible(false);
                    onSelect(item);
                }}
            >
                <View style={styles.itemIndex}>
                    <Text style={styles.indexText}>{index + 1}</Text>
                </View>
                
                <View style={styles.itemContent}>
                    {/* Left Icon & Count */}
                    <View style={styles.leftSection}>
                        <Image source={{ uri: Images.box.detail.boxIcon }} style={styles.boxIcon} contentFit="contain"/>
                        <Text style={styles.leftText}>剩{item.leftQuantity}发</Text>
                    </View>
                    
                    <View style={styles.divider} />

                    {/* Breakdown */}
                    <View style={styles.breakdown}>
                        <BreakdownItem label="A" current={item.leftQuantityA} total={item.quantityA} icon={Images.box.detail.levelTextA} />
                        <BreakdownItem label="B" current={item.leftQuantityB} total={item.quantityB} icon={Images.box.detail.levelTextB} />
                        <BreakdownItem label="C" current={item.leftQuantityC} total={item.quantityC} icon={Images.box.detail.levelTextC} />
                        <BreakdownItem label="D" current={item.leftQuantityD} total={item.quantityD} icon={Images.box.detail.levelTextD} />
                    </View>
                </View>
            </TouchableOpacity>
        );
    };

    return (
      <Modal visible={visible} transparent animationType="slide" onRequestClose={() => setVisible(false)}>
        <View style={styles.overlay}>
            <TouchableOpacity style={styles.mask} activeOpacity={1} onPress={() => setVisible(false)} />
            
            <ImageBackground 
                source={{ uri: Images.box.detail.recordBg }} 
                style={styles.container}
                resizeMode="stretch"
            >
                {/* Header */}
                <View style={styles.header}>
                    <Image source={{ uri: Images.box.detail.recordTitleLeft }} style={styles.titleDecor} contentFit="contain" />
                    <Text style={styles.title}>换盒</Text>
                    <Image source={{ uri: Images.box.detail.recordTitleRight }} style={styles.titleDecor} contentFit="contain" />
                    
                    <TouchableOpacity style={styles.closeBtn} onPress={() => setVisible(false)}>
                         <Text style={styles.closeText}>×</Text>
                    </TouchableOpacity>
                </View>

                {/* Tabs */}
                <View style={styles.tabs}>
                    {TABS.map(tab => (
                        <TouchableOpacity 
                            key={tab.value} 
                            style={[styles.tab, activeTab.value === tab.value && styles.activeTab]}
                            onPress={() => handleTabChange(tab)}
                        >
                            <Text style={[styles.tabText, activeTab.value === tab.value && styles.activeTabText]}>
                                {tab.title}
                            </Text>
                        </TouchableOpacity>
                    ))}
                </View>

                {/* List */}
                <View style={styles.listContainer}>
                     <FlatList
                        data={list}
                        renderItem={renderItem}
                        keyExtractor={(item, index) => item.id || String(index)}
                        contentContainerStyle={styles.listContent}
                        onEndReached={handleLoadMore}
                        onEndReachedThreshold={0.5}
                        refreshing={refreshing}
                        onRefresh={handleRefresh}
                        ListEmptyComponent={
                            !loading ? <Text style={styles.emptyText}>暂无数据</Text> : null
                        }
                        ListFooterComponent={loading && !refreshing ? <ActivityIndicator /> : null}
                    />
                </View>

            </ImageBackground>
        </View>
      </Modal>
    );
  }
);

const BreakdownItem = ({ label, current, total, icon }: { label: string, current: number, total: number, icon: string }) => (
    <View style={styles.breakdownItem}>
        <Image source={{ uri: icon }} style={styles.levelIcon} contentFit="contain" />
        <Text style={styles.breakdownText}>
            <Text style={styles.currentNum}>{current}</Text>/{total}
        </Text>
    </View>
);

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'flex-end',
  },
  mask: { flex: 1 },
  container: {
    height: 600, // wrapperWidth rpx in Vue
    paddingTop: 15,
    borderTopLeftRadius: 15,
    borderTopRightRadius: 15,
    overflow: 'hidden',
    backgroundColor: '#fff', // Fallback
  },
  header: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      marginBottom: 15,
      position: 'relative',
      height: 44,
  },
  title: {
      fontSize: 18,
      fontWeight: 'bold',
      color: '#fff',
      marginHorizontal: 10,
      textShadowColor: '#000',
      textShadowOffset: { width: 1, height: 1 },
      textShadowRadius: 1,
  },
  titleDecor: {
      width: 17,
      height: 19,
  },
  closeBtn: {
      position: 'absolute',
      right: 15,
      top: 0,
      width: 24,
      height: 24,
      backgroundColor: '#ebebeb',
      borderRadius: 12,
      justifyContent: 'center',
      alignItems: 'center',
  },
  closeText: {
      fontSize: 18,
      color: '#a2a2a2',
      marginTop: -2,
  },
  tabs: {
      flexDirection: 'row',
      justifyContent: 'space-around',
      paddingHorizontal: 15,
      marginBottom: 10,
  },
  tab: {
      paddingVertical: 6,
      paddingHorizontal: 12,
      borderRadius: 15,
      backgroundColor: '#f5f5f5',
  },
  activeTab: {
      backgroundColor: '#ffdb4d',
  },
  tabText: {
      fontSize: 12,
      color: '#666',
  },
  activeTabText: {
      color: '#333',
      fontWeight: 'bold',
  },
  listContainer: {
      flex: 1,
      backgroundColor: '#f3f3f3',
      marginHorizontal: 15,
      marginBottom: 20,
      borderWidth: 2,
      borderColor: '#000',
      padding: 10,
  },
  listContent: {
      paddingBottom: 20,
  },
  item: {
      backgroundColor: '#fff',
      borderWidth: 3,
      borderColor: '#000',
      marginBottom: 10,
      flexDirection: 'row',
      height: 80,
      position: 'relative',
      overflow: 'hidden',
  },
  itemIndex: {
      position: 'absolute',
      left: 0,
      top: 0,
      width: 22,
      height: 22,
      backgroundColor: '#fff',
      borderRightWidth: 2,
      borderBottomWidth: 2,
      borderColor: '#000',
      justifyContent: 'center',
      alignItems: 'center',
      zIndex: 1,
  },
  indexText: {
      fontSize: 12,
      fontWeight: 'bold',
  },
  itemContent: {
      flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
      paddingHorizontal: 10,
      paddingLeft: 22, // Space for index
  },
  leftSection: {
      width: 60,
      alignItems: 'center',
      justifyContent: 'center',
  },
  boxIcon: {
      width: 24,
      height: 24,
      marginBottom: 2,
  },
  leftText: {
      fontSize: 10,
      color: '#333',
  },
  divider: {
      width: 1,
      height: 40,
      backgroundColor: '#dcdad3',
      marginHorizontal: 10,
      opacity: 0.5,
  },
  breakdown: {
      flex: 1,
      flexDirection: 'row',
      flexWrap: 'wrap',
  },
  breakdownItem: {
      width: '50%',
      flexDirection: 'row',
      alignItems: 'center',
      marginBottom: 4,
  },
  levelIcon: {
      width: 45,
      height: 16,
      marginRight: 4,
  },
  breakdownText: {
      fontSize: 12,
      color: '#666',
  },
  currentNum: {
      color: '#000',
      fontWeight: 'bold',
  },
  emptyText: {
      textAlign: 'center',
      marginTop: 20,
      color: '#999',
  },
});