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

/**
 * 通用验证码输入组件
 */
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
            console.error('Send code error (caught in VerificationCodeInput):', error);
        }
    };

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