import DeleteSvg from '@/assets/icons/svg/delete.svg';
import LogoutSvg from '@/assets/icons/svg/logout.svg';
import RightArrowSvg from '@/assets/icons/svg/rightArrow.svg';
import { useAuth } from '@/contexts/auth-context';
import { fetchApi } from '@/lib/server-api-util';
import { Address, User } from '@/types/user';
import * as Location from 'expo-location';
import { useRouter } from 'expo-router';
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Linking, Modal, Pressable, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { ThemedText } from '../ThemedText';
import DeleteModal from './delete';
import LcensesModal from './qualification/lcenses';
import PrivacyModal from './qualification/privacy';
import CustomSwitch from './switch';
import UserInfo from './userInfo';
import { checkNotificationPermission, getLocationPermission, getPermissions, requestLocationPermission, requestMediaLibraryPermission, requestNotificationPermission, reverseGeocode } from './utils';

const SettingModal = (props: { modalVisible: boolean, setModalVisible: (visible: boolean) => void, userInfo: User }) => {
    const { modalVisible, setModalVisible, userInfo } = props;

    const { t } = useTranslation();
    const [modalType, setModalType] = useState<'ai' | 'terms' | 'privacy' | 'user'>('ai');
    // 协议弹窗
    const [privacyModalVisible, setPrivacyModalVisible] = useState(false);
    // 许可证弹窗
    const [lcensesModalVisible, setLcensesModalVisible] = useState(false);

    // 删除弹窗
    const [deleteModalVisible, setDeleteModalVisible] = useState(false);
    const { logout } = useAuth();
    const router = useRouter();
    // 打开设置
    const openAppSettings = () => {
        Linking.openSettings();
    };
    // 通知消息权限开关
    const [notificationsEnabled, setNotificationsEnabled] = useState(false);
    const toggleNotifications = async () => {
        if (notificationsEnabled) {
            // 引导去设置关闭权限
            openAppSettings()
        } else {
            requestNotificationPermission()
                .then((granted) => {
                    setNotificationsEnabled(granted);
                });
            setModalVisible(false);
        }
    };

    // 相册权限
    const [albumEnabled, setAlbumEnabled] = useState(false);
    const toggleAlbum = async () => {
        if (albumEnabled) {
            // 引导去设置关闭权限
            openAppSettings()
        } else {
            requestMediaLibraryPermission()
                .then((granted) => {
                    setAlbumEnabled(granted);
                });
            setModalVisible(false);
        }
    }

    // 位置权限
    const [locationEnabled, setLocationEnabled] = useState(false);
    // 位置权限更改
    const toggleLocation = async () => {
        if (locationEnabled) {
            // 如果权限已开启，点击则引导用户去设置关闭
            openAppSettings();
        } else {
            requestLocationPermission()
                .then((granted) => {
                    setLocationEnabled(granted);
                });
            setModalVisible(false);
        }
    };
    // 正在获取位置信息
    const [isLoading, setIsLoading] = useState(false);
    // 动画开启
    const [isRefreshing, setIsRefreshing] = useState(false);

    // 当前位置状态
    const [currentLocation, setCurrentLocation] = useState<Address>({} as Address);

    // 获取当前位置
    const getCurrentLocation = async () => {
        setIsLoading(true);
        setIsRefreshing(true);

        try {
            // 1. 首先检查当前权限状态 -- 获取当前的位置权限
            let currentStatus = await getLocationPermission();
            console.log('当前权限状态:', currentStatus);

            // 2. 如果没有权限，则跳过获取位置
            if (!currentStatus) {
                console.log('没有权限，跳过获取位置')
                return;
                // const newStatus = await requestLocationPermission();
                // setLocationEnabled(newStatus);
                // currentStatus = newStatus;

                // if (!currentStatus) {
                //     // alert('需要位置权限才能继续');
                //     return;
                // }
            }

            // 3. 确保位置服务已启用
            const isEnabled = await Location.hasServicesEnabledAsync();
            if (!isEnabled) {
                alert('请先启用位置服务');
                return;
            }
            console.log('位置服务已启用');
            // 4. 获取当前位置
            const location = await Location.getCurrentPositionAsync({
                accuracy: Location.Accuracy.High, // 使用高精度
                timeInterval: 10000, // 可选：最大等待时间（毫秒）
            });
            console.log('位置:', location);

            // 地理位置逆编码
            const address = await reverseGeocode(location.coords.latitude, location.coords.longitude);
            // 5. 更新位置状态
            if (address) {
                setCurrentLocation(address);
            }

            return location;
        } catch (error: any) {
            if (error.code === 'PERMISSION_DENIED' || error.code === 'PERMISSION_DENIED_ERROR') {
                alert('位置权限被拒绝，请在设置中启用位置服务');
            } else if (error.code === 'TIMEOUT') {
                alert('获取位置超时，请检查网络和位置服务');
            } else {
                alert(`无法获取您的位置: ${error.message || '未知错误'}`);
            }
            throw error; // 重新抛出错误以便上层处理
        } finally {
            setIsLoading(false);
            setIsRefreshing(false);
        }
    };

    // 退出登录
    const handleLogout = () => {
        fetchApi("/iam/logout", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
        })
            .then(async (res) => {
                await logout();
                setModalVisible(false);
                router.replace('/login');
            })
            .catch(() => {
                console.error("jwt has expired.");
            });
    };
    // 检查是否有权限
    useEffect(() => {
        if (modalVisible) {
            // 位置权限
            getLocationPermission().then((res) => {
                console.log('位置权限:', res);
                setLocationEnabled(res);
            })
            // 媒体库权限
            getPermissions().then((res) => {
                console.log('媒体库权限:', res);
                setAlbumEnabled(res);
            })
            // 通知权限
            checkNotificationPermission().then((res) => {
                console.log('通知权限:', res);
                setNotificationsEnabled(res);
            })
        }
    }, [modalVisible])

    return (
        <>
            <Modal
                animationType="slide"
                transparent={true}
                visible={modalVisible}
                onRequestClose={() => {
                    setModalVisible(false);
                }}>
                <Pressable
                    style={styles.centeredView}
                    onPress={() => setModalVisible(false)}>
                    <Pressable
                        style={styles.modalView}
                        onPress={(e) => e.stopPropagation()}>
                        <View style={styles.modalHeader}>
                            <Text style={{ opacity: 0 }}>Settings</Text>
                            <Text style={styles.modalTitle}>{t('generalSetting.allTitle', { ns: 'personal' })}</Text>
                            <TouchableOpacity onPress={() => setModalVisible(false)}>
                                <Text style={styles.closeButton}>×</Text>
                            </TouchableOpacity>
                        </View>
                        <ScrollView style={styles.modalContent} showsVerticalScrollIndicator={false}>
                            {/* 用户信息 */}
                            <UserInfo
                                userInfo={userInfo}
                                setModalVisible={setModalVisible}
                                modalVisible={modalVisible}
                                setCurrentLocation={setCurrentLocation}
                                getCurrentLocation={getCurrentLocation}
                                isLoading={isLoading}
                                isRefreshing={isRefreshing}
                                currentLocation={currentLocation}
                            />
                            {/* 升级版本 */}
                            {/* <View style={{ marginTop: 16 }}>
                            <ThemedText style={{ marginLeft: 16, marginVertical: 8, color: '#AC7E35', fontSize: 14, fontWeight: '600' }}>{t('generalSetting.subscription', { ns: 'personal' })}</ThemedText>
                            <View style={styles.premium}>
                                <View>
                                    <ThemedText style={styles.itemText}>{t('generalSetting.subscriptionTitle', { ns: 'personal' })}</ThemedText>
                                    <ThemedText style={{ color: '#AC7E35', fontSize: 12 }}>{t('generalSetting.subscriptionText', { ns: 'personal' })}</ThemedText>
                                </View>
                                <TouchableOpacity
                                    style={styles.upgradeButton}
                                    onPress={async () => {

                                    }}
                                >
                                    <Text style={styles.upgradeButtonText}>
                                        {t('generalSetting.upgrade', { ns: 'personal' })}
                                    </Text>
                                </TouchableOpacity>
                            </View>
                        </View> */}
                            {/* 消息通知 */}
                            {/* <View style={{ marginTop: 16 }}>
                            <ThemedText style={{ marginLeft: 16, marginVertical: 8, color: '#AC7E35', fontSize: 14, fontWeight: '600' }}>{t('permission.pushNotification', { ns: 'personal' })}</ThemedText>
                            <View style={styles.premium}>
                                <View>
                                    <ThemedText style={styles.itemText}>{t('permission.pushNotification', { ns: 'personal' })}</ThemedText>
                                </View>
                                <CustomSwitch
                                    isEnabled={notificationsEnabled}
                                    toggleSwitch={toggleNotifications}
                                />
                            </View>
                        </View> */}
                            {/* 权限信息 */}
                            <View style={{ marginTop: 16 }}>
                                <ThemedText style={{ marginLeft: 16, marginVertical: 8, color: '#AC7E35', fontSize: 14, fontWeight: '600' }}>{t('permission.permissionManagement', { ns: 'personal' })}</ThemedText>
                                <View style={styles.content}>
                                    {/* 相册权限 */}
                                    <View style={styles.item}>
                                        <ThemedText style={styles.itemText}>{t('permission.galleryAccess', { ns: 'personal' })}</ThemedText>
                                        <CustomSwitch
                                            isEnabled={albumEnabled}
                                            toggleSwitch={toggleAlbum}
                                        />
                                    </View>
                                    {/* 分割线 */}
                                    <Divider />
                                    {/* 位置权限 */}
                                    <View style={styles.item}>
                                        <View>
                                            <ThemedText style={styles.itemText}>{t('permission.locationPermission', { ns: 'personal' })}</ThemedText>
                                        </View>
                                        <CustomSwitch
                                            isEnabled={locationEnabled}
                                            toggleSwitch={toggleLocation}
                                        />
                                    </View>
                                    <Divider />
                                    <View style={styles.item}>
                                        <View>
                                            <ThemedText style={styles.itemText}>{t('permission.pushNotification', { ns: 'personal' })}</ThemedText>
                                        </View>
                                        <CustomSwitch
                                            isEnabled={notificationsEnabled}
                                            toggleSwitch={toggleNotifications}
                                        />
                                    </View>
                                    {/* 相册成片权限 */}
                                    {/* <View style={styles.item}>
                                    <View>
                                        <ThemedText style={styles.itemText}>Opus Permission</ThemedText>
                                    </View>
                                    <CustomSwitch
                                        isEnabled={albumEnabled}
                                        toggleSwitch={toggleAlbum}
                                    />
                                </View> */}
                                </View>
                            </View>
                            {/* 账号 */}
                            {/* <View style={{ marginTop: 16 }}>
                            <ThemedText style={{ marginLeft: 16, marginVertical: 8, color: '#AC7E35', fontSize: 14, fontWeight: '600' }}>Account</ThemedText>
                            <View style={styles.content}>
                                <View style={styles.item}>
                                    <View>
                                        <ThemedText style={styles.itemText}>Notifications</ThemedText>
                                    </View>
                                    <CustomSwitch
                                        isEnabled={notificationsEnabled}
                                        toggleSwitch={toggleNotifications}
                                    />
                                </View>
                                <Divider />
                                <View style={styles.item}>
                                    <ThemedText style={styles.itemText}>Delete Account</ThemedText>
                                    <DeleteSvg />
                                </View>
                            </View>
                        </View> */}
                            {/* 协议 */}
                            <View style={{ marginTop: 16 }}>
                                <ThemedText style={{ marginLeft: 16, marginVertical: 8, color: '#AC7E35', fontSize: 14, fontWeight: '600' }}>{t('lcenses.title', { ns: 'personal' })}</ThemedText>
                                <View style={styles.content}>
                                    <TouchableOpacity style={styles.item} onPress={() => { setModalType('privacy'); setPrivacyModalVisible(true) }} >
                                        <ThemedText style={styles.itemText}>{t('lcenses.privacyPolicy', { ns: 'personal' })}</ThemedText>
                                        <RightArrowSvg />
                                    </TouchableOpacity>
                                    <Divider />
                                    <TouchableOpacity style={styles.item} onPress={() => { setModalType('terms'); setPrivacyModalVisible(true) }} >
                                        <ThemedText style={styles.itemText}>{t('lcenses.applyPermission', { ns: 'personal' })}</ThemedText>
                                        <RightArrowSvg />
                                    </TouchableOpacity>
                                    <Divider />
                                    <TouchableOpacity style={styles.item} onPress={() => { setModalType('user'); setPrivacyModalVisible(true) }} >
                                        <ThemedText style={styles.itemText}>{t('lcenses.userAgreement', { ns: 'personal' })}</ThemedText>
                                        <RightArrowSvg />
                                    </TouchableOpacity>
                                    <Divider />
                                    <TouchableOpacity style={styles.item} onPress={() => { setModalType('ai'); setPrivacyModalVisible(true) }} >
                                        <ThemedText style={styles.itemText}>{t('lcenses.aiPolicy', { ns: 'personal' })}</ThemedText>
                                        <RightArrowSvg />
                                    </TouchableOpacity>
                                    <Divider />
                                    <TouchableOpacity style={styles.item} onPress={() => { setLcensesModalVisible(true) }} >
                                        <ThemedText style={styles.itemText}>{t('lcenses.qualification', { ns: 'personal' })}</ThemedText>
                                        <RightArrowSvg />
                                    </TouchableOpacity>
                                    <Divider />
                                    <TouchableOpacity style={styles.item} onPress={() => Linking.openURL("https://beian.miit.gov.cn/")} >
                                        <ThemedText style={styles.itemText}>{t('lcenses.ICP', { ns: 'personal' })}沪ICP备2023032876号-4</ThemedText>
                                        <RightArrowSvg />
                                    </TouchableOpacity>
                                </View>
                            </View>
                            {/* 其他信息 */}
                            <View style={{ marginTop: 16 }}>
                                <ThemedText style={{ marginLeft: 16, marginVertical: 8, color: '#AC7E35', fontSize: 14, fontWeight: '600' }}>{t('generalSetting.otherInformation', { ns: 'personal' })}</ThemedText>
                                <View style={styles.content}>
                                    <TouchableOpacity style={styles.item} onPress={() => Linking.openURL("https://work.weixin.qq.com/kfid/kfca0ac87f4e05e8bfd")} >
                                        <ThemedText style={styles.itemText}>{t('generalSetting.contactUs', { ns: 'personal' })}</ThemedText>
                                        {/* <RightArrowSvg /> */}
                                    </TouchableOpacity>
                                    <Divider />
                                    <View style={styles.item}>
                                        <ThemedText style={styles.itemText}>{t('generalSetting.version', { ns: 'personal' })}</ThemedText>
                                        <ThemedText style={styles.itemText}>{"0.5.0"}</ThemedText>
                                    </View>
                                </View>
                            </View>
                            {/* 退出 */}
                            <TouchableOpacity style={[styles.premium, { marginVertical: 8 }]} onPress={handleLogout}>
                                <ThemedText style={{ color: '#E2793F', fontSize: 14, fontWeight: '600' }}>{t('generalSetting.logout', { ns: 'personal' })}</ThemedText>
                                <LogoutSvg />
                            </TouchableOpacity>
                            {/* 注销账号 */}
                            <TouchableOpacity style={[styles.premium, { marginVertical: 8 }]} onPress={() => setDeleteModalVisible(true)}>
                                <ThemedText style={{ color: '#E2793F', fontSize: 14, fontWeight: '600' }}>{t('generalSetting.deleteAccount', { ns: 'personal' })}</ThemedText>
                                <DeleteSvg />
                            </TouchableOpacity>
                        </ScrollView>
                    </Pressable>
                </Pressable>

                <PrivacyModal modalVisible={privacyModalVisible} setModalVisible={setPrivacyModalVisible} type={modalType} />
                <LcensesModal modalVisible={lcensesModalVisible} setModalVisible={setLcensesModalVisible} />
                <DeleteModal modalVisible={deleteModalVisible} setModalVisible={setDeleteModalVisible} setSettingModalVisible={setModalVisible} />
            </Modal>
        </>
    );
};

