asios/app/happy-spin/index.tsx

import { Audio, AVPlaybackStatus, ResizeMode, Video } from "expo-av";
import { Image } from "expo-image";
import { Stack, useLocalSearchParams, useRouter } from "expo-router";
import React, { useEffect, useRef, useState } from "react";
import {
    Dimensions,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";

import LotteryGrid from "./components/LotteryGrid";
import LotteryReel from "./components/LotteryReel";

import { Images } from "@/constants/images";
import services from "@/services/api";

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

// Sound URL from Uniapp config
const SOUND_URL =
  "https://cdn.acefig.com/kai_xin_ma_te/resource/magic/lottery.mp3";
const DEFAULT_JACKPOT_VIDEO =
  "https://cdn.acefig.com/kai_xin_ma_te/supermart/box/lottery/jackpot.mp4";

export default function LotteryScreen() {
  const router = useRouter();
  const params = useLocalSearchParams();
  const insets = useSafeAreaInsets();

  const num = Number(params.num) || 1;
  const isGrid = num >= 10;

  const tradeNo = params.tradeNo as string;
  const poolId = params.poolId as string;

  const [results, setResults] = useState<any[]>([]);
  const [pool, setPool] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [sound, setSound] = useState<Audio.Sound>();
  const [animationFinished, setAnimationFinished] = useState(false);

  // Video state
  const [videoVisible, setVideoVisible] = useState(false);
  const [videoUrl, setVideoUrl] = useState("");
  const videoRef = useRef<Video>(null);

  // Timer Ref for cleanup
  const timerRef = useRef<any>(null);

  // Layout calculations
  const singleItemWidth = 240;
  const itemWidth = num === 1 ? singleItemWidth : 72;
  const maskWidth = (SCREEN_WIDTH - (num === 1 ? singleItemWidth : 72)) / 2;
  const padding = SCREEN_WIDTH > 375 ? 32 : 0;

  // Dynamic styles
  const singleReelHeight = singleItemWidth * 1.35 + 20; // 324 + 20

  useEffect(() => {
    init();
    return () => {
      sound?.unloadAsync();
      if (timerRef.current) clearTimeout(timerRef.current);
    };
  }, []);

  // ... (rest of the file)

  // Update render styles inline or via StyleSheet
  // I will update the stylesheet usage in return and the StyleSheet definition below

  const init = async () => {
    try {
      console.log(
        "LotteryScreen Init: num",
        num,
        "tradeNo",
        tradeNo,
        "poolId",
        poolId,
      );
      await Promise.all([loadData() /*, playSound()*/]);
    } catch (e) {
      console.error("LotteryScreen Init Error", e);
    } finally {
      setLoading(false);
    }
  };

  const playSound = async () => {
    try {
      const { sound } = await Audio.Sound.createAsync({ uri: SOUND_URL });
      setSound(sound);
      await sound.playAsync();
    } catch (error) {
      console.log("Error playing sound", error);
    }
  };

  const loadData = async () => {
    if (tradeNo) {
      try {
        const res: any = await services.award.getApplyResult(tradeNo);
        const list = res?.data?.inventoryList || res?.inventoryList || [];
        setResults(list);

        // 2. Fetch Pool (Goods) if not passed
        if (poolId && !isGrid) {
          const detailRes = await services.award.getPoolDetail(poolId);
          const goods = detailRes?.luckGoodsList || [];
          setPool(goods);
        } else if (!isGrid) {
          setPool(list);
        }

        // Auto show result after animation
        if (timerRef.current) clearTimeout(timerRef.current);

        // Check for Level A video
        const hasLevelA = list.some((item: any) =>
          ["A", "a"].includes(item.level),
        );
        // Also check res.video if available
        const playVideoUrl =
          res.video || (hasLevelA ? DEFAULT_JACKPOT_VIDEO : "");

        if (playVideoUrl) {
          console.log("Found Level A, preparing video:", playVideoUrl);
          setVideoUrl(playVideoUrl);
          setVideoVisible(true);
          // Do NOT set timer here, wait for video to finish
        } else {
          if (!isGrid) {
            // Reel mode uses timer
            timerRef.current = setTimeout(() => {
              handleFinish(list);
            }, 2800);
          }
        }
        // Grid mode handles finish via callback
      } catch (error) {
        console.error("Load Data Error", error);
        // Safety fallback?
      }
    }
  };

  const handleFinish = (finalResults?: any[]) => {
    if (timerRef.current) {
      clearTimeout(timerRef.current);
      timerRef.current = null;
    }

    if (isGrid) {
      // Stop sound and mark finished, stay on page
      sound?.stopAsync();
      setAnimationFinished(true);
      return;
    }

    // Navigate to result modal/screen
    const data = finalResults || results;
    // We can navigate to a result page or show a local modal components
    // Assuming we have a result route
    router.replace({
      pathname: "/happy-spin/result" as any,
      params: {
        results: JSON.stringify(data),
        poolId,
      },
    });
  };

  const handleSkip = () => {
    if (videoVisible) {
      setVideoVisible(false);
      handleFinish();
      return;
    }

    if (isGrid) {
      if (animationFinished) {
        // User clicked "Claim Prize", exit
        router.back();
      } else {
        // User clicked "Skip Animation", finish immediately
        // Ideally LotteryGrid should expose a "finish" method or we force state
        // But for now calling handleFinish stops navigation
        handleFinish();
        // Note: This doesn't force cards to flip instantly unless we implement that prop in LotteryGrid
      }
    } else {
      sound?.stopAsync();
      handleFinish();
    }
  };

  if (loading)
    return (
      <View style={styles.container}>
        <Image
          source={{ uri: Images.mine.kaixinMineBg }}
          style={styles.bg}
          contentFit="cover"
        />
      </View>
    );

  return (
    <View style={styles.container}>
      <Stack.Screen options={{ headerShown: false }} />
      <Image
        source={{ uri: Images.mine.kaixinMineBg }}
        style={styles.bg}
        contentFit="cover"
      />
      <View style={styles.maskPage} />

      <View style={[styles.wrapper, { paddingTop: padding }]}>
        {isGrid ? (
          <LotteryGrid results={results} onFinish={() => handleFinish()} />
        ) : (
          <View style={styles.reelsContainer}>
            {/* Left Column Masks */}
            <View style={[styles.maskLeft, { width: maskWidth }]} />

            {/* Reels */}
            <View style={num === 1 ? styles.height1 : styles.height5}>
              {results.map((item, index) => (
                <View
                  key={index}
                  style={[
                    styles.reelRow,
                    num === 1 && { height: singleReelHeight, marginBottom: 0 },
                  ]}
                >
                  <LotteryReel
                    key={`reel-${index}-${pool.length}-${results.length}`}
                    pool={pool.length > 0 ? pool : results}
                    result={item}
                    width={SCREEN_WIDTH}
                    itemWidth={itemWidth}
                    index={index}
                    delay={index * 30} // Very fast stagger
                    duration={2000} // Faster spin (was 3000)
                  />
                </View>
              ))}
            </View>

            {/* Right Column Masks */}
            <View style={[styles.maskRight, { width: maskWidth }]} />

            {/* Middle Frame */}
            <Image
              source={{
                uri:
                  num === 1
                    ? Images.resource.lottery_middle_s
                    : Images.resource.lottery_middle_l,
              }}
              style={[
                styles.middleImage,
                {
                  height: num === 1 ? 360 : 540,
                  top: num === 1 ? -20 : -10,
                },
              ]}
              contentFit="contain"
            />
          </View>
        )}
      </View>

      {/* Video Overlay */}
      {videoVisible && videoUrl ? (
        <View style={styles.videoContainer}>
          <Video
            ref={videoRef}
            key={videoUrl}
            source={{ uri: videoUrl }}
            style={styles.video}
            resizeMode={ResizeMode.COVER}
            shouldPlay
            isLooping={false}
            useNativeControls={false}
            onLoad={() => {
              videoRef.current?.playAsync();
            }}
            onPlaybackStatusUpdate={(status: AVPlaybackStatus) => {
              if (status.isLoaded && status.didJustFinish) {
                setVideoVisible(false);
                handleFinish();
              }
            }}
            onError={() => {
              setVideoVisible(false);
              handleFinish();
            }}
          />
        </View>
      ) : null}

      <View style={styles.bottom}>
        <TouchableOpacity style={styles.skipBtn} onPress={handleSkip}>
          <Text style={styles.skipText}>
            {videoVisible
              ? "跳过动画"
              : isGrid && animationFinished
                ? "收下奖品"
                : "跳过动画"}
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#222335",
  },
  bg: {
    position: "absolute",
    width: "100%",
    height: "100%",
    zIndex: -1,
  },
  maskPage: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: "rgba(0,0,0,0.4)",
    zIndex: 0,
  },
  wrapper: {
    flex: 1,
    // justifyContent: 'center',
    alignItems: "center",
    marginTop: 0, // Remove fixed margin, let flex center it or use justify center if needed
    justifyContent: "center", // Center vertically
  },
  reelsContainer: {
    position: "relative",
    alignItems: "center",
    justifyContent: "center",
    // backgroundColor: 'rgba(255,0,0,0.1)', // Debug
  },
  reelRow: {
    overflow: "hidden",
    width: SCREEN_WIDTH,
    alignItems: "center",
    justifyContent: "center",
    marginBottom: 12, // Gap between rows
    height: 94, // Height of one row (card height + tiny padding)
  },
  height1: {
    height: 360, // Accommodate larger card (approx 325px height)
    justifyContent: "center",
  },
  height5: {
    height: 540, // 5 rows * (~100)
    justifyContent: "center",
    paddingVertical: 10,
  },
  maskLeft: {
    position: "absolute",
    left: 0,
    top: 0,
    bottom: 0,
    backgroundColor: "rgba(0,0,0,0.5)",
    zIndex: 10,
  },
  maskRight: {
    position: "absolute",
    right: 0,
    top: 0,
    bottom: 0,
    backgroundColor: "rgba(0,0,0,0.5)",
    zIndex: 10,
  },
  middleImage: {
    position: "absolute",
    width: SCREEN_WIDTH,
    zIndex: 20,
    left: 0,
    // The image frame should be centered over the reels
    // top is handled dynamically or via flex centering in parent if possible
  },
  bottom: {
    position: "absolute",
    bottom: 50,
    width: "100%",
    alignItems: "center",
    zIndex: 60,
  },
  skipBtn: {
    backgroundColor: "rgba(255,255,255,0.2)",
    paddingHorizontal: 30,
    paddingVertical: 10,
    borderRadius: 32,
    borderWidth: 1,
    borderColor: "rgba(255,255,255,0.4)",
  },
  skipText: {
    color: "#fff",
    fontSize: 14,
  },
  videoContainer: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: "#000",
    zIndex: 50,
  },
  video: {
    width: "100%",
    height: "100%",
  },
});