<template>
	<view class="page">
		<view class="splash">
			<view class="brand">
				<view class="brand-mark"></view>
				<view class="brand-text">
					<text class="brand-name">Mall</text>
					<text class="brand-slogan">正品保障 · 省心售后</text>
				</view>
			</view>

			<view class="status">
				<view class="spinner"></view>
				<text class="status-text">正在检查登录状态…</text>
				<text class="status-sub">通常数秒内自动进入首页或登录页</text>
			</view>

			<view class="actions">
				<navigator url="/pages/user/login" open-type="reLaunch" class="action primary">前往登录</navigator>
				<navigator url="/pages/user/register" open-type="navigate" class="action ghost">我要注册</navigator>
			</view>
		</view>
	</view>
</template>

<script lang="uts">
	import supa from '@/components/supadb/aksupainstance.uts'
	import { IS_TEST_MODE } from '@/ak/config.uts'

	export default {
		onLoad() {
			// 启动页：根据登录态重定向
			this.checkAndRedirect();
		},
		onShow() {
			// 启动页仅在首次进入时做一次跳转，避免影响 H5 手动输入 URL
		},
		methods: {
			checkAndRedirect() {
				console.log('boot: start redirect check')

				if (IS_TEST_MODE) {
					// 测试阶段：不做强制重定向，保留你手动输入的 URL / 目标页面
					return
				}

				try {
					const sessionInfo = supa.getSession()
					if (sessionInfo != null && sessionInfo.user != null) {
						uni.reLaunch({ url: '/pages/mall/consumer/index' })
						return
					}
				} catch (e) {
					console.error('boot: error checking session', e)
				}

				uni.reLaunch({ url: '/pages/user/login' })
			}
		}
	};
</script>

<style>
	.page {
		min-height: 100vh;
		background: linear-gradient(180deg, #ffffff 0%, #f5f7fa 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 48rpx 32rpx;
	}

	.splash {
		width: 100%;
		max-width: 640rpx;
		background: #ffffff;
		border-radius: 24rpx;
		box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.08);
		padding: 48rpx 40rpx;
		display: flex;
		flex-direction: column;
		gap: 32rpx;
	}

	.brand {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.brand-mark {
		width: 80rpx;
		height: 80rpx;
		border-radius: 24rpx;
		background: linear-gradient(135deg, #ff6b6b, #ff9f43);
	}

	.brand-text {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.brand-name {
		font-size: 36rpx;
		font-weight: 700;
		color: #111827;
	}

	.brand-slogan {
		font-size: 26rpx;
		color: #6b7280;
	}

	.status {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12rpx;
		text-align: center;
	}

	.spinner {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		border: 8rpx solid #f3f4f6;
		border-top-color: #ff6b6b;
		animation: spin 1s linear infinite;
	}

	.status-text {
		font-size: 30rpx;
		color: #111827;
		font-weight: 600;
	}

	.status-sub {
		font-size: 24rpx;
		color: #6b7280;
	}

	.actions {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.action {
		width: 100%;
		text-align: center;
		padding: 24rpx;
		border-radius: 16rpx;
		font-size: 28rpx;
		font-weight: 600;
	}

	.action.primary {
		background: linear-gradient(135deg, #ff6b6b, #ff9f43);
		color: #ffffff;
	}

	.action.ghost {
		border: 2rpx solid #e5e7eb;
		color: #374151;
		background: #ffffff;
	}

	@keyframes spin {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
</style>
