<template>
	<div class="edit-detail-wrapper flex-1">
		<seller-header
			class="edit-detail-header"
			title="Edit Listing Details"
			:breadcrumbs="[
				{ title: 'My Listings', name: 'myListingsIndex' },
				{ title: 'Select Collection', name: 'myListingsSelect' },
				{ title: 'Select Sketch', name: 'myListingsSelectItem' },
				{ title: 'Edit Listing Details', name: 'EditDetail' }
			]"
		>
			<template #right>
				<div class="operate-menu flex">
					<div class="menu-btn flex align-center save" @click="handleClickMenu('draft')">
						<span>{{ $t("SellerListEdit.saveDraft") }}</span>
						<SvgIcon name="CSave" size="16" />
					</div>
					<div
						class="menu-btn flex align-center publish"
						@click="handleClickMenu('publish')"
					>
						<span>{{ $t("SellerListEdit.publish") }}</span>
						<SvgIcon name="CPublish" size="16" />
					</div>
				</div>
			</template>
		</seller-header>
		<div class="edit-detail-content flex">
			<div class="left">
				<TopImageSection :images="previewImageMap" @crop="handleClickCrop" />
				<ProductImageList
					:image-list="prodImgList"
					:first-selected-index="currentListing.firstSelectedIndex"
					@select="handleSelectProdImg"
				/>
				<ApparelSketchList
					:sketch-list="currentListing.sketchList"
					@crop="handleClickCrop"
				/>
			</div>
			<div class="right">
				<ListingForm
					:product-name="currentListing.productName"
					:price="currentListing.price"
					:desc="currentListing.desc"
					:gender="currentListing.gender"
					:category="currentListing.category"
					:gender-options="genderOptions"
					:category-options="categoryOptions"
					@update:product-name="currentListing.productName = $event"
					@update:price="currentListing.price = $event"
					@update:desc="currentListing.desc = $event"
					@update:gender="currentListing.gender = $event"
					@update:category="currentListing.category = $event"
				/>
				<div class="page-control flex align-center" v-if="selectList.length > 1">
					<a-pagination
						v-model:current="currentPage"
						:total="selectList.length"
						:page-size="1"
						showQuickJumper
						showLessItems
						responsive
						:showSizeChanger="false"
					/>
				</div>
			</div>
		</div>
	</div>
	<ImageClipDialog
		ref="imageClipDialogRef"
		fixedBox
		isProduct
		:info="false"
		v-bind="$attrs"
		:type="cropType"
	/>
</template>

