<template>
	<view class="teen-page">
		<view class="teen-nav" :style="{ paddingTop: statusBar + 'px' }">
			<view class="teen-nav-row">
				<view class="teen-back" @tap="goBack">
					<text class="teen-back-icon">←</text>
				</view>
				<text class="teen-nav-title">{{ copy.title }}</text>
				<view class="teen-nav-placeholder" />
			</view>
		</view>

		<scroll-view
			scroll-y
			class="teen-scroll"
			:style="{ height: scrollHeight + 'px' }"
		>
			<view class="teen-body" :style="{ paddingBottom: safeBottom + 'px' }">
				<view class="teen-intro">
					<view class="teen-icon-wrap">
						<text class="teen-icon-glyph">☂️</text>
					</view>
					<text class="teen-status-title">{{ statusTitle }}</text>
					<view class="teen-rules">
						<text
							v-for="(rule, index) in rules"
							:key="index"
							class="teen-rule"
						>{{ rule }}</text>
					</view>
				</view>

				<view class="teen-card">
					<view class="teen-row">
						<view class="teen-row-text">
							<text class="teen-row-title">{{ copy.switchLabel }}</text>
							<text class="teen-row-desc">{{ copy.switchDesc }}</text>
						</view>
						<switch
							class="teen-switch"
							color="#4a8cff"
							:checked="enabled"
							@change="onSwitchChange"
						/>
					</view>
					<view
						v-if="enabled"
						class="teen-row teen-row--last"
						hover-class="teen-row--press"
						@tap="openChangePin"
					>
						<text class="teen-row-title">{{ copy.changePin }}</text>
						<text class="teen-chevron">›</text>
					</view>
				</view>

				<text class="teen-hint">{{ copy.hint }}</text>
			</view>
		</scroll-view>

		<view v-if="pinDialog.visible" class="teen-mask" @tap="closePinDialog">
			<view class="teen-dialog" @tap.stop>
				<text class="teen-dialog-title">{{ pinDialog.title }}</text>
				<text v-if="pinDialog.subtitle" class="teen-dialog-subtitle">{{ pinDialog.subtitle }}</text>

				<view class="teen-dialog-fields">
					<input
						class="teen-input"
						type="text"
						maxlength="4"
						password
						:placeholder="pinDialog.pinPlaceholder"
						:value="pinDialog.pin"
						@input="onPinInput('pin', $event)"
					/>
					<input
						v-if="pinDialog.mode === 'enable'"
						class="teen-input"
						type="text"
						maxlength="4"
						password
						:placeholder="pinDialog.confirmPlaceholder"
						:value="pinDialog.confirmPin"
						@input="onPinInput('confirmPin', $event)"
					/>
					<input
						v-if="pinDialog.mode === 'change'"
						class="teen-input"
						type="text"
						maxlength="4"
						password
						:placeholder="pinDialog.newPinPlaceholder"
						:value="pinDialog.newPin"
						@input="onPinInput('newPin', $event)"
					/>
					<input
						v-if="pinDialog.mode === 'change'"
						class="teen-input"
						type="text"
						maxlength="4"
						password
						:placeholder="pinDialog.confirmPlaceholder"
						:value="pinDialog.confirmPin"
						@input="onPinInput('confirmPin', $event)"
					/>
				</view>

				<view class="teen-dialog-actions">
					<view class="teen-dialog-btn teen-dialog-btn--ghost" @tap="closePinDialog">
						<text class="teen-dialog-btn-text teen-dialog-btn-text--ghost">{{ copy.cancel }}</text>
					</view>
					<view class="teen-dialog-btn" @tap="submitPinDialog">
						<text class="teen-dialog-btn-text">{{ copy.confirm }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	disableTeenMode,
	enableTeenMode,
	getStoredTeenMode,
	isValidTeenPin,
	updateTeenPin,
	verifyTeenPin
} from '@/features/account/teen-mode-settings'
import { notifyTeenModeChanged } from '@/features/account/teen-mode-guard'

