<template>
	<div class="billing-marketplace-payouts-container">
		<n-card class="payouts-card">
			<ObjectList :options="options" />
		</n-card>
		<n-modal
			v-model:show="payoutDialog"
			preset="card"
			:title="showPayout?.name"
			:style="modalStyle"
			:mask-closable="true"
			:close-on-esc="true"
			class="payout-dialog"
		>
			<template #header>
				<span class="text-lg font-semibold">{{ showPayout?.name }}</span>
			</template>
			<template v-if="showPayout">
				<n-empty
					v-if="showPayout.status === 'Empty'"
					:description="$t('No content to display')"
				/>
				<PayoutTable v-else :payoutId="showPayout.name" />
			</template>
		</n-modal>
	</div>
</template>
<script setup>
import { ref, computed, onMounted, onUnmounted, getCurrentInstance } from 'vue';
import { NCard, NModal, NEmpty } from 'naive-ui';
import ObjectList from '../components/ObjectList.vue';
import PayoutTable from '../components/PayoutTable.vue';

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

const props = defineProps(['tab']);

const payoutDialog = ref(false);
const showPayout = ref(null);
const windowWidth = ref(window.innerWidth);

const isMobile = computed(() => windowWidth.value <= 768);
const modalStyle = computed(() => ({
	width: isMobile.value ? '95vw' : '1200px',
	maxWidth: isMobile.value ? '95vw' : '90vw',
}));

const options = computed(() => {
	return {
		pagetype: 'Payout Order',
		fields: [
			'period_end',
			'mode_of_payment',
			'status',
			'net_total_cny',
			'net_total_usd'
		],
		filterControls: () => {
			return [
				{
					type: 'select',
					label: $t('Status'),
					class: !isMobile.value ? 'w-36' : '',
					fieldname: 'status',
					options: [
						{ label: '', value: '' },
						{ label: $t('Pending Settlement'), value: 'Draft' },
						{ label: $t('Paid'), value: 'Paid' },
						{ label: $t('Settled'), value: 'Commissioned' }
					]
				}
			];
		},
		orderBy: 'creation desc',
		columns: [
			{
				label: $t('Date'),
				fieldname: 'period_end',
				format(value) {
					return Intl.DateTimeFormat('en-US', {
						year: 'numeric',
						month: 'short',
						day: 'numeric'
					}).format(new Date(value));
				}
			},
			{ label: $t('Payment Method'), fieldname: 'mode_of_payment' },
			{ label: $t('Status'), fieldname: 'status', type: 'Badge' },
			{
				label: $t('Total'),
				fieldname: 'net_total_cny',
				align: 'right',
				format: (_, row) => {
					let total = 0;
					const $format = instance?.appContext.config.globalProperties.$format;
					if ($team.pg.currency === 'CNY') {
						total = row.net_total_cny + row.net_total_usd * 82;
					} else {
						total = row.net_total_cny / 82 + row.net_total_usd;
					}

					return $format?.userCurrency(total) || total;
				}
			}
		],
		onRowClick: row => {
			showPayout.value = row;
			payoutDialog.value = true;
		}
	};
});

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

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

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

<style scoped>
.billing-marketplace-payouts-container {
	padding: 24px;
	width: 100%;
}

.payouts-card {
	border-radius: 12px;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

:deep(.payout-dialog .n-card) {
	width: 1200px;
	max-width: 90vw;
}

:deep(.payout-dialog .n-card-body) {
	padding: 24px;
}

@media (max-width: 768px) {
	.billing-marketplace-payouts-container {
		padding: 16px;
	}

	:deep(.payout-dialog .n-card) {
		width: 95vw !important;
		max-width: 95vw !important;
		margin: 20px auto;
		border-radius: 12px;
	}

	:deep(.payout-dialog .n-card-body) {
		padding: 20px 16px;
	}

	:deep(.payout-dialog .n-card__header) {
		padding: 16px;
		font-size: 18px;
	}
}
</style>