<template>
	<view class="live-end-page">
		<image
			v-if="coverSrc"
			class="live-end-bg"
			:src="coverSrc"
			mode="aspectFill"
		/>
		<view class="live-end-mask" />

		<view class="live-end-body" :style="{ paddingTop: (statusBar + 48) + 'px' }">
			<text class="live-end-title">{{ copy.ended }}</text>
			<text class="live-end-sub">{{ copy.replay }}</text>

			<view class="live-end-card">
				<image class="live-end-avatar" :src="avatarSrc" mode="aspectFill" />
				<text class="live-end-name">{{ anchorName }}</text>
				<view class="live-end-stats">
					<view class="live-end-stat">
						<text class="live-end-stat-num">{{ fmt(summary.like) }}</text>
						<text class="live-end-stat-label">{{ copy.likes }}</text>
					</view>
					<view class="live-end-stat live-end-stat--mid">
						<text class="live-end-stat-num">{{ fmt(summary.views) }}</text>
						<text class="live-end-stat-label">{{ copy.views }}</text>
					</view>
					<view class="live-end-stat">
						<text class="live-end-stat-num">{{ fmt(summary.goodsnum) }}</text>
						<text class="live-end-stat-label">{{ copy.products }}</text>
					</view>
				</view>
			</view>

			<view class="live-end-btn" @tap="goHall">
				<text class="live-end-btn-txt">{{ copy.backHall }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import appSettings from '@/core/config/app-settings'
import { fetchBroadcastEndSummary } from '@/features/live/broadcast-gateway'

export default {
	data() {
		return {
			statusBar: 0,
			roomId: '',
			summary: {
				like: 0,
				views: 0,
				goodsnum: 0,
				image: '',
				shop: { shopname: '', avatar: '' }
			}
		}
	},
	computed: {
		copy() {
			const t = this.$t.bind(this)
			return {
				ended: t('live.broadcastEndTitle'),
				replay: t('live.broadcastEndReplay'),
				likes: t('live.broadcastEndLikes'),
				views: t('live.broadcastEndViews'),
				products: t('live.broadcastEndProducts'),
				backHall: t('live.broadcastBackHall')
			}
		},
		coverSrc() {
			const img = this.summary.image || (this.summary.shop && this.summary.shop.avatar) || ''
			if (!img) return ''
			if (/^https?:\/\//.test(img)) return img
			if (this.$appKit && this.$appKit.oss) {
				return this.$appKit.oss(img, 750, 320, 1, 'transparent', 'jpg')
			}
			return `${appSettings.cdnurl || ''}${img.startsWith('/') ? img : `/${img}`}`
		},
		avatarSrc() {
			const av = (this.summary.shop && this.summary.shop.avatar) || ''
			if (!av) return '/static/tabbar/mine.png'
			if (/^https?:\/\//.test(av)) return av
			return `${appSettings.cdnurl || ''}${av.startsWith('/') ? av : `/${av}`}`
		},
		anchorName() {
			const user = (this.$store && this.$store.state.user) || {}
			return (
				(this.summary.shop && this.summary.shop.shopname) ||
				user.nickname ||
				'—'
			)
		}
	},
	onLoad(query) {
		try {
			const info = uni.getSystemInfoSync()
			this.statusBar = info.statusBarHeight || 0
		} catch (_) {}
		this.roomId = (query && query.id) || ''
		if (this.roomId) this.loadSummary()
	},
	methods: {
		fmt(n) {
			const v = Number(n)
			if (!Number.isFinite(v) || v < 0) return 0
			return this.$appKit ? this.$appKit.toFormat(v, 'thousand') : v
		},
		async loadSummary() {
			try {
				const data = await fetchBroadcastEndSummary(this.roomId)
				if (data && typeof data === 'object') {
					this.summary = { ...this.summary, ...data }
				}
			} catch (_) {}
		},
		goHall() {
			uni.switchTab({
				url: '/pages/live/hall',
				fail: () => uni.reLaunch({ url: '/pages/live/hall' })
			})
		}
	}
}
</script>

<style scoped>
.live-end-page {
	min-height: 100vh;
	position: relative;
	background-color: #1a1d26;
}

.live-end-bg {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	filter: blur(24px);
	transform: scale(1.08);
}

.live-end-mask {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(15, 17, 24, 0.72);
}

.live-end-body {
	position: relative;
	z-index: 2;
	padding-left: 40rpx;
	padding-right: 40rpx;
	padding-bottom: 80rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.live-end-title {
	font-size: 44rpx;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 12rpx;
}

.live-end-sub {
	font-size: 26rpx;
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: 48rpx;
}

.live-end-card {
	width: 100%;
	padding: 40rpx 32rpx;
	border-radius: 28rpx;
	background-color: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(12px);
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 48rpx;
}

.live-end-avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	border-width: 4rpx;
	border-style: solid;
	border-color: rgba(255, 255, 255, 0.35);
	margin-bottom: 20rpx;
}

.live-end-name {
	font-size: 32rpx;
	font-weight: 600;
	color: #ffffff;
	margin-bottom: 32rpx;
}

.live-end-stats {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
}

.live-end-stat {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.live-end-stat--mid {
	border-left: 1rpx solid rgba(255, 255, 255, 0.15);
	border-right: 1rpx solid rgba(255, 255, 255, 0.15);
}

.live-end-stat-num {
	font-size: 36rpx;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 8rpx;
}

.live-end-stat-label {
	font-size: 22rpx;
	color: rgba(255, 255, 255, 0.6);
}

.live-end-btn {
	width: 100%;
	height: 96rpx;
	border-radius: 48rpx;
	background: linear-gradient(135deg, #4a8cff 0%, #6ea8ff 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12rpx 32rpx rgba(74, 140, 255, 0.35);
}

.live-end-btn-txt {
	font-size: 32rpx;
	font-weight: 600;
	color: #ffffff;
}
</style>