export default {
	data() {
		return {
			statusBar: 0,
			scrollHeight: 600,
			safeBottom: 0,
			enabled: false,
			pinDialog: {
				visible: false,
				mode: '',
				title: '',
				subtitle: '',
				pinPlaceholder: '',
				confirmPlaceholder: '',
				newPinPlaceholder: '',
				pin: '',
				confirmPin: '',
				newPin: ''
			}
		}
	},
	computed: {
		copy() {
			const t = this.$t.bind(this)
			return {
				title: t('user.teenModeTitle'),
				statusEnabled: t('user.teenModeStatusEnabled'),
				statusDisabled: t('user.teenModeStatusDisabled'),
				rule1: t('user.teenModeRule1'),
				rule2: t('user.teenModeRule2'),
				rule3: t('user.teenModeRule3'),
				switchLabel: t('user.teenModeSwitchLabel'),
				switchDesc: t('user.teenModeSwitchDesc'),
				changePin: t('user.teenModeChangePin'),
				// hint: t('user.teenModeHint'),
				cancel: t('user.teenModeCancel'),
				confirm: t('user.teenModeConfirm'),
				enableTitle: t('user.teenModeEnableTitle'),
				enableSubtitle: t('user.teenModeEnableSubtitle'),
				disableTitle: t('user.teenModeDisableTitle'),
				changeTitle: t('user.teenModeChangeTitle'),
				pinPlaceholder: t('user.teenModePinPlaceholder'),
				confirmPinPlaceholder: t('user.teenModeConfirmPinPlaceholder'),
				newPinPlaceholder: t('user.teenModeNewPinPlaceholder'),
				invalidPin: t('user.teenModeInvalidPin'),
				pinMismatch: t('user.teenModePinMismatch'),
				wrongPin: t('user.teenModeWrongPin'),
				enabledOk: t('user.teenModeEnabledOk'),
				disabledOk: t('user.teenModeDisabledOk'),
				changedOk: t('user.teenModeChangedOk')
			}
		},
		statusTitle() {
			return this.enabled ? this.copy.statusEnabled : this.copy.statusDisabled
		},
		rules() {
			return [this.copy.rule1, this.copy.rule2, this.copy.rule3]
		}
	},
	onLoad() {
		const sys = uni.getSystemInfoSync()
		this.statusBar = sys.statusBarHeight || 0
		this.safeBottom = sys.safeAreaInsets ? sys.safeAreaInsets.bottom : 0
		const navH = this.statusBar + uni.upx2px(88)
		this.scrollHeight = (sys.windowHeight || 667) - navH
		this.syncState()
	},
	methods: {
		syncState() {
			this.enabled = !!getStoredTeenMode().enabled
		},
		goBack() {
			if (getCurrentPages().length > 1) {
				uni.navigateBack({ delta: 1 })
			} else {
				uni.switchTab({
					url: '/pages/mine/index',
					fail: () => uni.reLaunch({ url: '/pages/mine/index' })
				})
			}
		},
		toast(message) {
			this.$appKit && this.$appKit.msg(message)
		},
		resetPinDialog() {
			this.pinDialog.pin = ''
			this.pinDialog.confirmPin = ''
			this.pinDialog.newPin = ''
		},
		openPinDialog(mode) {
			const copy = this.copy
			const dialog = {
				visible: true,
				mode,
				title: '',
				subtitle: '',
				pinPlaceholder: copy.pinPlaceholder,
				confirmPlaceholder: copy.confirmPinPlaceholder,
				newPinPlaceholder: copy.newPinPlaceholder,
				pin: '',
				confirmPin: '',
				newPin: ''
			}
			if (mode === 'enable') {
				dialog.title = copy.enableTitle
				dialog.subtitle = copy.enableSubtitle
			} else if (mode === 'disable') {
				dialog.title = copy.disableTitle
			} else if (mode === 'change') {
				dialog.title = copy.changeTitle
			}
			this.pinDialog = dialog
		},
		closePinDialog() {
			this.pinDialog.visible = false
			this.resetPinDialog()
			this.syncState()
		},
		onSwitchChange(e) {
			const next = !!(e && e.detail && e.detail.value)
			if (next === this.enabled) return
			if (next) {
				this.openPinDialog('enable')
				return
			}
			this.openPinDialog('disable')
		},
		openChangePin() {
			this.openPinDialog('change')
		},
		onPinInput(field, e) {
			const value = String((e && e.detail && e.detail.value) || '').replace(/\D/g, '').slice(0, 4)
			this.pinDialog[field] = value
		},
		submitPinDialog() {
			const mode = this.pinDialog.mode
			const pin = this.pinDialog.pin
			const confirmPin = this.pinDialog.confirmPin
			const newPin = this.pinDialog.newPin

			if (mode === 'enable') {
				if (!isValidTeenPin(pin) || !isValidTeenPin(confirmPin)) {
					this.toast(this.copy.invalidPin)
					return
				}
				if (pin !== confirmPin) {
					this.toast(this.copy.pinMismatch)
					return
				}
				if (!enableTeenMode(pin)) {
					this.toast(this.copy.invalidPin)
					return
				}
				this.enabled = true
				this.closePinDialog()
				notifyTeenModeChanged()
				this.toast(this.copy.enabledOk)
				return
			}

			if (mode === 'disable') {
				if (!isValidTeenPin(pin)) {
					this.toast(this.copy.invalidPin)
					return
				}
				if (!verifyTeenPin(pin)) {
					this.toast(this.copy.wrongPin)
					return
				}
				disableTeenMode()
				this.enabled = false
				this.closePinDialog()
				notifyTeenModeChanged()
				this.toast(this.copy.disabledOk)
				return
			}

			if (mode === 'change') {
				if (!isValidTeenPin(pin) || !isValidTeenPin(newPin) || !isValidTeenPin(confirmPin)) {
					this.toast(this.copy.invalidPin)
					return
				}
				if (newPin !== confirmPin) {
					this.toast(this.copy.pinMismatch)
					return
				}
				if (!updateTeenPin(pin, newPin)) {
					this.toast(this.copy.wrongPin)
					return
				}
				this.closePinDialog()
				this.toast(this.copy.changedOk)
			}
		}
	}
}
</script>

