import { useState, useEffect, useRef, useMemo, useCallback } from 'react'
import {
    View,
    Text,
    StyleSheet,
    Pressable,
    Platform,
    Keyboard,
    ActivityIndicator,
} from 'react-native'
import { Image } from 'expo-image'
import { useTranslation } from 'react-i18next'
import { BottomSheetModal, BottomSheetBackdrop, BottomSheetTextInput, BottomSheetView } from '@gorhom/bottom-sheet'
import { CloseIcon, AvatarUploadIcon } from '@/components/icon'
import { LinearGradient } from 'expo-linear-gradient'
import { type ImagePickerAsset } from 'expo-image-picker'
import { useUpdateProfile } from '@/hooks'
import { KeyboardAwareScrollView, useKeyboardContext, useKeyboardState } from 'react-native-keyboard-controller'
import { TextInput } from 'react-native-gesture-handler'


interface EditProfileDrawerProps {
    visible: boolean
    onClose: () => void
    initialName?: string
    initialAvatar?: string
    onSave?: (data: { name: string; avatar?: string }) => void
}

export default function EditProfileDrawer({
    visible,
    onClose,
    initialName = '',
    initialAvatar,
    onSave,
}: EditProfileDrawerProps) {
    const { t } = useTranslation()
    const bottomSheetRef = useRef<BottomSheetModal>(null)
    const [name, setName] = useState(initialName)
    const [avatar, setAvatar] = useState<string | undefined>(initialAvatar)
    const [selectedImage, setSelectedImage] = useState<ImagePickerAsset | null>(null)

    const keyboardState = useKeyboardState()

    const { loading, pickImage, updateProfile } = useUpdateProfile()

    // 增加高度以避免被底部 Tab 栏遮挡，考虑底部安全区域
    // 使用百分比让 BottomSheet 在键盘弹出时能够自动调整
    const snapPoints = useMemo(() => ['80%'], [])

    useEffect(() => {
        if (visible) {
            bottomSheetRef.current?.present()
            // 重置为初始值
            setName(initialName)
            setAvatar(initialAvatar)
            setSelectedImage(null)

        } else {
            bottomSheetRef.current?.dismiss()
        }
    }, [visible, initialName, initialAvatar])


    useEffect(() => {
        if (keyboardState && keyboardState.height) {
            bottomSheetRef.current?.expand()
        } else {
            bottomSheetRef.current?.collapse()
        }
    }, [keyboardState])

    const handleSheetChanges = useCallback((index: number) => {
        if (index === -1) {
            onClose()
        }
    }, [onClose])

    const renderBackdrop = useCallback(
        (props: any) => (
            <BottomSheetBackdrop
                {...props}
                disappearsOnIndex={-1}
                appearsOnIndex={0}
                opacity={0.5}
            />
        ),
        []
    )

    // 处理头像选择
    const handleAvatarPress = useCallback(async () => {
        const image = await pickImage()
        if (image) {
            setSelectedImage(image)
            setAvatar(image.uri)
        }
    }, [pickImage])

    const handleSave = async () => {
        Keyboard.dismiss()

        // 构建更新数据
        const updateData: { name: string; image?: ImagePickerAsset } = {
            name: name.trim(),
        }

        // 如果选择了新头像，添加到更新数据
        if (selectedImage) {
            updateData.image = selectedImage
        }

        // 调用更新接口
        const result = await updateProfile(updateData)

        if (!result.error) {
            // 通知父组件更新
            onSave?.({
                name: updateData.name,
                avatar: avatar,
            })
            onClose()
        }
    }

    const handleClose = () => {
        Keyboard.dismiss()
        onClose()
    }

    return (
        <BottomSheetModal
            ref={bottomSheetRef}
            snapPoints={snapPoints}
            onChange={handleSheetChanges}
            enablePanDownToClose={!loading}
            backgroundStyle={styles.bottomSheetBackground}
            handleIndicatorStyle={styles.handleIndicator}
            backdropComponent={renderBackdrop}
            keyboardBehavior="interactive"
            keyboardBlurBehavior="restore"
            android_keyboardInputMode="adjustResize"
        >
            <BottomSheetView style={styles.container}>
                {/* 顶部关闭按钮 */}
                <Pressable
                    style={styles.closeButton}
                    onPress={handleClose}
                    hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
                    disabled={loading}
                >
                    <CloseIcon />
                </Pressable>
                {/* 头像区域 */}
                <View style={styles.avatarContainer}>
                    <View style={styles.avatarWrapper}>
                        <Image
                            source={avatar ? { uri: avatar } : require('@/assets/images/icon.png')}
                            style={styles.avatar}
                            contentFit="cover"
                        />
                        <Pressable
                            style={styles.cameraButton}
                            onPress={handleAvatarPress}
                            disabled={loading}
                        >
                            <View style={styles.cameraIconContainer}>
                                {loading ? (
                                    <ActivityIndicator size="small" color="#FFFFFF" />
                                ) : (
                                    <AvatarUploadIcon />
                                )}
                            </View>
                        </Pressable>
                    </View>
                </View>

                {/* 输入框 */}
                {/* <BottomSheetTextInput
                        style={styles.input}
                        value={name}
                        onChangeText={setName}
                        placeholder={t('editProfile.namePlaceholder')}
                        placeholderTextColor="#666666"
                        returnKeyType="done"
                        onSubmitEditing={handleSave}
                        editable={!loading}
                    /> */}

                <TextInput style={styles.input}
                    value={name}
                    onChangeText={setName}
                    placeholder={t('editProfile.namePlaceholder')}
                    placeholderTextColor="#666666"
                    returnKeyType="done"
                    onSubmitEditing={handleSave}
                    editable={!loading}></TextInput>

                {/* 保存按钮 */}
                <Pressable
                    style={[styles.saveButtonContainer, loading && styles.saveButtonDisabled]}
                    onPress={handleSave}
                    disabled={loading || !name.trim()}
                    android_ripple={{ color: 'rgba(255, 255, 255, 0.1)' }}
                >
                    <LinearGradient
                        colors={['#9966FF', '#FF6699', '#FF9966']}
                        start={{ x: 0, y: 0 }}
                        end={{ x: 1, y: 0 }}
                        style={styles.saveButton}
                    >
                        {loading ? (
                            <ActivityIndicator size="small" color="#FFFFFF" />
                        ) : (
                            <Text style={styles.saveButtonText}>{t('editProfile.save')}</Text>
                        )}
                    </LinearGradient>
                </Pressable>
            </BottomSheetView>

        </BottomSheetModal>
    )
}