const styles = StyleSheet.create({
    centeredView: {
        flex: 1,
        justifyContent: 'flex-end',
        backgroundColor: 'rgba(0,0,0,0.5)',
    },
    modalView: {
        width: '100%',
        height: '80%',
        backgroundColor: 'white',
        borderTopLeftRadius: 20,
        borderTopRightRadius: 20,
        paddingHorizontal: 16,
    },
    modalHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 20,
    },
    modalTitle: {
        fontSize: 20,
        fontWeight: 'bold',
        color: '#4C320C',
    },
    closeButton: {
        fontSize: 28,
        color: '#4C320C',
        padding: 10,
    },
    modalContent: {
        flex: 1,
    },
    modalText: {
        fontSize: 16,
        color: '#4C320C',
    },
    premium: {
        backgroundColor: "#FAF9F6",
        padding: 16,
        borderRadius: 24,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    content: {
        flex: 1,
        flexDirection: 'column',
        gap: 4,
        backgroundColor: '#FAF9F6',
        borderRadius: 24,
        paddingVertical: 8
    },
    item: {
        paddingHorizontal: 16,
        paddingVertical: 8,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    itemText: {
        fontSize: 14,
        fontWeight: '600',
        color: '#4C320C',
    },
    upgradeButton: {
        backgroundColor: '#E2793F',
        borderRadius: 20,
        paddingHorizontal: 16,
        paddingVertical: 8,
    },
    upgradeButtonText: {
        color: '#fff',
        fontSize: 14,
        fontWeight: "600"
    },
    switchContainer: {
        width: 50,
        height: 30,
        borderRadius: 15,
        justifyContent: 'center',
        paddingHorizontal: 2,
    },
    switchOn: {
        backgroundColor: '#E2793F',
        alignItems: 'flex-end',
    },
    switchOff: {
        backgroundColor: '#E5E5E5',
        alignItems: 'flex-start',
    },
    switchCircle: {
        width: 26,
        height: 26,
        borderRadius: 13,
    },
    switchCircleOn: {
        backgroundColor: 'white',
    },
    switchCircleOff: {
        backgroundColor: '#A5A5A5',
    },
});

const Divider = () => {
    return (
        <View className='w-full h-[1px] bg-[#B5977F]'></View>
    )
}
export default SettingModal;