import React, { useEffect, useRef } from 'react';
import { StyleSheet, Modal, TouchableOpacity, Image, Animated } from 'react-native';
import { View, Text, useTheme } from '@bettoredge/styles';
import { Ionicons } from '@expo/vector-icons';
import type { CalcuttaAuctionItemProps } from '@bettoredge/types';
import { resolveItemImageUrl } from '../helpers/formatting';

export interface SweepstakesRevealProps {
    visible: boolean;
    item?: CalcuttaAuctionItemProps;
    /** Resolved image URL from sr_svc (getBulkTeams/getBulkAthletes) */
    itemImageUrl?: string;
    competitionName?: string;
    onClose: () => void;
}

export const SweepstakesReveal: React.FC<SweepstakesRevealProps> = ({
    visible,
    item,
    itemImageUrl,
    competitionName,
    onClose,
}) => {
    const { theme } = useTheme();
    const scaleAnim = useRef(new Animated.Value(0.3)).current;
    const opacityAnim = useRef(new Animated.Value(0)).current;

    useEffect(() => {
        if (visible && item) {
            scaleAnim.setValue(0.3);
            opacityAnim.setValue(0);
            Animated.parallel([
                Animated.spring(scaleAnim, {
                    toValue: 1,
                    tension: 50,
                    friction: 7,
                    useNativeDriver: true,
                }),
                Animated.timing(opacityAnim, {
                    toValue: 1,
                    duration: 300,
                    useNativeDriver: true,
                }),
            ]).start();
        }
    }, [visible, item]);

    if (!item) return null;

    return (
        <Modal
            visible={visible}
            transparent
            animationType="fade"
            onRequestClose={onClose}
        >
            <View variant="transparent" style={styles.backdrop}>
                <Animated.View style={[
                    styles.card,
                    {
                        backgroundColor: theme.colors.surface.elevated,
                        borderColor: theme.colors.border.subtle,
                        transform: [{ scale: scaleAnim }],
                        opacity: opacityAnim,
                    },
                ]}>
                    {/* Confetti-style header */}
                    <View variant="transparent" style={[styles.celebrationHeader, { backgroundColor: '#8B5CF6' }]}>
                        <Text style={styles.emoji}>🎉</Text>
                        <Text variant="h3" bold style={{ color: '#FFF', textAlign: 'center' }}>
                            You Got a Team!
                        </Text>
                        {competitionName && (
                            <Text variant="caption" style={{ color: '#FFFFFFCC', marginTop: 4 }}>
                                {competitionName}
                            </Text>
                        )}
                    </View>

                    {/* Item display */}
                    <View variant="transparent" style={styles.itemSection}>
                        {(itemImageUrl || resolveItemImageUrl(item.item_image)) ? (
                            <Image
                                source={{ uri: (itemImageUrl || resolveItemImageUrl(item.item_image))! }}
                                style={styles.itemImage}
                                resizeMode="cover"
                            />
                        ) : (
                            <View variant="transparent" style={[styles.itemImage, styles.itemImageFallback, { backgroundColor: theme.colors.primary.subtle }]}>
                                <Ionicons name="trophy" size={48} color={theme.colors.primary.default} />
                            </View>
                        )}

                        <Text variant="h2" bold style={{ marginTop: 16, textAlign: 'center' }}>
                            {item.item_name}
                        </Text>

                        {item.seed != null && (
                            <View variant="transparent" style={[styles.seedBadge, { backgroundColor: theme.colors.primary.subtle }]}>
                                <Text variant="body" bold style={{ color: theme.colors.primary.default }}>
                                    Seed #{item.seed}
                                </Text>
                            </View>
                        )}

                        <Text variant="body" color="secondary" style={{ marginTop: 12, textAlign: 'center' }}>
                            Cheer them on as they compete through each round!
                        </Text>
                    </View>

                    {/* Close button */}
                    <TouchableOpacity
                        style={[styles.closeButton, { backgroundColor: '#8B5CF6' }]}
                        onPress={onClose}
                        activeOpacity={0.8}
                    >
                        <Text variant="body" bold style={{ color: '#FFF' }}>Let's Go!</Text>
                    </TouchableOpacity>
                </Animated.View>
            </View>
        </Modal>
    );
};

const styles = StyleSheet.create({
    backdrop: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.6)',
        justifyContent: 'center',
        alignItems: 'center',
        padding: 24,
    },
    card: {
        width: '100%',
        maxWidth: 360,
        borderRadius: 16,
        borderWidth: 1,
    },
    celebrationHeader: {
        paddingTop: 32,
        paddingBottom: 24,
        paddingHorizontal: 20,
        alignItems: 'center',
        borderTopLeftRadius: 15,
        borderTopRightRadius: 15,
    },
    emoji: {
        fontSize: 48,
        lineHeight: 63,
        marginBottom: 8,
    },
    itemSection: {
        padding: 24,
        alignItems: 'center',
    },
    itemImage: {
        width: 120,
        height: 120,
        borderRadius: 16,
    },
    itemImageFallback: {
        alignItems: 'center',
        justifyContent: 'center',
    },
    seedBadge: {
        paddingHorizontal: 16,
        paddingVertical: 6,
        borderRadius: 20,
        marginTop: 10,
    },
    closeButton: {
        marginHorizontal: 24,
        marginBottom: 24,
        paddingVertical: 14,
        borderRadius: 10,
        alignItems: 'center',
    },
});