asios/app/boxInBox/index.tsx

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

import { Images } from '@/constants/images';
import { useAuth } from '@/contexts/AuthContext';
import { getBoxDetail, getWinRecords, poolIn, poolOut, previewOrder, unlockBox } from '@/services/award';
import { get } from '@/services/http';

import { CheckoutModal } from '../award-detail/components/CheckoutModal';
import { RuleModal } from '../award-detail/components/RuleModal';
import { BoxPopup, BoxPopupRef } from './components/BoxPopup';
import { DetailsPopup, DetailsPopupRef } from './components/DetailsPopup';

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

interface PoolData {
  id: string;
  poolName: string;
  name?: string;
  cover: string;
  price: number;
  specialPrice?: number;
  bigBoxPrizes?: ProductItem[];
  mediumBoxPrizes?: ProductItem[];
  smallBoxPrizes?: ProductItem[];
  activityGoods?: any[];
}

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

interface BoxData {
  number: string;
  leftQuantity: number;
  lastNumber: number;
  lock?: { locker: string; leftTime: number };
  usedStat?: Record<string, { spuId: string; quantity: number }>;
}

// 使用正确的 API 接口
const getBoxPoolDetail = async (poolId: string) => {
  const res = await get('/api/luck/treasure-box/pool-detail', { poolId });
  return res.data;
};

const getBoxHistory = async (poolId: string) => {
  const res = await get('/api/luck/treasure-box/box-history', { poolId });
  return res.data;
};

const getEmptyRunStatus = async (poolId: string) => {
  const res = await get('/api/luck/treasure-box/empty-run-status', { poolId });
  return res.data;
};

