<template>
	<view class="app-tabbar" :style="{ paddingBottom: safeBottom + 'px' }">
		<view class="app-tabbar-inner">
			<view
				v-for="tab in tabs"
				:key="tab.id"
				class="tabbar-item"
				@tap="onTap(tab)"
			>
				<view v-if="active === tab.id" class="tabbar-pill">
					<image class="tabbar-pill-icon" :src="tab.iconActive" mode="aspectFit" />
					<text class="tabbar-pill-label">{{ tab.label }}</text>
				</view>
				<template v-else>
					<image class="tabbar-icon" :src="tab.icon" mode="aspectFit" />
				</template>
			</view>
		</view>
	</view>
</template>

<script>
import { STORAGE } from '@/core/constants/storage-keys'

/**
 * 全局自定义 tabbar。
 *
 * 用法：在每个 tab 页底部放一个 `<app-tabbar :active="'home'" />`，
 * 并在 onShow 里调一次 `uni.hideTabBar({ animation: false })` 把系统 tabbar 藏起来。
 *
 * pages.json 仍要保留 tabBar.list 配置——只为了让 uni.switchTab 路由能工作，
 * 视觉上由本组件全权负责。
 *
 * 文案不走 $t：nvue 内嵌子 webview 常拿不到 vue-i18n，故按当前语言直接取映射表。
 */
const TAB_DEFS = [
	{
		id: 'home',
		labelId: 'home',
		path: '/pages/index/index',
		icon: '/static/tabbar/home.png',
		iconActive: '/static/tabbar/home-active.png'
	},
	{
		id: 'favorite',
		labelId: 'video',
		path: '/pages/feed/index',
		icon: '/static/tabbar/favorite.png',
		iconActive: '/static/tabbar/favorite-active.png'
	},
	{
		id: 'live',
		labelId: 'live',
		path: '/pages/live/hall',
		icon: '/static/tabbar/live.png',
		iconActive: '/static/tabbar/live-active.png'
	},
	{
		id: 'dynamics',
		labelId: 'dynamics',
		path: '/pages/dynamics/index',
		icon: '/static/tabbar/bell.png',
		iconActive: '/static/tabbar/bell-active.png'
	},
	{
		id: 'mine',
		labelId: 'mine',
		path: '/pages/mine/index',
		icon: '/static/tabbar/mine.png',
		iconActive: '/static/tabbar/mine-active.png'
	}
]

const LANGUAGE_MAP = {
	'zh-cn': {
		home: '首页',
		video: '视频',
		live: '直播',
		dynamics: '动态',
		mine: '我的'
	},
	'zh-Hant': {
		home: '首頁',
		video: '視頻',
		live: '直播',
		dynamics: '動態',
		mine: '我的'
	},
	en: {
		home: 'Home',
		video: 'Videos',
		live: 'Live',
		dynamics: 'Feed',
		mine: 'Me'
	}
}

function resolveLangCode(raw) {
	let code = raw
	if (!code || code === 'auto') {
		code = uni.getLocale() || 'zh-cn'
	}
	if (LANGUAGE_MAP[code]) return code
	if (code === 'zh-HK' || code === 'zh-TW' || String(code).indexOf('Hant') >= 0) {
		return 'zh-Hant'
	}
	if (String(code).indexOf('zh') === 0) return 'zh-cn'
	if (String(code).indexOf('en') === 0) return 'en'
	return 'zh-cn'
}

export default {
	name: 'AppTabbar',
	props: {
		active: { type: String, default: 'home' }
	},
	data() {
		return {
			safeBottom: 0,
			switching: false,
			labels: LANGUAGE_MAP['zh-Hant']
		}
	},
	computed: {
		tabs() {
			const L = this.labels || LANGUAGE_MAP['zh-cn']
			return TAB_DEFS.map((tab) => ({
				...tab,
				label: L[tab.labelId] || ''
			}))
		}
	},
	mounted() {
		this.initLanguageStrings()
		try {
			const info = uni.getSystemInfoSync()
			this.safeBottom = (info.safeAreaInsets && info.safeAreaInsets.bottom) || 0
		} catch (_) {
			this.safeBottom = 0
		}
		if (typeof uni.onLocaleChange === 'function') {
			uni.onLocaleChange(() => {
				this.initLanguageStrings()
			})
		}
	},
	methods: {
		initLanguageStrings() {
			const locale = uni.getLocale() || 'zh-cn'
			const savedLanguage = uni.getStorageSync(STORAGE.language)
			const currentLang = resolveLangCode(savedLanguage || locale)
			this.labels = LANGUAGE_MAP[currentLang] || LANGUAGE_MAP['zh-cn']
		},
		onTap(tab) {
			if (this.switching) return
			if (this.active === tab.id) return
			this.switching = true
			this.$nextTick(() => {
				try {
					uni.switchTab({
						url: tab.path,
						complete: () => {
							this.switching = false
						},
						fail: (err) => {
							console.warn('[AppTabbar] switchTab failed', tab.path, err)
						}
					})
				} catch (err) {
					this.switching = false
					console.warn('[AppTabbar] switchTab threw', err)
				}
			})
		}
	}
}
</script>

<style scoped>
.app-tabbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ffffff;
	border-top: 1rpx solid rgba(0, 0, 0, 0.06);
	box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.04);
	z-index: 9999;
}
.app-tabbar-inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 100rpx;
}
.tabbar-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.tabbar-icon {
	width: 48rpx;
	height: 48rpx;
}
.tabbar-pill {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 10rpx 28rpx;
	border-radius: 999rpx;
	background: linear-gradient(135deg, rgba(74, 140, 255, 0.14) 0%, rgba(74, 200, 255, 0.18) 100%);
	box-shadow: 0 4rpx 16rpx rgba(74, 140, 255, 0.16);
}
.tabbar-pill-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 8rpx;
}
.tabbar-pill-label {
	font-size: 24rpx;
	color: #4a8cff;
	font-weight: 600;
	line-height: 32rpx;
}
</style>
