import { Steps } from '@/app/(tabs)/user-message';
import { ThemedText } from '@/components/ThemedText';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Image, Modal, SafeAreaView, StyleSheet, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import FileUploader, { FileStatus } from '../file-upload/file-uploader';
interface Props {
    setSteps?: (steps: Steps) => void;
    fileData: FileStatus[];
    setFileData: (fileData: FileStatus[]) => void;
    isLoading: boolean;
    handleUser: () => void;
    avatar: string;
}

export default function Look({ fileData, setFileData, isLoading, handleUser, avatar }: Props) {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const { t } = useTranslation();

    return (
        <View className="flex-1 bg-textPrimary justify-between p-[2rem]">
            <View className="flex-1 justify-center items-center">
                <View className="w-full items-center">
                    <ThemedText className="text-4xl font-bold !text-white mb-[2rem]">
                        {t('auth.userMessage.look', { ns: 'login' })}
                    </ThemedText>
                    <ThemedText className="text-base !text-white/80 text-center mb-[5rem]">
                        {t('auth.userMessage.avatarText', { ns: 'login' })}
                        <br />
                        {t('auth.userMessage.avatorText2', { ns: 'login' })}
                    </ThemedText>

                    <View className="rounded-full bg-white/10 items-center justify-center mb-[3rem]">
                        {
                            fileData?.[0]?.thumbnailUrl
                                ?
                                <Image
                                    style={styles.image}
                                    source={{
                                        uri: fileData?.[0].thumbnailUrl,
                                    }}
                                    resizeMode="cover"
                                />
                                :
                                avatar
                                    ?
                                    <Image
                                        style={styles.image}
                                        source={{
                                            uri: avatar,
                                        }}
                                        resizeMode="cover"
                                    />
                                    :
                                    <svg width="215" height="215" viewBox="0 0 215 215" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <circle cx="107.5" cy="107.5" r="107.5" fill="#FFF8DE" />
                                    </svg>

                        }
                    </View>
                    <TouchableOpacity
                        className={`!bg-[#FFF8DE] rounded-2xl p-4 items-center flex flex-row gap-[1rem]`}
                        disabled={isLoading}
                        onPress={() => { setIsModalVisible(true) }}
                    >
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1 10C1 14.9706 5.02944 19 10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10Z" fill="white" />
                            <path d="M15.2166 17.3323C13.9349 15.9008 12.0727 15 10 15C7.92734 15 6.06492 15.9008 4.7832 17.3323M10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19ZM10 12C8.34315 12 7 10.6569 7 9C7 7.34315 8.34315 6 10 6C11.6569 6 13 7.34315 13 9C13 10.6569 11.6569 12 10 12Z" stroke="#4C320C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        <ThemedText className="text-lg font-semibold ">
                            {t('auth.userMessage.choosePhoto', { ns: 'login' })}
                        </ThemedText>

                        {/* 上传弹窗 */}
                        <SafeAreaProvider>
                            <SafeAreaView style={styles.centeredView}>
                                <Modal
                                    animationType="fade"
                                    transparent={true}
                                    visible={isModalVisible}
                                    onRequestClose={() => {
                                        setIsModalVisible(false);
                                    }}
                                >
                                    <View style={styles.modalOverlay}>
                                        <TouchableWithoutFeedback onPress={() => setIsModalVisible(false)}>
                                            <View style={styles.modalOverlayTouchable} />
                                        </TouchableWithoutFeedback>
                                        <View style={styles.modalContent}>
                                            <ThemedText style={styles.modalTitle}>{t('auth.userMessage.choosePhoto', { ns: 'login' })}</ThemedText>
                                            <FileUploader
                                                allowMultiple={false}
                                                maxFiles={1}
                                                onFilesUploaded={(file: FileStatus[]) => {
                                                    setFileData(file);
                                                    setIsModalVisible(false);
                                                }}
                                                allowedFileTypes={["image/png", "image/jpeg", "image/webp"]}
                                                maxFileSize={1024 * 1024 * 10}
                                                className="w-full"
                                            />
                                        </View>
                                    </View>
                                </Modal>
                            </SafeAreaView>
                        </SafeAreaProvider>
                    </TouchableOpacity>
                </View>
            </View>

            {/* Continue Button */}
            <View className="p-6 w-full">
                <TouchableOpacity
                    className={`w-full bg-white rounded-full p-4 items-center ${isLoading ? 'opacity-70' : ''
                        }`}
                    onPress={handleUser}
                    disabled={isLoading}
                >
                    <ThemedText className="text-textTertiary text-lg font-semibold">
                        {t('auth.userMessage.next', { ns: 'login' })}
                    </ThemedText>
                </TouchableOpacity>
            </View>
        </View>
    );
}
const styles = StyleSheet.create({
    image: {
        width: 215,
        height: 215,
        borderRadius: 107.5,
    },
    centeredView: {
        flex: 1,
    },
    modalOverlay: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
    },
    modalOverlayTouchable: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
    },
    modalContent: {
        width: '90%',
        maxWidth: 400,
        backgroundColor: 'white',
        borderRadius: 12,
        padding: 20,
        shadowColor: '#000',
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 4,
        elevation: 5,
    },
    modalTitle: {
        fontSize: 18,
        fontWeight: 'bold',
        marginBottom: 15,
        textAlign: 'center',
    },
    // ... 其他样式保持不变
});