<template>
	<passport-screen :title="copy.title" :subtitle="copy.subtitle" :kicker="copy.kicker" :crumb="copy.crumb">
		<view class="pp-recover-illu">
			<view class="pp-recover-illu__ring pp-recover-illu__ring--outer" />
			<view class="pp-recover-illu__ring pp-recover-illu__ring--inner" />
			<text class="pp-recover-illu__icon">🔐</text>
		</view>

		<view class="pp-recover-field">
			<text class="pp-recover-field__label">{{ copy.handsetLabel }}</text>
			<view class="pp-recover-field__row">
				<region-picker v-model="region" :title="copy.regionTitle" :search-placeholder="copy.regionSearch" :empty-text="copy.regionEmpty" />
				<input
					v-model="handset"
					class="pp-recover-input"
					:placeholder="copy.handsetPlaceholder"
					placeholder-class="pp-recover-input__placeholder"
					type="number"
					maxlength="15"
					@input="onHandsetInput"
				/>
			</view>
			<text class="pp-recover-field__hint">{{ copy.fieldHint }}</text>
		</view>

		<button
			class="pp-recover-submit"
			:disabled="!canSubmit || probing"
			:class="{ 'pp-recover-submit--off': !canSubmit }"
			@tap="onNext"
		>
			<text class="pp-recover-submit__text">{{ probing ? copy.probing : copy.next }}</text>
		</button>

		<view class="pp-recover-card">
			<text class="pp-recover-card__title">{{ copy.helpTitle }}</text>
			<text class="pp-recover-card__line">· {{ copy.help1 }}</text>
			<text class="pp-recover-card__line">· {{ copy.help2 }}</text>
		</view>

		<template #footer>
			<view class="pp-recover-foot" @tap="goSignin">
				<text class="pp-recover-foot__cta">{{ copy.back }}</text>
			</view>
		</template>
	</passport-screen>
</template>

<script>
import PassportScreen from '@/components/passport-kit/passport-screen.vue'
import RegionPicker from '@/components/passport-kit/region-picker.vue'
import { requestPasscode, verifyHandsetUsed } from '@/features/passport/credential-bridge'
import { looksLikeHandset, trimHandset } from '@/features/passport/form-rules'
import { DEFAULT_REGION } from '@/features/passport/region-dialcodes'

export default {
	components: { PassportScreen, RegionPicker },
	data() {
		return {
			handset: '',
			region: DEFAULT_REGION,
			probing: false,
			redirect: ''
		}
	},
	computed: {
		copy() {
			const t = this.$t.bind(this)
			return {
				kicker: t('passport.kicker-password'),
				crumb: t('passport.crumb-recover'),
				title: t('passport.title-recover'),
				subtitle: t('passport.subtitle-recover'),
				handsetLabel: t('passport.label-handset-reg'),
				handsetPlaceholder: t('passport.ph-handset-recover'),
				fieldHint: t('passport.field-hint-region'),
				regionTitle: t('passport.region-title'),
				regionSearch: t('passport.region-search'),
				regionEmpty: t('passport.region-empty'),
				next: t('passport.btn-next'),
				probing: t('passport.btn-probing'),
				helpTitle: t('passport.help-title'),
				help1: t('passport.help-1'),
				help2: t('passport.help-2'),
				back: t('passport.foot-back-signin')
			}
		},
		canSubmit() {
			return looksLikeHandset(this.handset)
		}
	},
	onLoad(query) {
		if (query && query.handset) {
			try {
				this.handset = trimHandset(decodeURIComponent(query.handset))
			} catch (_) {
				this.handset = trimHandset(query.handset)
			}
		}
		if (query && query.region) {
			try {
				this.region = String(decodeURIComponent(query.region)).replace(/^\+/, '')
			} catch (_) {
				this.region = String(query.region).replace(/^\+/, '')
			}
		}
		if (query && query.redirect) this.redirect = decodeURIComponent(query.redirect)
	},
	methods: {
		onHandsetInput(e) {
			this.handset = trimHandset(e.detail.value)
		},
		toast(msg) {
			if (this.$appKit && this.$appKit.msg) this.$appKit.msg(msg)
			else uni.showToast({ title: msg, icon: 'none' })
		},
		async onNext() {
			if (!this.canSubmit) {
				this.toast(this.$t('passport.err-handset'))
				return
			}
			this.probing = true
			uni.showLoading({ title: this.copy.probing, mask: true })
			try {
				const { taken } = await verifyHandsetUsed({
					handset: this.handset,
					region: this.region
				})
				if (!taken) {
					this.toast(this.$t('passport.err-not-exist'))
					return
				}
				const { ticketId, needHumanCheck } = await requestPasscode({
					scene: 'resetpwd',
					handset: this.handset,
					region: this.region
				})
				if (needHumanCheck) {
					this.toast(this.$t('passport.tip-need-captcha'))
					return
				}
				const params = [
					`scene=resetpwd`,
					`handset=${encodeURIComponent(this.handset)}`,
					`region=${encodeURIComponent(this.region)}`,
					`ticketId=${encodeURIComponent(ticketId || '')}`
				]
				if (this.redirect) params.push(`redirect=${encodeURIComponent(this.redirect)}`)
				uni.navigateTo({ url: `/pages/account/sms-verify?${params.join('&')}` })
			} catch (err) {
				this.toast((err && err.message) || this.$t('passport.err-network'))
			} finally {
				this.probing = false
				uni.hideLoading()
			}
		},
		goSignin() {
			if (getCurrentPages().length > 1) uni.navigateBack({ delta: 1 })
			else uni.redirectTo({ url: '/pages/passport/signin?mode=secret' })
		}
	}
}
</script>