const styles = StyleSheet.create({
    bottomSheetBackground: {
        backgroundColor: '#1C1E22',
    },
    handleIndicator: {
        backgroundColor: '#666666',
    },
    container: {
        flex: 1,
        backgroundColor: '#1C1E22',
        paddingHorizontal: 16,
        paddingTop: 32,
        paddingBottom: Platform.OS === 'ios' ? 25 : 17,
    },
    closeButton: {
        position: 'absolute',
        top: Platform.OS === 'ios' ? 16 : 16,
        right: 16,
        width: 24,
        height: 24,
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: 10,
    },
    avatarContainer: {
        alignItems: 'center',
    },
    avatarWrapper: {
        position: 'relative',
        width: 88,
        height: 88,
    },
    avatar: {
        width: 88,
        height: 88,
        borderRadius: 50,
        overflow: 'hidden',
    },
    cameraButton: {
        position: 'absolute',
        bottom: 0,
        right: 0,
        width: 26,
        height: 26,
        borderRadius: 16,
        backgroundColor: '#16181B',
        alignItems: 'center',
        justifyContent: 'center',
        borderWidth: 2,
        borderColor: '#FFFFFF',
    },
    cameraIconContainer: {
        width: 13,
        height: 13,
        alignItems: 'center',
        justifyContent: 'center',
    },
    input: {
        backgroundColor: '#262A31',
        borderRadius: 12,
        paddingHorizontal: 16,
        marginVertical: 24,
        paddingVertical: 14,
        color: '#F5F5F5',
        fontWeight: '500',
        fontSize: 14,
        height: 48,
    },
    saveButtonContainer: {
        width: '100%',
        borderRadius: 12,
        overflow: 'hidden',
        height: 48,
    },
    saveButtonDisabled: {
        opacity: 0.6,
    },
    saveButton: {
        width: '100%',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 12,
        height: 48,
    },
    saveButtonText: {
        color: '#F5F5F5',
        fontSize: 16,
        fontWeight: '500',
    },
})