import React, { useState } from 'react';
import { View, Text, StyleSheet, Image, TouchableOpacity, Modal } from 'react-native';
import { rpx } from '../../utils/rpx';
import { useNavigation } from '@react-navigation/native';

const DeviceSet = () => {
    const navigation = useNavigation();
    const [showAutoOffModal, setShowAutoOffModal] = useState(false);
    const [showAutoLockModal, setShowAutoLockModal] = useState(false);
    const [selectedTime, setSelectedTime] = useState('3分钟');
    const [selectedLockTime, setSelectedLockTime] = useState('15秒');
    const [showSensitivityModal, setShowSensitivityModal] = useState(false);
    const [selectedSensitivity, setSelectedSensitivity] = useState('3级');

    // 自动关机选项
    const autoOffOptions = ['1分钟', '3分钟', '5分钟', '10分钟'];
    // 自动锁车选项
    const autoLockOptions = ['15秒', '30秒', '1分钟', '3分钟'];
    // 震动灵敏度选项
    const sensitivityOptions = ['1级', '2级', '3级', '4级', '5级'];
    // 处理无感解锁点击
    const handleUnlockPress = () => {
        navigation.navigate('UnlockSetting' as never); // 替换成实际的路由名
    };

    return (
        <View style={styles.container}>
            <View style={styles.card}>
                <TouchableOpacity style={styles.cont_li} onPress={handleUnlockPress}>
                    <View style={styles.cont_li_content}>
                        <View style={styles.cont_li_top}>
                            <Image source={{ uri: 'https://api.ccttiot.com/smartmeter/img/static/ue1qF3cHAVlV8Fn5CKV6' }} style={styles.icon_set} />
                            <Text style={styles.text_set}>无感解锁</Text>
                            <View style={styles.cont_li_right}>
                                <Image source={{ uri: 'https://api.ccttiot.com/smartmeter/img/static/uPNzghLYVj0uTnfliS0q' }} style={styles.icon_right} />
                            </View>
                        </View>
                    </View>
                </TouchableOpacity>

                <TouchableOpacity style={styles.cont_li} onPress={() => setShowAutoOffModal(true)}>
                    <View style={styles.cont_li_content}>
                        <View style={styles.cont_li_top}>
                            <Image source={{ uri: 'https://api.ccttiot.com/smartmeter/img/static/uY9EQQuqFMzgRrD92ENX' }} style={styles.icon_set} />
                            <Text style={styles.text_set}>自动关机</Text>
                            <View style={styles.cont_li_right}>
                                <Text style={styles.rightTxt}>{selectedTime}</Text>
                                <Image source={{ uri: 'https://api.ccttiot.com/smartmeter/img/static/uPNzghLYVj0uTnfliS0q' }} style={styles.icon_right} />
                            </View>
                        </View>
                        <Text style={styles.tipTxt}>车辆停稳并在等待时间内未行驶则自动关机</Text>
                    </View>
                </TouchableOpacity>

                <TouchableOpacity style={styles.cont_li} onPress={() => setShowAutoLockModal(true)}>
                    <View style={styles.cont_li_content}>
                        <View style={styles.cont_li_top}>
                            <Image source={{ uri: 'https://api.ccttiot.com/smartmeter/img/static/uZ8H5kYVkMM9jVChkHQS' }} style={styles.icon_set} />
                            <Text style={styles.text_set}>自动锁车</Text>
                            <View style={styles.cont_li_right}>
                                <Text style={styles.rightTxt}>{selectedLockTime}</Text>
                                <Image source={{ uri: 'https://api.ccttiot.com/smartmeter/img/static/uPNzghLYVj0uTnfliS0q' }} style={styles.icon_right} />
                            </View>
                        </View>
                        <Text style={styles.tipTxt}>车辆停稳并在等待时间内未行驶则自动锁车</Text>
                    </View>
                </TouchableOpacity>

                <TouchableOpacity style={styles.cont_li} onPress={() => setShowSensitivityModal(true)}>
                    <View style={[styles.cont_li_content, styles.noBotLine]}>
                        <View style={styles.cont_li_top}>
                            <Image source={{ uri: 'https://api.ccttiot.com/smartmeter/img/static/ue1qF3cHAVlV8Fn5CKV6' }} style={styles.icon_set} />
                            <Text style={styles.text_set}>震动报警灵敏度</Text>
                            <View style={styles.cont_li_right}>
                                <Image source={{ uri: 'https://api.ccttiot.com/smartmeter/img/static/uPNzghLYVj0uTnfliS0q' }} style={styles.icon_right} />
                            </View>
                        </View>
                    </View>
                </TouchableOpacity>
            </View>

            
<Modal
    visible={showAutoOffModal}
    transparent={true}
    animationType="slide"
>
    <View style={styles.modalContainer}>
        <View style={styles.modalContent}>
            <View style={styles.modalHeader}>
                <TouchableOpacity 
                    style={styles.headerButton} 
                    onPress={() => setShowAutoOffModal(false)}
                >
                    <Text style={styles.cancelText}>取消</Text>
                </TouchableOpacity>
                <Text style={styles.modalTitle}>自动关机</Text>
                <TouchableOpacity 
                    style={styles.headerButton}
                    onPress={() => setShowAutoOffModal(false)}
                >
                    <Text style={styles.confirmText}>确定</Text>
                </TouchableOpacity>
            </View>
            <View style={styles.optionsContainer}>
                {autoOffOptions.map((time, index) => (
                    <TouchableOpacity
                        key={index}
                        style={[
                            styles.optionItem,
                            selectedTime === time && styles.selectedItemBg
                        ]}
                        onPress={() => {
                            setSelectedTime(time);
                            setShowAutoOffModal(false);
                        }}
                    >
                        <Text style={[
                            styles.optionText,
                            selectedTime === time && styles.selectedOption
                        ]}>
                            {time}
                        </Text>
                    </TouchableOpacity>
                ))}
            </View>
        </View>
    </View>
</Modal>

{/* 修改自动锁车弹窗 */}
<Modal
    visible={showAutoLockModal}
    transparent={true}
    animationType="slide"
>
    <View style={styles.modalContainer}>
        <View style={styles.modalContent}>
            <View style={styles.modalHeader}>
                <TouchableOpacity 
                    style={styles.headerButton} 
                    onPress={() => setShowAutoLockModal(false)}
                >
                    <Text style={styles.cancelText}>取消</Text>
                </TouchableOpacity>
                <Text style={styles.modalTitle}>自动锁车</Text>
                <TouchableOpacity 
                    style={styles.headerButton}
                    onPress={() => setShowAutoLockModal(false)}
                >
                    <Text style={styles.confirmText}>确定</Text>
                </TouchableOpacity>
            </View>
            <View style={styles.optionsContainer}>
                {autoLockOptions.map((time, index) => (
                    <TouchableOpacity
                        key={index}
                        style={[
                            styles.optionItem,
                            selectedLockTime === time && styles.selectedItemBg
                        ]}
                        onPress={() => {
                            setSelectedLockTime(time);
                            setShowAutoLockModal(false);
                        }}
                    >
                        <Text style={[
                            styles.optionText,
                            selectedLockTime === time && styles.selectedOption
                        ]}>
                            {time}
                        </Text>
                    </TouchableOpacity>
                ))}
            </View>
        </View>
    </View>
</Modal>
            {/* 在最后添加震动报警灵敏度选择弹窗 */}
            <Modal
                visible={showSensitivityModal}
                transparent={true}
                animationType="slide"
            >
                <View style={styles.modalContainer}>
                    <View style={styles.modalContent}>
                        <View style={styles.modalHeader}>
                            <TouchableOpacity
                                style={styles.headerButton}
                                onPress={() => setShowSensitivityModal(false)}
                            >
                                <Text style={styles.cancelText}>取消</Text>
                            </TouchableOpacity>
                            <Text style={styles.modalTitle}>报警灵敏度</Text>
                            <TouchableOpacity
                                style={styles.headerButton}
                                onPress={() => setShowSensitivityModal(false)}
                            >
                                <Text style={styles.confirmText}>确定</Text>
                            </TouchableOpacity>
                        </View>
                        <View style={styles.optionsContainer}>
                            {sensitivityOptions.map((level, index) => (
                                <TouchableOpacity
                                    key={index}
                                    style={[
                                        styles.optionItem,
                                        selectedSensitivity === level && styles.selectedItemBg
                                    ]}
                                    onPress={() => {
                                        setSelectedSensitivity(level);
                                        setShowSensitivityModal(false);
                                    }}
                                >
                                    <Text style={[
                                        styles.optionText,
                                        selectedSensitivity === level && styles.selectedOption
                                    ]}>
                                        {level}
                                    </Text>
                                </TouchableOpacity>
                            ))}
                        </View>
                    </View>
                </View>
            </Modal>
        </View>
    );
};

