<template>
	<view class="container">
		<view v-if="!exchangeData && !loading" class="empty-state">
			<view class="empty-icon"></view>
			<view class="empty-title">暂无换货记录</view>
			<view class="empty-desc">当前账号下暂无换货记录</view>
		</view>

		<view v-else-if="exchangeData" class="card exchange-card">
			<view class="exchange-header flex-row-sb">
				<view class="exchange-no">{{ exchangeData.exchange_no }}</view>
				<view class="tag-apple" :class="getStatusClass(exchangeData.status)">
					{{ exchangeData.status_text }}
				</view>
			</view>

			<view class="exchange-info">
				<view class="info-row flex-row-sb">
					<view class="info-label">换货类型</view>
					<view class="info-value">{{ exchangeData.flow_type_name || '物流换货' }}</view>
				</view>
				<view class="info-row flex-row-sb">
					<view class="info-label">换货原因</view>
					<view class="info-value">{{ exchangeData.exchange_reason }}</view>
				</view>
				<view class="info-row flex-row-sb">
					<view class="info-label">申请时间</view>
					<view class="info-value">{{ formatTime(exchangeData.created_at) }}</view>
				</view>
				<view class="info-row flex-row-sb" v-if="exchangeData.shipped_at">
					<view class="info-label">发货时间</view>
					<view class="info-value">{{ formatTime(exchangeData.shipped_at) }}</view>
				</view>
				<view class="info-row flex-row-sb" v-if="exchangeData.completed_at && exchangeData.status === 4">
					<view class="info-label">完成时间</view>
					<view class="info-value">{{ formatTime(exchangeData.completed_at) }}</view>
				</view>
				<view class="info-row flex-row-sb" v-if="exchangeData.recipient_name">
					<view class="info-label">收件人</view>
					<view class="info-value">{{ exchangeData.recipient_name }}</view>
				</view>
				<view class="info-row flex-row-sb" v-if="exchangeData.recipient_phone">
					<view class="info-label">联系电话</view>
					<view class="info-value">{{ exchangeData.recipient_phone }}</view>
				</view>
				<view class="info-row flex-row-sb" v-if="exchangeData.recipient_address">
					<view class="info-label">收货地址</view>
					<view class="info-value address-value">{{ exchangeData.recipient_address }}</view>
				</view>
			</view>

			<view class="exchange-actions" v-if="exchangeData.status === 1">
				<button class="btn-apple btn-primary" @tap="openPopup">填写信息</button>
			</view>
		</view>

		<up-popup :show="showPopup" mode="center" @close="handlePopupClose">
			<view class="popup-content">
				<view class="popup-title">填写换货信息</view>

				<view class="form-item">
					<view class="form-label">粘贴收货信息</view>
					<up-textarea
						v-model="form.raw_shipping_text"
						placeholder="可粘贴包含收件人、电话、地址的一整段文字"
						autoHeight
						:maxlength="-1"
						border="surround"
					/>
					<view class="form-helper">识别结果可继续手动修改</view>
					<view class="paste-action-row">
						<button class="btn-apple btn-secondary paste-action-btn" @tap="clearPastedText">
							清除
						</button>
						<button class="btn-apple btn-secondary paste-action-btn" @tap="fillFromPastedText">
							识别并填充
						</button>
					</view>
				</view>

				<view class="form-item">
					<view class="form-label">收件人姓名</view>
					<up-input
						v-model="form.recipient_name"
						placeholder="请输入收件人姓名"
						border="surround"
					/>
				</view>

				<view class="form-item">
					<view class="form-label">收件人电话</view>
					<up-input
						v-model="form.recipient_phone"
						placeholder="请输入收件人电话"
						border="surround"
					/>
				</view>

				<view class="form-item">
					<view class="form-label">所在地区</view>
					<view class="region-trigger" @tap="openAreaPicker">
						<text class="region-trigger-text" :class="{ placeholder: !regionDisplayText }">
							{{ regionDisplayText || '请选择省 / 市 / 区' }}
						</text>
					</view>
				</view>

				<view class="form-item">
					<view class="form-label">详细地址</view>
					<up-textarea
						v-model="form.recipient_address_detail"
						placeholder="请输入详细收货地址"
						autoHeight
						:maxlength="-1"
						border="surround"
					/>
				</view>

				<view class="popup-btn-group">
					<button class="btn-apple btn-secondary" @tap="handlePopupClose">取消</button>
					<button class="btn-apple btn-primary" @tap="submitExchange">提交</button>
				</view>
			</view>
		</up-popup>

		<up-picker
			:show="showAreaPicker"
			:columns="areaPickerColumns"
			keyName="label"
			title="选择所在地区"
			:defaultIndex="areaPickerDefaultIndex"
			closeOnClickOverlay
			@confirm="confirmAreaPicker"
			@change="handleAreaPickerChange"
			@cancel="showAreaPicker = false"
			@close="showAreaPicker = false"
		/>
	</view>
