<template>
	<passport-screen :title="copy.title" :subtitle="copy.subtitle" :kicker="copy.kicker" :crumb="copy.crumb" :can-back="canBack">
		<view class="pp-lobby__brand">
			<view class="pp-lobby__logo">
				<image class="pp-lobby__logo-img" :src="logoSrc" mode="aspectFit" />
			</view>
			<text class="pp-lobby__brand-name">{{ copy.appName }}</text>
			<text class="pp-lobby__brand-tag">{{ copy.appTag }}</text>
		</view>

		<view class="pp-lobby__entries">
			<view
				v-for="entry in entryList"
				:key="entry.id"
				class="pp-lobby-card"
				:class="`pp-lobby-card--${entry.id}`"
				@tap="onEntry(entry)"
			>
				<view class="pp-lobby-card__icon">{{ entry.icon }}</view>
				<view class="pp-lobby-card__body">
					<text class="pp-lobby-card__title">{{ entry.title }}</text>
					<text class="pp-lobby-card__desc">{{ entry.desc }}</text>
				</view>
				<text class="pp-lobby-card__arrow">›</text>
			</view>
		</view>

		<template #footer>
			<view class="pp-lobby__bottom">
				<text class="pp-lobby__tip">{{ copy.bottomTip }}</text>
				<text class="pp-lobby__cta" @tap="goEnroll">{{ copy.enrollCta }}</text>
			</view>
		</template>
	</passport-screen>
</template>

<script>
import PassportScreen from '@/components/passport-kit/passport-screen.vue'
import { fetchAppBrand } from '@/features/shell/app-config-gateway'

const FALLBACK_LOGO = '/static/logo.png'

export default {
	components: { PassportScreen },
	data() {
		return {
			canBack: false,
			logoPath: '',
			appBrandName: ''
		}
	},
	computed: {
		displayAppName() {
			const fromApi = (this.appBrandName || '').trim()
			if (fromApi) return fromApi
			return this.$t('passport.app-name')
		},
		logoSrc() {
			const raw = (this.logoPath || '').trim()
			if (!raw) return FALLBACK_LOGO
			if (this.$appKit && typeof this.$appKit.oss === 'function') {
				return this.$appKit.oss(raw, 200, 200)
			}
			return raw
		},
		copy() {
			const t = this.$t.bind(this)
			const name = this.displayAppName
			return {
				kicker: t('passport.kicker-welcome'),
				crumb: t('passport.crumb-signin'),
				title: t('passport.title-lobby', { name }),
				subtitle: t('passport.subtitle-lobby'),
				appName: name,
				appTag: t('passport.app-tag'),
				enrollCta: t('passport.foot-go-reg-cta'),
				bottomTip: t('passport.foot-no-account')
			}
		},
		entryList() {
			const t = this.$t.bind(this)
			return [
				{
					id: 'passcode',
					icon: '✦',
					title: t('passport.entry-passcode-title'),
					desc: t('passport.entry-passcode-desc'),
					target: '/pages/passport/signin?mode=passcode'
				},
				{
					id: 'secret',
					icon: '✱',
					title: t('passport.entry-secret-title'),
					desc: t('passport.entry-secret-desc'),
					target: '/pages/passport/signin?mode=secret'
				},
				{
					id: 'enroll',
					icon: '✚',
					title: t('passport.entry-enroll-title'),
					desc: t('passport.entry-enroll-desc'),
					target: '/pages/passport/enroll'
				}
			]
		}
	},
	onLoad() {
		this.canBack = getCurrentPages().length > 1
		this.loadBrand()
	},
	onBackPress() {
		if (!this.canBack) {
			uni.switchTab({
				url: '/pages/index/index',
				fail: () => uni.reLaunch({ url: '/pages/index/index' })
			})
			return true
		}
		return false
	},
	methods: {
		async loadBrand() {
			try {
				const brand = await fetchAppBrand()
				this.logoPath = brand.logo || ''
				this.appBrandName = brand.name || ''
			} catch (_) {
				this.logoPath = ''
				this.appBrandName = ''
			}
		},
		onEntry(entry) {
			uni.navigateTo({ url: entry.target })
		},
		goEnroll() {
			uni.navigateTo({ url: '/pages/passport/enroll' })
		}
	}
}
</script>

<style lang="scss">
.pp-lobby__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 28rpx;
}

.pp-lobby__logo {
	width: 160rpx;
	height: 160rpx;
	border-radius: 48rpx;
	background: linear-gradient(135deg, #3d5afe 0%, #ff4d6a 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 20rpx 60rpx rgba(61, 90, 254, 0.45);
}

.pp-lobby__logo-img {
	width: 104rpx;
	height: 104rpx;
	border-radius: 32rpx;
}

.pp-lobby__brand-name {
	font-size: 48rpx;
	font-weight: 800;
	color: #fff;
	margin-top: 24rpx;
	letter-spacing: 3rpx;
}

.pp-lobby__brand-tag {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.5);
	margin-top: 8rpx;
	letter-spacing: 2rpx;
}

.pp-lobby__entries {
	margin-top: 28rpx;
}

.pp-lobby-card {
	display: flex;
	align-items: center;
	padding: 28rpx 28rpx;
	border-radius: 26rpx;
	margin-bottom: 22rpx;
	background: rgba(255, 255, 255, 0.08);
	border: 1rpx solid rgba(255, 255, 255, 0.15);
}

.pp-lobby-card--passcode {
	background: linear-gradient(120deg, rgba(255, 181, 71, 0.22), rgba(255, 77, 106, 0.18));
	border-color: rgba(255, 181, 71, 0.35);
}

.pp-lobby-card--secret {
	background: linear-gradient(120deg, rgba(61, 90, 254, 0.32), rgba(125, 60, 252, 0.2));
	border-color: rgba(61, 90, 254, 0.4);
}

.pp-lobby-card--enroll {
	background: linear-gradient(120deg, rgba(37, 220, 132, 0.2), rgba(255, 181, 71, 0.22));
	border-color: rgba(37, 220, 132, 0.4);
}

.pp-lobby-card__icon {
	width: 92rpx;
	height: 92rpx;
	border-radius: 28rpx;
	background: rgba(255, 255, 255, 0.18);
	font-size: 40rpx;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 24rpx;
}

.pp-lobby-card__body {
	flex: 1;
}

.pp-lobby-card__title {
	display: block;
	font-size: 30rpx;
	color: #fff;
	font-weight: 700;
}

.pp-lobby-card__desc {
	display: block;
	font-size: 22rpx;
	color: rgba(255, 255, 255, 0.7);
	margin-top: 8rpx;
}

.pp-lobby-card__arrow {
	color: rgba(255, 255, 255, 0.6);
	font-size: 40rpx;
	font-weight: 200;
}

.pp-lobby__bottom {
	display: flex;
	align-items: center;
	justify-content: center;
}

.pp-lobby__tip {
	color: rgba(255, 255, 255, 0.55);
	font-size: 24rpx;
}

.pp-lobby__cta {
	color: #ffb547;
	font-size: 26rpx;
	font-weight: 700;
	margin-left: 12rpx;
	padding: 10rpx 16rpx;
	border-radius: 24rpx;
	background: rgba(255, 181, 71, 0.16);
}
</style>