<style lang="scss">
.pp-recover-illu {
	position: relative;
	height: 220rpx;
	margin: 0 auto 40rpx;
	width: 220rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pp-recover-illu__ring {
	position: absolute;
	border-radius: 50%;
	border: 4rpx solid rgba(255, 181, 71, 0.32);
}

.pp-recover-illu__ring--outer {
	width: 220rpx;
	height: 220rpx;
}

.pp-recover-illu__ring--inner {
	width: 160rpx;
	height: 160rpx;
	border-color: rgba(61, 90, 254, 0.45);
}

.pp-recover-illu__icon {
	font-size: 72rpx;
}

.pp-recover-field {
	margin-bottom: 32rpx;
}

.pp-recover-field__label {
	display: block;
	color: rgba(255, 255, 255, 0.7);
	font-size: 24rpx;
	letter-spacing: 2rpx;
	margin-bottom: 16rpx;
}

.pp-recover-field__row {
	display: flex;
}

.pp-recover-field__hint {
	display: block;
	font-size: 22rpx;
	color: rgba(255, 255, 255, 0.45);
	margin-top: 14rpx;
}

.pp-recover-input {
	flex: 1;
	height: 96rpx;
	background: rgba(255, 255, 255, 0.08);
	border: 1rpx solid rgba(255, 255, 255, 0.16);
	border-left: none;
	padding: 0 28rpx;
	font-size: 30rpx;
	color: #fff;
	border-radius: 0 24rpx 24rpx 0;
	box-sizing: border-box;
}

.pp-recover-input__placeholder {
	color: rgba(255, 255, 255, 0.35);
}

.pp-recover-submit {
	width: 100%;
	height: 104rpx;
	border-radius: 30rpx;
	border: none;
	background: linear-gradient(135deg, #3d5afe 0%, #6b3df0 100%);
	box-shadow: 0 18rpx 50rpx rgba(61, 90, 254, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
}

.pp-recover-submit::after {
	border: none;
}

.pp-recover-submit--off {
	opacity: 0.55;
}

.pp-recover-submit__text {
	color: #fff;
	font-size: 32rpx;
	font-weight: 700;
	letter-spacing: 4rpx;
}

.pp-recover-card {
	margin-top: 32rpx;
	padding: 24rpx;
	border-radius: 22rpx;
	background: rgba(255, 255, 255, 0.05);
	border: 1rpx solid rgba(255, 255, 255, 0.1);
}

.pp-recover-card__title {
	display: block;
	color: #ffb547;
	font-size: 24rpx;
	margin-bottom: 12rpx;
	font-weight: 600;
}

.pp-recover-card__line {
	display: block;
	color: rgba(255, 255, 255, 0.65);
	font-size: 22rpx;
	line-height: 1.6;
}

.pp-recover-foot {
	display: flex;
	justify-content: center;
}

.pp-recover-foot__cta {
	color: rgba(255, 255, 255, 0.6);
	font-size: 26rpx;
	padding: 12rpx 24rpx;
}
</style>
