<template>
	<n-modal
		v-model:show="show"
		preset="card"
		:title="$t('Billing Details')"
		:style="modalStyle"
		:mask-closable="true"
		:close-on-esc="true"
		class="billing-details-modal"
	>
		<template #header>
			<span class="text-lg font-semibold">{{ $t('Billing Details') }}</span>
		</template>
		<n-space vertical :size="20">
			<n-alert
				v-if="showMessage"
				type="info"
				:title="$t('Information')"
				closable
			>
				{{ $t('Please add billing details to your account before continuing.') }}
			</n-alert>
			<BillingDetails
				ref="billingRef"
				@success="
					() => {
						show = false;
						emit('success');
					}
				"
			/>
		</n-space>
	</n-modal>
</template>
<script setup>
import { NModal, NSpace, NAlert } from 'naive-ui';
import { computed, ref, onMounted, onUnmounted } from 'vue';
import BillingDetails from './BillingDetails.vue';

const props = defineProps({
	showMessage: {
		type: Boolean,
		default: false
	}
});

const emit = defineEmits(['success']);
const show = defineModel();
const billingRef = ref(null);
const windowWidth = ref(window.innerWidth);

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

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

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

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

<style scoped>
:deep(.billing-details-modal .n-card) {
	width: 700px;
	max-width: 90vw;
}

:deep(.billing-details-modal .n-card-body) {
	padding: 24px;
}

@media (max-width: 768px) {
	:deep(.billing-details-modal .n-card) {
		width: 95vw !important;
		max-width: 95vw !important;
		margin: 20px auto;
		border-radius: 12px;
	}

	:deep(.billing-details-modal .n-card-body) {
		padding: 20px 16px;
	}

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