<template>
	<view class="container">
		<view class="filter-tabs">
			<view
				v-for="(item, index) in filterOptions"
				:key="index"
				class="tab-item"
				:class="{ active: filterIndex === index }"
				@tap="onFilterChange(index)"
			>
				{{ item.label }}
				<view v-if="filterIndex === index" class="tab-line"></view>
			</view>
		</view>

		<scroll-view scroll-y class="scroll-container" @scrolltolower="loadMore">
			<view v-if="orderList.length === 0 && !loading" class="empty-state">
				<view class="empty-icon">ORD</view>
				<view class="empty-title">暂无订单</view>
				<view class="empty-desc">当前账号下暂无订单信息</view>
			</view>

			<view v-else class="order-list">
				<view class="order-card" v-for="item in orderList" :key="item.order_id">
					<view class="card-header">
						<view class="header-left">
							<view class="header-row">
								<text class="field-tag">订单号</text>
								<text class="order-no">{{ item.order_no }}</text>
							</view>
						</view>
						<view class="status-badge" :class="getStatusClass(item.payment_status)">
							{{ item.payment_status_name }}
						</view>
					</view>

					<view class="card-body">
						<view class="info-grid">
							<view class="info-item">
								<view class="info-label">套餐名称</view>
								<view class="info-value">
									<view class="package-item" v-for="(pkgName, pkgIndex) in item.package_names" :key="pkgIndex">
										<text class="package-name">{{ pkgName }}</text>
									</view>
								</view>
							</view>
							<view class="info-item">
								<view class="info-label">订单金额</view>
								<view class="info-value amount">¥{{ formatMoney(item.total_amount) }}</view>
							</view>
							<view class="info-item">
								<view class="info-label">下单时间</view>
								<view class="info-value">{{ item.created_at }}</view>
							</view>
						</view>

						<view v-if="item.payment_status === 1" class="card-footer">
							<button class="btn-pay" :disabled="orderPayingId !== null" @tap="showOrderPaymentMethods(item)">
								{{ isOrderPaying(item) ? '处理中...' : '立即支付' }}
							</button>
						</view>
					</view>
				</view>

				<view class="load-more" v-if="orderList.length > 0">
					<text v-if="loading">加载中...</text>
					<text v-else-if="noMore">没有更多了</text>
					<text v-else>上拉加载更多</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import { ref, reactive, onMounted, computed } from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	import { assetApi, orderApi } from '@/api/index.js';
	import { useUserStore } from '@/store/index.js';
	import {
		consumePendingPaymentRefresh,
		handlePaymentError,
		isValidAlipayPaymentLink,
		isValidWechatPayConfig,
		openAlipayPayment,
		PAYMENT_REFRESH_TARGETS,
		showPaymentToast,
		wechatH5Pay
	} from '@/utils/payment.js';

	const userStore = useUserStore();

	const orderList = reactive([]);
	const loading = ref(false);
	const noMore = ref(false);
	const page = ref(1);
	const orderPayingId = ref(null);
	const pageSize = 10;
	const filterIndex = ref(0);
	const isDeviceAsset = ref(true);
	let assetTypePromise = null;
	const paymentMethodOptions = computed(() => [
		{ label: '支付宝支付', value: 'alipay' },
		{ label: '钱包支付', value: 'wallet' }
	]);
	const filterOptions = [
		{ label: '全部', value: null },
		{ label: '待支付', value: 1 },
		{ label: '已支付', value: 2 },
		{ label: '已取消', value: 3 },
		{ label: '已退款', value: 4 }
	];

	const formatMoney = (amount) => {
		if (!amount && amount !== 0) return '0.00';
		return (amount / 100).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
	};

	const getStatusClass = (status) => {
		const classMap = {
			1: 'tag-warning',
			2: 'tag-success',
			3: 'tag-secondary',
			4: 'tag-info'
		};
		return classMap[status] || '';
	};

	const loadAssetType = async () => {
		if (!userStore.state.identifier) return;
		if (assetTypePromise) return assetTypePromise;

		assetTypePromise = assetApi.getInfo(userStore.state.identifier)
			.then((data) => {
				isDeviceAsset.value = data.asset_type === 'device';
			})
			.catch((error) => {
				console.error('加载资产类型失败', error);
			})
			.finally(() => {
				assetTypePromise = null;
			});

		return assetTypePromise;
	};

	const resetOrderListAndLoad = () => {
		page.value = 1;
		noMore.value = false;
		loadOrderList();
	};

	const scheduleOrderStatusRefresh = () => {
		uni.showToast({
			title: '正在同步支付状态',
			icon: 'none'
		});
		resetOrderListAndLoad();
		setTimeout(() => {
			resetOrderListAndLoad();
		}, 1500);
		setTimeout(() => {
			resetOrderListAndLoad();
		}, 3000);
	};

	const onFilterChange = (index) => {
		filterIndex.value = index;
		resetOrderListAndLoad();
	};

	const loadOrderList = async (append = false) => {
		if (loading.value || (append && noMore.value)) return;

		loading.value = true;
		const paymentStatus = filterOptions[filterIndex.value].value;

		try {
			const data = await orderApi.getList(
				userStore.state.identifier,
				page.value,
				pageSize,
				paymentStatus
			);

			const newData = (data.items || []).map((item) => ({
				...item,
				payment_status_name: item.payment_status === 1
					? '待支付'
					: item.payment_status === 2
						? '已支付'
						: item.payment_status === 3
							? '已取消'
							: item.payment_status === 4
								? '已退款'
								: '未知',
				created_at: item.created_at ? item.created_at.split('T').join(' ').slice(0, 19) : ''
			}));

			if (append) {
				orderList.push(...newData);
			} else {
				orderList.splice(0, orderList.length, ...newData);
			}

			if (newData.length < pageSize) {
				noMore.value = true;
			} else {
				page.value += 1;
			}
		} catch (error) {
			console.error('加载订单列表失败', error);
		}

		loading.value = false;
	};

	const loadMore = () => {
		if (!noMore.value) {
			loadOrderList(true);
		}
	};

	const isOrderPaying = (order) => orderPayingId.value === order.order_id;

	const showOrderPaymentMethods = async (order) => {
		if (orderPayingId.value !== null || !order?.order_id) return;
		await loadAssetType();
		const options = paymentMethodOptions.value;

		uni.showActionSheet({
			itemList: options.map((item) => item.label),
			success: ({ tapIndex }) => {
				const selectedMethod = options[tapIndex]?.value;
				if (selectedMethod) {
					handleOrderPayment(order, selectedMethod);
				}
			}
		});
	};

	const handleOrderPayment = async (order, paymentMethod) => {
		if (orderPayingId.value !== null || !order?.order_id) return;

		orderPayingId.value = order.order_id;
		uni.showLoading({
			title: '处理中...',
			mask: true
		});

		try {
			const payData = await orderApi.pay(order.order_id, paymentMethod);
			uni.hideLoading();

			if (paymentMethod === 'wallet') {
				showPaymentToast(true, '支付成功');
				setTimeout(() => {
					resetOrderListAndLoad();
				}, 1500);
				return;
			}

			if (paymentMethod === 'wechat') {
				if (!isValidWechatPayConfig(payData?.pay_config)) {
					uni.showToast({
						title: '支付参数获取失败',
						icon: 'none'
					});
					return;
				}

				try {
					await wechatH5Pay(payData.pay_config);
					showPaymentToast(true, '支付成功');
					setTimeout(() => {
						resetOrderListAndLoad();
					}, 1500);
				} catch (error) {
					handlePaymentError(error);
				}
				return;
			}

			if (!isValidAlipayPaymentLink(payData?.payment_link)) {
				uni.showToast({
					title: '支付链接获取失败',
					icon: 'none'
				});
				return;
			}

			await openAlipayPayment(payData.payment_link, PAYMENT_REFRESH_TARGETS.ORDER_LIST);
		} catch (error) {
			uni.hideLoading();
			console.error('订单支付失败', error);
			uni.showToast({
				title: error.msg || error.message || '支付失败，请稍后重试',
				icon: 'none'
			});
		} finally {
			orderPayingId.value = null;
		}
	};

	onShow(() => {
		if (!consumePendingPaymentRefresh(PAYMENT_REFRESH_TARGETS.ORDER_LIST)) {
			return;
		}

		scheduleOrderStatusRefresh();
	});

	onMounted(() => {
		loadAssetType();
		loadOrderList();
	});
