<template>
	<div ref="ordersScrollRef" class="wardrobe-orders" @scroll="handleOrdersScroll">
		<div class="orders-toolbar">
			<button
				v-for="status in statusOptions"
				:key="status.key"
				class="orders-toolbar__chip"
				type="button"
				:class="{ 'is-active': activeStatus === status.key }"
				@click="setActiveStatus(status.key)"
			>
				{{ status.label }}
			</button>
		</div>

		<div class="orders-list" v-if="filteredOrders.length">
			<article v-for="order in filteredOrders" :key="order.orderId" class="order-card">
				<button
					class="order-card__toggle"
					type="button"
					@click="toggleOrder(order.orderId)"
				>
					<span :class="{ 'is-expanded': expandedOrderId === order.orderId }"></span>
				</button>

				<div class="order-card__summary">
					<div class="order-card__meta">
						<h3 class="order-card__id">{{ order.orderId }}</h3>
						<div class="brand flex align-center">
							<span class="icon">
								<svg-icon name="order-shop" size="24" />
							</span>
							<span class="text">{{ order.shopName }}</span>
						</div>
						<p class="order-card__date">{{ order.formatUpdatetime }}</p>
					</div>

					<div class="order-card__preview" aria-hidden="true">
						<span
							v-for="item in order.items.slice(0, 2)"
							:key="item.id"
							class="order-card__thumb"
							:style="{ backgroundImage: `url(${item.thumbnailUrl})` }"
						/>
						<span v-if="getExtraCount(order)" class="order-card__extra">
							{{ t('Wardrobe.orders.moreItems', { count: getExtraCount(order) }) }}
						</span>
					</div>

					<div class="order-card__status" :class="`is-${getOrderStatus(order)}`">
						{{ getStatusBadgeLabel(getOrderStatus(order)) }}
					</div>

					<div class="order-card__amount">
						<span>${{ order.totalPrice }}</span>
						<small>HKD</small>
					</div>

					<button
						class="order-card__action"
						type="button"
						:class="{ 'is-primary': getOrderStatus(order) === 'unpaid' }"
					>
						<svg-icon
							v-if="getOrderStatus(order) === 'paid'"
							name="Invoice"
							size="20"
							color="#232323"
						/>
						<span>{{ getOrderActionLabel(getOrderStatus(order)) }}</span>
					</button>
				</div>

				<div v-if="expandedOrderId === order.orderId" class="order-card__details">
					<ScItem
						v-for="item in order.items"
						:key="item.id"
						class="order-card__item"
						:info="getOrderItemInfo(item, order)"
						:show-date="false"
						:show-remove="false"
						:show-brand="false"
						order-actions-layout
					/>
				</div>
			</article>
		</div>
		<Empty v-else />
	</div>
</template>

