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

		<scroll-view
			scroll-y
			class="gen-scroll"
			:style="{ height: scrollHeight + 'px' }"
		>
			<view class="gen-body" :style="{ paddingBottom: safeBottom + 'px' }">
				<view class="gen-card">
					<view
						class="gen-row"
						hover-class="gen-row--press"
						@tap="openTeenMode"
					>
						<view class="gen-row-main">
							<text class="gen-row-label">{{ copy.teenMode }}</text>
							<text class="gen-row-desc">{{ copy.teenModeDesc }}</text>
						</view>
						<view class="gen-row-tail">
							<text v-if="teenEnabled" class="gen-row-meta">{{ copy.enabled }}</text>
							<text class="gen-chevron">›</text>
						</view>
					</view>

					<!-- <view class="gen-row gen-row--last">
						<view class="gen-row-main">
							<text class="gen-row-label">{{ copy.backgroundPlayback }}</text>
							<text class="gen-row-desc">{{ copy.backgroundPlaybackDesc }}</text>
						</view>
						<switch
							class="gen-switch"
							:checked="backgroundPlayback"
							color="#4a8cff"
							@change="onBackgroundPlaybackChange"
						/>
					</view> -->
				</view>

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

<script>
import { isTeenModeEnabled } from '@/features/account/teen-mode-settings'
import {
	isBackgroundPlaybackEnabled,
	setBackgroundPlaybackEnabled
} from '@/features/feed/background-playback-settings'
import { applyBackgroundPlaybackSession } from '@/features/feed/background-playback'

export default {
	data() {
		return {
			statusBar: 0,
			scrollHeight: 600,
			safeBottom: 0,
			teenEnabled: isTeenModeEnabled(),
			backgroundPlayback: isBackgroundPlaybackEnabled()
		}
	},
	computed: {
		copy() {
			const t = this.$t.bind(this)
			return {
				title: t('user.panelGeneral'),
				teenMode: t('user.teenModeTitle'),
				teenModeDesc: t('user.teenModeMenuDesc'),
				enabled: t('user.teenModeEnabled'),
				backgroundPlayback: t('user.backgroundPlaybackTitle'),
				backgroundPlaybackDesc: t('user.backgroundPlaybackDesc'),
				backgroundPlaybackOn: t('user.backgroundPlaybackEnabledOk'),
				backgroundPlaybackOff: t('user.backgroundPlaybackDisabledOk'),
				hint: t('user.generalSettingsHint')
			}
		}
	},
	onShow() {
		this.teenEnabled = isTeenModeEnabled()
		this.backgroundPlayback = isBackgroundPlaybackEnabled()
	},
	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
	},
	methods: {
		goBack() {
			if (getCurrentPages().length > 1) {
				uni.navigateBack({ delta: 1 })
			} else {
				uni.switchTab({
					url: '/pages/mine/index',
					fail: () => uni.reLaunch({ url: '/pages/mine/index' })
				})
			}
		},
		openTeenMode() {
			uni.navigateTo({
				url: '/pages/user/settings/teen-mode',
				fail: () => this.$appKit && this.$appKit.to('/pages/user/settings/teen-mode')
			})
		},
		toast(message) {
			this.$appKit && this.$appKit.msg(message)
		},
		onBackgroundPlaybackChange(e) {
			const next = !!(e && e.detail && e.detail.value)
			setBackgroundPlaybackEnabled(next)
			this.backgroundPlayback = next
			if (next) {
				applyBackgroundPlaybackSession(true)
				this.toast(this.copy.backgroundPlaybackOn)
				return
			}
			applyBackgroundPlaybackSession(false)
			this.toast(this.copy.backgroundPlaybackOff)
		}
	}
}
</script>

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

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

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

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

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

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

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

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

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

.gen-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;
}

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

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

.gen-row-main {
	flex: 1;
	padding-right: 24rpx;
}

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

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

.gen-row-tail {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-shrink: 0;
}

.gen-row-meta {
	font-size: 26rpx;
	color: #4a8cff;
	margin-right: 8rpx;
}

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

.gen-switch {
	transform: scale(0.88);
	transform-origin: center right;
}

.gen-hint {
	display: block;
	padding: 0 8rpx;
	font-size: 24rpx;
	line-height: 1.5;
	color: #8a8d9e;
}
</style>