</script>

<style lang="scss" scoped>
	.container {
		position: fixed;
		top: var(--window-top);
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		background: var(--bg-secondary);
		max-width: 750rpx;
		margin: 0 auto;
		width: 100%;
		box-sizing: border-box;
		padding-top: 0;
	}

	.filter-tabs {
		display: flex;
		background: #fff;
		border-radius: 20rpx;
		z-index: 100;
		flex-shrink: 0;
		margin-top: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);

		.tab-item {
			position: relative;
			flex: 1;
			text-align: center;
			font-size: 28rpx;
			color: #999;
			padding: 28rpx 0;
			transition: all 0.2s;

			&.active {
				color: #333;
				font-weight: 600;
				font-size: 30rpx;
			}

			.tab-line {
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 48rpx;
				height: 6rpx;
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
				border-radius: 3rpx;
			}
		}
	}

	.scroll-container {
		flex: 1;
		height: 100%;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 200rpx 40rpx;

		.empty-icon {
			font-size: 56rpx;
			margin-bottom: 30rpx;
			opacity: 0.6;
			letter-spacing: 4rpx;
		}

		.empty-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 16rpx;
		}

		.empty-desc {
			font-size: 26rpx;
			color: #999;
			text-align: center;
		}
	}

	.order-card {
		background: #fff;
		border-radius: 20rpx;
		margin-bottom: 24rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);

		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			padding: 28rpx 28rpx 24rpx;
			border-bottom: 1rpx solid #f0f0f0;

			.header-left {
				display: flex;
				flex-direction: column;
				gap: 10rpx;
			}

			.header-row {
				display: flex;
				align-items: center;
				gap: 12rpx;
			}

			.field-tag {
				font-size: 20rpx;
				color: #999;
				background: #f5f6f7;
				padding: 2rpx 10rpx;
				border-radius: 4rpx;
			}

			.order-no {
				font-size: 26rpx;
				font-weight: 600;
				color: #333;
				font-family: monospace;
			}
		}

		.card-body {
			padding: 24rpx 28rpx;

			.info-grid {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 20rpx;

				.info-item {
					.info-label {
						font-size: 22rpx;
						color: #999;
						margin-bottom: 8rpx;
					}

					.info-value {
						font-size: 26rpx;
						color: #333;

						&.amount {
							color: #ff6b6b;
							font-weight: 700;
							font-size: 30rpx;
						}
					}
				}
			}

			.package-item {
				display: flex;
				align-items: center;
				padding: 8rpx 0;
			}

			.package-name {
				font-size: 26rpx;
				color: #333;
			}

			.card-footer {
				margin-top: 24rpx;
				padding-top: 24rpx;
				border-top: 1rpx solid #f0f0f0;
				display: flex;
				justify-content: flex-end;

				.btn-pay {
					background: #1890ff;
					color: #fff;
					border: none;
					border-radius: 20rpx;
					padding: 16rpx 40rpx;
					font-size: 26rpx;
					font-weight: 500;
					width: 100%;

					&[disabled] {
						opacity: 0.7;
					}

					&::after {
						border: none;
					}
				}
			}
		}
	}

	.status-badge {
		padding: 8rpx 20rpx;
		border-radius: 30rpx;
		font-size: 22rpx;
		font-weight: 500;

		&.tag-warning {
			background: #fff7e6;
			color: #fa8c16;
		}

		&.tag-success {
			background: #e6f7ff;
			color: #1890ff;
		}

		&.tag-secondary {
			background: #f5f5f5;
			color: #999;
		}

		&.tag-info {
			background: #f0f0f0;
			color: #666;
		}
	}

	.load-more {
		text-align: center;
		padding: 32rpx;
		color: #999;
		font-size: 24rpx;
	}
</style>
