asios/app/award-detail-yfs/index.tsx

import { useLocalSearchParams, useRouter } from 'expo-router';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import {
    ActivityIndicator,
    Alert,
    Dimensions,
    ImageBackground,
    ScrollView,
    StatusBar,
    StyleSheet,
    Text,
    TouchableOpacity,
    View
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { RecordModal, RecordModalRef } from '@/app/award-detail/components/RecordModal';
import { BoxSelectionModal, BoxSelectionModalRef } from '@/components/award-detail-yfs/BoxSelectionModal';
import FirstLast from '@/components/award-detail-yfs/FirstLast';
import { NumSelectionModal, NumSelectionModalRef } from '@/components/award-detail-yfs/NumSelectionModal';
import ProductListYfs from '@/components/award-detail-yfs/ProductListYfs';
import ProductSwiper from '@/components/award-detail-yfs/ProductSwiper';
import PurchaseBar from '@/components/award-detail-yfs/PurchaseBar';
import { RuleModal, RuleModalRef } from '@/components/award-detail-yfs/RuleModal';
import { Images } from '@/constants/images';
import { getBoxDetail, getNextBox, getPoolDetail, getPreBox, poolIn, poolOut } from '@/services/award';
import { CheckoutModal, CheckoutModalRef } from '../award-detail/components/CheckoutModal';

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

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#1a1a2e' },
  background: { flex: 1 },
  loading: { flex: 1, backgroundColor: '#1a1a2e', justifyContent: 'center', alignItems: 'center' },
  nav: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 15,
    height: 90,
    zIndex: 100,
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
  },
  backBtn: { width: 40 },
  backText: { color: '#fff', fontSize: 24 },
  navTitle: { color: '#fff', fontSize: 16, fontWeight: 'bold', maxWidth: '60%' },
  placeholder: { width: 40 },
  scrollView: { flex: 1 },
  
  detailWrapper: {
      position: 'relative',
      minHeight: 800,
      paddingBottom: 100,
  },
  mainGoodsSection: {
      width: '100%',
      height: 504,
      position: 'relative',
      zIndex: 1,
  },
  mainGoodsSectionBtext: {
      width: '100%',
      height: 74,
      marginTop: -10,
      zIndex: 2,
  },
  positionBgLeftBg: {
      position: 'absolute',
      left: 0,
      top: 225,
      width: 32,
      height: 188,
      zIndex: 2,
  },
  positionBgRightBg: {
      position: 'absolute',
      right: 0,
      top: 225,
      width: 32,
      height: 188,
      zIndex: 2,
  },
  positionBut: {
      position: 'absolute',
      zIndex: 10,
      width: 35,
      height: 34,
  },
  btnBg: {
      width: '100%',
      height: '100%',
      justifyContent: 'center',
      alignItems: 'center',
  },
  slantedL: {
      color: '#fff',
      fontSize: 12,
      fontWeight: 'bold',
      transform: [{ rotate: '14deg' }],
      marginTop: -2,
      textShadowColor: '#000',
      textShadowOffset: { width: 1, height: 1 },
      textShadowRadius: 1,
  },
  slantedR: {
      color: '#fff',
      fontSize: 12,
      fontWeight: 'bold',
      transform: [{ rotate: '-16deg' }],
      marginTop: -2,
      textShadowColor: '#000',
      textShadowOffset: { width: 1, height: 1 },
      textShadowRadius: 1,
  },
  positionRule: {
      top: 256,
      left: 0,
  },
  positionStore: {
      top: 256,
      right: 0,
  },
  positionRecord: {
      top: 300,
      left: 0,
  },
  positionRefresh: { 
      top: 345,
      right: 0,
  },
  bottomBar: {
      position: 'absolute',
      bottom: 0,
      left: 0,
      right: 0,
      zIndex: 200,
  }
});

