<template>
	<view class="pp-screen">
		<view class="pp-screen__sky" />
		<view class="pp-screen__halo pp-screen__halo--alpha" />
		<view class="pp-screen__halo pp-screen__halo--beta" />
		<view class="pp-screen__halo pp-screen__halo--gamma" />

		<view class="pp-screen__bar" :style="{ paddingTop: barTop + 'px', height: barH + 'px' }">
			<view v-if="canBack" class="pp-screen__back" @tap="emitBack">
				<text class="pp-screen__back-icon">‹</text>
			</view>
			<text class="pp-screen__crumb">{{ crumb }}</text>
			<view v-if="$slots.actions" class="pp-screen__actions">
				<slot name="actions" />
			</view>
		</view>

		<scroll-view class="pp-screen__scroll" scroll-y :show-scrollbar="false">
			<view class="pp-screen__hero">
				<text v-if="kicker" class="pp-screen__kicker">{{ kicker }}</text>
				<text class="pp-screen__title">{{ title }}</text>
				<text v-if="subtitle" class="pp-screen__subtitle">{{ subtitle }}</text>
			</view>

			<view class="pp-screen__card">
				<slot />
			</view>

			<view v-if="$slots.footer" class="pp-screen__footer">
				<slot name="footer" />
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { readDeviceLayout } from '@/core/kit/device-metrics'

export default {
	name: 'PpScreen',
	props: {
		title: { type: String, required: true },
		subtitle: { type: String, default: '' },
		kicker: { type: String, default: '' },
		crumb: { type: String, default: '' },
		canBack: { type: Boolean, default: true }
	},
	data() {
		return { barTop: 0, barH: 96 }
	},
	mounted() {
		const layout = readDeviceLayout()
		this.barTop = layout.top
		this.barH = layout.height
	},
	methods: {
		emitBack() {
			this.$emit('back')
			// 注意：uni-app 没有 uni.getCurrentPages，必须用全局 getCurrentPages()
			const stackDepth = getCurrentPages().length
			if (stackDepth > 1) {
				uni.navigateBack({ delta: 1 })
				return
			}
			// 栈底兜底：避免按了没反应，回首页 tab
			uni.switchTab({
				url: '/pages/index/index',
				fail: () => uni.reLaunch({ url: '/pages/index/index' })
			})
		}
	}
}
</script>

<style lang="scss">
.pp-screen {
	position: relative;
	min-height: 100vh;
	background: #0e1230;
	overflow: hidden;
	padding-bottom: env(safe-area-inset-bottom);
}

.pp-screen__sky {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: linear-gradient(170deg, #1a1f3b 0%, #2a2476 38%, #0e1230 100%);
}

.pp-screen__halo {
	position: absolute;
	border-radius: 50%;
	filter: blur(110rpx);
	opacity: 0.55;
	pointer-events: none;
}

.pp-screen__halo--alpha {
	width: 520rpx;
	height: 520rpx;
	top: -160rpx;
	right: -120rpx;
	background: radial-gradient(circle, rgba(255, 181, 71, 0.5), rgba(255, 181, 71, 0));
}

.pp-screen__halo--beta {
	width: 460rpx;
	height: 460rpx;
	bottom: 80rpx;
	left: -160rpx;
	background: radial-gradient(circle, rgba(61, 90, 254, 0.85), rgba(61, 90, 254, 0));
}

.pp-screen__halo--gamma {
	width: 320rpx;
	height: 320rpx;
	top: 380rpx;
	left: 220rpx;
	opacity: 0.35;
	background: radial-gradient(circle, rgba(255, 77, 106, 0.7), rgba(255, 77, 106, 0));
}

.pp-screen__bar {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 28rpx;
}

.pp-screen__back {
	position: absolute;
	left: 16rpx;
	bottom: 14rpx;
	width: 64rpx;
	height: 64rpx;
	border-radius: 32rpx;
	background: rgba(255, 255, 255, 0.12);
	border: 1rpx solid rgba(255, 255, 255, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
}

.pp-screen__back-icon {
	color: #fff;
	font-size: 44rpx;
	line-height: 1;
	font-weight: 600;
	margin-top: -6rpx;
}

.pp-screen__crumb {
	color: rgba(255, 255, 255, 0.7);
	font-size: 26rpx;
	letter-spacing: 4rpx;
}

.pp-screen__actions {
	position: absolute;
	right: 24rpx;
	bottom: 12rpx;
}

.pp-screen__scroll {
	position: relative;
	z-index: 1;
	height: 100vh;
	padding: 24rpx 32rpx 80rpx;
	box-sizing: border-box;
}

.pp-screen__hero {
	padding: 48rpx 12rpx 36rpx;
}

.pp-screen__kicker {
	display: block;
	font-size: 24rpx;
	color: rgba(255, 181, 71, 0.9);
	letter-spacing: 6rpx;
	text-transform: uppercase;
	margin-bottom: 12rpx;
}

.pp-screen__title {
	display: block;
	font-size: 56rpx;
	color: #fff;
	font-weight: 700;
	letter-spacing: 1rpx;
	line-height: 1.2;
}

.pp-screen__subtitle {
	display: block;
	margin-top: 16rpx;
	font-size: 26rpx;
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.6;
}

.pp-screen__card {
	background: rgba(255, 255, 255, 0.06);
	border: 1rpx solid rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(20rpx);
	-webkit-backdrop-filter: blur(20rpx);
	border-radius: 36rpx;
	padding: 36rpx 30rpx 40rpx;
	box-shadow: 0 30rpx 90rpx rgba(8, 8, 32, 0.5);
}

.pp-screen__footer {
	margin-top: 36rpx;
	padding: 0 12rpx 24rpx;
}
</style>
