const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _pisell_utils = require("@pisell/utils");
let _pisell_materials = require("@pisell/materials");
let _pisell_materials_src_components_iconfont = require("@pisell/materials/src/components/iconfont");
_pisell_materials_src_components_iconfont = require_runtime.__toESM(_pisell_materials_src_components_iconfont);
//#region src/pro/Login2.0/steps/CodeInput.tsx
/**
* 验证码输入页面（对应图3）
* 支持邮箱和手机号两种账号类型
*/
function formatDisplayAccount(account) {
	if (!account) return "";
	if (typeof account === "string") return account;
	return `+${account.country_calling_code}${account.phone}`;
}
function CodeInput({ flowData, codeLength = 4, onSubmit, onResend, onBack, countdown = 0, loading = false, error, onClearError }) {
	const [code, setCode] = (0, react.useState)(Array(codeLength).fill(""));
	const inputRefs = (0, react.useRef)([]);
	const canResend = countdown === 0;
	(0, react.useEffect)(() => {
		var _inputRefs$current$;
		(_inputRefs$current$ = inputRefs.current[0]) === null || _inputRefs$current$ === void 0 || _inputRefs$current$.focus();
	}, []);
	(0, react.useEffect)(() => {
		if (error) {
			var _inputRefs$current$2;
			setCode(Array(codeLength).fill(""));
			(_inputRefs$current$2 = inputRefs.current[0]) === null || _inputRefs$current$2 === void 0 || _inputRefs$current$2.focus();
		}
	}, [error, codeLength]);
	/**
	* 处理单个输入框的值变化
	* @param index 输入框索引
	* @param value 输入的值
	*/
	const handleInputChange = (index, value) => {
		const digitsOnly = value.replace(/\D/g, "");
		if (digitsOnly !== value && value !== "") return;
		if (digitsOnly.length > 1) {
			var _inputRefs$current$ne;
			if (error && onClearError) onClearError();
			const nextCode = [...code];
			const maxFillLength = Math.min(codeLength - index, digitsOnly.length);
			for (let offset = 0; offset < maxFillLength; offset += 1) nextCode[index + offset] = digitsOnly[offset];
			setCode(nextCode);
			const nextEmptyIndex = nextCode.findIndex((digit) => digit === "");
			if (nextEmptyIndex === -1) {
				onSubmit === null || onSubmit === void 0 || onSubmit(nextCode.join(""));
				return;
			}
			(_inputRefs$current$ne = inputRefs.current[nextEmptyIndex]) === null || _inputRefs$current$ne === void 0 || _inputRefs$current$ne.focus();
			return;
		}
		if (value && error && onClearError) onClearError();
		const newCode = [...code];
		newCode[index] = value.slice(-1);
		setCode(newCode);
		if (value && index < codeLength - 1) {
			var _inputRefs$current;
			(_inputRefs$current = inputRefs.current[index + 1]) === null || _inputRefs$current === void 0 || _inputRefs$current.focus();
		}
		if (newCode.every((digit) => digit !== "")) {
			const fullCode = newCode.join("");
			onSubmit === null || onSubmit === void 0 || onSubmit(fullCode);
		}
	};
	/**
	* 处理键盘按键事件（主要处理退格键）
	* @param index 当前输入框索引
	* @param e 键盘事件
	*/
	const handleKeyDown = (index, e) => {
		if (e.key === "Backspace" && !code[index] && index > 0) {
			var _inputRefs$current2;
			(_inputRefs$current2 = inputRefs.current[index - 1]) === null || _inputRefs$current2 === void 0 || _inputRefs$current2.focus();
		}
	};
	/**
	* 处理粘贴事件（支持粘贴完整验证码）
	* @param e 剪贴板事件
	*/
	const handlePaste = (e) => {
		e.preventDefault();
		const pastedData = e.clipboardData.getData("text").trim();
		if (!/^\d+$/.test(pastedData)) return;
		if (pastedData && error && onClearError) onClearError();
		const newCode = pastedData.slice(0, codeLength).split("");
		while (newCode.length < codeLength) newCode.push("");
		setCode(newCode);
		if (newCode.every((digit) => digit !== "")) onSubmit === null || onSubmit === void 0 || onSubmit(newCode.join(""));
	};
	/**
	* 手动提交验证码
	*/
	const handleSubmit = () => {
		const fullCode = code.join("");
		if (fullCode.length === codeLength) onSubmit === null || onSubmit === void 0 || onSubmit(fullCode);
	};
	const title = flowData.accountType === "email" ? _pisell_utils.locales.getText("pisell-register2-check-email-title") : _pisell_utils.locales.getText("pisell-register2-check-phone-title");
	const description = flowData.accountType === "email" ? _pisell_utils.locales.getText("pisell-register2-check-email-desc") : _pisell_utils.locales.getText("pisell-register2-check-phone-desc");
	const displayAccount = formatDisplayAccount(flowData.account);
	const noReceiveText = flowData.accountType === "email" ? _pisell_utils.locales.getText("pisell-register2-no-email-received") : _pisell_utils.locales.getText("pisell-register2-no-message-received");
	return /* @__PURE__ */ react.default.createElement("div", { className: "register-step-container code-input-page" }, /* @__PURE__ */ react.default.createElement("button", {
		className: "back-button-top",
		onClick: onBack,
		"aria-label": "Go back"
	}, /* @__PURE__ */ react.default.createElement(_pisell_materials_src_components_iconfont.default, { type: "pisell2-arrow-left" })), /* @__PURE__ */ react.default.createElement("div", { className: "register-step-content" }, /* @__PURE__ */ react.default.createElement("h2", { className: "register-step-title" }, title), /* @__PURE__ */ react.default.createElement("p", { className: "register-step-desc" }, description, /* @__PURE__ */ react.default.createElement("br", null), displayAccount), /* @__PURE__ */ react.default.createElement("div", {
		className: "code-input-group",
		onPaste: handlePaste
	}, code.map((digit, index) => /* @__PURE__ */ react.default.createElement("input", {
		key: index,
		ref: (el) => inputRefs.current[index] = el,
		type: "text",
		inputMode: "numeric",
		autoComplete: index === 0 ? "one-time-code" : "off",
		autoCorrect: "off",
		autoCapitalize: "off",
		spellCheck: false,
		maxLength: index === 0 ? codeLength : 1,
		pattern: "[0-9]*",
		className: `code-input-box ${digit ? "has-value" : ""} ${error ? "has-error" : ""}`,
		value: digit,
		onChange: (e) => handleInputChange(index, e.target.value),
		onKeyDown: (e) => handleKeyDown(index, e),
		disabled: loading
	}))), error && /* @__PURE__ */ react.default.createElement("div", { className: "code-input-error" }, error), /* @__PURE__ */ react.default.createElement(_pisell_materials.Button, {
		type: "primary",
		size: "large",
		block: true,
		onClick: handleSubmit,
		loading,
		disabled: code.some((digit) => !digit),
		className: "register-submit-btn"
	}, _pisell_utils.locales.getText("pisell-common-verify")), /* @__PURE__ */ react.default.createElement(_pisell_materials.Button, {
		type: "default",
		size: "large",
		block: true,
		onClick: onBack,
		className: "register-back-btn"
	}, _pisell_utils.locales.getText("pisell-common-back")), /* @__PURE__ */ react.default.createElement("div", { className: "register-resend-section" }, /* @__PURE__ */ react.default.createElement("span", { className: "resend-text" }, noReceiveText, " "), /* @__PURE__ */ react.default.createElement("button", {
		className: "resend-link",
		onClick: onResend,
		disabled: !canResend
	}, _pisell_utils.locales.getText("pisell-common-resend"), countdown > 0 && ` (${countdown} s)`))));
}
//#endregion
exports.default = CodeInput;