export default function AwardDetailYfsScreen() {
  const { poolId } = useLocalSearchParams<{ poolId: string }>();
  const router = useRouter();
  const insets = useSafeAreaInsets();
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState<any>(null);
  const [scrollTop, setScrollTop] = useState(0);
  const [currentBox, setCurrentBox] = useState<any>(null);

  const boxRef = useRef<BoxSelectionModalRef>(null);
  const numRef = useRef<NumSelectionModalRef>(null);
  const checkoutRef = useRef<CheckoutModalRef>(null);
  const ruleRef = useRef<RuleModalRef>(null);
  const recordRef = useRef<RecordModalRef>(null);

  const getSafePoolId = () => Array.isArray(poolId) ? poolId[0] : poolId;

  const loadBox = async (boxNum?: string) => {
      try {
          const id = getSafePoolId();
          const res = await getBoxDetail(id, boxNum);
          if (res) setCurrentBox(res);
      } catch (error) {
          console.error('Failed to load box', error);
      }
  };

  const loadData = useCallback(async () => {
    if (!poolId) return;
    setLoading(true);
    try {
      const safePoolId = getSafePoolId();
      const res = await getPoolDetail(safePoolId);
      setData(res);
      await loadBox(); // Initial box
    } catch (error) {
      console.error('Failed to load detail:', error);
    }
    setLoading(false);
  }, [poolId]);

  useEffect(() => {
    if (poolId) {
        poolIn(poolId);
        return () => {
            poolOut(poolId);
        };
    }
  }, [poolId]);

  const handleBoxSelect = (box: any) => {
      setCurrentBox(box);
  };

  const handlePrevBox = async () => {
      if (!currentBox) return;
      try {
          const res = await getPreBox(getSafePoolId(), currentBox.number);
          if (res) setCurrentBox(res);
          else Alert.alert('提示', '已经是第一盒了');
      } catch (e) { Alert.alert('提示', '切换失败'); }
  };

  const handleNextBox = async () => {
      if (!currentBox) return;
      try {
          const res = await getNextBox(getSafePoolId(), currentBox.number);
          if (res) setCurrentBox(res);
          else Alert.alert('提示', '已经是最后一盒了');
      } catch (e) { Alert.alert('提示', '切换失败'); }
  };

  const handlePay = ({ previewRes, chooseNum, boxNum }: any) => {
      checkoutRef.current?.show(chooseNum.length, previewRes, boxNum, chooseNum);
  };

  useEffect(() => {
    loadData();
  }, [loadData]);

  const headerBg = scrollTop > 50 ? '#333' : 'transparent';

  if (loading) {
    return (
      <View style={styles.loading}>
        <ActivityIndicator color="#fff" />
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <StatusBar barStyle="light-content" />
      <ImageBackground source={{ uri: Images.common.indexBg }} style={styles.background} resizeMode="cover">
        
        {/* Navigation Bar */}
        <View style={[styles.nav, { paddingTop: insets.top, backgroundColor: headerBg }]}>
          <TouchableOpacity onPress={() => router.back()} style={styles.backBtn}>
             <Text style={styles.backText}>←</Text>
          </TouchableOpacity>
          <Text style={styles.navTitle} numberOfLines={1}>{data?.name || '详情'}</Text>
          <View style={styles.placeholder} />
        </View>

        <ScrollView
          style={styles.scrollView}
          onScroll={(e) => setScrollTop(e.nativeEvent.contentOffset.y)}
          scrollEventThrottle={16}
          showsVerticalScrollIndicator={false}
        >
            <View style={styles.detailWrapper}>
                {/* Main Goods Section */}
                <ImageBackground 
                    source={{ uri: Images.box.detail.mainGoodsSection }} 
                    style={styles.mainGoodsSection}
                    resizeMode="stretch"
                >
                    <View style={{ height: 180 }} /> 
                    
                    <ProductSwiper 
                        products={data?.luckGoodsList?.map((item: any) => {
                            let prob = '0%';
                            const total = data.leftQuantity || 1; 
                            if (item.level === 'A') prob = ((data.leftQuantityA / total) * 100).toFixed(4) + '%';
                            else if (item.level === 'B') prob = ((data.leftQuantityB / total) * 100).toFixed(4) + '%';
                            else if (item.level === 'C') prob = ((data.leftQuantityC / total) * 100).toFixed(4) + '%';
                            else if (item.level === 'D') prob = ((data.leftQuantityD / total) * 100).toFixed(4) + '%';
                            
                            return {
                                cover: item.spu.cover,
                                name: item.spu.name,
                                level: item.level,
                                probability: prob,
                                quantity: item.quantity
                            };
                        }) || []} 
                    />
                    
                    <ImageBackground 
                        source={{ uri: Images.box.detail.positionBgleftBg }} 
                        style={styles.positionBgLeftBg} 
                        resizeMode="contain"
                    />
                     <ImageBackground 
                        source={{ uri: Images.box.detail.positionBgRightBg }} 
                        style={styles.positionBgRightBg} 
                        resizeMode="contain"
                    />
                </ImageBackground>

                {/* Bottom Text Graphic */}
                <ImageBackground
                    source={{ uri: Images.box.detail.mainGoodsSectionBtext }}
                    style={styles.mainGoodsSectionBtext}
                    resizeMode="contain"
                />

                {/* FirstLast (Box Info & Nav) */}
                <FirstLast 
                    data={data}
                    box={currentBox}
                    onPrevBox={handlePrevBox}
                    onNextBox={handleNextBox}
                    onChangeBox={() => boxRef.current?.show()}
                    onProductClick={(spu) => console.log(spu)}
                />

                {/* Product List (A/B/C/D) */}
                <ProductListYfs 
                    products={data?.luckGoodsList || []}
                    poolId={getSafePoolId()}
                    box={currentBox}
                />

                {/* Floating Buttons */}
                <TouchableOpacity style={[styles.positionBut, styles.positionRule]} onPress={() => ruleRef.current?.show()}>
                     <ImageBackground source={{ uri: Images.box.detail.positionBgLeft }} style={styles.btnBg} resizeMode="contain">
                        <Text style={styles.slantedL}>规则</Text>
                     </ImageBackground>
                </TouchableOpacity>

                <TouchableOpacity style={[styles.positionBut, styles.positionRecord]} onPress={() => recordRef.current?.show()}>
                     <ImageBackground source={{ uri: Images.box.detail.positionBgLeft }} style={styles.btnBg} resizeMode="contain">
                        <Text style={styles.slantedL}>记录</Text>
                     </ImageBackground>
                </TouchableOpacity>

                 <TouchableOpacity style={[styles.positionBut, styles.positionStore]} onPress={() => router.push('/store')}>
                     <ImageBackground source={{ uri: Images.box.detail.positionBgRight }} style={styles.btnBg} resizeMode="contain">
                        <Text style={styles.slantedR}>仓库</Text>
                     </ImageBackground>
                </TouchableOpacity>

                <TouchableOpacity style={[styles.positionBut, styles.positionRefresh]} onPress={() => loadBox(currentBox?.number)}>
                     <ImageBackground source={{ uri: Images.box.detail.positionBgRight }} style={styles.btnBg} resizeMode="contain">
                        <Text style={styles.slantedR}>刷新</Text>
                     </ImageBackground>
                </TouchableOpacity>

            </View>

             <View style={{ height: 100 }} />
        </ScrollView>

        <View style={styles.bottomBar}>
            <PurchaseBar 
                price={data?.price || 0}
                specialPrice={data?.specialPrice}
                specialPriceFive={data?.specialPriceFive}
                onBuy={(count) => {
                    if (!currentBox) { 
                        boxRef.current?.show();
                    } else {
                        numRef.current?.show(currentBox);
                    }
                }} 
                onBuyMany={() => {
                   if (!currentBox) { 
                        boxRef.current?.show();
                    } else {
                        numRef.current?.show(currentBox);
                    }
                }}
            />
        </View>

        {/* Modals */}
        <BoxSelectionModal 
            ref={boxRef} 
            poolId={getSafePoolId()} 
            onSelect={handleBoxSelect} 
        />
        <NumSelectionModal 
            ref={numRef} 
            poolId={getSafePoolId()} 
            onPay={handlePay} 
        />
        <CheckoutModal 
            ref={checkoutRef} 
            poolId={getSafePoolId()} 
            data={data}
            onSuccess={(res) => {
                console.log('Success', res);
                loadData(); // Refresh
            }} 
        />
        <RuleModal ref={ruleRef} />
        <RecordModal ref={recordRef} poolId={getSafePoolId()} />
      </ImageBackground>
    </View>
  );
}