import { n as useTranslation } from "../i18n-DoP1NB7u.js";
import { _ as y, p as d, v as u } from "../vendor-preact-DThS2ZQ_.js";
import { a as isTerminalModuleState, c as useManager, o as useModuleTerminalCallbacks } from "../hooks-Da_yP_Dr.js";
import { t as IncodeComponent } from "../incodeComponent-CCP7GTMj.js";
import { r as Spacer } from "../loadingIcon-B0ysgiNq.js";
import { t as Page } from "../page-DidH_RkX.js";
import { t as Button } from "../button-BMYTQ8fc.js";
import { t as OtpInput } from "../otpInput-DYJPGIzf.js";
import { t as registerIncodeModuleElement } from "../incodeModule-M8DszCee.js";
import { t as EmailInput } from "../emailInput-BymMe0f7.js";
import { createEmailManager } from "@incodetech/core/email";
//#region src/modules/email/email.tsx
/**
* @module @incodetech/ui/email
*
* Email verification UI component for the Incode Web SDK.
* Provides a complete, ready-to-use email verification experience
* with email input and OTP verification.
*
* ## UI Usage
*
* The Email component can be used as a React/Preact component or as a
* Web Component (`<incode-email>`).
*
* @example React/Preact component usage
* ```tsx
* import { Email } from '@incodetech/ui/email';
* import { setup } from '@incodetech/core';
*
* // Configure the SDK first
* setup({ apiURL: 'https://api.example.com', token: 'your-token' });
*
* function App() {
*   const config = {
*     otpVerification: true,
*     otpExpirationInMinutes: 5,
*     prefill: false,
*   };
*
*   return (
*     <Email
*       config={config}
*       onFinish={() => console.log('Email verified!')}
*       onError={(error) => console.error('Error:', error)}
*     />
*   );
* }
* ```
*
* @example Web Component usage
* ```html
* <!-- Include the script -->
* <script type="module">
*   import '@incodetech/ui/email';
*   import { setup } from '@incodetech/core';
*
*   setup({ apiURL: 'https://api.example.com', token: 'your-token' });
*
*   const email = document.querySelector('incode-email');
*   email.config = {
*     otpVerification: true,
*     otpExpirationInMinutes: 5,
*     prefill: false,
*   };
*   email.onFinish = () => console.log('Email verified!');
*   email.onError = (error) => console.error('Error:', error);
* <\/script>
*
* <incode-email></incode-email>
* ```
*
* ## Styling
*
* The component uses CSS custom properties (variables) for theming.
* Override these variables to customize the appearance:
*
* ```css
* :root {
*   --button-primary-surface-default: #0066cc;
*   --input-border-default: #cccccc;
*   --text-title: #333333;
* }
* ```
*
* ## Headless Alternative
*
* For complete control over the UI, use the headless `createEmailManager`
* from `@incodetech/core/email` instead. See the core module documentation.
*/
function getOtpErrorTranslationKey(error) {
	if (error === "serverError") return "email.serverError";
	return error;
}
function getEmailErrorTranslationKey(error) {
	if (error === "invalidEmail") return "verification.errors.emailInvalid";
	if (error === "serverError") return "email.serverError";
	return error;
}
var EmailContent = ({ config, manager: externalManager, onFinish, onError }) => {
	const { t } = useTranslation();
	const [state, manager] = useManager(() => {
		if (externalManager) return externalManager;
		if (!config) throw new Error("Email config is required");
		return createEmailManager({ config });
	}, { manageLifecycle: !externalManager });
	const [emailValue, setEmailValue] = d("");
	useModuleTerminalCallbacks({
		status: state.status,
		onFinish,
		onError,
		error: state.status === "error" ? state.error : void 0
	});
	const prefilledEmail = state.status === "inputting" ? state.prefilledEmail ?? "" : "";
	y(() => {
		if (prefilledEmail) {
			const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(prefilledEmail.trim());
			setEmailValue(prefilledEmail.trim());
			manager.setEmail(prefilledEmail.trim(), isValid);
		}
	}, [prefilledEmail, manager]);
	if (state.status === "idle" || state.status === "loadingPrefill" || state.status === "inputting" || state.status === "submitting" || state.status === "sendingInitialOtp") {
		const isLoading = state.status === "idle" || state.status === "loadingPrefill" || state.status === "submitting" || state.status === "sendingInitialOtp";
		const serverEmailError = state.status === "inputting" && state.emailError ? t(getEmailErrorTranslationKey(state.emailError)) : void 0;
		const clientEmailError = state.status === "inputting" && state.validationErrors?.email ? t(getEmailErrorTranslationKey(state.validationErrors.email)) : void 0;
		const emailError = serverEmailError ?? clientEmailError;
		const isValid = state.status === "inputting" ? state.isValid : true;
		return /* @__PURE__ */ u(Page, {
			className: "IncodeEmailPage",
			title: t("email.verify"),
			subtitle: t("email.willSendCode"),
			children: [
				/* @__PURE__ */ u(EmailInput, {
					value: emailValue,
					emailError,
					disabled: isLoading,
					required: true,
					onEmailChange: (email, isValid) => {
						manager.setEmail(email, isValid);
						setEmailValue(email);
					},
					onBlur: () => {
						manager.validateEmail();
					}
				}),
				/* @__PURE__ */ u(Spacer, {}),
				/* @__PURE__ */ u(Button, {
					onClick: () => manager.submit(),
					disabled: !isValid,
					isLoading,
					"data-testid": "email-submit",
					children: t("common.continue")
				})
			]
		}, "email-input");
	}
	if (state.status === "awaitingOtp" || state.status === "verifyingOtp" || state.status === "otpError" || state.status === "resendingOtp") {
		const isVerifying = state.status === "verifyingOtp";
		const hasOtpError = state.status === "otpError";
		const isAwaitingOtp = state.status === "awaitingOtp";
		const isResending = state.status === "resendingOtp";
		const showResendCountdown = isAwaitingOtp || hasOtpError || isVerifying;
		return /* @__PURE__ */ u(Page, {
			className: "IncodeEmailPage IncodeEmailOtpPage",
			title: t("otp.enterCodeEmail"),
			children: /* @__PURE__ */ u(OtpInput, {
				value: state.otpCode,
				otpLength: state.otpLength,
				resendTimer: showResendCountdown ? state.resendTimer : 0,
				canResend: showResendCountdown ? state.canResend : false,
				error: hasOtpError ? t(getOtpErrorTranslationKey(state.otpError)) : void 0,
				validationError: "otpValidationErrors" in state && state.otpValidationErrors?.otp ? t("otp.incompleteCode", { length: state.otpLength }) : void 0,
				isValid: "isOtpValid" in state ? state.isOtpValid : true,
				isLoading: isVerifying,
				disabled: isResending || isVerifying,
				onSubmit: (code) => manager.submitOtp(code),
				onChange: (code) => manager.setOtpCode(code),
				onValidate: () => manager.validateOtp(),
				onResend: () => manager.resendOtp(),
				onBack: () => manager.back(),
				backLinkText: "otp.changeEmail"
			})
		}, "email-otp");
	}
	if (isTerminalModuleState(state)) return null;
	return null;
};
/**
* Email verification UI component.
*
* Provides a complete email verification experience including:
* - Email address input with validation
* - OTP code entry with resend functionality
* - Loading states and error handling
*
* @example Basic usage
* ```tsx
* <Email
*   config={{
*     otpVerification: true,
*     otpExpirationInMinutes: 5,
*     prefill: false,
*   }}
*   onFinish={() => router.push('/next-step')}
*   onError={(err) => toast.error(err)}
* />
* ```
*
* @see {@link createEmailManager} for headless usage
*/
var Email = ({ config, manager, onFinish, onError }) => {
	return /* @__PURE__ */ u(IncodeComponent, { children: config || manager ? /* @__PURE__ */ u(EmailContent, {
		config,
		manager,
		onFinish,
		onError
	}) : null });
};
registerIncodeModuleElement(Email, "incode-email");
//#endregion
export { Email };