<script setup lang="ts">
	import { computed, onMounted, ref, shallowRef } from 'vue'
	import { useI18n } from 'vue-i18n'
	import { fetchMyOrders } from '@/api/user'
	import ScItem from '@/views/shoppingCart/sc-item.vue'
	import Empty from './Empty.vue'

	type OrderStatus = 'all' | 'paid' | 'unpaid' | 'cancelled'
	type ActualOrderStatus = Exclude<OrderStatus, 'all'>

	interface StatusOption {
		key: OrderStatus
		label: string
		value?: number
	}

	interface OrderItem {
		id: string
		listingName: string
		price: number
		productCategory: string[]
		thumbnailUrl: string
		orderId: string
		shopName: string
		status: number
		totalPrice: number
		updateTime: string
	}

	interface OrderRecord {
		orderId: string
		shopName: string
		totalPrice: number
		updateTime: string
		items: OrderItem[]
	}

	interface DisplayOrderRecord extends OrderRecord {
		formatUpdatetime: string
	}

	const { t, locale } = useI18n({ useScope: 'global' })

	const statusOptions = computed<StatusOption[]>(() => [
		{ key: 'all', label: t('Wardrobe.orders.statuses.all') },
		{ key: 'paid', label: t('Wardrobe.orders.statuses.paid'), value: 1 },
		{ key: 'unpaid', label: t('Wardrobe.orders.statuses.unpaid'), value: 0 },
		{ key: 'cancelled', label: t('Wardrobe.orders.statuses.cancelled'), value: 2 }
	])

	const activeStatus = shallowRef<OrderStatus>('all')
	const expandedOrderId = shallowRef('')
	const orders = ref<OrderRecord[]>([])
	const ordersScrollRef = ref<HTMLElement | null>(null)
	const isLoadingOrders = shallowRef(false)
	const hasMoreOrders = shallowRef(true)
	const ordersRequestId = shallowRef(0)
	const orderParams = ref({
		page: 1,
		size: 10
	})

	const filteredOrders = computed<DisplayOrderRecord[]>(() => {
		return orders.value.map((order) => ({
			...order,
			formatUpdatetime: formatOrderUpdateTime(order.updateTime)
		}))
	})

	const toggleOrder = (orderId: string) => {
		expandedOrderId.value = expandedOrderId.value === orderId ? '' : orderId
	}

	const getExtraCount = (order: OrderRecord) => {
		return Math.max(order.items.length - 2, 0)
	}

	const getStatusBadgeLabel = (status: ActualOrderStatus) => {
		return t(`Wardrobe.orders.statusBadges.${status}`)
	}

	const getOrderActionLabel = (status: ActualOrderStatus) => {
		if (status === 'paid') return t('Wardrobe.orders.actions.invoice')
		if (status === 'unpaid') return t('Wardrobe.orders.actions.completePayment')
		return t('Wardrobe.orders.actions.buyAgain')
	}

	const getOrderStatusValue = (status: unknown): ActualOrderStatus => {
		if (status === 0 || status === '0' || status === 'unpaid') return 'unpaid'
		if (status === 2 || status === '2' || status === 'cancelled') return 'cancelled'
		return 'paid'
	}

	const getOrderStatus = (order: OrderRecord) => {
		return getOrderStatusValue(order.status)
	}

	const formatOrderUpdateTime = (dateStr: string) => {
		if (!dateStr) return ''

		const date = new Date(dateStr)
		if (Number.isNaN(date.getTime())) return dateStr

		const isChinese = locale.value === 'CHINESE_SIMPLIFIED' || locale.value.startsWith('zh')
		const dateLocale = isChinese ? 'zh-CN' : 'en-US'
		const options: Intl.DateTimeFormatOptions = isChinese
			? {
					year: 'numeric',
					month: 'long',
					day: 'numeric',
					hour: '2-digit',
					minute: '2-digit',
					hour12: false
			  }
			: {
					month: 'short',
					day: 'numeric',
					year: 'numeric',
					hour: 'numeric',
					minute: '2-digit',
					hour12: true
			  }

		return new Intl.DateTimeFormat(dateLocale, options).format(date)
	}

	const getOrderItemInfo = (item: OrderItem, order: OrderRecord) => ({
		status: item.status,
		title: item.listingName,
		brand: order.shopName,
		tags: item.productCategory,
		date: item.updateTime,
		amount: item.price,
		cover: item.thumbnailUrl
	})

	const fetchAllOrders = async () => {
		if (isLoadingOrders.value || !hasMoreOrders.value) return

		const requestId = ordersRequestId.value
		isLoadingOrders.value = true

		try {
			const params: { page: number; size: number; status?: number } = {
				page: orderParams.value.page,
				size: orderParams.value.size
			}
			const currentStatus = statusOptions.value.find(
				(option) => option.key === activeStatus.value
			)

			if (currentStatus?.value !== undefined) {
				params.status = currentStatus.value
			}

			const res = await fetchMyOrders(params)
			if (requestId !== ordersRequestId.value) return

			const content = res.content ?? []

			orders.value = orderParams.value.page === 1 ? content : [...orders.value, ...content]
			hasMoreOrders.value = content.length >= orderParams.value.size

			if (hasMoreOrders.value) {
				orderParams.value.page += 1
			}
		} finally {
			if (requestId === ordersRequestId.value) {
				isLoadingOrders.value = false
			}
		}
	}

	const resetOrders = () => {
		ordersRequestId.value += 1
		orders.value = []
		expandedOrderId.value = ''
		isLoadingOrders.value = false
		hasMoreOrders.value = true
		orderParams.value.page = 1

		if (ordersScrollRef.value) {
			ordersScrollRef.value.scrollTop = 0
		}
	}

	const setActiveStatus = (status: OrderStatus) => {
		activeStatus.value = status
		resetOrders()
		fetchAllOrders()
	}

	const handleOrdersScroll = () => {
		const el = ordersScrollRef.value
		if (!el) return

		const reachBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 120
		if (reachBottom) {
			fetchAllOrders()
		}
	}

	onMounted(() => {
		fetchAllOrders()
	})
</script>

