// src/components/Auth/AuthFormContent.js
// 统一的认证表单组件
import React, { useState, useEffect, useRef } from "react";
import { useNavigate } from "react-router-dom";
import {
    Box,
    Button,
    FormControl,
    Input,
    Heading,
    VStack,
    HStack,
    Stack,
    useToast,
    Icon,
    FormErrorMessage,
    Center,
    AlertDialog,
    AlertDialogBody,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogContent,
    AlertDialogOverlay,
    Text,
    Link as ChakraLink,
    useBreakpointValue,
    Divider,
    IconButton,
} from "@chakra-ui/react";
import { FaLock, FaWeixin } from "react-icons/fa";
import { useAuth } from "../../contexts/AuthContext";
import { useAuthModal } from "../../contexts/AuthModalContext";
import { authService } from "../../services/authService";
import AuthHeader from './AuthHeader';
import VerificationCodeInput from './VerificationCodeInput';
import WechatRegister from './WechatRegister';
import { setCurrentUser } from '../../mocks/data/users';
import { logger } from '../../utils/logger';

// 统一配置对象
const AUTH_CONFIG = {
    // UI文本
    title: "价值前沿",
    subtitle: "开启您的投资之旅",
    formTitle: "登陆/注册",
    buttonText: "登录/注册",
    loadingText: "验证中...",
    successTitle: "验证成功",
    successDescription: "欢迎！",
    errorTitle: "验证失败",

    // API配置
    api: {
        endpoint: '/api/auth/register/phone',
        purpose: 'login', // ⚡ 统一使用 'login' 模式
    },

    // 功能开关
    features: {
        successDelay: 1000,  // 延迟1秒显示成功提示
    }
};

