import React, { useEffect, useRef } from 'react';
import { StyleSheet, Animated, TouchableOpacity } from 'react-native';
import { View, Text, useTheme } from '@bettoredge/styles';
import { Ionicons } from '@expo/vector-icons';

export interface AuctionPausedOverlayProps {
    visible: boolean;
    isAdmin?: boolean;
    onResume?: () => void;
    resuming?: boolean;
}

export const AuctionPausedOverlay: React.FC<AuctionPausedOverlayProps> = ({
    visible,
    isAdmin,
    onResume,
    resuming,
}) => {
    const { theme } = useTheme();
    const opacityAnim = useRef(new Animated.Value(0)).current;
    const pulseAnim = useRef(new Animated.Value(1)).current;

    useEffect(() => {
        if (visible) {
            Animated.timing(opacityAnim, { toValue: 1, duration: 300, useNativeDriver: true }).start();
            const loop = Animated.loop(
                Animated.sequence([
                    Animated.timing(pulseAnim, { toValue: 0.5, duration: 1200, useNativeDriver: true }),
                    Animated.timing(pulseAnim, { toValue: 1, duration: 1200, useNativeDriver: true }),
                ])
            );
            loop.start();
            return () => loop.stop();
        } else {
            Animated.timing(opacityAnim, { toValue: 0, duration: 200, useNativeDriver: true }).start();
        }
    }, [visible]);

    if (!visible) return null;

    return (
        <Animated.View style={[styles.overlay, { opacity: opacityAnim }]}>
            <View variant="transparent" style={styles.backdrop} />
            <View variant="transparent" style={styles.content}>
                <Animated.View style={{ opacity: pulseAnim }}>
                    <View variant="transparent" style={styles.iconCircle}>
                        <Ionicons name="pause" size={48} color="#FFFFFF" />
                    </View>
                </Animated.View>

                <Text style={styles.title}>Auction Paused</Text>
                <Text style={styles.subtitle}>
                    {isAdmin
                        ? 'The auction is paused. Resume when ready.'
                        : 'The host has paused the auction.\nBidding will resume shortly.'}
                </Text>

                {isAdmin && onResume && (
                    <TouchableOpacity
                        style={[styles.resumeButton, resuming && { opacity: 0.6 }]}
                        onPress={onResume}
                        disabled={resuming}
                        activeOpacity={0.7}
                    >
                        <Ionicons name="play" size={20} color="#FFFFFF" />
                        <Text style={styles.resumeText}>
                            {resuming ? 'Resuming...' : 'Resume Auction'}
                        </Text>
                    </TouchableOpacity>
                )}

                {!isAdmin && (
                    <View variant="transparent" style={styles.waitingRow}>
                        <Animated.View style={{ opacity: pulseAnim }}>
                            <View variant="transparent" style={styles.waitingDot} />
                        </Animated.View>
                        <Text style={styles.waitingText}>Waiting for host...</Text>
                    </View>
                )}
            </View>
        </Animated.View>
    );
};

const styles = StyleSheet.create({
    overlay: {
        ...StyleSheet.absoluteFillObject,
        zIndex: 999,
        alignItems: 'center',
        justifyContent: 'center',
    },
    backdrop: {
        ...StyleSheet.absoluteFillObject,
        backgroundColor: 'rgba(0,0,0,0.80)',
    },
    content: {
        alignItems: 'center',
        padding: 40,
    },
    iconCircle: {
        width: 100,
        height: 100,
        borderRadius: 50,
        backgroundColor: '#EF4444',
        alignItems: 'center',
        justifyContent: 'center',
        marginBottom: 24,
    },
    title: {
        color: '#FFFFFF',
        fontSize: 28,
        lineHeight: 36,
        fontWeight: '800',
        marginBottom: 8,
    },
    subtitle: {
        color: 'rgba(255,255,255,0.7)',
        fontSize: 16,
        textAlign: 'center',
        lineHeight: 22,
        marginBottom: 32,
    },
    resumeButton: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#10B981',
        paddingHorizontal: 28,
        paddingVertical: 14,
        borderRadius: 12,
    },
    resumeText: {
        color: '#FFFFFF',
        fontSize: 17,
        lineHeight: 24,
        fontWeight: '700',
        marginLeft: 10,
    },
    waitingRow: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    waitingDot: {
        width: 8,
        height: 8,
        borderRadius: 4,
        backgroundColor: '#F59E0B',
        marginRight: 8,
    },
    waitingText: {
        color: 'rgba(255,255,255,0.5)',
        fontSize: 14,
        lineHeight: 19,
    },
});