<template>
	<view class="memorial-bg">
		<image class="bg-image" :src="`${apiBase}/static/bg.png`" mode="aspectFill"></image>
		<view class="memorial-content">
			<!-- 头部设计 -->
			<view class="header">
				<text class="logo">时光意境 · AI亲人重逢</text>
				<text class="tagline">用科技温暖记忆，让告别不留遗憾</text>
			</view>

			<!-- 缅怀引言 -->
			<view class="memorial-quote">
				<swiper
					class="banner-swiper"
					:circular="true"
					:autoplay="true"
					:interval="3500"
					:duration="500"
					:indicator-dots="true"
					indicator-color="rgba(255,255,255,0.5)"
					indicator-active-color="#8B7355"
				>
					<swiper-item v-for="(item, idx) in banners" :key="idx">
						<view class="banner-item" @click="handleBannerClick(item)">
							<image class="banner-image" :src="resolveUrl(item.url)" mode="aspectFill" />
							<!-- AI生成提示标签 -->
							<view class="ai-tag">
								<text class="ai-tag-text">AI生成</text>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<!-- 核心功能入口 -->
				<view class="feature-grid">
				<view class="feature-item" @click="goPlaza">
					<view class="feature-icon">🖼️</view>
					<text class="feature-name">作品广场</text>
				</view>
				<view class="feature-item" @click="goPhotoRevival">
					<view class="feature-icon">📸</view>
					<text class="feature-name">照片复活</text>
				</view>
				<view class="feature-item" @click="goShortDrama">
					<view class="feature-icon">🎬</view>
					<text class="feature-name">看短剧</text>
				</view>
				<view class="feature-item" @click="goAICall">
					<view class="feature-icon">📹</view>
					<text class="feature-name">视频通话</text>
				</view>
			</view>
			
			<!-- 视频通话按钮 -->
			<view class="video-call-section">
				<button class="video-call-btn" @click="startVideoCall">
					<text class="btn-icon">📹</text>
					<text class="btn-text">开始视频通话</text>
				</button>
				<text class="ai-disclaimer">本服务为AI生成内容，结果仅供参考</text>
			</view>

			<!-- 行动号召 -->
			<view class="cta-section">
				<text class="cta-text">只需简单三步，即可与记忆中的亲人温暖"重逢"</text>
			</view>
		</view>
		
		<!-- 视频选择弹窗 -->
		<VideoSelectModal
			:show="showVideoSelect"
			@close="showVideoSelect = false"
			@confirm="handleVideoSelect"
		/>
	</view>
	
</template>

<script>
import VideoSelectModal from '@/components/VideoSelectModal.vue';
import { API_BASE } from '@/config/api.js';
import { request } from '@/config/api.js';

