<template>
	<view class="teen-lock-page">
		<view class="teen-lock-nav" :style="{ paddingTop: statusBar + 'px' }">
			<view class="teen-lock-nav-row">
				<view class="teen-lock-nav-placeholder" />
				<text class="teen-lock-nav-title">{{ copy.pageTitle }}</text>
				<view class="teen-lock-nav-placeholder" />
			</view>
		</view>

		<view class="teen-lock-body">
			<view class="teen-lock-icon-wrap">
				<text class="teen-lock-icon">☂️</text>
			</view>
			<text class="teen-lock-title">{{ panel.title }}</text>
			<text class="teen-lock-desc">{{ panel.desc }}</text>

			<view v-if="panel.showPin" class="teen-lock-form">
				<input
					class="teen-lock-input"
					type="number"
					maxlength="4"
					password
					:focus="pinFocus"
					:adjust-position="true"
					confirm-type="done"
					:placeholder="copy.pinPlaceholder"
					:value="pin"
					@input="onPinInput"
					@focus="pinFocus = true"
					@blur="pinFocus = false"
					@confirm="submitPin"
				/>
				<view class="teen-lock-btn" hover-class="teen-lock-btn--press" @tap="submitPin">
					<text class="teen-lock-btn-text">{{ copy.confirm }}</text>
				</view>
			</view>

			<text v-if="curfewHint" class="teen-lock-hint">{{ curfewHint }}</text>
		</view>
	</view>
</template>

<script>
import {
	CURFEW_END_HOUR,
	getTeenLockCopy,
	getTeenLockState,
	refreshTeenModeGuard,
	subscribeTeenLock,
	syncTeenLockOverlay,
	tryUnlockTeenLock
} from '@/features/account/teen-mode-guard'

export default {
	data() {
		return {
			statusBar: 0,
			reason: 'session',
			pin: '',
			pinFocus: false,
			curfewHint: ''
		}
	},
	computed: {
		copy() {
			const t = this.$t.bind(this)
			return {
				pageTitle: t('user.teenModeTitle'),
				pinPlaceholder: t('user.teenModePinPlaceholder'),
				confirm: t('user.teenModeConfirm'),
				invalidPin: t('user.teenModeInvalidPin'),
				wrongPin: t('user.teenModeWrongPin'),
				unlockedOk: t('user.teenModeUnlockOk'),
				curfewUntil: t('user.teenModeLockCurfewUntil', { hour: CURFEW_END_HOUR })
			}
		},
		panel() {
			return getTeenLockCopy(this.reason)
		}
	},
	onShow() {
		syncTeenLockOverlay()
		refreshTeenModeGuard()
		this.syncReasonFromGuard()
		this.refreshCurfewHint()
		if (this.panel.showPin) {
			this.$nextTick(() => {
				this.pinFocus = true
			})
		}
	},
	onHide() {
		this.pinFocus = false
		syncTeenLockOverlay()
	},
	onUnload() {
		this.pinFocus = false
		syncTeenLockOverlay()
		if (this._unsub) this._unsub()
		if (this._curfewTimer) clearInterval(this._curfewTimer)
	},
	onLoad(query) {
		const sys = uni.getSystemInfoSync()
		this.statusBar = sys.statusBarHeight || 0
		if (query && query.reason) {
			this.reason = decodeURIComponent(String(query.reason))
		}
		this.syncReasonFromGuard()
		this.refreshCurfewHint()
		this._unsub = subscribeTeenLock((state) => {
			if (!state.locked) {
				this.leaveIfUnlocked()
				return
			}
			this.reason = state.reason || this.reason
			this.refreshCurfewHint()
		})
		this._curfewTimer = setInterval(() => {
			refreshTeenModeGuard()
			this.refreshCurfewHint()
		}, 30000)
	},
	methods: {
		syncReasonFromGuard() {
			const state = getTeenLockState()
			if (state.locked && state.reason) {
				this.reason = state.reason
			}
		},
		refreshCurfewHint() {
			if (this.reason !== 'curfew') {
				this.curfewHint = ''
				return
			}
			this.curfewHint = this.copy.curfewUntil
		},
		onPinInput(e) {
			this.pin = String((e && e.detail && e.detail.value) || '').replace(/\D/g, '').slice(0, 4)
		},
		toast(message) {
			this.$appKit && this.$appKit.msg(message)
		},
		submitPin() {
			if (this.pin.length !== 4) {
				this.toast(this.copy.invalidPin)
				return
			}
			if (!tryUnlockTeenLock(this.pin)) {
				this.toast(this.copy.wrongPin)
				return
			}
			this.toast(this.copy.unlockedOk)
			this.leaveIfUnlocked()
		},
		leaveIfUnlocked() {
			const state = getTeenLockState()
			if (state.locked) return
			if (getCurrentPages().length > 1) {
				uni.navigateBack({ delta: 1 })
			}
		}
	}
}
</script>

<style scoped>
.teen-lock-page {
	min-height: 100vh;
	background: linear-gradient(180deg, #f0f6ff 0%, #eef3fb 100%);
}

.teen-lock-nav {
	background-color: transparent;
}

.teen-lock-nav-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 88rpx;
	padding: 0 24rpx;
	box-sizing: border-box;
}

.teen-lock-nav-title {
	flex: 1;
	text-align: center;
	font-size: 32rpx;
	font-weight: 600;
	color: #1a1d26;
}

.teen-lock-nav-placeholder {
	width: 64rpx;
}

.teen-lock-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 80rpx 48rpx 48rpx;
	box-sizing: border-box;
}

.teen-lock-icon-wrap {
	width: 160rpx;
	height: 160rpx;
	border-radius: 80rpx;
	background: radial-gradient(circle, rgba(82, 196, 120, 0.18) 0%, rgba(82, 196, 120, 0.06) 72%);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 36rpx;
}

.teen-lock-icon {
	font-size: 72rpx;
	line-height: 1;
}

.teen-lock-title {
	display: block;
	font-size: 40rpx;
	font-weight: 700;
	color: #1a1d26;
	line-height: 1.4;
	margin-bottom: 20rpx;
	text-align: center;
}

.teen-lock-desc {
	display: block;
	font-size: 28rpx;
	line-height: 1.75;
	color: #5c6170;
	text-align: center;
	margin-bottom: 48rpx;
}

.teen-lock-form {
	width: 100%;
	max-width: 620rpx;
}

.teen-lock-input {
	display: block;
	width: 100%;
	height: 96rpx;
	padding: 0 28rpx;
	border-radius: 20rpx;
	background-color: #ffffff;
	border: 1rpx solid #e3e7ef;
	font-size: 32rpx;
	color: #1a1d26;
	box-sizing: border-box;
	margin-bottom: 28rpx;
}

.teen-lock-btn {
	height: 92rpx;
	border-radius: 46rpx;
	background: linear-gradient(135deg, #4a8cff 0%, #6ec8ff 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.teen-lock-btn--press {
	opacity: 0.92;
}

.teen-lock-btn-text {
	font-size: 30rpx;
	color: #ffffff;
	font-weight: 600;
}

.teen-lock-hint {
	display: block;
	margin-top: 32rpx;
	font-size: 26rpx;
	line-height: 1.6;
	color: #8a8d9e;
	text-align: center;
}
</style>
