<template>
	<view class="feed-screen" :style="screenStyle">
		<feed-vertical-reel
			ref="reel"
			:frame-w="layout.windowWidth"
			:frame-h="layout.windowHeight"
			:safe-bottom="overlaySafeBottom"
			:bottom-inset="reelBottomInset"
			:tab-active="tabVisible"
			:show-cover="showCover"
			@tabbar-change="onTabbarChange"
		/>

		<view v-if="tabbarVisible" class="feed-tabbar-host">
			<app-tabbar active="favorite" />
		</view>

		<!-- 顶部右上角：搜索 -->
		<view class="feed-toolbar" :style="{ paddingTop: layout.statusBar + 'px' }">
			<view class="feed-toolbar-row">
				<view class="feed-tool-btn" @tap="onSearch">
					<image class="feed-tool-search-icon" src="/static/icon/searchline.png" mode="aspectFit" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// 跟 HKLive 工程 find.nvue + play.vue 一致：
// nvue 外壳 + .vue 子组件（含 swiper / video / 按钮）。
// uni-app 把 .vue 子组件作为 webview subwindow 嵌入，
// video 与 overlay 都是 webview DOM，z-index 叠加正常，
// 解决了 nvue 内 native video 覆盖 nvue overlay 导致按钮点不到的问题。
import FeedVerticalReel from '@/components/feed-reel/vertical-reel.vue'
import AppTabbar from '@/components/app-tabbar/app-tabbar.vue'
import {
	applyBackgroundPlaybackSession,
	shouldKeepFeedPlaybackOnPageHide
} from '@/features/feed/background-playback'

// feed 页协调机制：
//   feed.onShow → uni.hideTabBar() + 自定义 AppTabbar（与其他 tab 页一致）
//   评论/合辑弹层打开时由 vertical-reel 通知隐藏 AppTabbar，避免挡住底部挂商品/合辑

const TABBAR_INNER_RPX = 100

export default {
	components: { FeedVerticalReel, AppTabbar },
	data() {
		return {
			tabVisible: true,
			tabbarVisible: true,
			showCover: false,
			layout: {
				windowWidth: 375,
				windowHeight: 667,
				safeBottom: 0,
				statusBar: 0
			}
		}
	},
	computed: {
		tabbarHeight() {
			return uni.upx2px(TABBAR_INNER_RPX) + (this.layout.safeBottom || 0)
		},
		/**
		 * 自定义 tabbar 盖在全屏 vue 子 webview 上，会挡住合辑/挂商品。
		 * 仅 index 传入 bottomInset；reel.nvue 走 find/play 不传，保持 0。
		 */
		reelBottomInset() {
			if (!this.tabbarVisible) return 0
			// +8 与 tabbar 顶边留一点间隙，避免贴边
			return this.tabbarHeight + 8
		},
		/** tabbar 可见时安全区已含在 tabbarHeight 内，避免双重留白 */
		overlaySafeBottom() {
			return this.tabbarVisible ? 0 : (this.layout.safeBottom || 0)
		},
		screenStyle() {
			return {
				width: `${this.layout.windowWidth}px`,
				height: `${this.layout.windowHeight}px`
			}
		}
	},
	onShow() {
		this.tabVisible = true
		this.tabbarVisible = true
		setTimeout(() => {
			try { uni.hideTabBar({ animation: false }) } catch (_) {}
		}, 0)

		let targetVideoId = ''
		try {
			const app = getApp()
			if (app.globalData && app.globalData.targetVideoId) {
				targetVideoId = String(app.globalData.targetVideoId)
				app.globalData.targetVideoId = ''
			}
		} catch (_) {}

		this.$nextTick(() => {
			const delay = uni.getSystemInfoSync().platform === 'ios' ? 150 : 80
			setTimeout(() => {
				const reel = this.$refs.reel
				if (targetVideoId && reel && typeof reel.openFromLabel === 'function') {
					reel.openFromLabel(targetVideoId)
					return
				}
				if (reel && typeof reel.wakePlayback === 'function') {
					reel.wakePlayback()
				}
			}, delay)
		})
	},
	onHide() {
		setTimeout(() => {
			if (shouldKeepFeedPlaybackOnPageHide()) {
				applyBackgroundPlaybackSession(true)
				return
			}
			this.tabVisible = false
			if (this.$refs.reel && typeof this.$refs.reel.freezePlayback === 'function') {
				this.$refs.reel.freezePlayback()
			}
		}, 50)
	},
	mounted() {
		const sys = uni.getSystemInfoSync()
		this.layout = {
			windowWidth: sys.windowWidth,
			windowHeight: sys.windowHeight,
			safeBottom: (sys.safeAreaInsets && sys.safeAreaInsets.bottom) || 0,
			statusBar: sys.statusBarHeight || 0
		}
	},
	methods: {
		onTabbarChange(visible) {
			this.tabbarVisible = !!visible
		},
		onSearch() {
			uni.navigateTo({ url: '/pages/search/index?type=find' })
		}
	}
}
</script>

<style>
.feed-screen {
	flex: 1;
	position: relative;
	background-color: #000000;
}

/* 顶部浮动操作栏 */
.feed-toolbar {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 20;
}
.feed-toolbar-row {
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	padding-left: 24rpx;
	padding-right: 24rpx;
	padding-top: 16rpx;
	padding-bottom: 16rpx;
}
.feed-tool-btn {
	width: 64rpx;
	height: 64rpx;
	border-radius: 32rpx;
	background-color: rgba(0, 0, 0, 0.32);
	justify-content: center;
	align-items: center;
}
.feed-tool-search-icon {
	width: 40rpx;
	height: 40rpx;
}

/* nvue 层锚定自定义 tabbar，避免被全屏 video 子 webview 挡住 */
.feed-tabbar-host {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
}
</style>