<script setup lang="ts">
	import { computed, ref, onMounted } from "vue"
	import { useRouter } from "vue-router"
	import { useI18n } from "vue-i18n"
	import { message } from "ant-design-vue"
	import SellerHeader from "../../seller-header.vue"
	import ImageClipDialog from "../../BrandProfile/image-clip-dialog.vue"
	import ApparelSketchList from "./components/ApparelSketchList.vue"
	import ListingForm from "./components/ListingForm.vue"
	import ProductImageList from "./components/ProductImageList.vue"
	import TopImageSection from "./components/TopImageSection.vue"
	import { useStore } from "vuex"
	import {
		fetchSketchDetail,
		uploadFile,
		fetchListingDetailById,
		fetchUpdateListing
	} from "./api"
	import type {
		ListingDetailImage,
		ListingDetailResponse,
		ListingItem,
		RadioOption,
		StatusType
	} from "./types"

	const ROUTER = useRouter()
	const { t } = useI18n()

	const imageClipDialogRef = ref<InstanceType<typeof ImageClipDialog> | null>(null)

	defineOptions({
		name: "EditDetail"
	})

	const STORE = useStore()

	const createListingItem = (
		sketch: string | null = null,
		designItemId: number | string | null = null
	): ListingItem => ({
		designItemId,
		sketch,
		mainProductImage: "",
		cover: "",
		productImage: [],
		apparelSketch: [],
		productName: "",
		price: "",
		desc: "",
		gender: "FEMALE",
		category: null,
		firstSelectedIndex: null,
		prodImageList: [],
		sketchList: []
	})

	const genderOptions = STORE.state.UserHabit?.sex.value || []

	const fallbackCategoryOptions: Record<string, RadioOption[]> = {
		MALE: STORE.state.UserHabit?.MalePosition || [],
		FEMALE: STORE.state.UserHabit?.FemalePosition || []
	}

	const currentPage = ref(1)
	const currentIndex = computed(() => currentPage.value - 1)

	const itemId = ref("")
	const selectList = ref<ListingItem[]>([createListingItem()])

	const prodImgList = computed(() => currentListing.value.prodImageList || [])

	const categoryOptions = computed(() => {
		const gender = selectList.value[currentIndex.value].gender
		return fallbackCategoryOptions[gender] || []
	})

	const currentListing = computed(() => selectList.value[currentIndex.value])

	const previewImageMap = computed(() => ({
		sketch: currentListing.value.sketch,
		mainProductImage: currentListing.value.mainProductImage,
		cover: currentListing.value.cover
	}))

	const getSortedDetailImages = (images: ListingDetailImage[] = []) => {
		return [...images].sort((prev, next) => (prev.sortOrder ?? 0) - (next.sortOrder ?? 0))
	}

	const getImageSelected = (value: ListingDetailImage["isSelected"]) =>
		value === true || value === 1 || value === "1"

	const normalizeDetailGender = (value: ListingDetailResponse["designFor"]) => {
		const gender = String(value || "").toUpperCase()
		return gender === "MALE" || gender === "FEMALE" ? gender : "FEMALE"
	}

	const normalizeDetailCategory = (
		value: ListingDetailResponse["productCategory"]
	): ListingItem["category"] => {
		const categories = Array.isArray(value) ? value : value ? [value] : []
		const normalized = categories
			.filter((category) => category !== null && typeof category !== "undefined")
			.map((category) => String(category).toLowerCase())

		return normalized.length ? normalized : null
	}

	const createListingItemFromDetail = (detail: ListingDetailResponse): ListingItem => {
		const listing = createListingItem()

		listing.productName = detail.title || ""
		listing.price =
			detail.price === null || typeof detail.price === "undefined" ? "" : String(detail.price)
		listing.desc = detail.description || ""
		listing.gender = normalizeDetailGender(detail.designFor)
		listing.category = normalizeDetailCategory(detail.productCategory)

		getSortedDetailImages(detail.images || []).forEach((image) => {
			const imageUrl = image.imageUrl || ""
			if (!imageUrl) return

			if (image.category === "cover") {
				listing.cover = imageUrl
				return
			}

			if (image.category === "sketch") {
				listing.sketch = imageUrl
				return
			}

			if (image.category === "mainProductImage") {
				listing.mainProductImage = imageUrl
				return
			}

			if (image.category === "product") {
				listing.prodImageList.push({
					url: imageUrl,
					selected: getImageSelected(image.isSelected)
				})
				return
			}

			if (image.category === "apparel") {
				listing.sketchList.push({ url: imageUrl })
			}
		})

		if (!listing.mainProductImage) {
			listing.mainProductImage =
				listing.prodImageList.find((item) => item.selected)?.url || ""
		}

		const selectedIndex = listing.prodImageList.findIndex((item) => item.selected)
		listing.firstSelectedIndex = selectedIndex === -1 ? null : selectedIndex

		listing.productImage = listing.prodImageList.map((item) => item.url)
		listing.apparelSketch = listing.sketchList
			.map((item) => item.url)
			.filter((url): url is string => Boolean(url))

		return listing
	}

	const handleSelectProdImg = (index: number) => {
		const listing = currentListing.value
		const target = prodImgList.value[index]
		const willSelect = !target.selected

		target.selected = willSelect

		if (willSelect && listing.firstSelectedIndex === null) {
			listing.mainProductImage = target.url
			listing.firstSelectedIndex = index
			return
		}

		if (!willSelect && listing.mainProductImage === target.url) {
			listing.firstSelectedIndex = null
			listing.mainProductImage = ""
		}
	}

	const cropType = ref("")
	const handleClickCrop = (data: any, type: string, paramThree: any = []) => {
		// 处理来自TopImageSection的调用: (data, type, list)
		// 处理来自ApparelSketchList的调用: (data, type, index)
		const index = typeof paramThree === "number" ? paramThree : undefined
		const list = Array.isArray(paramThree) ? paramThree : []

		// console.log(data, type)
		// console.log(selectList.value[currentIndex.value])
		let origin = []
		const currentItem = selectList.value[currentIndex.value]
		if (currentItem.sketch) {
			origin.push({ type: "sketch", url: currentItem.sketch })
		}
		if (currentItem.mainProductImage) {
			origin.push({ type: "mainProductImage", url: currentItem.mainProductImage })
		}
		if (type !== "cover") origin = []
		const titleList = {
			sketch: "Crop Sketch",
			mainProductImage: "Crop Main Product Image",
			cover: "Crop Cover",
			apparel: "Crop Apparel Sketch"
		}
		const ratio = type === "cover" ? [4, 5] : [9, 16]
		cropType.value = type
		imageClipDialogRef.value.open(
			data,
			(file) => {
				// console.log(file)
				uploadFile(file).then((res) => {
					if (type === "apparel" && typeof index !== "undefined") {
						selectList.value[currentIndex.value].sketchList[index].url = res
					} else {
						selectList.value[currentIndex.value][type] = res
					}
				})
			},
			{ ratio, isPreview: true, title: titleList[type], isProduct: true },
			origin
		)
	}

	const hasValue = (value: unknown) =>
		value !== null && value !== undefined && String(value).trim() !== ""

	const getMissingRequiredField = (item: ListingItem) => {
		const cover = item.cover || item.mainProductImage || item.sketch
		const requiredFields = [
			{ value: item.sketch, label: t("SellerListEdit.sketch") },
			{ value: cover, label: t("SellerListEdit.cover") },
			{ value: item.productName, label: t("SellerListEdit.productName") },
			{ value: item.price, label: t("SellerListEdit.price") },
			{ value: item.desc, label: t("SellerListEdit.productDescription") },
			{ value: item.gender, label: t("SellerListEdit.designFor") },
			{ value: item.category, label: t("SellerListEdit.productCategory") }
		]
		const missingField = requiredFields.find((field) => !hasValue(field.value))
		if (missingField) return missingField.label

		const missingSketchIndex = item.sketchList.findIndex((sketch) => !hasValue(sketch.url))
		if (item.sketchList.length === 0 || missingSketchIndex !== -1) {
			return `${t("SellerListEdit.apparelSketchTitle").trim()} ${
				missingSketchIndex === -1 ? 1 : missingSketchIndex + 1
			}`
		}

		return ""
	}

	const validatePublishRequired = () => {
		for (let index = 0; index < selectList.value.length; index += 1) {
			const field = getMissingRequiredField(selectList.value[index])
			if (!field) continue

			currentPage.value = index + 1
			message.warning(
				t(
					selectList.value.length > 1
						? "SellerListEdit.requiredFieldTipsWithPage"
						: "SellerListEdit.requiredFieldTips",
					{ index: index + 1, field }
				)
			)
			return false
		}

		return true
	}

	const handleSaveForm = async (type: StatusType) => {
		const paramsList = []
		selectList.value.forEach((item: ListingItem) => {
			const params = {
				id: itemId.value,
				title: item.productName,
				description: item.desc,
				price: item.price,
				status: type === "draft" ? 0 : 1,
				images: [],
				designFor: (item.gender || "FEMALE").toLowerCase(),
				productCategory: item.category
			}

			;["sketch", "cover"].forEach((el) => {
				params.images.push({
					category: el,
					imageUrl: item[el],
					isSelected: 1
				})
			})
			if (item.mainProductImage) {
				params.images.push({
					category: "main_product",
					imageUrl: item.mainProductImage,
					isSeleted: 1
				})
			}
			item.prodImageList.forEach((item) => {
				params.images.push({
					category: "product",
					imageUrl: item.url,
					isSelected: Number(!!item.selected)
				})
			})
			item.sketchList.forEach((item) => {
				params.images.push({
					category: "apparel",
					imageUrl: item.url,
					isSelected: 1
				})
			})
			paramsList.push(params)
		})
		await fetchUpdateListing(paramsList)
	}
	const handleClickMenu = async (status: StatusType) => {
		if (status === "draft" && !selectList.value[currentIndex.value].cover) {
			message.error("请先完成封面制作")
			return
		}
		if (!validatePublishRequired()) return

		await handleSaveForm(status)
		if (status === "draft") {
			// save draft logic
			// console.log("Saving draft...", currentListing.value)
			ROUTER.push({ name: "Status", params: { status: "draft" } })
		} else if (status === "publish") {
			// publish logic
			// console.log("Publishing...", currentListing.value)
			ROUTER.push({ name: "Status", params: { status: "publish" } })
		}
	}

	const handleFetchItemDetial = (list) => {
		fetchSketchDetail(list).then((res) => {
			res.forEach((item, index) => {
				if (!selectList.value[index]) return
				selectList.value[index].sketchList = item.clothes.map((el) => ({ url: el }))
				selectList.value[index].prodImageList = item.toProductImageUrls.map((el) => ({
					url: el
				}))
			})
		})
	}

	const handleGetDetailById = () => {
		fetchListingDetailById(itemId.value).then((res: ListingDetailResponse) => {
			const listing = createListingItemFromDetail(res)

			currentPage.value = 1
			selectList.value = [listing]
		})
	}

	onMounted(() => {
		const data = history.state
		if (data?.type === "edit") {
			itemId.value = history.state?.id 
			handleGetDetailById()
		} else {
			const designItemIds = history.state?.designItemIds || []

			if (!designItemIds.length) return

			currentPage.value = 1
			selectList.value = designItemIds.map((item) =>
				createListingItem(item.designOutfitUrl, item.designItemId)
			)
			const list = designItemIds.map((el) => el.designItemId)
			// console.log("list", list.length, list)
			handleFetchItemDetial(list)
		}
	})
