<template>
	<div
		class="flex h-screen w-screen items-center justify-center"
		v-if="$resources.signupSettings.loading"
	>
		<Spinner class="mr-2 w-4" />
		<p class="text-gray-800">加载中</p>
	</div>
	<div class="flex h-screen overflow-hidden sm:bg-gray-50" v-else>
		<div class="w-full overflow-auto">
			<LoginBox
				title="欢迎回来"
				:subtitle="`登录到您的 ${saasProduct?.title} 站点`"
				:class="{ 'pointer-events-none': $resources.signup?.loading }"
				:logo="saasProduct?.logo"
			>
				<template v-slot:default>
					<form class="flex flex-col" @submit.prevent="">
						<FormControl
							class="w-full"
							label="邮箱"
							type="email"
							placeholder="email@example.com"
							variant="outline"
							autocomplete="email"
							v-model="email"
							required
						/>
						<FormControl
							v-if="isLoginWithEmail"
							class="mt-4 w-full"
							label="验证码"
							type="text"
							placeholder="5位验证码"
							variant="outline"
							v-model="code"
							required
						/>

						<!-- 错误信息 -->
						<ErrorMessage
							class="mt-2"
							:message="
								this.$resources?.sendVerificationCodeForLogin?.error ||
								this.$resources?.loginUsingCode?.error
							"
						/>
						<!-- 按钮 -->
						<div
							class="mt-5 flex flex-col items-center gap-3"
							v-if="!isLoginWithEmail"
						>
							<Button
								:loading="$resources.sendVerificationCodeForLogin?.loading"
								@click="$resources.sendVerificationCodeForLogin.submit()"
								variant="solid"
								class="w-full font-medium"
								type="button"
							>
								使用邮箱登录
							</Button>
							<p v-if="isGoogleOAuthEnabled">或</p>
							<Button
								v-if="isGoogleOAuthEnabled"
								variant="subtle"
								class="w-full font-medium"
								type="button"
								:loading="$resources.signupWithOAuth?.loading"
								@click="$resources.signupWithOAuth.submit()"
							>
								<div class="flex flex-row items-center gap-1">
									<GoogleIconSolid class="w-4" />
									使用 Google 登录
								</div>
							</Button>
						</div>
						<!-- 处理邮箱验证的按钮 -->
						<div class="mt-5 flex flex-col items-center gap-2" v-else>
							<Button
								:loading="$resources.loginUsingCode?.loading || isRedirecting"
								variant="solid"
								class="w-full font-medium"
								type="full"
								@click="$resources.loginUsingCode.submit()"
							>
								验证
							</Button>
							<Button
								:loading="$resources.loginUsingCode?.loading"
								variant="outline"
								class="w-full font-medium"
								type="button"
								@click="$resources.sendVerificationCodeForLogin.submit()"
							>
								未收到邮件？重新发送
							</Button>
						</div>
					</form>

					<div class="mt-6 text-center">
						<router-link
							class="text-center text-base font-medium text-gray-900 hover:text-gray-700"
							:to="{
								name: 'SaaSSignup',
								params: $route.params,
							}"
						>
							新用户？创建一个新账户。
						</router-link>
					</div>
				</template>
			</LoginBox>
		</div>
	</div>
</template>
<script>
import { Spinner } from 'jingrow-ui';
import LoginBox from '../../components/auth/SaaSLoginBox.vue';
import GoogleIconSolid from '@/components/icons/GoogleIconSolid.vue';
import { toast } from 'vue-sonner';

export default {
	name: 'SaaSSignup',
	props: ['productId'],
	components: {
		LoginBox,
		Spinner,
		GoogleIconSolid,
	},
	data() {
		return {
			email: '',
			code: '',
			isLoginWithEmail: false,
			isRedirecting: false,
		};
	},
	watch: {
		email() {
			this.isLoginWithEmail = false;
		},
	},
	computed: {
		saasProduct() {
			return this.$resources.signupSettings.data?.product_trial || {};
		},
		isGoogleOAuthEnabled() {
			return this.$resources.signupSettings.data?.enable_google_oauth || false;
		},
	},
	resources: {
		signupSettings() {
return {
				url: 'jcloud.api.account.signup_settings',
				params: {
					product: this.productId,
					fetch_countries: true,
					timezone: window.Intl
						? Intl.DateTimeFormat().resolvedOptions().timeZone
						: null,
				},
				auto: true,
				onSuccess(res) {
					if (res && res.country) {
						this.country = res.country;
					}
				},
			};
		},
		sendVerificationCodeForLogin() {
			return {
				url: 'jcloud.api.product_trial.send_verification_code_for_login',
				params: {
					email: this.email,
					product: this.productId,
				},
				auto: false,
				onSuccess() {
					this.isLoginWithEmail = true;
					toast.success('验证码已发送至您的邮箱');
				},
			};
		},
		loginUsingCode() {
			return {
				url: 'jcloud.api.product_trial.login_using_code',
				params: {
					email: this.email,
					product: this.productId,
					code: this.code,
				},
				auto: false,
				onSuccess: (data) => {
					this.moveToSiteLoginPage(data);
				},
			};
		},
		signupWithOAuth() {
			return {
				url: 'jcloud.api.google.login',
				params: {
					product: this.productId,
				},
				auto: false,
				onSuccess(url) {
					window.location.href = url;
				},
			};
		},
	},
	methods: {
		loginWithEmail() {
			this.isLoginWithEmail = true;
		},
		moveToSiteLoginPage(product_trial_request) {
			this.isRedirecting = true;
			window.location.href = this.$router.resolve({
				name: 'SignupLoginToSite',
				params: {
					productId: this.productId,
				},
				query: {
					product_trial_request,
				},
			}).href;
		},
	},
};
</script>