</template>

<script setup>
	import { computed, onMounted, reactive, ref } from 'vue';
	import { exchangeApi } from '@/api/index.js';
	import { useUserStore } from '@/store/index.js';
	import {
		buildRegionColumns,
		composeRecipientAddress,
		getRegionDisplayText,
		parseSavedRecipientAddress,
		parseShippingText
	} from '@/utils/shippingAddress.js';

	const PHONE_REG = /^1[3-9]\d{9}$/;

	const userStore = useUserStore();

	const exchangeData = ref(null);
	const loading = ref(false);
	const showPopup = ref(false);
	const showAreaPicker = ref(false);
	const areaPickerColumns = ref([]);
	const areaPickerDefaultIndex = ref([0, 0, 0]);
	const form = reactive({
		raw_shipping_text: '',
		recipient_name: '',
		recipient_phone: '',
		recipient_region_codes: [],
		recipient_address_detail: ''
	});

	const regionDisplayText = computed(() => {
		return getRegionDisplayText(form.recipient_region_codes);
	});

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

	const formatTime = (time) => {
		if (!time) return '-';
		return String(time).split('T').join(' ').slice(0, 19);
	};

	const syncAreaPickerState = (regionCodes = []) => {
		const { columns, defaultIndex } = buildRegionColumns(regionCodes);
		areaPickerColumns.value = columns;
		areaPickerDefaultIndex.value = defaultIndex.map((index) => (index < 0 ? 0 : index));
	};

	const loadExchange = async () => {
		loading.value = true;
		try {
			const data = await exchangeApi.getPending(userStore.state.identifier);
			exchangeData.value = data || null;
		} catch (error) {
			console.error('加载换货记录失败', error);
			exchangeData.value = null;
		} finally {
			loading.value = false;
		}
	};

	const handlePopupClose = () => {
		showPopup.value = false;
		showAreaPicker.value = false;
	};

	const openAreaPicker = () => {
		syncAreaPickerState(form.recipient_region_codes);
		showAreaPicker.value = true;
	};

	const openPopup = () => {
		const currentExchange = exchangeData.value || {};
		const { regionCodes, detailAddress } = parseSavedRecipientAddress(
			currentExchange.recipient_address || ''
		);

		form.raw_shipping_text = '';
		form.recipient_name = currentExchange.recipient_name || '';
		form.recipient_phone = currentExchange.recipient_phone || '';
		form.recipient_region_codes = regionCodes;
		form.recipient_address_detail = detailAddress;

		syncAreaPickerState(regionCodes);
		showPopup.value = true;
	};

	const handleAreaPickerChange = (event) => {
		const selectedValues = event.value || [];
		const selectedProvinceCode = selectedValues[0]?.value || '';
		const selectedCityCode =
			event.columnIndex === 0 ? '' : selectedValues[1]?.value || '';
		const selectedDistrictCode =
			event.columnIndex === 2 ? selectedValues[2]?.value || '' : '';

		const { columns, defaultIndex } = buildRegionColumns([
			selectedProvinceCode,
			selectedCityCode,
			selectedDistrictCode
		]);
		areaPickerColumns.value = columns;
		areaPickerDefaultIndex.value = defaultIndex.map((index) => (index < 0 ? 0 : index));
	};

	const confirmAreaPicker = ({ value }) => {
		const selectedCodes = (value || []).map((item) => item?.value).filter(Boolean);
		if (selectedCodes.length === 3) {
			form.recipient_region_codes = selectedCodes;
			syncAreaPickerState(selectedCodes);
		}
		showAreaPicker.value = false;
	};

	const fillFromPastedText = () => {
		if (!form.raw_shipping_text.trim()) {
			uni.showToast({ title: '请先粘贴收货信息', icon: 'none' });
			return;
		}

		const parsed = parseShippingText(form.raw_shipping_text);
		let updatedCount = 0;

		if (parsed.recipient_name) {
			form.recipient_name = parsed.recipient_name;
			updatedCount += 1;
		}

		if (parsed.recipient_phone) {
			form.recipient_phone = parsed.recipient_phone;
			updatedCount += 1;
		}

		if (parsed.regionCodes.length === 3) {
			form.recipient_region_codes = parsed.regionCodes;
			syncAreaPickerState(parsed.regionCodes);
			updatedCount += 1;
		}

		if (parsed.detailAddress) {
			form.recipient_address_detail = parsed.detailAddress;
			updatedCount += 1;
		}

		if (!updatedCount) {
			uni.showToast({ title: '未识别到有效收货信息', icon: 'none' });
			return;
		}

		uni.showToast({ title: '已识别并填充', icon: 'success' });
	};

	const clearPastedText = () => {
		form.raw_shipping_text = '';
	};

	const submitExchange = async () => {
		if (!form.recipient_name.trim()) {
			uni.showToast({ title: '请输入收件人姓名', icon: 'none' });
			return;
		}

		if (!form.recipient_phone.trim()) {
			uni.showToast({ title: '请输入收件人电话', icon: 'none' });
			return;
		}

		if (!PHONE_REG.test(form.recipient_phone.trim())) {
			uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
			return;
		}

		if (form.recipient_region_codes.length !== 3) {
			uni.showToast({ title: '请选择省市区', icon: 'none' });
			return;
		}

		if (!form.recipient_address_detail.trim()) {
			uni.showToast({ title: '请输入详细收货地址', icon: 'none' });
			return;
		}

		const recipientAddress = composeRecipientAddress(
			form.recipient_region_codes,
			form.recipient_address_detail
		);

		try {
			await exchangeApi.submitShippingInfo(
				exchangeData.value.id,
				form.recipient_name.trim(),
				form.recipient_phone.trim(),
				recipientAddress
			);
			uni.showToast({ title: '提交成功', icon: 'success' });
			handlePopupClose();
			await loadExchange();
		} catch (error) {
			console.error('提交换货信息失败', error);
		}
	};

	onMounted(() => {
		syncAreaPickerState();
		loadExchange();
	});
