import React, { useEffect, useRef } from 'react'
import {
    View,
    Text,
    StyleSheet,
    ActivityIndicator,
    Animated,
    ImageBackground,
    Dimensions,
} from 'react-native'

const { width, height } = Dimensions.get('window')

export function LoadingScreen() {
    const fadeAnim = useRef(new Animated.Value(0)).current
    const scaleAnim = useRef(new Animated.Value(0.95)).current

    useEffect(() => {
        Animated.parallel([
            Animated.timing(fadeAnim, {
                toValue: 1,
                duration: 800,
                useNativeDriver: true,
            }),
            Animated.spring(scaleAnim, {
                toValue: 1,
                friction: 8,
                tension: 40,
                useNativeDriver: true,
            }),
        ]).start()
    }, [])

    return (
        <View style={styles.container}>
            <ImageBackground
                source={require('../../assets/loading_bg.png')}
                style={styles.backgroundImage}
                resizeMode="cover"
            >
                <Animated.View
                    style={[
                        styles.content,
                        {
                            opacity: fadeAnim,
                            transform: [{ scale: scaleAnim }],
                        },
                    ]}
                >
                    {/* Card with rounded corners and semi-transparent background */}
                    <View style={styles.glassCard}>
                        <View style={styles.logoContainer}>
                            <View style={styles.logoBox}>
                                <Text style={styles.logoLetter}>I</Text>
                            </View>
                            <Text style={styles.appName}>InnungsApp</Text>
                        </View>

                        <View style={styles.loaderContainer}>
                            <ActivityIndicator size="large" color="#003B7E" />
                            <Text style={styles.loadingText}>Wird geladen...</Text>
                        </View>
                    </View>
                </Animated.View>
            </ImageBackground>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#003B7E',
    },
    backgroundImage: {
        flex: 1,
        width: width,
        height: height,
        justifyContent: 'center',
        alignItems: 'center',
    },
    content: {
        width: '80%',
        maxWidth: 320,
        alignItems: 'center',
    },
    glassCard: {
        width: '100%',
        padding: 32,
        borderRadius: 32, // Rounded corners as requested
        borderWidth: 1,
        borderColor: 'rgba(255, 255, 255, 0.4)',
        backgroundColor: 'rgba(255, 255, 255, 0.95)', // Solid-ish background for clean look without blur
        alignItems: 'center',
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 10 },
        shadowOpacity: 0.1,
        shadowRadius: 20,
        elevation: 10,
    },
    logoContainer: {
        alignItems: 'center',
        marginBottom: 24,
    },
    logoBox: {
        width: 64,
        height: 64,
        backgroundColor: '#003B7E',
        borderRadius: 20,
        alignItems: 'center',
        justifyContent: 'center',
        marginBottom: 12,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.2,
        shadowRadius: 8,
        elevation: 5,
    },
    logoLetter: {
        color: '#FFFFFF',
        fontSize: 32,
        fontWeight: '900',
    },
    appName: {
        fontSize: 24,
        fontWeight: '800',
        color: '#0F172A',
        letterSpacing: -0.5,
    },
    loaderContainer: {
        alignItems: 'center',
        gap: 12,
    },
    loadingText: {
        fontSize: 14,
        color: '#64748B',
        fontWeight: '600',
        marginTop: 8,
    },
})