</script>

<style lang="less" scoped>
	.c-svg {
		width: initial;
		height: initial;
	}

	.edit-detail-wrapper {
		display: flex;
		flex-direction: column;
		height: 100%;
		min-height: 0;
		margin-top: -1rem;
		overflow: hidden;

		&::-webkit-scrollbar {
			display: none;
		}

		.menu-btn {
			height: 6rem;
			border: 0.15rem solid #000000;
			border-radius: 4rem;
			text-align: center;
			line-height: 6rem;
			padding: 0 2rem;
			font-size: 1.6rem;
			column-gap: 0.8rem;
			cursor: pointer;
			transition: all 0.25s ease;

			&:hover {
				background: #000;
				color: #fff;
			}

			// &.publish:hover {
			// 	background: #fff;
			// 	color: #000;
			// }
		}

		.edit-detail-header {
			margin-bottom: 2rem;
		}

		.operate-menu {
			column-gap: 2rem;

			// .publish {
			// background-color: #000000;
			// color: #ffffff;
			// }
		}
	}

	.edit-detail-content {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		justify-content: space-between;

		&::-webkit-scrollbar {
			width: 0;
			height: 0;
		}

		.right {
			width: 55.2rem;
			flex-shrink: 0;

			.page-control {
				justify-content: flex-end;
				margin-top: 4rem;
			}
		}
	}
</style>