<style lang="less" scoped>
	.c-svg {
		width: fit-content;
		height: initial;
	}
	.wardrobe-orders {
		height: 100%;
		min-height: 0;
		display: flex;
		flex-direction: column;
		padding: 0 9rem;
		overflow-y: auto;

		.orders-toolbar {
			display: flex;
			align-items: center;
			gap: 1.2rem;
			padding: 3.6rem 0 2.8rem;
			flex-wrap: wrap;

			.orders-toolbar__chip {
				height: 4rem;
				min-width: 8rem;
				padding: 0 3rem;
				border: 0.1rem solid #232323;
				border-radius: 2rem;
				background: #ffffff;
				font-family: 'KaiseiOpti-Regular';
				font-size: 1.6rem;
				color: #585858;
				font-weight: 400;
				cursor: pointer;

				&.is-active {
					background: #232323;
					border-color: #232323;
					color: #ffffff;
				}
			}
		}

		.orders-list {
			padding-bottom: 8rem;
		}
	}

	.order-card {
		position: relative;
		border-bottom: 0.1rem solid #c4c4c4;

		.order-card__toggle {
			position: absolute;
			top: 5.8rem;
			left: 4.2rem;
			width: 2rem;
			height: 2rem;
			padding: 0;
			border: 0;
			background: transparent;
			cursor: pointer;

			span {
				display: block;
				width: 0.9rem;
				height: 0.9rem;
				border-right: 0.1rem solid #585858;
				border-bottom: 0.1rem solid #585858;
				transform: rotate(-45deg);
				transition: transform 0.2s ease;

				&.is-expanded {
					transform: rotate(45deg);
				}
			}
		}

		.order-card__summary {
			min-height: 12.4rem;
			display: grid;
			grid-template-columns: 25rem minmax(24rem, 1fr) 14rem 12rem 18rem;
			align-items: center;
			column-gap: 2rem;
			padding-left: 9rem;

			.order-card__meta {
				.order-card__id {
					font-family: 'KaiseiOpti-Bold';
					font-size: 2rem;
					line-height: 3rem;
					color: #232323;
				}

				.order-card__date {
					margin: 0.8rem 0 0;
					font-family: 'KaiseiOpti-Regular';
					font-size: 1.4rem;
					color: #808080;
				}
				.brand {
					column-gap: 1rem;
				}
			}

			.order-card__preview {
				display: flex;
				align-items: center;

				.order-card__thumb {
					width: 8rem;
					height: 10rem;
					display: block;
					margin-right: 1.2rem;
					background-color: #f6f6f6;
					background-position: center;
					background-repeat: no-repeat;
					background-size: cover;
				}

				.order-card__extra {
					margin-left: 1.2rem;
					font-family: 'KaiseiOpti-Regular';
					font-size: 1.4rem;
					color: #808080;
				}
			}

			.order-card__status {
				justify-self: start;
				min-width: 8.8rem;
				height: 2.4rem;
				padding: 0 1.6rem;
				border-radius: 2.4rem;
				font-family: 'KaiseiOpti-Regular';
				font-size: 1.4rem;
				line-height: 2.4rem;
				text-align: center;

				&.is-paid {
					background: #e8f2ec;
					color: #769591;
				}

				&.is-unpaid {
					background: #fef3e2;
					color: #b48230;
				}

				&.is-cancelled {
					background: #fff2f2;
					color: #c65f5a;
				}
			}

			.order-card__amount {
				white-space: nowrap;
				color: #232323;
				font-family: 'KaiseiOpti-Bold';

				span {
					font-size: 2rem;
				}

				small {
					margin-left: 0.4rem;
					font-size: 1.4rem;
				}
			}

			.order-card__action {
				justify-self: center;
				width: 14rem;
				height: 3.8rem;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				gap: 1rem;
				border: 0.1rem solid #c4c4c4;
				background: #f6f6f6;
				font-family: 'KaiseiOpti-Bold';
				font-size: 1.6rem;
				color: #232323;
				cursor: pointer;

				&.is-primary {
					width: 16rem;
					border-color: #232323;
					background: #232323;
					color: #ffffff;
					font-size: 1.4rem;
				}
			}
		}

		> .order-card__details {
			margin-left: 9rem;
			padding: 0 2.4rem;
			background: #fafafa;

			:deep(.sc-item) {
				--sc-item-img-width: 9.5rem;
				--sc-item-img-height: 12rem;
				--sc-item-padding: 1.2rem 2.4rem;
				--sc-item-content-margin: 0 4rem;
				--sc-item-title-font-size: 2rem;
				--sc-item-brand-font-size: 1.4rem;
				--sc-item-amount-font-size: 2.2rem;
				--sc-item-currency-font-size: 1.2rem;
				--sc-item-tag-min-width: 8.8rem;
				--sc-item-tag-height: 2.4rem;
				--sc-item-tag-radius: 2.4rem;
				--sc-item-tag-font-size: 1.4rem;
				--sc-item-order-amount-width: 12rem;
				--sc-item-order-action-width: 18rem;
				--sc-item-order-column-gap: 2rem;
				--sc-item-order-actions-offset: 4.8rem;
				border-bottom-color: #e2e2e2;
			}

			:deep(.sc-item:last-child) {
				border-bottom: 0;
			}
		}
	}
</style>