</script>

<style lang="scss" scoped>
	.container {
		.empty-state {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 120rpx 40rpx;
			min-height: 60vh;

			.empty-icon {
				font-size: 120rpx;
				margin-bottom: 30rpx;
				opacity: 0.6;
			}

			.empty-title {
				font-size: 32rpx;
				font-weight: 600;
				color: var(--text-primary);
				margin-bottom: 16rpx;
			}

			.empty-desc {
				font-size: 26rpx;
				color: var(--text-tertiary);
				text-align: center;
				margin-bottom: 40rpx;
			}
		}

		.exchange-card {
			.exchange-header {
				margin-bottom: var(--space-md);

				.exchange-no {
					font-size: 28rpx;
					font-weight: 600;
					color: var(--text-primary);
				}
			}

			.exchange-info {
				.info-row {
					padding: var(--space-xs) 0;

					.info-label {
						font-size: 24rpx;
						color: var(--text-tertiary);
					}

					.info-value {
						font-size: 24rpx;
						color: var(--text-primary);
					}

					.address-value {
						max-width: 400rpx;
						text-align: right;
					}
				}
			}

			.exchange-actions {
				margin-top: var(--space-lg);
				padding-top: var(--space-md);
				border-top: 1rpx solid var(--gray-200);

				.btn-apple {
					width: 100%;
				}
			}
		}
	}

	.popup-content {
		width: 660rpx;
		padding: 30rpx;
		box-sizing: border-box;

		.popup-title {
			font-size: 32rpx;
			font-weight: 600;
			color: var(--text-primary);
			text-align: center;
			margin-bottom: var(--space-lg);
		}

		.form-item {
			margin-bottom: var(--space-md);

			.form-label {
				font-size: 26rpx;
				color: var(--text-secondary);
				margin-bottom: var(--space-xs);
			}

			.form-helper {
				margin-top: var(--space-xs);
				font-size: 22rpx;
				color: var(--text-tertiary);
			}

			.paste-action-row {
				display: flex;
				gap: var(--space-md);
				margin-top: var(--space-sm);

				.paste-action-btn {
					flex: 1;
				}
			}
		}

		.region-trigger {
			display: flex;
			align-items: center;
			min-height: 84rpx;
			padding: 0 24rpx;
			border: 2rpx solid var(--border-light);
			border-radius: 12rpx;
			background: #fff;

			.region-trigger-text {
				font-size: 28rpx;
				color: var(--text-primary);

				&.placeholder {
					color: var(--text-tertiary);
				}
			}
		}

		.popup-btn-group {
			display: flex;
			gap: var(--space-md);
			margin-top: var(--space-lg);

			.btn-apple {
				flex: 1;
			}
		}
	}
</style>