const styles = StyleSheet.create({
    headerButton: {
        padding: rpx(8),
        minWidth: rpx(80),
        alignItems: 'center',
    },
    confirmText: {
        fontSize: rpx(28),
        color: '#4297F3',
        fontWeight: '500',
    },
    optionsContainer: {
        paddingVertical: rpx(20),
    },
    optionItem: {
        padding: rpx(30),
        alignItems: 'center',
        borderBottomWidth: 1,
        borderBottomColor: '#EBEBEB',
    },
    selectedItemBg: {
        backgroundColor: '#F5F5F5',
    },
    optionText: {
        fontSize: rpx(30),
        color: '#333',
    },
    selectedOption: {
        color: '#4297F3',
        fontWeight: '500',
    },
    modalHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: rpx(16),
        borderBottomWidth: 1,
        borderBottomColor: '#EBEBEB',
    },
    container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#F3FCFF',
    },
    card: {
        marginTop: rpx(20),
        width: rpx(688),
        backgroundColor: '#fff',
        borderRadius: rpx(30),
        padding: rpx(30),
        paddingTop: rpx(0),
    },
    icon_set: {
        width: rpx(50),
        height: rpx(50),
    },
    cont_li_right: {
        marginLeft: 'auto',
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
    },
    rightTxt: {
        fontWeight: '500',
        fontSize: rpx(28),
        color: '#4297F3',
        marginRight: rpx(8),
    },
    noBotLine: {
        borderBottomWidth: 0,
        borderBottomColor: 'transparent',
    },
    tipTxt: {
        width: '85%',
        marginLeft: rpx(62),
        fontSize: rpx(28),
        color: '#999',
        marginTop: rpx(8),
    },
    icon_right: {
        width: rpx(32),
        height: rpx(32),
    },
    cont_li_content: {
        flexDirection: 'column',
    },
    cont_li: {
        paddingTop: rpx(32),
        paddingBottom: rpx(32),
        borderBottomWidth: rpx(1),
        borderBottomColor: '#EBEBEB',
    },
    text_set: {
        fontWeight: '500',
        fontSize: rpx(36),
        color: '#333',
        marginLeft: rpx(10),
    },
    cont_li_top: {
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: rpx(8),
    },
    modalContainer: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.5)',
        justifyContent: 'flex-end',
    },
    modalContent: {
        backgroundColor: '#fff',
        borderTopLeftRadius: rpx(20),
        borderTopRightRadius: rpx(20),
        paddingBottom: rpx(34),
    },

    modalTitle: {
        fontSize: rpx(32),
        fontWeight: '500',
        color: '#333',
    },

    cancelButton: {
        marginTop: rpx(16),
        padding: rpx(30),
        alignItems: 'center',
    },
    cancelText: {
        fontSize: rpx(30),
        color: '#666',
    },
});

export default DeviceSet;