<style scoped>
.teen-page {
	min-height: 100vh;
	background-color: #f4f6fb;
}

.teen-nav {
	background-color: #ffffff;
	border-bottom: 1rpx solid #eef1f6;
}

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

.teen-back {
	width: 64rpx;
	height: 64rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.teen-back-icon {
	font-size: 40rpx;
	color: #1a1d26;
	line-height: 1;
}

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

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

.teen-body {
	padding: 24rpx 28rpx 0;
	box-sizing: border-box;
}

.teen-intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 32rpx 12rpx 40rpx;
}

.teen-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: 28rpx;
}

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

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

.teen-rules {
	width: 100%;
	padding: 0 8rpx;
	box-sizing: border-box;
}

.teen-rule {
	display: block;
	font-size: 28rpx;
	line-height: 1.75;
	color: #5c6170;
	margin-bottom: 20rpx;
	text-align: left;
}

.teen-rule:last-child {
	margin-bottom: 0;
}

.teen-card {
	background-color: #ffffff;
	border-radius: 24rpx;
	box-shadow: 0 6rpx 24rpx rgba(74, 140, 255, 0.06);
	overflow: hidden;
	margin-bottom: 20rpx;
}

.teen-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	min-height: 104rpx;
	padding: 24rpx 28rpx;
	border-bottom: 1rpx solid #f0f2f7;
	box-sizing: border-box;
}

.teen-row--last {
	border-bottom-width: 0;
}

.teen-row--press {
	background-color: #f7f9fc;
}

.teen-row-text {
	flex: 1;
	padding-right: 24rpx;
}

.teen-row-title {
	display: block;
	font-size: 30rpx;
	color: #1a1d26;
	line-height: 1.4;
}

.teen-row-desc {
	display: block;
	margin-top: 8rpx;
	font-size: 24rpx;
	line-height: 1.5;
	color: #8a8d9e;
}

.teen-switch {
	transform: scale(0.92);
}

.teen-chevron {
	font-size: 36rpx;
	color: #c5cad6;
	line-height: 1;
}

.teen-hint {
	display: block;
	padding: 0 8rpx;
	font-size: 24rpx;
	line-height: 1.5;
	color: #8a8d9e;
}

.teen-mask {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(16, 20, 32, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48rpx;
	box-sizing: border-box;
	z-index: 999;
}

.teen-dialog {
	width: 100%;
	max-width: 620rpx;
	background-color: #ffffff;
	border-radius: 28rpx;
	padding: 40rpx 32rpx 28rpx;
	box-sizing: border-box;
}

.teen-dialog-title {
	display: block;
	text-align: center;
	font-size: 32rpx;
	font-weight: 600;
	color: #1a1d26;
	line-height: 1.4;
}

.teen-dialog-subtitle {
	display: block;
	margin-top: 12rpx;
	text-align: center;
	font-size: 24rpx;
	line-height: 1.5;
	color: #8a8d9e;
}

.teen-dialog-fields {
	width: 100%;
	margin-top: 24rpx;
}

.teen-input {
	display: block;
	width: 100%;
	height: 88rpx;
	margin-top: 20rpx;
	padding: 0 24rpx;
	border-radius: 16rpx;
	background-color: #f4f6fb;
	border: 1rpx solid #e3e7ef;
	font-size: 30rpx;
	color: #1a1d26;
	box-sizing: border-box;
}

.teen-input:first-child {
	margin-top: 0;
}

.teen-dialog-actions {
	display: flex;
	flex-direction: row;
	margin-top: 32rpx;
}

.teen-dialog-btn {
	flex: 1;
	height: 84rpx;
	border-radius: 42rpx;
	background-color: #4a8cff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.teen-dialog-btn--ghost {
	margin-right: 16rpx;
	background-color: #eef1f6;
}

.teen-dialog-btn-text {
	font-size: 28rpx;
	color: #ffffff;
	font-weight: 500;
}

.teen-dialog-btn-text--ghost {
	color: #5c6170;
}
</style>
