asios/app/treasure-hunt/index.tsx

import { Image } from "expo-image";
import { useLocalSearchParams, useRouter } from "expo-router";
import React, { useCallback, useEffect, useRef, useState } from "react";
import {
    ActivityIndicator,
    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 { getPoolDetail, poolIn, poolOut, previewOrder } from "@/services/award";

import { CheckoutModal } from "./components/CheckoutModal";
import { ExplainSection } from "./components/ExplainSection";
import { ProductList } from "./components/ProductList";
import { RecordModal } from "./components/RecordModal";
import { RuleModal } from "./components/RuleModal";

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

interface PoolData {
  id: string;
  name: string;
  cover: string;
  price: number;
  specialPrice?: number;
  specialPriceFive?: number;
  demoFlag?: number;
  luckGoodsList: ProductItem[];
  luckGoodsLevelProbabilityList?: any[];
}

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

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

  const [loading, setLoading] = useState(true);
  const [data, setData] = useState<PoolData | null>(null);
  const [products, setProducts] = useState<ProductItem[]>([]);
  const [currentIndex, setCurrentIndex] = useState(0);
  const [scrollTop, setScrollTop] = useState(0);

  const checkoutRef = useRef<any>(null);
  const recordRef = useRef<any>(null);
  const ruleRef = useRef<any>(null);
  const floatAnim = useRef(new Animated.Value(0)).current;

  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 getPoolDetail(poolId);
      if (detail) {
        setData(detail);
        setProducts(detail.luckGoodsList || []);
      }
    } catch (error) {
      console.error("加载数据失败:", error);
    }
    setLoading(false);
  }, [poolId]);

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

  const handlePay = async (num: number) => {
    if (!poolId || !data) return;
    try {
      const preview = await previewOrder(poolId, num);
      if (preview) checkoutRef.current?.show(num, preview);
    } catch (error) {
      console.error("预览订单失败:", error);
    }
  };

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

  const handleProductPress = (index: number) => {
    router.push({
      pathname: "/treasure-hunt/swipe" as any,
      params: { poolId, index },
    });
  };

  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: "普通款",
    };
    return map[level] || level;
  };

  const ignoreRatio0 = (val: number) => {
    const str = String(val);
    const match = str.match(/^(\d+\.?\d*?)0*$/);
    return match ? match[1].replace(/\.$/, "") : str;
  };

  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];
  const headerBg = scrollTop > 0 ? "#333" : "transparent";

  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.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 && (
                <>
                  <TouchableOpacity
                    onPress={() => handleProductPress(currentIndex)}
                    activeOpacity={0.9}
                  >
                    <Animated.View
                      style={[
                        styles.productImageBox,
                        { transform: [{ translateY: floatAnim }] },
                      ]}
                    >
                      <Image
                        source={{ uri: currentProduct.cover }}
                        style={styles.productImage}
                        contentFit="contain"
                      />
                    </Animated.View>
                  </TouchableOpacity>

                  {/* 等级信息 */}
                  <ImageBackground
                    source={{ uri: Images.box.detail.detailsBut }}
                    style={styles.detailsBut}
                    resizeMode="contain"
                  >
                    <View style={styles.detailsText}>
                      <Text style={styles.levelText}>
                        {getLevelName(currentProduct.level)}
                      </Text>
                      <Text style={styles.probabilityText}>
                        ({ignoreRatio0(currentProduct.probability)}%)
                      </Text>
                    </View>
                  </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>

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

          {/* 侧边按钮 - 客服 */}
          <TouchableOpacity
            style={[styles.positionBut, styles.positionService]}
            onPress={() => kefuRef.current?.open()}
          >
            <ImageBackground
              source={{ uri: Images.box.detail.positionBgRight }}
              style={styles.positionButBg}
              resizeMode="contain"
            >
              <Text style={styles.positionButTextR}>客服</Text>
            </ImageBackground>
          </TouchableOpacity>

          {/* 侧边按钮 - 仓库 */}
          <TouchableOpacity
            style={[styles.positionBut, styles.positionStore]}
            onPress={() => router.push("/cloud-warehouse" as any)}
          >
            <ImageBackground
              source={{ uri: Images.box.detail.positionBgRight }}
              style={styles.positionButBg}
              resizeMode="contain"
            >
              <Text style={styles.positionButTextR}>仓库</Text>
            </ImageBackground>
          </TouchableOpacity>

          {/* 商品列表 */}
          <ProductList
            products={products}
            levelList={data.luckGoodsLevelProbabilityList}
            poolId={poolId!}
            price={data.price}
          />

          {/* 说明文字 */}
          <ExplainSection poolId={poolId!} />

          <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.btnItem}
              onPress={() => handlePay(1)}
              activeOpacity={0.8}
            >
              <ImageBackground
                source={{ uri: Images.common.butBgV }}
                style={styles.btnBg}
                resizeMode="contain"
              >
                <Text style={styles.btnText}>购买一盒</Text>
                <Text style={styles.btnPrice}>
                  (¥{data.specialPrice || data.price})
                </Text>
              </ImageBackground>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.btnItem}
              onPress={() => handlePay(5)}
              activeOpacity={0.8}
            >
              <ImageBackground
                source={{ uri: Images.common.butBgL }}
                style={styles.btnBg}
                resizeMode="contain"
              >
                <Text style={styles.btnText}>购买五盒</Text>
                <Text style={styles.btnPrice}>
                  (¥{data.specialPriceFive || data.price * 5})
                </Text>
              </ImageBackground>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.btnItem}
              onPress={() => checkoutRef.current?.showFreedom()}
              activeOpacity={0.8}
            >
              <ImageBackground
                source={{ uri: Images.common.butBgH }}
                style={styles.btnBg}
                resizeMode="contain"
              >
                <Text style={styles.btnText}>购买多盒</Text>
              </ImageBackground>
            </TouchableOpacity>
          </View>
        </ImageBackground>
      </ImageBackground>

      <CheckoutModal
        ref={checkoutRef}
        data={data}
        poolId={poolId!}
        onSuccess={handleSuccess}
      />
      <RecordModal ref={recordRef} poolId={poolId!} />
      <RuleModal ref={ruleRef} />
    </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: 300,
    justifyContent: "center",
    alignItems: "center",
  },
  productImage: {
    width: 200,
    height: 300,
  },
  detailsBut: {
    width: 120,
    height: 45,
    justifyContent: "center",
    alignItems: "center",
    marginTop: -30,
  },
  detailsText: {
    flexDirection: "row",
    alignItems: "center",
  },
  levelText: {
    fontSize: 14,
    color: "#FBC400",
    fontWeight: "bold",
  },
  probabilityText: {
    fontSize: 10,
    color: "#FBC400",
    marginLeft: 3,
  },
  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",
    writingDirection: "ltr",
    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 },
  positionRecord: { top: 300, left: 0 },
  positionStore: { top: 256, right: 0 },
  positionService: { top: 300, right: 0 },

  // 底部购买栏
  bottomBar: {
    position: "absolute",
    bottom: 0,
    left: 0,
    right: 0,
    height: 69,
    paddingHorizontal: 5,
  },
  bottomBtns: {
    flexDirection: "row",
    height: 64,
    alignItems: "center",
    justifyContent: "space-around",
  },
  btnItem: {
    flex: 1,
    marginHorizontal: 6,
  },
  btnBg: {
    width: "100%",
    height: 54,
    justifyContent: "center",
    alignItems: "center",
  },
  btnText: {
    fontSize: 14,
    fontWeight: "bold",
    color: "#fff",
  },
  btnPrice: {
    fontSize: 9,
    color: "#fff",
  },
});