export default {
	components: {
		VideoSelectModal
	},
	data() {
		return {
			apiBase: API_BASE,
			title: '时光意境 · AI亲人重逢',
			showVideoSelect: false,
			banners: []
		};
	},
	onLoad() {
		this.loadHomeBanners();
	},
	methods: {
		resolveUrl(url) {
			if (!url) return '';
			if (url.startsWith('http://') || url.startsWith('https://')) return url;
			return `${this.apiBase}${url}`;
		},
		async loadHomeBanners() {
			try {
				const res = await request({ url: '/api/system/home-banners', method: 'GET' });
				const list = res && res.success ? res.data : [];
				if (Array.isArray(list)) {
					this.banners = list
						.filter((x) => x && x.url && x.enabled !== false)
						.sort((a, b) => (Number(a.sort) || 0) - (Number(b.sort) || 0));
				} else {
					this.banners = [];
				}
			} catch (e) {
				this.banners = [];
			}
		},
		handleBannerClick(item) {
			if (!item) return;
			if (item.link) {
				if (String(item.link).startsWith('/pages/')) {
					uni.navigateTo({ url: item.link });
					return;
				}
				uni.setClipboardData({ data: String(item.link) });
				uni.showToast({ title: '已复制链接', icon: 'none' });
			}
		},
		// 检查登录状态
		checkLogin() {
			const token = uni.getStorageSync('token');
			const userId = uni.getStorageSync('userId');
			return !!(token && userId);
		},
		
		// 跳转：声音克隆
		goVoiceClone() {
			// 如果该页面在 tabbar，优先 switchTab，失败则降级 navigateTo
			uni.switchTab({
				url: '/pages/revival/revival',
				fail: () => {
					uni.navigateTo({ url: '/pages/revival/revival' });
				}
			});
		},
		
		// 跳转：照片复活
		goPhotoRevival() {
			uni.navigateTo({
				url: '/pages/revival/revival-original'
			});
		},
		
		// 跳转：作品广场
		goPlaza() {
			uni.navigateTo({
				url: '/pages/plaza/plaza'
			});
		},
		
		// 开始视频通话
		startVideoCall() {
			// 检查登录状态
			if (!this.checkLogin()) {
				uni.showModal({
					title: '提示',
					content: '请先登录后再使用此功能',
					confirmText: '去登录',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							});
						}
					}
				});
				return;
			}
			
			this.showVideoSelect = true;
		},

		// 跳转：AI通话页面
		goAICall() {
			// 与声音克隆同理，优先 switchTab，失败再 navigateTo
			uni.switchTab({
				url: '/pages/phone-call/phone-call',
				fail: () => {
					uni.navigateTo({ url: '/pages/phone-call/phone-call' });
				}
			});
		},
		
		// 处理视频选择
		handleVideoSelect(video) {
			console.log('[Index] 选择视频:', video);
			
			// 直接跳转到通话页面
			uni.navigateTo({
				url: `/pages/video-call-new/video-call-new?videoId=${video.id}&videoName=${encodeURIComponent(video.name || '复活视频')}&videoUrl=${encodeURIComponent(video.videoUrl || video.local_video_path || video.video_url)}&voiceId=${video.voice_id || video.voiceId}`
			});
		},
		
		// 跳转看短剧（内嵌H5页面）
		goShortDrama() {
			uni.navigateTo({
				url: '/pages/short-drama/short-drama'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.memorial-bg {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
}

.bg-image {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.memorial-content {
	position: relative;
	z-index: 2;
	padding: 60upx 30upx 100upx;
	max-width: 1200upx;
	margin: 0 auto;
}

/* 头部设计 */
.header {
	background: transparent;
	color: #2C2C2C;
	padding: 40upx 0 50upx;
	text-align: center;
	position: relative;
	margin-bottom: 20upx;
	
	&::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 200upx;
		height: 3upx;
		background: linear-gradient(90deg, transparent, #8B7355, transparent);
	}
	
	.logo {
		font-size: 64upx;
		font-weight: 700;
		margin-bottom: 24upx;
		color: #8B7355;
		letter-spacing: 2upx;
		display: block;
		line-height: 1.2;
	}
	
	.tagline {
		font-size: 32upx;
		color: #666;
		font-weight: 300;
		margin: 0 auto;
		display: block;
		line-height: 1.5;
	}
}

/* 缅怀引言 */
.memorial-quote {
	text-align: center;
	margin: 30upx 0 70upx;
	padding: 22upx;
	background: rgba(255, 255, 255, 0.6);
	border-radius: 30upx;
	backdrop-filter: blur(10upx);
	box-shadow: 0 8upx 30upx rgba(0, 0, 0, 0.06);
}


::v-deep .banner-swiper {
	width: 100%;
	height: 900upx;
	border-radius: 22upx;
	overflow: hidden;
}

::v-deep .banner-item {
	width: 100%;
	height: 100%;
}

::v-deep .banner-image {
	width: 100%;
	height: 100%;
	display: block;
}

/* AI生成提示标签 */
::v-deep .ai-tag {
	position: absolute;
	top: 16upx;
	left: 16upx;
	padding: 6upx 16upx;
	background: rgba(255, 165, 0, 0.85);
	color: white;
	font-size: 22upx;
	border-radius: 20upx;
	font-weight: 500;
	z-index: 10;
}

/* 功能网格 */
.feature-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12upx;
	margin: 30upx 0;
	align-items: stretch;
}

::v-deep .feature-item {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 18upx;
	padding: 10upx 8upx;
	text-align: center;
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	box-shadow: 0 8upx 24upx rgba(0, 0, 0, 0.08);
	backdrop-filter: blur(20upx);
	border: 2upx solid rgba(255, 255, 255, 0.8);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	min-height: 0;
	
	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 4upx;
		background: linear-gradient(135deg, #8B7355 0%, #6D8B8B 100%);
		transform: scaleX(0);
		transition: transform 0.3s;
	}
	
	&:active {
		transform: translateY(-8upx) scale(0.98);
		box-shadow: 0 16upx 40upx rgba(0, 0, 0, 0.12);
	}
	
	&:active::before {
		transform: scaleX(1);
	}
	
	.feature-icon {
		font-size: 32upx;
		margin-bottom: 8upx;
		color: #8B7355;
		height: 56upx;
		width: 56upx;
		line-height: 56upx;
		border-radius: 50%;
		background: rgba(139, 115, 85, 0.1);
		display: inline-block;
		transition: all 0.3s;
		flex-shrink: 0;
	}
	
	&:active .feature-icon {
		background: linear-gradient(135deg, #8B7355 0%, #6D8B8B 100%);
		color: white;
		transform: scale(1.1);
	}
	
	.feature-name {
		font-size: 18upx;
		font-weight: 600;
		color: #2C2C2C;
		display: block;
		line-height: 1.3;
	}
}

/* 视频通话按钮区域 */
.video-call-section {
	margin: 50upx 0 40upx;
	padding: 0 20upx;
}

.ai-disclaimer {
	display: block;
	text-align: center;
	font-size: 22upx;
	color: rgba(100, 100, 100, 0.7);
	margin-top: 16upx;
	letter-spacing: 0.5upx;
}

.video-call-btn {
	width: 100%;
	padding: 36upx;
	background: linear-gradient(135deg, #8B7355 0%, #6D8B8B 100%);
	color: #ffffff !important;
	border: none;
	border-radius: 40upx;
	font-size: 32upx;
	font-weight: bold;
	box-shadow: 0 16upx 40upx rgba(139, 115, 85, 0.3);
	transition: all 0.3s;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16upx;
	
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
	}
	
	&:active {
		transform: translateY(-4upx);
		box-shadow: 0 20upx 50upx rgba(139, 115, 85, 0.4);
	}
	
	.btn-icon {
		font-size: 40upx;
	}
	
	.btn-text {
		font-size: 32upx;
		font-weight: bold;
	}
}

/* 行动号召 */
.cta-section {
	text-align: center;
	margin: 70upx 0 40upx;
	padding: 40upx 30upx;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 30upx;
	backdrop-filter: blur(10upx);
	
	.cta-text {
		font-size: 30upx;
		color: #666;
		margin: 0 auto;
		line-height: 1.8;
		display: block;
		font-style: italic;
		opacity: 0.9;
	}
}

/* 响应式设计 */
@media (max-width: 750px) {
	.memorial-content {
		padding: 50upx 24upx 80upx;
	}
	
	.header {
		padding: 30upx 0 40upx;
		
		.logo {
			font-size: 56upx;
			margin-bottom: 20upx;
		}
		
		.tagline {
			font-size: 28upx;
		}
	}
	
	.memorial-quote {
		margin: 50upx 0 60upx;
		padding: 18upx;
	}

	.banner-swiper {
		height: 360upx;
	}
	
	.feature-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12upx;
		margin: 50upx 0;
	}
	
	.feature-item {
		padding: 12upx 10upx;
		aspect-ratio: 1.25;
		border-radius: 16upx;
		
		.feature-icon {
			font-size: 40upx;
			height: 64upx;
			width: 64upx;
			line-height: 64upx;
			margin-bottom: 8upx;
		}
		
		.feature-name {
			font-size: 22upx;
		}
	}
	
	.video-call-section {
		margin: 40upx 0 30upx;
		padding: 0 16upx;
	}
	
	.video-call-btn {
		padding: 32upx;
		
		.btn-icon {
			font-size: 36upx;
		}
		
		.btn-text {
			font-size: 28upx;
		}
	}
	
	.cta-section {
		margin: 60upx 0 30upx;
		padding: 32upx 24upx;
		
		.cta-text {
			font-size: 28upx;
		}
	}
}
</style>
