import React, { useState } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    ActivityIndicator,
    Alert,
} from 'react-native';

export default function ConnectDeviceScreen() {
    const [loading, setLoading] = useState(false);

    const handleConnect = () => {
        setLoading(true);
        // Simulate searching process with a delay
        setTimeout(() => {
            setLoading(false);
            Alert.alert(
                'Device Not Found',
                'No accelerometer device was found. Please ensure the device is turned on, in range, and try again.',
                [
                    { text: 'Retry', onPress: () => handleConnect() },
                    { text: 'Cancel' },
                ],
                { cancelable: false }
            );
        }, 3000); // Simulate a 3-second search process
    };

    return (
        <View style={styles.container}>
            <View style={styles.header}>
                <Image
                    source={require('./assets/logo.png')} // Replace with your logo path
                    style={styles.logo}
                />
                <Text style={styles.appName}>ElderCare+</Text>
                <Text style={styles.slogan}>Connect Your Accelerometer</Text>
            </View>
            <View style={styles.content}>
                <Text style={styles.description}>
                    Connect to an actual accelerometer device to monitor real
                    elder person activity. Ensure the device is powered on and
                    within range.
                </Text>
                <View style={styles.instructionContainer}>
                    <Text style={styles.instructionText}>
                        To connect your accelerometer:
                    </Text>
                    <Text style={styles.instructionItem}>
                        1. Make sure your device is turned on.
                    </Text>
                    <Text style={styles.instructionItem}>
                        2. Ensure your device is Bluetooth or WiFi enabled.
                    </Text>
                    <Text style={styles.instructionItem}>
                        3. Place the accelerometer close to your phone.
                    </Text>
                    <Text style={styles.instructionItem}>
                        4. Press the "Connect" button to start.
                    </Text>
                </View>
                {loading ? (
                    <ActivityIndicator
                        size="large"
                        color="#2D328C"
                        style={styles.spinner}
                    />
                ) : (
                    <TouchableOpacity
                        style={styles.connectButton}
                        onPress={handleConnect}>
                        <Text style={styles.buttonText}>Connect</Text>
                    </TouchableOpacity>
                )}
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F2F4F9', // Light gray background for the entire screen
    },
    header: {
        flex: 0.3, // Occupies 30% of the screen height
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#2D328C', // Blue background for the header
        padding: 20,
        borderBottomRightRadius: 30, // Rounded corners for a better look
        borderBottomLeftRadius: 30,
    },
    logo: {
        width: 100,
        height: 100,
        resizeMode: 'contain',
    },
    appName: {
        fontSize: 24,
        color: '#fff',
        fontWeight: 'bold',
        marginTop: 10,
    },
    slogan: {
        fontSize: 16,
        color: '#fff',
        marginTop: 5,
    },
    content: {
        flex: 0.7, // Occupies the remaining space
        justifyContent: 'center',
        alignItems: 'center',
        padding: 20,
    },
    description: {
        fontSize: 18,
        color: '#000',
        textAlign: 'center',
        marginBottom: 20,
    },
    instructionContainer: {
        width: '100%',
        padding: 20,
        backgroundColor: '#fff',
        borderRadius: 10,
        borderColor: '#2D328C',
        borderWidth: 1,
        marginBottom: 20,
    },
    instructionText: {
        fontSize: 18,
        color: '#2D328C',
        fontWeight: 'bold',
        marginBottom: 10,
        textAlign: 'center',
    },
    instructionItem: {
        fontSize: 16,
        color: '#555',
        marginBottom: 10,
    },
    connectButton: {
        width: '100%',
        height: 50,
        backgroundColor: '#FF1B08', // Red background for the button
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 5,
    },
    buttonText: {
        color: '#fff',
        fontSize: 18,
        fontWeight: 'bold',
    },
    spinner: {
        marginVertical: 20,
    },
});