<template>
	<div class="billing-container">
		<Header>
			<n-breadcrumb>
				<n-breadcrumb-item>
					<router-link :to="{ name: 'Billing' }">
						{{ $t('Billing') }}
					</router-link>
				</n-breadcrumb-item>
			</n-breadcrumb>
		</Header>
		<div v-if="$team?.pg?.is_desk_user || $session.hasBillingAccess" class="billing-content">
			<n-tabs
				v-model:value="activeTab"
				type="line"
				animated
				:size="isMobile ? 'medium' : 'large'"
				class="billing-tabs"
			>
				<n-tab-pane
					v-for="tab in filteredTabs"
					:key="tab.route.name"
					:name="tab.route.name"
					:tab="tab.label"
				>
					<router-view :tab="tab" />
				</n-tab-pane>
			</n-tabs>
		</div>
		<div v-else class="no-permission-container">
			<n-result
				status="403"
				:title="$t('Access Denied')"
				:description="$t('You do not have permission to view the billing page')"
			>
				<template #icon>
					<i-lucide-alert-triangle class="h-12 w-12 text-red-600" />
				</template>
			</n-result>
		</div>
	</div>
</template>
<script setup>
import { computed, ref, onMounted, onUnmounted, getCurrentInstance } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { NTabs, NTabPane, NBreadcrumb, NBreadcrumbItem, NResult } from 'naive-ui';
import Header from '../components/Header.vue';

const instance = getCurrentInstance();
const $t = instance?.appContext.config.globalProperties.$t || ((key) => key);
const $team = instance?.appContext.config.globalProperties.$team;
const $session = instance?.appContext.config.globalProperties.$session;

const route = useRoute();
const router = useRouter();

const windowWidth = ref(window.innerWidth);
const isMobile = computed(() => windowWidth.value <= 768);

const tabs = [
	{ label: $t('Overview'), route: { name: 'BillingOverview' } },
	{ label: $t('Order Records'), route: { name: 'BillingOrders' } },
	{ label: $t('Balance Details'), route: { name: 'BillingBalances' } },
	{
		label: $t('Developer Earnings'),
		route: { name: 'BillingMarketplacePayouts' },
		requireDeveloper: true,
		requirePro: true
	},
];

const filteredTabs = computed(() => {
	return tabs.filter(tab => {
		// 如果需要开发者权限但用户不是开发者，则隐藏
		if (tab.requireDeveloper && !$team.pg.is_developer) {
			return false;
		}
		
		// 如果需要专业版权限但用户不是专业版用户，则隐藏
		if (tab.requirePro && !$team.pg.is_pro) {
			return false;
		}
		
		return true;
	});
});

const activeTab = computed({
	get() {
		return route.name || 'BillingOverview';
	},
	set(value) {
		router.push({ name: value });
	}
});

function handleResize() {
	windowWidth.value = window.innerWidth;
}

onMounted(() => {
	handleResize();
	window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
	window.removeEventListener('resize', handleResize);
});
</script>

<style scoped>
.billing-container {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.billing-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.billing-tabs {
	flex: 1;
	display: flex;
	flex-direction: column;
}

:deep(.n-tabs-nav) {
	padding: 0 24px;
	background: white;
	border-bottom: 1px solid var(--n-border-color);
}

:deep(.n-tabs-tab) {
	padding: 12px 16px;
	font-size: 15px;
	font-weight: 500;
}

:deep(.n-tabs-tab--active) {
	color: var(--n-color);
}

:deep(.n-tab-pane) {
	padding: 0;
	overflow-y: auto;
}

.no-permission-container {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 400px;
	padding: 24px;
}

@media (max-width: 768px) {
	:deep(.n-tabs-nav) {
		padding: 0 16px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	:deep(.n-tabs-tab) {
		padding: 10px 12px;
		font-size: 14px;
		white-space: nowrap;
	}

	:deep(.n-tabs-nav-scroll-content) {
		display: flex;
	}
}
</style>