<template>
	<div class="billing-overview-container">
		<div v-if="team.pg" class="billing-overview-content">
			<PaymentDetails />
		</div>
		<div v-else class="loading-container">
			<n-spin size="large" />
		</div>
	</div>
</template>

<script setup>
import { computed, provide, inject, onMounted, onUnmounted, ref } from 'vue';
import { NSpin } from 'naive-ui';
import PaymentDetails from '../components/billing/PaymentDetails.vue';
import { createResource } from 'jingrow-ui';

const team = inject('team');

const upcomingInvoice = createResource({
	url: 'jcloud.api.billing.upcoming_invoice',
	cache: 'upcomingInvoice',
	auto: true
});

const unpaidInvoices = createResource({
	url: 'jcloud.api.billing.get_unpaid_invoices',
	cache: ['unpaidInvoices', team.name],
	auto: true
});

provide('billing', {
	upcomingInvoice,
	availableCredits: computed(() => upcomingInvoice.data?.available_credits),
	currentBillingAmount: computed(
		() => upcomingInvoice.data?.upcoming_invoice?.total
	),
	unpaidInvoices
});
</script>

<style scoped>
.billing-overview-container {
	width: 100%;
	min-height: 100%;
}

.billing-overview-content {
	padding: 24px;
	width: 100%;
}

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

@media (max-width: 768px) {
	.billing-overview-content {
		padding: 16px;
	}
}
</style>