export default function BoxInBoxScreen() {
  const { poolId } = useLocalSearchParams<{ poolId: string }>();
  const router = useRouter();
  const insets = useSafeAreaInsets();
  const { user } = useAuth();

  const [loading, setLoading] = useState(true);
  const [data, setData] = useState<PoolData | null>(null);
  const [products, setProducts] = useState<ProductItem[]>([]);
  const [activityGoods, setActivityGoods] = useState<any[]>([]);
  const [boxHistory, setBoxHistory] = useState<any[]>([]);
  const [boxHistoryInfo, setBoxHistoryInfo] = useState<any>(null);
  const [box, setBox] = useState<BoxData | null>(null);
  const [boxNum, setBoxNum] = useState<string>('');
  const [currentIndex, setCurrentIndex] = useState(0);
  const [leftTime, setLeftTime] = useState(0);
  const [emptyRuns, setEmptyRuns] = useState(0);
  const [scrollTop, setScrollTop] = useState(0);
  const [tabIndex, setTabIndex] = useState(0);
  const [recordList, setRecordList] = useState<any[]>([]);

  const checkoutRef = useRef<any>(null);
  const ruleRef = useRef<any>(null);
  const boxPopupRef = useRef<BoxPopupRef>(null);
  const detailsPopupRef = useRef<DetailsPopupRef>(null);
  const floatAnim = useRef(new Animated.Value(0)).current;
  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);

  useEffect(() => {
    Animated.loop(
      Animated.sequence([
        Animated.timing(floatAnim, { toValue: 10, duration: 1500, useNativeDriver: true }),
        Animated.timing(floatAnim, { toValue: -10, duration: 1500, useNativeDriver: true }),
      ])
    ).start();
  }, []);

  const loadData = useCallback(async () => {
    if (!poolId) return;
    setLoading(true);
    try {
      const detail = await getBoxPoolDetail(poolId);
      if (detail) {
        setData({ ...detail, name: detail.poolName, price: detail.price || detail.specialPrice || 0 });
        setProducts(detail.bigBoxPrizes || []);
        setActivityGoods(detail.activityGoods || []);
      }
    } catch (error) {
      console.error('加载数据失败:', error);
    }
    setLoading(false);
  }, [poolId]);

  const loadBoxHistory = useCallback(async () => {
    if (!poolId) return;
    try {
      const res = await getBoxHistory(poolId);
      if (res && res.length > 0) {
        setBoxHistory(res);
        setBoxHistoryInfo(res[0]);
      }
    } catch {}
  }, [poolId]);

  const loadBox = useCallback(
    async (num?: string) => {
      if (!poolId) return;
      try {
        const res = await getBoxDetail(poolId, num);
        if (res) handleBoxResult(res);
      } catch (error) {
        console.error('加载盒子失败:', error);
      }
    },
    [poolId]
  );

  const loadEmptyRuns = useCallback(async () => {
    if (!poolId) return;
    try {
      const res = await getEmptyRunStatus(poolId);
      if (res) setEmptyRuns(res.emptyRuns || 0);
    } catch {}
  }, [poolId]);

  // 加载中奖记录
  const loadRecords = useCallback(async (boxNumber?: string) => {
    if (!poolId) return;
    try {
      const num = boxNumber || boxHistoryInfo?.boxNumber;
      if (!num) return;
      const res = await getWinRecords(poolId, num);
      if (res && res.records) {
        setRecordList(res.records);
      }
    } catch {}
  }, [poolId, boxHistoryInfo]);

  const refreshBox = useCallback(async () => {
    if (!poolId) return;
    try {
      const res = await getBoxHistory(poolId);
      if (res && res.length > 0) {
        setBoxHistory(res);
        setBoxHistoryInfo(res[0]);
        loadData();
        loadBox(res[0].boxNumber);
        loadRecords(res[0].boxNumber);
      }
      loadEmptyRuns();
    } catch {}
  }, [poolId, loadData, loadBox, loadEmptyRuns, loadRecords]);

  // 打开换盒弹窗
  const openBoxPopup = useCallback(async () => {
    console.log('Opening Box Popup, history len:', boxHistory?.length);
    if (!boxHistory || boxHistory.length === 0) {
      Alert.alert('提示', '暂无盒子数据');
      return;
    }
    boxPopupRef.current?.open(boxHistory);
  }, [boxHistory]);

  // 选择盒子
  const handleSelectBox = useCallback((item: any) => {
    setBoxHistoryInfo(item);
    loadBox(item.boxNumber);
    loadEmptyRuns();
    loadRecords(item.boxNumber);
  }, [loadBox, loadEmptyRuns, loadRecords]);

  // 打开商品详情弹窗
  const handleShowDetails = useCallback((item: any) => {
    // 根据商品的 level 传入对应的奖品列表
    let prizes = products;
    if (item.level === 'NESTED_BOX_MEDIUM') {
      prizes = data?.mediumBoxPrizes || products;
    } else if (item.level === 'NESTED_BOX_SMALL') {
      prizes = data?.smallBoxPrizes || products;
    }
    detailsPopupRef.current?.open(item, prizes);
  }, [products, data]);

  const handleBoxResult = (res: any) => {
    const map: Record<string, any> = {};
    if (res.usedStat)
      res.usedStat.forEach((item: any) => {
        map[item.spuId] = item;
      });
    res.usedStat = map;
    setBox(res);
    setBoxNum(res.number);
    lockTimeStart(res);
  };

  const lockTimeStart = (boxData: BoxData) => {
    lockTimeEnd();
    if (boxData?.lock) {
      setLeftTime(boxData.lock.leftTime);
      timerRef.current = setInterval(() => {
        setLeftTime((prev) => {
          if (prev <= 1) {
            lockTimeEnd();
            loadBox();
            return 0;
          }
          return prev - 1;
        });
      }, 1000);
    }
  };

  const lockTimeEnd = () => {
    if (timerRef.current) {
      clearInterval(timerRef.current);
      timerRef.current = null;
    }
    setLeftTime(0);
  };

  useEffect(() => {
    loadData();
    loadBox();
    loadBoxHistory();
    loadEmptyRuns();
    loadRecords();
    if (poolId) poolIn(poolId);
    return () => {
      if (poolId) poolOut(poolId);
      lockTimeEnd();
    };
  }, [poolId]);

  const handlePay = async (num: number) => {
    if (!poolId || !data || !box) {
      Alert.alert('提示', '请先选择盒子');
      return;
    }
    try {
      const preview = await previewOrder(poolId, num, box.number);
      if (preview) checkoutRef.current?.show(num, preview, box.number);
    } catch (error) {
      console.error('预览订单失败:', error);
    }
  };

  const handleSuccess = () => {
    setTimeout(() => {
      loadData();
      loadBox(boxNum);
      loadEmptyRuns();
    }, 500);
  };

  const handleUnlock = async () => {
    if (!poolId || !boxNum) return;
    try {
      await unlockBox(poolId, boxNum);
      loadBox(boxNum);
    } catch {}
  };

  const handlePrev = () => {
    if (currentIndex > 0) setCurrentIndex(currentIndex - 1);
  };
  const handleNext = () => {
    if (currentIndex < products.length - 1) setCurrentIndex(currentIndex + 1);
  };

  const getLevelName = (level: string) => {
    const map: Record<string, string> = { A: '超神款', B: '欧皇款', C: '隐藏款', D: '普通款', NESTED_BOX_GUARANTEED: '保底款' };
    return map[level] || level;
  };

  const getLevelBg = (level: string) => {
    const map: Record<string, string> = {
      A: Images.box.detail.productItemA,
      B: Images.box.detail.productItemB,
      C: Images.box.detail.productItemC,
      D: Images.box.detail.productItemD,
      NESTED_BOX_GUARANTEED: Images.box.detail.productItemD,
    };
    return map[level] || Images.box.detail.productItemD;
  };

  const leftNum = box?.lock ? (leftTime / box.lock.leftTime) * 100 : 0;
  const headerBg = scrollTop > 0 ? '#333' : 'transparent';

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

  if (!data)
    return (
      <View style={styles.loadingContainer}>
        <Text style={styles.errorText}>奖池不存在</Text>
        <TouchableOpacity style={styles.backBtn2} onPress={() => router.back()}>
          <Text style={styles.backBtn2Text}>返回</Text>
        </TouchableOpacity>
      </View>
    );

  const currentProduct = products[currentIndex];

  return (
    <View style={styles.container}>
      <StatusBar barStyle="light-content" />
      <ImageBackground source={{ uri: Images.common.indexBg }} style={styles.background} resizeMode="cover">
        {/* 顶部导航 */}
        <View style={[styles.header, { paddingTop: insets.top, backgroundColor: headerBg }]}>
          <TouchableOpacity style={styles.backBtn} onPress={() => router.back()}>
            <Text style={styles.backText}>{'<'}</Text>
          </TouchableOpacity>
          <Text style={styles.headerTitle} numberOfLines={1}>{data.poolName || data.name}</Text>
          <View style={styles.placeholder} />
        </View>

        <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false} onScroll={(e) => setScrollTop(e.nativeEvent.contentOffset.y)} scrollEventThrottle={16}>
          {/* 主商品展示区域 */}
          <ImageBackground source={{ uri: Images.box.detail.mainGoodsSection }} style={styles.mainGoodsSection} resizeMode="cover">
            <View style={{ height: 72 + insets.top }} />

            <View style={styles.mainSwiper}>
              {currentProduct && (
                <>
                  <Animated.View style={[styles.productImageBox, { transform: [{ translateY: floatAnim }] }]}>
                    <Image source={{ uri: currentProduct.cover }} style={styles.productImage} contentFit="contain" />
                  </Animated.View>

                  {currentProduct.price && <Text style={styles.priceText}>¥{currentProduct.price}</Text>}

                  <ImageBackground source={{ uri: Images.box.detail.detailsBut }} style={styles.detailsBut} resizeMode="contain">
                    <Text style={styles.levelText}>{getLevelName(currentProduct.level)}</Text>
                  </ImageBackground>

                  <ImageBackground source={{ uri: Images.box.detail.nameBg }} style={styles.goodsNameBg} resizeMode="contain">
                    <Text style={styles.goodsNameText} numberOfLines={6}>{currentProduct.name}</Text>
                  </ImageBackground>
                </>
              )}

              {currentIndex > 0 && (
                <TouchableOpacity style={styles.prevBtn} onPress={handlePrev}>
                  <Image source={{ uri: Images.box.detail.left }} style={styles.arrowImg} contentFit="contain" />
                </TouchableOpacity>
              )}
              {currentIndex < products.length - 1 && (
                <TouchableOpacity style={styles.nextBtn} onPress={handleNext}>
                  <Image source={{ uri: Images.box.detail.right }} style={styles.arrowImg} contentFit="contain" />
                </TouchableOpacity>
              )}
            </View>

            <Image source={{ uri: Images.box.detail.positionBgleftBg }} style={styles.positionBgleftBg} contentFit="contain" />
            <Image source={{ uri: Images.box.detail.positionBgRightBg }} style={styles.positionBgRightBg} contentFit="contain" />
          </ImageBackground>

          <Image source={{ uri: Images.box.detail.mainGoodsSectionBtext }} style={styles.mainGoodsSectionBtext} contentFit="cover" />

          {/* 侧边按钮 */}
          <TouchableOpacity style={[styles.positionBut, styles.positionRule]} onPress={() => ruleRef.current?.show()}>
            <ImageBackground source={{ uri: Images.box.detail.positionBgLeft }} style={styles.positionButBg} resizeMode="contain">
              <Text style={styles.positionButText}>规则</Text>
            </ImageBackground>
          </TouchableOpacity>

          {box?.lock && user && box.lock.locker === (user.userId || user.id) && (
            <TouchableOpacity style={[styles.positionBut, styles.positionLock]} onPress={handleUnlock}>
              <ImageBackground source={{ uri: Images.box.detail.positionBgLeft }} style={styles.positionButBg} resizeMode="contain">
                <Text style={styles.positionButText}>解锁</Text>
              </ImageBackground>
            </TouchableOpacity>
          )}

          <TouchableOpacity style={[styles.positionBut, styles.positionStore]} onPress={() => router.push('/boxInBox/boxList' as any)}>
            <ImageBackground source={{ uri: Images.box.detail.positionBgRight }} style={styles.positionButBg} resizeMode="contain">
              <Text style={styles.positionButTextR}>宝箱</Text>
            </ImageBackground>
          </TouchableOpacity>

          <TouchableOpacity style={[styles.positionBut, styles.positionRefresh]} onPress={() => refreshBox()}>
            <ImageBackground source={{ uri: Images.box.detail.positionBgRight }} style={styles.positionButBg} resizeMode="contain">
              <Text style={styles.positionButTextR}>刷新</Text>
            </ImageBackground>
          </TouchableOpacity>

          {/* 空车计数 */}
          <View style={styles.emptyRunsBox}>
            <Text style={styles.emptyRunsText}>连续空车：{emptyRuns}</Text>
          </View>

          {/* 锁定倒计时 */}
          {box?.lock && (
            <View style={styles.lockTimeBox}>
              <Text style={styles.lockTimeLabel}>剩余时间：</Text>
              <View style={styles.lockTimeBarBox}>
                <View style={styles.lockTimeBar}>
                  <View style={[styles.processBar, { width: `${leftNum}%` }]} />
                </View>
                <Text style={[styles.lockTimeText, { left: `${leftNum}%` }]}>{leftTime}</Text>
              </View>
            </View>
          )}

          {/* 箱子信息区域 */}
          <View style={styles.firstLastWrapper}>
            {/* 标题栏 */}
            <View style={styles.firstLastTitle}>
              <View style={styles.firstLastInfo}>
                {boxHistoryInfo && (
                  <>
                    <View style={styles.sizeInfo}>
                      <Text style={styles.sizeLabel}>箱数：</Text>
                      <Text style={styles.sizeValue}>{boxHistoryInfo.boxNumber}</Text>
                      <Text style={styles.sizeLabel}>/{boxHistory.length || '-'}箱</Text>
                    </View>
                    <View style={styles.sizeInfo}>
                      <Text style={styles.sizeLabel}>总数：</Text>
                      <Text style={styles.sizeValue}>{boxHistoryInfo.leftQuantity}</Text>
                      <Text style={styles.sizeLabel}>/{boxHistoryInfo.quantity}</Text>
                    </View>
                  </>
                )}
              </View>
              <TouchableOpacity style={styles.changeBoxBtn} onPress={openBoxPopup}>
                <Text style={styles.changeBoxText}>换箱</Text>
              </TouchableOpacity>
            </View>

            {/* Tab 切换 */}
            <View style={styles.tabSection}>
              <TouchableOpacity style={[styles.tabItem, tabIndex === 0 && styles.tabItemActive]} onPress={() => setTabIndex(0)}>
                <Text style={[styles.tabText, tabIndex === 0 && styles.tabTextActive]}>赏品预览</Text>
              </TouchableOpacity>
              <TouchableOpacity style={[styles.tabItem, tabIndex === 1 && styles.tabItemActive]} onPress={() => setTabIndex(1)}>
                <Text style={[styles.tabText, tabIndex === 1 && styles.tabTextActive]}>中奖记录</Text>
              </TouchableOpacity>
            </View>

            {/* 活动商品列表 */}
            {tabIndex === 0 && (
              <View style={styles.activityGoodsGrid}>
                {activityGoods.map((item, index) => (
                  <TouchableOpacity key={item.id || index} style={styles.activityGoodsItem} onPress={() => handleShowDetails(item)}>
                    <View style={styles.activityImageBox}>
                      <Image source={{ uri: item.cover }} style={styles.activityImage} contentFit="cover" />
                      <View style={styles.probabilityBadge}>
                        <Text style={styles.probabilityText}>概率：{((item.probability || 0) * 100).toFixed(2)}%</Text>
                      </View>
                      <View style={styles.priceBadge}>
                        <Text style={styles.priceTextSmall}>参考价：{item.price}</Text>
                      </View>
                    </View>
                    <View style={[styles.levelBadgeSmall, item.level === 'NESTED_BOX_GUARANTEED' ? styles.levelD : styles.levelAll]}>
                      <Text style={styles.levelBadgeText}>{item.level === 'NESTED_BOX_GUARANTEED' ? 'D赏' : '全局赏'}</Text>
                    </View>
                    <Text style={styles.activityName} numberOfLines={1}>{item.name}</Text>
                  </TouchableOpacity>
                ))}
              </View>
            )}

            {/* 中奖记录 */}
            {tabIndex === 1 && (
              <ScrollView style={styles.recordScroll} showsVerticalScrollIndicator={false}>
                {recordList.length === 0 ? (
                  <View style={styles.emptyRecord}>
                    <Text style={styles.emptyRecordText}>暂无中奖记录</Text>
                  </View>
                ) : (
                  recordList.map((item, index) => (
                    <View key={index} style={styles.recordItem}>
                      <View style={styles.recordLeft}>
                        <Text style={styles.recordNickname}>{item.nickname}</Text>
                        <Text style={styles.recordTime}>{item.createTime} | 第{item.seatNumber}发</Text>
                        <Text style={styles.recordPrize}>获得：<Text style={styles.recordPrizeName}>{item.prizeName}</Text></Text>
                      </View>
                      <View style={[styles.recordLevelBadge, item.level === 'D' ? styles.levelD : styles.levelAll]}>
                        <Text style={styles.recordLevelText}>{item.level === 'D' ? 'D赏' : '全局赏'}</Text>
                      </View>
                    </View>
                  ))
                )}
              </ScrollView>
            )}
          </View>

          {/* 奖品列表 */}
          <View style={styles.productGrid}>
            <Text style={styles.gridTitle}>奖品列表</Text>
            <View style={styles.gridContent}>
              {products.map((item, index) => (
                <View key={item.id || index} style={styles.gridItem}>
                  <ImageBackground source={{ uri: getLevelBg(item.level) }} style={styles.gridItemBg} resizeMode="stretch">
                    <View style={styles.gridImageBox}>
                      <Image source={{ uri: item.cover }} style={styles.gridImage} contentFit="cover" />
                    </View>
                    <Text style={styles.gridName} numberOfLines={2}>{item.name}</Text>
                    <Text style={styles.gridLevel}>{getLevelName(item.level)}</Text>
                    {item.price && <Text style={styles.gridPrice}>¥{item.price}</Text>}
                  </ImageBackground>
                </View>
              ))}
            </View>
          </View>

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

        {/* 底部购买栏 */}
        <ImageBackground source={{ uri: Images.box.detail.boxDetailBott }} style={[styles.bottomBar, { paddingBottom: insets.bottom + 10 }]} resizeMode="cover">
          <View style={styles.bottomBtns}>
            <TouchableOpacity style={styles.btnItemFull} onPress={() => handlePay(1)} activeOpacity={0.8}>
              <ImageBackground source={{ uri: Images.common.butBgV }} style={styles.btnBg} resizeMode="contain">
                <Text style={styles.btnText}>×1</Text>
              </ImageBackground>
            </TouchableOpacity>
          </View>
        </ImageBackground>
      </ImageBackground>

      <CheckoutModal ref={checkoutRef} data={data} poolId={poolId!} boxNumber={boxNum} onSuccess={handleSuccess} />
      <RuleModal ref={ruleRef} />
      <BoxPopup ref={boxPopupRef} onSelect={handleSelectBox} />
      <DetailsPopup ref={detailsPopupRef} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#1a1a2e' },
  background: { flex: 1 },
  loadingContainer: { flex: 1, backgroundColor: '#1a1a2e', justifyContent: 'center', alignItems: 'center' },
  errorText: { color: '#999', fontSize: 16 },
  backBtn2: { marginTop: 20, backgroundColor: '#ff6600', paddingHorizontal: 20, paddingVertical: 10, borderRadius: 8 },
  backBtn2Text: { color: '#fff', fontSize: 14 },

  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 10, paddingBottom: 10, position: 'absolute', top: 0, left: 0, right: 0, zIndex: 100 },
  backBtn: { width: 40, height: 40, justifyContent: 'center', alignItems: 'center' },
  backText: { color: '#fff', fontSize: 16, fontWeight: 'bold' },
  headerTitle: { color: '#fff', fontSize: 15, fontWeight: 'bold', flex: 1, textAlign: 'center', width: 250 },
  placeholder: { width: 40 },

  scrollView: { flex: 1 },

  mainGoodsSection: { width: SCREEN_WIDTH, height: 504, position: 'relative' },
  mainSwiper: { position: 'relative', width: '100%', height: 375, alignItems: 'center', justifyContent: 'center', marginTop: -50 },
  productImageBox: { width: 200, height: 280, justifyContent: 'center', alignItems: 'center' },
  productImage: { width: 200, height: 280 },
  priceText: { color: '#fff', fontSize: 16, fontWeight: 'bold', marginTop: -20 },
  detailsBut: { width: 120, height: 45, justifyContent: 'center', alignItems: 'center', marginTop: -10 },
  levelText: { fontSize: 14, color: '#FBC400', fontWeight: 'bold' },
  goodsNameBg: { position: 'absolute', left: 47, top: 53, width: 43, height: 100, paddingTop: 8, justifyContent: 'flex-start', alignItems: 'center' },
  goodsNameText: { fontSize: 12, fontWeight: 'bold', color: '#000', width: 20, textAlign: 'center' },
  prevBtn: { position: 'absolute', left: 35, top: '40%' },
  nextBtn: { position: 'absolute', right: 35, top: '40%' },
  arrowImg: { width: 33, height: 38 },

  positionBgleftBg: { position: 'absolute', left: 0, top: 225, width: 32, height: 188 },
  positionBgRightBg: { position: 'absolute', right: 0, top: 225, width: 32, height: 188 },
  mainGoodsSectionBtext: { width: SCREEN_WIDTH, height: 74, marginTop: -10 },

  positionBut: { position: 'absolute', zIndex: 10, width: 35, height: 34 },
  positionButBg: { width: 35, height: 34, justifyContent: 'center', alignItems: 'center' },
  positionButText: { fontSize: 12, fontWeight: 'bold', color: '#fff', transform: [{ rotate: '14deg' }], textShadowColor: '#000', textShadowOffset: { width: 1, height: 1 }, textShadowRadius: 1 },
  positionButTextR: { fontSize: 12, fontWeight: 'bold', color: '#fff', transform: [{ rotate: '-16deg' }], textShadowColor: '#000', textShadowOffset: { width: 1, height: 1 }, textShadowRadius: 1 },
  positionRule: { top: 256, left: 0 },
  positionLock: { top: 300, left: 0 },
  positionStore: { top: 256, right: 0 },
  positionRefresh: { top: 300, right: 0 },

  emptyRunsBox: { alignItems: 'flex-start', marginLeft: 10, marginTop: -40, marginBottom: 10, zIndex: 20 },
  emptyRunsText: { color: '#fff', fontSize: 12, backgroundColor: 'rgba(0,0,0,0.5)', paddingHorizontal: 15, paddingVertical: 5, borderRadius: 10 },

  lockTimeBox: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#71ccff', padding: 10, marginHorizontal: 10, borderRadius: 8, marginBottom: 10 },
  lockTimeLabel: { color: '#000', fontSize: 12 },
  lockTimeBarBox: { flex: 1, height: 30, position: 'relative', justifyContent: 'center' },
  lockTimeBar: { height: 8, backgroundColor: 'rgba(255,255,255,0.6)', borderRadius: 4, overflow: 'hidden' },
  processBar: { height: '100%', backgroundColor: '#209ae5', borderRadius: 4 },
  lockTimeText: { position: 'absolute', top: -5, fontSize: 10, backgroundColor: '#000', color: '#fff', paddingHorizontal: 4, borderRadius: 2, marginLeft: -13 },

  // 箱子信息区域样式
  firstLastWrapper: { marginHorizontal: 10, marginBottom: 10, backgroundColor: '#fff', borderRadius: 8, overflow: 'hidden', borderWidth: 2, borderColor: '#000' },
  firstLastTitle: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', backgroundColor: '#ffc900', paddingHorizontal: 20, paddingVertical: 15, borderBottomWidth: 2, borderBottomColor: '#000' },
  firstLastInfo: { flexDirection: 'row', alignItems: 'center' },
  sizeInfo: { flexDirection: 'row', alignItems: 'center', marginRight: 15 },
  sizeLabel: { fontSize: 11, color: '#fff' },
  sizeValue: { fontSize: 16, fontWeight: 'bold', color: '#fff' },
  changeBoxBtn: { backgroundColor: '#ff8c16', paddingHorizontal: 15, paddingVertical: 8, borderRadius: 4, borderWidth: 1, borderColor: '#333' },
  changeBoxText: { fontSize: 11, color: '#fff' },

  // Tab 切换样式
  tabSection: { flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: '#E4E4E4' },
  tabItem: { flex: 1, paddingVertical: 12, alignItems: 'center' },
  tabItemActive: {},
  tabText: { fontSize: 14, color: '#9E9E9E' },
  tabTextActive: { color: '#ff8c16', fontWeight: 'bold' },

  // 活动商品列表样式
  activityGoodsGrid: { flexDirection: 'row', flexWrap: 'wrap', padding: 8 },
  activityGoodsItem: { width: '33.33%', padding: 4, alignItems: 'center', marginBottom: 10 },
  activityImageBox: { width: 100, height: 100, borderWidth: 2, borderColor: '#1A1A1A', borderRadius: 4, overflow: 'hidden', position: 'relative' },
  activityImage: { width: '100%', height: '100%' },
  probabilityBadge: { position: 'absolute', top: 0, left: 0, right: 0, backgroundColor: 'rgba(0,0,0,0.5)', paddingVertical: 2 },
  probabilityText: { fontSize: 7, color: '#fff', textAlign: 'center' },
  priceBadge: { position: 'absolute', bottom: 5, left: 5, right: 5, backgroundColor: 'rgba(0,0,0,0.5)', paddingVertical: 4, borderRadius: 2 },
  priceTextSmall: { fontSize: 7, color: '#fff', textAlign: 'center' },
  levelBadgeSmall: { marginTop: 5, paddingHorizontal: 10, paddingVertical: 3, borderRadius: 2 },
  levelD: { backgroundColor: '#6340FF', borderWidth: 1, borderColor: '#A2BBFF' },
  levelAll: { backgroundColor: '#A3E100', borderWidth: 1, borderColor: '#EAFFB1' },
  levelBadgeText: { fontSize: 12, textAlign: 'center' },
  activityName: { fontSize: 12, color: '#333', marginTop: 4, textAlign: 'center' },

  // 空记录样式
  emptyRecord: { padding: 40, alignItems: 'center' },
  emptyRecordText: { fontSize: 14, color: '#999' },

  // 中奖记录样式
  recordScroll: { maxHeight: 220 },
  recordItem: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingVertical: 13, paddingHorizontal: 15, borderBottomWidth: 1, borderBottomColor: '#D8D8D8' },
  recordLeft: { flex: 1 },
  recordNickname: { fontSize: 12, fontWeight: 'bold', color: '#333' },
  recordTime: { fontSize: 12, color: '#666', marginVertical: 3 },
  recordPrize: { fontSize: 12, color: '#666' },
  recordPrizeName: { fontWeight: '500', color: '#FF5100' },
  recordLevelBadge: { paddingHorizontal: 12, paddingVertical: 4, borderRadius: 2 },
  recordLevelText: { fontSize: 12, fontWeight: 'bold', color: '#fff' },

  productGrid: { margin: 10, backgroundColor: 'rgba(0,0,0,0.3)', borderRadius: 15, padding: 15 },
  gridTitle: { color: '#fff', fontSize: 16, fontWeight: 'bold', marginBottom: 15 },
  gridContent: { flexDirection: 'row', flexWrap: 'wrap', marginHorizontal: -5 },
  gridItem: { width: '33.33%', paddingHorizontal: 5, marginBottom: 10 },
  gridItemBg: { width: '100%', aspectRatio: 0.75, padding: 8, alignItems: 'center' },
  gridImageBox: { width: '100%', aspectRatio: 1, borderRadius: 5, overflow: 'hidden', backgroundColor: 'rgba(255,255,255,0.1)' },
  gridImage: { width: '100%', height: '100%' },
  gridName: { color: '#fff', fontSize: 10, marginTop: 5, textAlign: 'center', height: 26 },
  gridLevel: { color: '#FBC400', fontSize: 9, marginTop: 2 },
  gridPrice: { color: '#ff6600', fontSize: 10, marginTop: 2 },

  bottomBar: { position: 'absolute', bottom: 0, left: 0, right: 0, height: 69, paddingHorizontal: 5 },
  bottomBtns: { flexDirection: 'row', height: 64, alignItems: 'center', justifyContent: 'center' },
  btnItemFull: { width: 200 },
  btnBg: { width: '100%', height: 54, justifyContent: 'center', alignItems: 'center' },
  btnText: { fontSize: 18, fontWeight: 'bold', color: '#fff' },
});