import React from "react";
import { FormControl, FormErrorMessage, HStack, Input, Button, Spinner } from "@chakra-ui/react";
import { logger } from "../../utils/logger";

/**
 * 通用验证码输入组件
 */
export default function VerificationCodeInput({
    value,
    onChange,
    onSendCode,
    countdown,
    isLoading,
    isSending,
    error,
    placeholder = "请输入6位验证码",
    buttonText = "获取验证码",
    countdownText = (count) => `${count}s`,
    colorScheme = "green",
    isRequired = true
}) {
    // 包装 onSendCode，确保所有错误都被捕获，防止被 ErrorBoundary 捕获
    const handleSendCode = async () => {
        try {
            if (onSendCode) {
                await onSendCode();
            }
        } catch (error) {
            // 错误已经在父组件处理，这里只需要防止未捕获的 Promise rejection
            logger.error('VerificationCodeInput', 'handleSendCode', error, {
                hasOnSendCode: !!onSendCode,
                countdown,
                isLoading,
                isSending
            });
        }
    };

    // 计算按钮显示的文本（避免在 JSX 中使用条件渲染）
    const getButtonText = () => {
        if (isSending) {
            return "发送中";
        }
        if (countdown > 0) {
            return countdownText(countdown);
        }
        return buttonText;
    };

    return (
        <FormControl isRequired={isRequired} isInvalid={!!error}>
            <HStack>
                <Input
                    name="verificationCode"
                    value={value}
                    onChange={onChange}
                    placeholder={placeholder}
                    maxLength={6}
                />
                <Button
                    type="button"
                    colorScheme={colorScheme}
                    onClick={handleSendCode}
                    isDisabled={countdown > 0 || isLoading || isSending}
                    minW="120px"
                    leftIcon={isSending ? <Spinner size="sm" /> : undefined}
                >
                    {getButtonText()}
                </Button>
            </HStack>
            <FormErrorMessage>{error}</FormErrorMessage>
        </FormControl>
    );
}