export default function AuthFormContent() {
    const toast = useToast();
    const navigate = useNavigate();
    const { checkSession } = useAuth();
    const { handleLoginSuccess } = useAuthModal();

    // 使用统一配置
    const config = AUTH_CONFIG;

    // 追踪组件挂载状态，防止内存泄漏
    const isMountedRef = useRef(true);
    const cancelRef = useRef(); // AlertDialog 需要的 ref

    // 页面状态
    const [isLoading, setIsLoading] = useState(false);
    const [errors, setErrors] = useState({});

    // 昵称设置引导对话框
    const [showNicknamePrompt, setShowNicknamePrompt] = useState(false);
    const [currentPhone, setCurrentPhone] = useState("");

    // 响应式布局配置
    const isMobile = useBreakpointValue({ base: true, md: false });
    const stackDirection = useBreakpointValue({ base: "column", md: "row" });
    const stackSpacing = useBreakpointValue({ base: 4, md: 8 });

    // 表单数据
    const [formData, setFormData] = useState({
        phone: "",
        verificationCode: "",
    });

    // 验证码状态
    const [verificationCodeSent, setVerificationCodeSent] = useState(false);
    const [sendingCode, setSendingCode] = useState(false);
    const [countdown, setCountdown] = useState(0);

    // 输入框变化处理
    const handleInputChange = (e) => {
        const { name, value } = e.target;
        setFormData(prev => ({
            ...prev,
            [name]: value
        }));
    };

    // 倒计时逻辑
    useEffect(() => {
        let timer;
        let isMounted = true;

        if (countdown > 0) {
            timer = setInterval(() => {
                if (isMounted) {
                    setCountdown(prev => prev - 1);
                }
            }, 1000);
        } else if (countdown === 0 && isMounted) {
            setVerificationCodeSent(false);
        }

        return () => {
            isMounted = false;
            if (timer) clearInterval(timer);
        };
    }, [countdown]);

    // 发送验证码
    const sendVerificationCode = async () => {
        const credential = formData.phone;

        if (!credential) {
            toast({
                title: "请先输入手机号",
                status: "warning",
                duration: 3000,
            });
            return;
        }

        if (!/^1[3-9]\d{9}$/.test(credential)) {
            toast({
                title: "请输入有效的手机号",
                status: "warning",
                duration: 3000,
            });
            return;
        }

        try {
            setSendingCode(true);

            const requestData = {
                credential: credential.trim(),  // 添加 trim() 防止空格
                type: 'phone',
                purpose: config.api.purpose
            };

            logger.api.request('POST', '/api/auth/send-verification-code', requestData);

            const response = await fetch('/api/auth/send-verification-code', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                credentials: 'include',
                body: JSON.stringify(requestData),
            });

            if (!response) {
                throw new Error('网络请求失败，请检查网络连接');
            }

            const data = await response.json();

            logger.api.response('POST', '/api/auth/send-verification-code', response.status, data);

            if (!isMountedRef.current) return;

            if (!data) {
                throw new Error('服务器响应为空');
            }

            if (response.ok && data.success) {
                // ❌ 移除成功 toast，静默处理
                logger.info('AuthFormContent', '验证码发送成功', {
                    credential: credential.substring(0, 3) + '****' + credential.substring(7),
                    dev_code: data.dev_code
                });

                // ✅ 开发环境下在控制台显示验证码
                if (data.dev_code) {
                    console.log(`%c✅ [验证码] ${credential} -> ${data.dev_code}`, 'color: #16a34a; font-weight: bold; font-size: 14px;');
                }

                setVerificationCodeSent(true);
                setCountdown(60);
            } else {
                throw new Error(data.error || '发送验证码失败');
            }
        } catch (error) {
            // ❌ 移除错误 toast，仅 console 输出
            logger.api.error('POST', '/api/auth/send-verification-code', error, {
                credential: credential.substring(0, 3) + '****' + credential.substring(7)
            });
        } finally {
            if (isMountedRef.current) {
                setSendingCode(false);
            }
        }
    };

    // 提交处理（登录或注册）
    const handleSubmit = async (e) => {
        e.preventDefault();
        setIsLoading(true);

        try {
            const { phone, verificationCode, nickname } = formData;

            // 表单验证
            if (!phone || !verificationCode) {
                toast({
                    title: "请填写完整信息",
                    description: "手机号和验证码不能为空",
                    status: "warning",
                    duration: 3000,
                });
                return;
            }

            if (!/^1[3-9]\d{9}$/.test(phone)) {
                toast({
                    title: "请输入有效的手机号",
                    status: "warning",
                    duration: 3000,
                });
                return;
            }

            // 构建请求体
            const requestBody = {
                credential: phone.trim(),  // 添加 trim() 防止空格
                verification_code: verificationCode.trim(),  // 添加 trim() 防止空格
                login_type: 'phone',
            };

            logger.api.request('POST', '/api/auth/login-with-code', {
                credential: phone.substring(0, 3) + '****' + phone.substring(7),
                verification_code: verificationCode.substring(0, 2) + '****',
                login_type: 'phone'
            });

            // 调用API（根据模式选择不同的endpoint
            const response = await fetch('/api/auth/login-with-code', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                credentials: 'include',
                body: JSON.stringify(requestBody),
            });

            if (!response) {
                throw new Error('网络请求失败，请检查网络连接');
            }

            const data = await response.json();

            logger.api.response('POST', '/api/auth/login-with-code', response.status, {
                ...data,
                user: data.user ? { id: data.user.id, phone: data.user.phone } : null
            });

            if (!isMountedRef.current) return;

            if (!data) {
                throw new Error('服务器响应为空');
            }

            if (response.ok && data.success) {
                // ⚡ Mock 模式：先在前端侧写入 localStorage，确保时序正确
                if (process.env.REACT_APP_ENABLE_MOCK === 'true' && data.user) {
                    setCurrentUser(data.user);
                    logger.debug('AuthFormContent', '前端侧设置当前用户(Mock模式)', {
                        userId: data.user?.id,
                        phone: data.user?.phone,
                        mockMode: true
                    });
                }

                // 更新session
                await checkSession();

                // ✅ 保留登录成功 toast（关键操作提示）
                toast({
                    title: data.isNewUser ? '注册成功' : '登录成功',
                    description: config.successDescription,
                    status: "success",
                    duration: 2000,
                });

                logger.info('AuthFormContent', '登录成功', {
                    isNewUser: data.isNewUser,
                    userId: data.user?.id
                });

                // 检查是否为新注册用户
                if (data.isNewUser) {
                    // 新注册用户，延迟后显示昵称设置引导
                    setTimeout(() => {
                        setCurrentPhone(phone);
                        setShowNicknamePrompt(true);
                    }, config.features.successDelay);
                } else {
                    // 已有用户，直接登录成功
                    setTimeout(() => {
                        handleLoginSuccess({ phone });
                    }, config.features.successDelay);
                }
            } else {
                throw new Error(data.error || `${config.errorTitle}`);
            }
        } catch (error) {
            // ❌ 移除错误 toast，仅 console 输出
            const { phone, verificationCode } = formData;
            logger.error('AuthFormContent', 'handleSubmit', error, {
                phone: phone ? phone.substring(0, 3) + '****' + phone.substring(7) : 'N/A',
                hasVerificationCode: !!verificationCode
            });
        } finally {
            if (isMountedRef.current) {
                setIsLoading(false);
            }
        }
    };

    // 微信H5登录处理
    const handleWechatH5Login = async () => {
        try {
            // 1. 构建回调URL
            const redirectUrl = `${window.location.origin}/home/wechat-callback`;

            // 2. 显示提示
            toast({
                title: "即将跳转",
                description: "正在跳转到微信授权页面...",
                status: "info",
                duration: 2000,
                isClosable: true,
            });

            // 3. 获取微信H5授权URL
            const response = await authService.getWechatH5AuthUrl(redirectUrl);

            if (!response || !response.auth_url) {
                throw new Error('获取授权链接失败');
            }

            // 4. 延迟跳转，让用户看到提示
            setTimeout(() => {
                window.location.href = response.auth_url;
            }, 500);
        } catch (error) {
            logger.error('AuthFormContent', 'handleWechatH5Login', error);
            toast({
                title: "跳转失败",
                description: error.message || "请稍后重试",
                status: "error",
                duration: 3000,
                isClosable: true,
            });
        }
    };

    // 组件卸载时清理
    useEffect(() => {
        isMountedRef.current = true;

        return () => {
            isMountedRef.current = false;
        };
    }, []);

    return (
        <>
            <Box width="100%">
                <AuthHeader title={config.title} subtitle={config.subtitle} />
                <Stack direction={stackDirection} spacing={stackSpacing} align="stretch">
                    <Box flex={{ base: "1", md: "4" }}>
                        <form onSubmit={handleSubmit}>
                            <VStack spacing={4}>
                                <Heading size="md" color="gray.700" alignSelf="flex-start">{config.formTitle}</Heading>
                                <FormControl isRequired isInvalid={!!errors.phone}>
                                    <Input name="phone" value={formData.phone} onChange={handleInputChange} placeholder="请输入11位手机号" />
                                    <FormErrorMessage>{errors.phone}</FormErrorMessage>
                                </FormControl>

                                {/* 验证码输入框 + 移动端微信图标 */}
                                <Box width="100%" position="relative">
                                    <VerificationCodeInput value={formData.verificationCode} onChange={handleInputChange} onSendCode={sendVerificationCode} countdown={countdown} isLoading={isLoading} isSending={sendingCode} error={errors.verificationCode} colorScheme="green" />

                                    {/* 移动端：验证码下方的微信登录图标 */}
                                    {isMobile && (
                                        <HStack spacing={0} mt={2} alignItems="center">
                                            <Text fontSize="xs" color="gray.500">其他登录方式：</Text>
                                            <IconButton
                                                aria-label="微信登录"
                                                icon={<Icon as={FaWeixin} w={4} h={4} />}
                                                size="sm"
                                                variant="ghost"
                                                color="#07C160"
                                                borderRadius="md"
                                                minW="24px"
                                                minH="24px"
                                                _hover={{
                                                    bg: "green.50",
                                                    color: "#06AD56"
                                                }}
                                                _active={{
                                                    bg: "green.100"
                                                }}
                                                onClick={handleWechatH5Login}
                                                isDisabled={isLoading}
                                            />
                                        </HStack>
                                    )}
                                </Box>

                                <Button type="submit" width="100%" size="lg" colorScheme="green" color="white" borderRadius="lg" isLoading={isLoading} loadingText={config.loadingText} fontWeight="bold"><Icon as={FaLock} mr={2} />{config.buttonText}</Button>

                                {/* 隐私声明 */}
                                <Text fontSize="xs" color="gray.500" textAlign="center" mt={2}>
                                    登录即表示您同意价值前沿{" "}
                                    <ChakraLink
                                        as="a"
                                        href="/home/user-agreement"
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        color="blue.500"
                                        textDecoration="underline"
                                        _hover={{ color: "blue.600" }}
                                    >
                                        《用户协议》
                                    </ChakraLink>
                                    {" "}和{" "}
                                    <ChakraLink
                                        as="a"
                                        href="/home/privacy-policy"
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        color="blue.500"
                                        textDecoration="underline"
                                        _hover={{ color: "blue.600" }}
                                    >
                                        《隐私政策》
                                    </ChakraLink>
                                </Text>
                            </VStack>
                        </form>
                    </Box>

                    {/* 桌面端：右侧二维码扫描 */}
                    {!isMobile && (
                        <Box flex="1">
                            <Center width="100%" bg="gray.50" borderRadius="lg" p={8}>
                                <WechatRegister />
                            </Center>
                        </Box>
                    )}
                </Stack>
            </Box>

            {/* 只在需要时才渲染 AlertDialog，避免创建不必要的 Portal */}
            {showNicknamePrompt && (
                <AlertDialog isOpen={showNicknamePrompt} leastDestructiveRef={cancelRef} onClose={() => { setShowNicknamePrompt(false); handleLoginSuccess({ phone: currentPhone }); }} isCentered closeOnEsc={true} closeOnOverlayClick={false}>
                    <AlertDialogOverlay>
                        <AlertDialogContent>
                            <AlertDialogHeader fontSize="lg" fontWeight="bold">完善个人信息</AlertDialogHeader>
                            <AlertDialogBody>您已成功注册！是否前往个人资料设置昵称和其他信息？</AlertDialogBody>
                            <AlertDialogFooter>
                                <Button ref={cancelRef} onClick={() => { setShowNicknamePrompt(false); handleLoginSuccess({ phone: currentPhone }); }}>稍后再说</Button>
                                <Button colorScheme="green" onClick={() => { setShowNicknamePrompt(false); handleLoginSuccess({ phone: currentPhone }); setTimeout(() => { navigate('/home/profile'); }, 300); }} ml={3}>去设置</Button>
                            </AlertDialogFooter>
                        </AlertDialogContent>
                    </AlertDialogOverlay>
                </AlertDialog>
            )}
        </>
    );
}