// src/views/Settings/SettingsPage.js
import React, { useState } from 'react';
import {
    Box,
    Container,
    VStack,
    HStack,
    Text,
    Heading,
    Button,
    Input,
    FormControl,
    FormLabel,
    Card,
    CardBody,
    CardHeader,
    useToast,
    Modal,
    ModalOverlay,
    ModalContent,
    ModalHeader,
    ModalBody,
    ModalFooter,
    ModalCloseButton,
    useDisclosure,
    Badge,
    Tabs,
    TabList,
    TabPanels,
    Tab,
    TabPanel,
    PinInput,
    PinInputField
} from '@chakra-ui/react';
import {
    LinkIcon,
    DeleteIcon,
    EditIcon
} from '@chakra-ui/icons';
import { FaWeixin, FaMobile, FaEnvelope } from 'react-icons/fa';
import { useAuth } from '../../contexts/AuthContext';
import { getApiBase } from '../../utils/apiConfig';
import { logger } from '../../utils/logger';
import { useProfileEvents } from '../../hooks/useProfileEvents';

export default function SettingsPage() {
    const { user, updateUser } = useAuth();
    const toast = useToast();

    // 深色模式固定颜色（Settings 页面始终使用深色主题）
    const headingColor = 'white';
    const textColor = 'gray.100';
    const subTextColor = 'gray.400';
    const cardBg = 'gray.800';
    const borderColor = 'gray.600';

    // 🎯 初始化设置页面埋点Hook
    const profileEvents = useProfileEvents({ pageType: 'settings' });

    // 模态框状态
    const { isOpen: isPhoneOpen, onOpen: onPhoneOpen, onClose: onPhoneClose } = useDisclosure();
    const { isOpen: isEmailOpen, onOpen: onEmailOpen, onClose: onEmailClose } = useDisclosure();

    // 表单状态
    const [isLoading, setIsLoading] = useState(false);
    const [phoneForm, setPhoneForm] = useState({
        phone: '',
        verificationCode: ''
    });
    const [emailForm, setEmailForm] = useState({
        email: '',
        verificationCode: ''
    });

    // 发送验证码
    const sendVerificationCode = async (type) => {
        setIsLoading(true);
        try {
            if (type === 'phone') {
                const url = '/api/account/phone/send-code';
                logger.api.request('POST', url, { phone: phoneForm.phone.substring(0, 3) + '****' });

                const res = await fetch(getApiBase() + url, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    credentials: 'include',
                    body: JSON.stringify({ phone: phoneForm.phone })
                });
                const data = await res.json();
                logger.api.response('POST', url, res.status, data);

                if (!res.ok) throw new Error(data.error || '发送失败');
            } else {
                const url = '/api/account/email/send-bind-code';
                logger.api.request('POST', url, { email: emailForm.email.substring(0, 3) + '***@***' });

                // 使用绑定邮箱的验证码API
                const res = await fetch(getApiBase() + url, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    credentials: 'include',
                    body: JSON.stringify({ email: emailForm.email })
                });
                const data = await res.json();
                logger.api.response('POST', url, res.status, data);

                if (!res.ok) throw new Error(data.error || '发送失败');
            }

            // ❌ 移除验证码发送成功toast
            logger.info('SettingsPage', `${type === 'phone' ? '短信' : '邮件'}验证码已发送`);
        } catch (error) {
            logger.error('SettingsPage', 'sendVerificationCode', error, { type });

            toast({
                title: "发送失败",
                description: error.message,
                status: "error",
                duration: 3000,
                isClosable: true,
            });
        } finally {
            setIsLoading(false);
        }
    };

    // 绑定手机号
    const handlePhoneBind = async () => {
        setIsLoading(true);
        try {
            const res = await fetch(getApiBase() + '/api/account/phone/bind', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                credentials: 'include',
                body: JSON.stringify({ phone: phoneForm.phone, code: phoneForm.verificationCode })
            });
            const data = await res.json();
            if (!res.ok) throw new Error(data.error || '绑定失败');

            updateUser({
                phone: phoneForm.phone,
                phone_confirmed: true
            });

            toast({
                title: "手机号绑定成功",
                status: "success",
                duration: 3000,
                isClosable: true,
            });

            setPhoneForm({ phone: '', verificationCode: '' });
            onPhoneClose();
        } catch (error) {
            toast({
                title: "绑定失败",
                description: error.message,
                status: "error",
                duration: 3000,
                isClosable: true,
            });
        } finally {
            setIsLoading(false);
        }
    };

    // 更换邮箱
    const handleEmailBind = async () => {
        setIsLoading(true);
        try {
            // 调用真实的邮箱绑定API
            const res = await fetch(getApiBase() + '/api/account/email/bind', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                credentials: 'include',
                body: JSON.stringify({
                    email: emailForm.email,
                    code: emailForm.verificationCode
                })
            });

            const data = await res.json();
            if (!res.ok) {
                throw new Error(data.error || '绑定失败');
            }

            // 更新用户信息
            updateUser({
                email: data.user.email,
                email_confirmed: data.user.email_confirmed
            });

            // 🎯 追踪邮箱绑定成功
            profileEvents.trackAccountBound('email', true);

            toast({
                title: "邮箱绑定成功",
                status: "success",
                duration: 3000,
                isClosable: true,
            });

            setEmailForm({ email: '', verificationCode: '' });
            onEmailClose();
        } catch (error) {
            // 🎯 追踪邮箱绑定失败
            profileEvents.trackAccountBound('email', false);

            toast({
                title: "绑定失败",
                description: error.message,
                status: "error",
                duration: 3000,
                isClosable: true,
            });
        } finally {
            setIsLoading(false);
        }
    };

    return (
        <Container maxW="container.xl" py={8}>
            <VStack spacing={8} align="stretch">
                {/* 页面标题 */}
                <Heading size="lg" color={headingColor}>账户设置</Heading>

                <Tabs variant="enclosed" colorScheme="blue">
                    <TabList>
                        <Tab color={textColor} _selected={{ color: 'blue.500', borderColor: 'blue.500' }}>账户绑定</Tab>
                    </TabList>

                    <TabPanels>
                        {/* 账户绑定 */}
                        <TabPanel>
                            <VStack spacing={6} align="stretch">
                                {/* 手机号绑定 */}
                                <Card bg={cardBg} borderColor={borderColor}>
                                    <CardHeader>
                                        <Heading size="md" color={headingColor}>手机号绑定</Heading>
                                    </CardHeader>
                                    <CardBody>
                                        <HStack justify="space-between">
                                            <VStack align="start" spacing={1}>
                                                <HStack>
                                                    <FaMobile />
                                                    <Text fontWeight="medium" color={textColor}>
                                                        {user?.phone || '未绑定手机号'}
                                                    </Text>
                                                    {user?.phone_confirmed && (
                                                        <Badge colorScheme="green" size="sm">已验证</Badge>
                                                    )}
                                                </HStack>
                                                <Text fontSize="sm" color={subTextColor}>
                                                    绑定手机号可用于登录和接收重要通知
                                                </Text>
                                            </VStack>
                                            {user?.phone ? (
                                                <Button
                                                    leftIcon={<DeleteIcon />}
                                                    colorScheme="red"
                                                    variant="outline"
                                                    onClick={async () => {
                                                        setIsLoading(true);
                                                        try {
                                                            const res = await fetch(getApiBase() + '/api/account/phone/unbind', {
                                                                method: 'POST',
                                                                credentials: 'include'
                                                            });
                                                            const data = await res.json();
                                                            if (!res.ok) throw new Error(data.error || '解绑失败');
                                                            updateUser({ phone: null, phone_confirmed: false });
                                                            toast({ title: '手机号解绑成功', status: 'success', duration: 3000, isClosable: true });
                                                        } catch (e) {
                                                            toast({ title: '解绑失败', description: e.message, status: 'error', duration: 3000, isClosable: true });
                                                        } finally {
                                                            setIsLoading(false);
                                                        }
                                                    }}
                                                    isLoading={isLoading}
                                                >
                                                    解绑
                                                </Button>
                                            ) : (
                                                <Button leftIcon={<LinkIcon />} onClick={onPhoneOpen}>
                                                    绑定手机号
                                                </Button>
                                            )}
                                        </HStack>
                                    </CardBody>
                                </Card>

                                {/* 邮箱绑定 */}
                                <Card bg={cardBg} borderColor={borderColor}>
                                    <CardHeader>
                                        <Heading size="md" color={headingColor}>邮箱设置</Heading>
                                    </CardHeader>
                                    <CardBody>
                                        <HStack justify="space-between">
                                            <VStack align="start" spacing={1}>
                                                <HStack>
                                                    <FaEnvelope />
                                                    <Text fontWeight="medium" color={textColor}>{user?.email}</Text>
                                                    {user?.email_confirmed && (
                                                        <Badge colorScheme="green" size="sm">已验证</Badge>
                                                    )}
                                                </HStack>
                                                <Text fontSize="sm" color={subTextColor}>
                                                    邮箱用于登录和接收重要通知
                                                </Text>
                                            </VStack>
                                            <Button leftIcon={<EditIcon />} onClick={onEmailOpen}>
                                                更换邮箱
                                            </Button>
                                        </HStack>
                                    </CardBody>
                                </Card>

                                {/* 微信绑定 */}
                                <Card bg={cardBg} borderColor={borderColor}>
                                    <CardHeader>
                                        <Heading size="md" color={headingColor}>微信绑定</Heading>
                                    </CardHeader>
                                    <CardBody>
                                        <HStack justify="space-between">
                                            <VStack align="start" spacing={1}>
                                                <HStack>
                                                    <FaWeixin color="#1aad19" />
                                                    <Text fontWeight="medium" color={textColor}>
                                                        {user?.has_wechat ? '已绑定微信' : '未绑定微信'}
                                                    </Text>
                                                    {user?.has_wechat && (
                                                        <Badge colorScheme="green" size="sm">已绑定</Badge>
                                                    )}
                                                </HStack>
                                                <Text fontSize="sm" color={subTextColor}>
                                                    绑定微信可使用微信一键登录
                                                </Text>
                                            </VStack>
                                            {user?.has_wechat ? (
                                                <Button
                                                    leftIcon={<DeleteIcon />}
                                                    colorScheme="red"
                                                    variant="outline"
                                                    onClick={async () => {
                                                        setIsLoading(true);
                                                        try {
                                                            const res = await fetch(getApiBase() + '/api/account/wechat/unbind', {
                                                                method: 'POST',
                                                                credentials: 'include'
                                                            });
                                                            const data = await res.json();
                                                            if (!res.ok) throw new Error(data.error || '解绑失败');
                                                            updateUser({ has_wechat: false });
                                                            toast({ title: '解绑成功', status: 'success', duration: 3000, isClosable: true });
                                                        } catch (e) {
                                                            toast({ title: '解绑失败', description: e.message, status: 'error', duration: 3000, isClosable: true });
                                                        } finally {
                                                            setIsLoading(false);
                                                        }
                                                    }}
                                                >
                                                    解绑微信
                                                </Button>
                                            ) : (
                                                <Button leftIcon={<LinkIcon />} colorScheme="green" onClick={async () => {
                                                    setIsLoading(true);
                                                    try {
                                                        const base = getApiBase();
                                                        const res = await fetch(base + '/api/account/wechat/qrcode', { method: 'GET', credentials: 'include' });
                                                        const data = await res.json();
                                                        if (!res.ok) throw new Error(data.error || '获取二维码失败');
                                                        // 打开新的窗口进行扫码
                                                        window.open(data.auth_url, '_blank');
                                                        // 轮询绑定状态
                                                        const sessionId = data.session_id;
                                                        const start = Date.now();
                                                        const poll = async () => {
                                                            if (Date.now() - start > 300000) return; // 5分钟
                                                            const r = await fetch(base + '/api/account/wechat/check', {
                                                                method: 'POST',
                                                                headers: { 'Content-Type': 'application/json' },
                                                                credentials: 'include',
                                                                body: JSON.stringify({ session_id: sessionId })
                                                            });
                                                            const j = await r.json();
                                                            if (j.status === 'bind_ready') {
                                                                updateUser({ has_wechat: true });
                                                                toast({ title: '微信绑定成功', status: 'success', duration: 3000, isClosable: true });
                                                            } else if (j.status === 'bind_conflict' || j.status === 'bind_failed' || j.status === 'expired') {
                                                                toast({ title: '绑定未完成', description: j.status, status: 'error', duration: 3000, isClosable: true });
                                                            } else {
                                                                setTimeout(poll, 2000);
                                                            }
                                                        };
                                                        setTimeout(poll, 1500);
                                                    } catch (e) {
                                                        toast({ title: '获取二维码失败', description: e.message, status: 'error', duration: 3000, isClosable: true });
                                                    } finally {
                                                        setIsLoading(false);
                                                    }
                                                }}>
                                                    绑定微信
                                                </Button>
                                            )}
                                        </HStack>
                                    </CardBody>
                                </Card>

                            </VStack>
                        </TabPanel>
                    </TabPanels>
                </Tabs>
            </VStack>

            {/* 绑定手机号模态框 */}
            <Modal isOpen={isPhoneOpen} onClose={onPhoneClose}>
                <ModalOverlay />
                <ModalContent>
                    <ModalHeader>绑定手机号</ModalHeader>
                    <ModalCloseButton />
                    <ModalBody>
                        <VStack spacing={4}>
                            <FormControl>
                                <FormLabel>手机号</FormLabel>
                                <Input
                                    value={phoneForm.phone}
                                    onChange={(e) => setPhoneForm(prev => ({
                                        ...prev,
                                        phone: e.target.value
                                    }))}
                                    placeholder="请输入11位手机号"
                                />
                            </FormControl>

                            <FormControl>
                                <FormLabel>验证码</FormLabel>
                                <HStack>
                                    <HStack spacing={2} flex="1">
                                        <PinInput
                                            value={phoneForm.verificationCode}
                                            onChange={(value) => setPhoneForm(prev => ({
                                                ...prev,
                                                verificationCode: value
                                            }))}
                                        >
                                            <PinInputField />
                                            <PinInputField />
                                            <PinInputField />
                                            <PinInputField />
                                            <PinInputField />
                                            <PinInputField />
                                        </PinInput>
                                    </HStack>
                                    <Button
                                        size="sm"
                                        onClick={() => sendVerificationCode('phone')}
                                        isLoading={isLoading}
                                    >
                                        发送验证码
                                    </Button>
                                </HStack>
                            </FormControl>
                        </VStack>
                    </ModalBody>
                    <ModalFooter>
                        <Button variant="ghost" mr={3} onClick={onPhoneClose}>
                            取消
                        </Button>
                        <Button
                            colorScheme="blue"
                            onClick={handlePhoneBind}
                            isLoading={isLoading}
                        >
                            确认绑定
                        </Button>
                    </ModalFooter>
                </ModalContent>
            </Modal>

            {/* 更换邮箱模态框 */}
            <Modal isOpen={isEmailOpen} onClose={onEmailClose}>
                <ModalOverlay />
                <ModalContent>
                    <ModalHeader>更换邮箱</ModalHeader>
                    <ModalCloseButton />
                    <ModalBody>
                        <VStack spacing={4}>
                            <FormControl>
                                <FormLabel>新邮箱</FormLabel>
                                <Input
                                    type="email"
                                    value={emailForm.email}
                                    onChange={(e) => setEmailForm(prev => ({
                                        ...prev,
                                        email: e.target.value
                                    }))}
                                    placeholder="请输入新邮箱地址"
                                />
                            </FormControl>

                            <FormControl>
                                <FormLabel>验证码</FormLabel>
                                <HStack>
                                    <HStack spacing={2} flex="1">
                                        <PinInput
                                            value={emailForm.verificationCode}
                                            onChange={(value) => setEmailForm(prev => ({
                                                ...prev,
                                                verificationCode: value
                                            }))}
                                        >
                                            <PinInputField />
                                            <PinInputField />
                                            <PinInputField />
                                            <PinInputField />
                                            <PinInputField />
                                            <PinInputField />
                                        </PinInput>
                                    </HStack>
                                    <Button
                                        size="sm"
                                        onClick={() => sendVerificationCode('email')}
                                        isLoading={isLoading}
                                    >
                                        发送验证码
                                    </Button>
                                </HStack>
                            </FormControl>
                        </VStack>
                    </ModalBody>
                    <ModalFooter>
                        <Button variant="ghost" mr={3} onClick={onEmailClose}>
                            取消
                        </Button>
                        <Button
                            colorScheme="blue"
                            onClick={handleEmailBind}
                            isLoading={isLoading}
                        >
                            确认更换
                        </Button>
                    </ModalFooter>
                </ModalContent>
            </Modal>

        </Container>
    );
}