import { Image } from 'expo-image';
import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
import React, { useEffect, useState } from 'react';
import { Dimensions, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';

import { Images } from '@/constants/images';

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

export default function LotteryResultScreen() {
  const router = useRouter();
  const params = useLocalSearchParams();
  
  const [results, setResults] = useState<any[]>([]);

  useEffect(() => {
    if (params.results) {
        try {
            setResults(JSON.parse(params.results as string));
        } catch (e) {
            console.error('Failed to parse results', e);
        }
    }
  }, [params.results]);

  const handleClose = () => {
    // Navigate back to the previous screen (likely detail page)
    // Or if we came from award_detail, we might want to go back there
    if (router.canGoBack()) {
        router.back();
    } else {
        router.replace('/(tabs)/box');
    }
  };

  const handleAgain = () => {
     // Navigation logic to play again if needed, or just close to let user click again
     handleClose();
  };

  return (
    <View style={styles.container}>
       <Stack.Screen options={{ headerShown: false }} />
       <View style={styles.overlay} />
       
       <View style={styles.content}>
           <Image 
              source={{ uri: Images.box.resultBgA }} // Using A as default, logic should depend on rarity
              style={styles.resultBg}
              contentFit="contain"
           />
           
           <View style={styles.resultContainer}>
               <Text style={styles.title}>恭喜获得</Text>
               <ScrollView contentContainerStyle={styles.scrollContent}>
                   <View style={styles.grid}>
                       {results.map((item, index) => (
                           <View key={index} style={styles.item}>
                               <Image source={{ uri: item.cover }} style={styles.itemImage} contentFit="contain" />
                               <Text style={styles.itemName} numberOfLines={1}>{item.name}</Text>
                           </View>
                       ))}
                   </View>
               </ScrollView>
               
               <TouchableOpacity style={styles.button} onPress={handleClose}>
                   <Text style={styles.buttonText}>收下奖品</Text>
               </TouchableOpacity>
           </View>
       </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.7)',
  },
  content: {
      width: SCREEN_WIDTH * 0.9,
      height: 500,
      alignItems: 'center',
      justifyContent: 'center',
  },
  resultBg: {
      position: 'absolute',
      width: '100%',
      height: '100%',
  },
  resultContainer: {
      width: '100%',
      height: '100%',
      paddingTop: 100,
      paddingHorizontal: 40,
      alignItems: 'center',
  },
  title: {
      fontSize: 24,
      fontWeight: 'bold',
      color: '#fff',
      marginBottom: 20,
      textShadowColor: 'rgba(0,0,0,0.5)',
      textShadowOffset: { width: 1, height: 1 },
      textShadowRadius: 2,
  },
  scrollContent: {
      alignItems: 'center',
  },
  grid: {
      flexDirection: 'row',
      flexWrap: 'wrap',
      justifyContent: 'center',
  },
  item: {
      width: 80,
      margin: 5,
      alignItems: 'center',
      backgroundColor: 'rgba(255,255,255,0.1)',
      borderRadius: 8,
      padding: 5,
  },
  itemImage: {
      width: 60,
      height: 60,
      marginBottom: 5,
  },
  itemName: {
      color: '#fff',
      fontSize: 10,
      textAlign: 'center',
  },
  button: {
      marginTop: 20,
      backgroundColor: '#F62C71',
      paddingHorizontal: 40,
      paddingVertical: 10,
      borderRadius: 20,
  },
  buttonText: {
      color: '#fff',
      fontWeight: 'bold',
  },
});