<template>
	<view class="pledge">
		<view class="pledge__row" :class="{ 'pledge__row--shake': shake }">
			<view class="pledge__tick" :class="{ 'pledge__tick--on': value }" @tap="toggle">
				<text v-if="value" class="pledge__tick-mark">✓</text>
			</view>
			<text class="pledge__text" @tap="toggle">
				{{ prefix }}
				<text class="pledge__link" @tap.stop="openTerms">{{ termsLabel }}</text>
				{{ separator }}
				<text class="pledge__link" @tap.stop="openPrivacy">{{ privacyLabel }}</text>{{ suffix }}
			</text>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex'
import { isExternalArticleUrl } from '@/features/article/article-gateway'

export default {
	name: 'PolicyPledge',
	props: {
		value: { type: Boolean, default: false },
		prefix: { type: String, default: 'I have read and agree to' },
		separator: { type: String, default: 'and' },
		termsLabel: { type: String, default: 'Terms of Service' },
		privacyLabel: { type: String, default: 'Privacy Policy' },
		suffix: { type: String, default: '' }
	},
	data() {
		return { shake: false }
	},
	computed: {
		...mapState({ appConfig: (state) => state.shell.appConfig })
	},
	methods: {
		toggle() {
			this.$emit('input', !this.value)
		},
		openTerms() {
			this.openDoc(this.appConfig.user_agreement, this.termsLabel)
		},
		openPrivacy() {
			this.openDoc(this.appConfig.privacy_protection, this.privacyLabel)
		},
		openDoc(id, title) {
			const raw = id != null ? String(id).trim() : ''
			if (!raw || raw === '0') {
				const fallback = this.$t ? this.$t('passport.pledge-doc-missing') : 'Document URL not configured'
				if (this.$appKit && this.$appKit.msg) this.$appKit.msg(fallback)
				else uni.showToast({ title: fallback, icon: 'none' })
				return
			}
			const encodedTitle = encodeURIComponent(title || '')
			if (isExternalArticleUrl(raw)) {
				uni.navigateTo({
					url: `/pages/article/details?url=${encodeURIComponent(raw)}&title=${encodedTitle}`
				})
				return
			}
			uni.navigateTo({
				url: `/pages/article/details?id=${raw}&title=${encodedTitle}`
			})
		},
		flash() {
			this.shake = true
			setTimeout(() => {
				this.shake = false
			}, 480)
		}
	}
}
</script>

<style lang="scss">
.pledge {
	margin-top: 24rpx;
}

.pledge__row {
	display: flex;
	align-items: flex-start;
	padding: 12rpx 0;
}

.pledge__row--shake {
	animation: pledgeJitter 0.42s ease;
}

.pledge__tick {
	width: 36rpx;
	height: 36rpx;
	border-radius: 18rpx;
	border: 2rpx solid rgba(255, 255, 255, 0.35);
	flex-shrink: 0;
	margin-right: 16rpx;
	margin-top: 6rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
}

.pledge__tick--on {
	background: linear-gradient(135deg, #ffb547, #ff4d6a);
	border-color: transparent;
}

.pledge__tick-mark {
	color: #fff;
	font-size: 24rpx;
	font-weight: 800;
	line-height: 1;
}

.pledge__text {
	flex: 1;
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.6;
}

.pledge__link {
	color: #ffb547;
}

@keyframes pledgeJitter {
	0% { transform: translateX(0); }
	25% { transform: translateX(-8rpx); }
	50% { transform: translateX(10rpx); }
	75% { transform: translateX(-6rpx); }
	100% { transform: translateX(0); }
}
</style>
