<template>
	<n-modal
		v-model:show="showDialog"
		preset="card"
		:title="selectedWebhookAttemptId ? $t('Webhook Attempt - {id}', { id: selectedWebhookAttemptId }) : $t('Webhook Attempts')"
		:style="modalStyle"
		:mask-closable="true"
		:close-on-esc="true"
		class="webhook-attempts-modal"
	>
		<template #header>
			<span class="text-lg font-semibold">
				{{ selectedWebhookAttemptId ? $t('Webhook Attempt - {id}', { id: selectedWebhookAttemptId }) : $t('Webhook Attempts') }}
			</span>
		</template>
		<n-space vertical :size="20">
			<n-alert type="info" v-if="!selectedWebhookAttemptId">
				<template #header>
					<strong>{{ $t('Note') }}:</strong>
				</template>
				{{ $t('You can only view logs from the past 24 hours') }}
			</n-alert>
			<ObjectList :options="listOptions" v-if="!selectedWebhookAttemptId" />
			<n-button
				v-if="selectedWebhookAttemptId"
				@click="selectedWebhookAttemptId = null"
				:size="buttonSize"
			>
				<template #icon>
					<n-icon><ArrowLeftIcon /></n-icon>
				</template>
				{{ $t('Back') }}
			</n-button>
			<WebhookAttemptDetails
				:id="selectedWebhookAttemptId"
				v-if="selectedWebhookAttemptId"
			/>
		</n-space>
	</n-modal>
</template>

<script>
import {
	NModal,
	NSpace,
	NAlert,
	NButton,
	NIcon,
} from 'naive-ui';
import { Badge } from 'jingrow-ui';
import { h } from 'vue';
import ObjectList from '../ObjectList.vue';
import WebhookAttemptDetails from './WebhookAttemptDetails.vue';
import ArrowLeftIcon from '~icons/lucide/arrow-left';

export default {
	components: {
		NModal,
		NSpace,
		NAlert,
		NButton,
		NIcon,
		ObjectList,
		WebhookAttemptDetails,
		ArrowLeftIcon,
	},
	name: 'WebhookAttempts',
	props: {
		name: {
			type: String,
			required: true
		},
		modelValue: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			selectedWebhookAttemptId: null,
			windowWidth: window.innerWidth,
		};
	},
	computed: {
		showDialog: {
			get() {
				return this.modelValue;
			},
			set(value) {
				this.$emit('update:modelValue', value);
			}
		},
		isMobile() {
			return this.windowWidth <= 768;
		},
		modalStyle() {
			return {
				width: this.isMobile ? '95vw' : '1200px',
				maxWidth: this.isMobile ? '95vw' : '90vw',
			};
		},
		buttonSize() {
			return this.isMobile ? 'medium' : 'medium';
		},
		listOptions() {
			return {
				data: () => this.$resources?.attempts?.data || [],
				columns: [
					{
						label: this.$t('Event'),
						fieldname: 'event',
						width: 0.25
					},
					{
						label: this.$t('Endpoint'),
						fieldname: 'endpoint',
						width: 0.5,
						format: value => value.substring(0, 50)
					},
					{
						label: this.$t('Status'),
						fieldname: 'status',
						width: 0.1,
						type: 'Component',
						component({ row }) {
							return row.status === 'Sent'
								? h(Badge, {
										label: row.status,
										theme: 'green'
								  })
								: h(Badge, {
										label: row.status,
										theme: 'red'
								  });
						}
					},
					{
						label: this.$t('Code'),
						fieldname: 'response_status_code',
						width: 0.1,
						format: val => {
							if (!val || parseInt(val) === 0) return '-';
							return val;
						},
						align: 'center'
					},
					{
						label: this.$t('Timestamp'),
						fieldname: 'timestamp',
						width: 0.3,
						format(value) {
							return new Date(value).toLocaleString();
						}
					}
				],
				onRowClick: row => {
					this.selectedWebhookAttemptId = row.name;
				}
			};
		}
	},
	mounted() {
		this.handleResize();
		window.addEventListener('resize', this.handleResize);
	},
	beforeUnmount() {
		window.removeEventListener('resize', this.handleResize);
	},
	methods: {
		handleResize() {
			this.windowWidth = window.innerWidth;
		}
	},
	resources: {
		attempts() {
			return {
				url: 'jcloud.api.webhook.attempts',
				params: {
					webhook: this.$props.name
				},
				inititalData: [],
				auto: true
			};
		}
	}
};
</script>

<style scoped>
:deep(.webhook-attempts-modal .n-card) {
	width: 1200px;
	max-width: 90vw;
}

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

:deep(.webhook-attempts-modal .n-card__action) {
	padding: 16px 24px;
}

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

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

	:deep(.webhook-attempts-modal .n-card__header) {
		padding: 16px;
		font-size: 18px;
	}

	:deep(.webhook-attempts-modal .n-card__action) {
		padding: 12px 16px;
	}
}
</style>
