<template>
	<div class="assist-input-wrapper flex flex-col" :class="{ agent: isAgentMode }">
		<div class="scroll-content flex-col">
			<!-- 图片预览区域 -->
			<div v-if="uploadedImages.length > 0" class="image-preview-list flex wrap">
				<div
					v-for="(image, index) in uploadedImages"
					:key="index"
					class="image-preview-item"
				>
					<img :src="image.url" :alt="image.name" class="preview-image" />
					<div class="image-remove-btn" @click="removeImage(index)">
						<SvgIcon name="delete" size="16" />
					</div>
				</div>
			</div>
			<!-- 编辑区域 -->
			<div
				ref="editorRef"
				class="editor"
				contenteditable="true"
				:placeholder="$t('Input.placeholder')"
				@input="handleEditorInput"
				@paste="handleEditorPaste"
			>
				<!-- <Tag v-if="showReportTag" /> -->
				<div
					class="editor-tag report-btn flex-center"
					v-if="showReportTag"
					contenteditable="false"
				>
					<SvgIcon class="light-icon" name="light" size="16" />
					<span>{{ $t('Input.trendingReport') }}</span>
					<SvgIcon
						class="close-icon"
						name="closeTransparent"
						size="24"
						color="#e6e6e6"
						@click="showReportTag = false"
					/>
				</div>
			</div>
		</div>
		<div class="operate flex align-center space-between">
			<div class="left flex align-center">
				<div class="attach flex flex-center" @click="triggerFileUpload">
					<img src="@/assets/icons/attach.svg" alt="" />
				</div>
				<input
					ref="fileInputRef"
					type="file"
					accept="image/*"
					style="display: none"
					@change="handleFileChange"
				/>
				<el-select
					v-if="!isAgentMode"
					v-model="typeValue"
					:placeholder="$t('Input.typePlaceholder')"
				>
					<el-option
						v-for="item in typeOptions"
						class="input-option"
						:key="item.value"
						:label="$t(item.label)"
						:value="item.value"
					/>
				</el-select>
				<el-select
					v-if="!isAgentMode"
					v-model="areaValue"
					:placeholder="$t('Input.areaPlaceholder')"
				>
					<el-option
						v-for="item in areaOptions"
						class="input-option"
						:key="item.value"
						:label="$t(item.label)"
						:value="item.value"
					/>
				</el-select>
				<div v-if="!isAgentMode" class="fida-style-select-wrapper">
					<el-select
						v-model="styleValue"
						:placeholder="$t('Input.stylePlaceholder')"
						@focus="openStylePopup"
					/>

					<el-popover
						v-model:visible="stylePopupVisible"
						placement="top"
						:width="342"
						:show-arrow="false"
						trigger="click"
						popper-class="fida-style-select-popover"
					>
						<template #reference>
							<div class="fida-style-select-trigger"></div>
						</template>
						<div class="fida-style-popover-content flex flex-col">
							<div class="fida-style-popover-header">
								{{ $t('Input.chooseStyle') }}
							</div>
							<div class="fida-style-popover-grid">
								<div
									v-for="item in styleOptions"
									:key="item.value"
									class="fida-style-popover-item"
									:class="{ 'is-selected': tempSelectedValue === item.value }"
									@click="selectStyle(item.value)"
								>
									<span class="fida-option-label">{{ $t(item.label) }}</span>
								</div>
							</div>
							<div class="fida-style-popover-footer flex flex-center">
								<button class="fida-confirm-btn" @click="confirmStyle">
									{{ $t('Input.confirm') }}
								</button>
							</div>
						</div>
					</el-popover>
				</div>
				<el-popover
					v-model:visible="settingPopupVisible"
					placement="top"
					:width="342"
					:show-arrow="false"
					trigger="click"
					popper-class="fida-setting-popover"
				>
					<template #reference>
						<img src="@/assets/images/setting.png" class="setting-icon" />
					</template>
					<div class="fida-setting-popover-content flex flex-col">
						<div class="fida-setting-popover-header">{{ $t('Input.styleTitle') }}</div>
						<div class="fida-setting-slider-list">
							<div
								v-for="item in settingOptions"
								:key="item.label"
								class="fida-setting-slider-item"
							>
								<div class="fida-slider-label">{{ $t(item.label) }}</div>
								<div class="fida-slider-row flex align-center">
									<el-slider
										class="setting-popover-slider"
										v-model="item.value"
										:show-tooltip="false"
									/>
									<span class="fida-slider-value">{{ item.value }}%</span>
								</div>
							</div>
						</div>
					</div>
				</el-popover>
			</div>
			<div class="right">
				<div class="create-btn flex flex-center" v-if="!isAgentMode">
					<img src="@/assets/images/shining.png" class="shining-icon" alt="" />
					<span class="create-btn-text">{{ $t('Input.createProject') }}</span>
				</div>
				<img
					v-else
					src="@/assets/images/sender.png"
					class="sender-icon"
					@click="handleSendAgent"
				/>
			</div>
		</div>
		<div v-if="!isAgentMode" class="report-btn flex flex-center" @click="toogltReportTag">
			<SvgIcon class="light-icon" name="light" size="16" />
			<span>{{ $t('Input.trendingReport') }}</span>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { computed, ref, watch, nextTick, onMounted } from 'vue'
	import { areaList } from '@/utils/area'
	import { useI18n } from 'vue-i18n'
	// import Tag from './Tag.vue'

	const props = withDefaults(
		defineProps<{
			isAgentMode?: boolean
		}>(),
		{
			isAgentMode: false
		}
	)

  const  emits = defineEmits(['send'])

	const { t } = useI18n()

	// 图片上传相关
	const fileInputRef = ref<HTMLInputElement | null>(null)
	const uploadedImages = ref<Array<{ url: string; name: string }>>([])

	// 触发文件上传
	const triggerFileUpload = () => {
		fileInputRef.value?.click()
	}

	// BUG  标签被删除后无法重新出现

	// 处理文件选择
	const handleFileChange = (event: Event) => {
		const input = event.target as HTMLInputElement
		if (input.files) {
			Array.from(input.files).forEach((file) => {
				// 只处理图片文件
				if (file.type.startsWith('image/')) {
					const reader = new FileReader()
					reader.onload = (e) => {
						uploadedImages.value.push({
							url: e.target?.result as string,
							name: file.name
						})
					}
					reader.readAsDataURL(file)
				}
			})
		}
		// 清空input的value，允许重复选择同一文件
		input.value = ''
	}

	// 移除图片
	const removeImage = (index: number) => {
		uploadedImages.value.splice(index, 1)
	}

	const styleKeys: string[] = [
		'Coastal',
		'Verdant',
		'Traditional',
		'CenturyChrome',
		'ModernRevival',
		'Tuscan2000s',
		'Bauhaus',
		'Constructivism',
		'NordicNoir'
	]

	// 标签相关（固定标签，v-show 控制显示）
	const showReportTag = ref(false)
	const editorRef = ref<HTMLDivElement | null>(null)
	const inputValue = ref<string>('')

	const toogltReportTag = () => {
		console.log(showReportTag.value)

		showReportTag.value = !showReportTag.value
	}

	const handleEditorInput = () => {
		if (!editorRef.value) return

		// 提取纯文本（排除标签）
		let text = ''
		const walker = document.createTreeWalker(editorRef.value, NodeFilter.SHOW_TEXT, null)

		let node: Node | null
		while ((node = walker.nextNode())) {
			text += node.textContent
		}

		// 移除末尾的空格（如果有的话）
		text = text.replace(/\s+$/, '')
		inputValue.value = text

		// 自动调整高度
		autoResizeEditor()
	}

	const handleEditorPaste = (e: ClipboardEvent) => {
		e.preventDefault()
		const text = e.clipboardData?.getData('text/plain') || ''
		document.execCommand('insertText', false, text)
	}

	const autoResizeEditor = () => {
		const editor = editorRef.value
		if (editor) {
			if (props.isAgentMode) {
				// editor.style.height = '6rem'
				// editor.style.overflowY = 'auto'
				return
			} else {
				editor.style.height = 'auto'
				const maxHeight =
					20 * parseFloat(getComputedStyle(document.documentElement).fontSize || '16')
				editor.style.height = Math.min(editor.scrollHeight, maxHeight) + 'px'
			}
		}
	}

  const handleSendAgent=()=>{
    emits('send', inputValue.value)
    // 发送后清空输入框
    if(editorRef.value){
      editorRef.value.innerHTML = ''
    }
    inputValue.value = ''
  }
	// 监听 inputValue 外部变化
	watch(inputValue, () => {
		nextTick(() => {
			autoResizeEditor()
		})
	})

	// 初始化编辑器高度
	onMounted(() => {
		autoResizeEditor()
	})
  

	const typeValue = ref<string>('')
	const areaValue = ref<string>('')
	const styleValue = ref<string>('')
	const tempSelectedValue = ref<string>('')
	const stylePopupVisible = ref(false)

	const settingPopupVisible = ref(false)
	const settingOptions = ref([
		{ label: 'Input.settingOptions.creativity', value: 50 },
		{ label: 'Input.settingOptions.diversity', value: 75 },
		{ label: 'Input.settingOptions.relevance', value: 60 }
	])

	const openStylePopup = () => {
		// 打开弹窗时初始化临时选中值为当前选中值
		tempSelectedValue.value = styleValue.value
		stylePopupVisible.value = true
	}

	const selectStyle = (value: string) => {
		tempSelectedValue.value = value
	}

	const confirmStyle = () => {
		// 点击确认后才真正赋值
		styleValue.value = tempSelectedValue.value
		stylePopupVisible.value = false
	}

	const confirmSetting = () => {
		settingPopupVisible.value = false
	}
	const typeOptions = ref<any[]>([
		{
			label: 'Input.types.sofa',
			value: 'Sofa'
		},
		{
			label: 'Input.types.desk',
			value: 'Desk'
		},
		{
			label: 'Input.types.chair',
			value: 'Chair'
		}
	])
	const areaOptions = ref<any[]>(areaList)
	const styleOptions = ref<any[]>(
		styleKeys.map((key) => ({
			label: `Input.styles.${key}`,
			value: key
		}))
	)
</script>

<style lang="less" scoped>
	.assist-input-wrapper {
		min-height: 23.5rem;
		max-height: 43.5rem;
		width: 106.3rem;
		border-radius: 2.8rem;
		background-color: #fff;
		border: 0.1rem solid #00000005;
		box-shadow: 0px 5px 14px 0px #0000001a;
		margin: 0 auto;
		padding: 0;
		position: relative;

		.report-btn {
			position: absolute;
			bottom: -7.4rem;
			height: 4.4rem;
			border-radius: 2.2rem;
			width: 20rem;
			background-color: #fff;
			border: 0.11rem solid #f6f4ef1a;
			column-gap: 1.2rem;
			cursor: pointer;
			.c-svg {
				width: 1.5rem;
				height: 1.9rem;
			}
		}

		.scroll-content {
			overflow-y: visible;
			padding: 3.4rem 1.7rem 1.7rem;
		}

		.editor {
			width: 100%;
			min-height: 5rem;
			max-height: 20rem;
			border: none;
			outline: none;
			padding: 0 1.4rem 1.4rem;
			font-size: 2rem;
			font-family: 'InterRegular';
			font-weight: 400;
			color: #000000;
			overflow-y: auto;
			overflow-x: hidden;
			line-height: 1.5;
			white-space: pre-wrap;
			word-wrap: break-word;

			// 占位符
			&:empty::before {
				content: attr(placeholder);
				color: #999;
				pointer-events: none;
			}

			// 标签样式
			.editor-tag {
				width: 21.8rem;
				height: 4.4rem;
				display: inline-flex;
				position: initial;
				bottom: initial;
				border: 0.11rem solid #0000001a;
				font-family: 'GeneralMedium';
				font-weight: 500;
				font-size: 1.8rem;
				column-gap: 0;
				span {
					margin: 0 0.7rem 0 1.2rem;
				}
				.c-svg.close-icon {
					width: 2.4rem;
					height: 2.4rem;
					cursor: pointer;
				}
			}
		}

		// 标签容器（已废弃，保留兼容性）
		.tags-container {
			display: inline-flex;
			flex-wrap: wrap;
			gap: 0.5rem;
			padding: 0 1.4rem 0.5rem;

			.tag-item {
				display: inline-flex;
				align-items: center;
			}
		}

		// 图片预览区域样式
		.image-preview-list {
			padding: 0 1.4rem 1rem;
			column-gap: 1rem;
			max-height: 15rem;
			overflow-y: auto;
			flex-shrink: 0;

			.image-preview-item {
				position: relative;
				width: 8.6rem;
				height: 8.6rem;
				border-radius: 1.5rem;
				overflow: hidden;
				flex-shrink: 0;
				border: 0.1rem solid #cdcdcd;

				.preview-image {
					width: 100%;
					height: 100%;
					object-fit: cover;
					border-radius: 0.8rem;
				}

				.image-remove-btn {
					position: absolute;
					top: 0.2rem;
					right: 0.2rem;
					width: 1.6rem;
					height: 1.6rem;
					color: #fff;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 1.2rem;
					cursor: pointer;
					opacity: 0;
					transition: opacity 0.2s ease;
				}

				&:hover .image-remove-btn {
					opacity: 1;
				}
			}
		}
		.operate {
			flex-shrink: 0;
			margin-top: auto;
			padding: 0 1.7rem 1.7rem;

			.left {
				column-gap: 2rem;
			}
			.attach {
				width: 4rem;
				height: 4rem;
				border: 1px solid rgba(0, 0, 0, 0.1);
				border-radius: 50%;
				cursor: pointer;
			}
			.el-select {
				width: 13.9rem;
				height: 4rem;
				:deep(.el-select__wrapper) {
					border-radius: 0.8rem;
					height: 100%;
					box-shadow: none;
					border: 0.1rem solid rgba(0, 0, 0, 0.1);
					font-family: 'GeneralMedium';
					font-weight: 500;
					font-size: 1.4rem;
					.el-select__placeholder {
						color: #000;
					}
					.el-select__icon {
						color: #000;
					}
				}
			}
			.fida-style-select-wrapper {
				position: relative;
				width: 13.9rem;
				height: 4rem;
			}
			.fida-style-select-trigger {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 1;
				cursor: pointer;
			}
			.setting-icon {
				width: 2.4rem;
				height: 2.4rem;
				cursor: pointer;
			}
			.create-btn {
				background-color: #ff7a51;
				height: 4rem;
				width: 13rem;
				color: #fff;
				border-radius: 4.2rem;
				font-family: 'Mazzard';
				font-weight: 600;
				font-size: 1.28rem;
				cursor: pointer;
				.shining-icon {
					width: 1.4rem;
					height: 1.4rem;
				}
			}
		}
	}
	.input-option {
		// padding: 0 1rem;
		margin: 0 0.6rem;
		padding: 0 0.8rem 0 1rem;
		color: #0d0d0d;
		font-weight: 510;
		font-size: 1.3rem;
		height: 3rem;
		line-height: 3rem;
		&.el-select-dropdown__item.is-hovering {
			background-color: rgba(13, 13, 13, 0.02);
			// border-radius: 0.6rem;
		}
	}
	.agent {
		padding: 1.2rem;
		box-shadow: none;
    border-radius: 1.5rem;
		border: 0.1rem solid #0000001a;
		.scroll-content {
			padding: 0;
			flex: 1;
			overflow: auto;
			.editor {
				font-family: 'Regular';
				font-weight: 400;
				font-size: 1.22rem;
				min-height: initial;
				max-height: initial;
				padding: 0;
        height: 100%;
			}
		}
		.operate {
			padding: 1.2rem 0 0;
			margin: 0;
			.right {
				display: flex;
				align-items: center;
				.sender-icon {
					width: 3.2rem;
					height: 3.2rem;
					cursor: pointer;
				}
			}
		}
	}
</style>

<style lang="less">
	.fida-style-select-popover {
		width: 34.2rem !important;
		padding: 0 !important;
		border-radius: 0.6rem !important;
		box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.15) !important;
		background-color: #fff !important;
		border: none !important;
	}

	.fida-style-popover-content {
		padding: 2rem 2.4rem 2.4rem;
	}

	.fida-style-popover-header {
		font-family: 'GeneralMedium';
		font-weight: 500;
		font-size: 1.6rem;
		color: #000;
		margin-bottom: 2rem;
		// padding: 1.8rem 2rem 1.5rem;
		// border-bottom: 0.1rem solid #f0f0f0;
	}

	.fida-style-popover-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
	}

	.fida-style-popover-item {
		height: 9.1rem;
		width: 9.1rem;
		background-color: #a6a6a6;
		border-radius: 0.8rem;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.fida-style-popover-item:hover {
		background-color: #e8e8e8;
	}

	.fida-style-popover-item.is-selected {
		background-color: #e3f2fd;
		.fida-option-label {
			color: #000;
		}
		// border-color: #2196f3;
	}

	.fida-style-popover-item .fida-option-label {
		font-family: 'GeneralMedium';
		font-weight: 500;
		font-size: 1.2rem;
		color: #fff;
		text-align: center;
		padding: 0.5rem;
	}

	.fida-style-popover-footer {
		// border-top: 0.1rem solid #f0f0f0;
		margin-top: 2.4rem;
		.fida-confirm-btn {
			margin: 0 auto;
			width: 15.7rem;
			height: 3.4rem;
			line-height: 3.4rem;
			background-color: #ff7a51;
			color: #fff;
			border: none;
			border-radius: 3.8rem;
			font-family: 'GeneralMedium';
			font-weight: 500;
			font-size: 1.4rem;
			cursor: pointer;
		}
	}

	.fida-setting-popover {
		padding: 0 !important;
		border-radius: 0.6rem !important;
		background-color: #fff !important;
		border: none !important;
		width: 25.6rem;
		height: 23.9rem;

		box-shadow: 0px 11px 20px 0px #0000001a;
		border-radius: 0.6rem;
	}

	// .fida-setting-popover-content {
	//   padding: 2rem 2.4rem 2.4rem;
	// }

	.fida-setting-popover-header {
		font-weight: 400;
		font-size: 1.4rem;
		color: #000;
		margin-bottom: 2rem !important;
	}
	.fida-setting-popover-content {
		padding: 1.6rem 1.4rem 2.2rem !important;
	}

	.fida-setting-slider-list {
		display: flex;
		flex-direction: column;
		row-gap: 1rem;
	}

	.fida-setting-slider-item {
		.fida-slider-label {
			font-weight: 400;
			font-size: 1.2rem;
			color: #000;
			margin-bottom: 1rem;
		}
		.fida-slider-row {
			column-gap: 2.6rem;
			.el-slider {
				flex: 1;
			}
			.fida-slider-value {
				font-weight: 400;
				font-size: 1.4rem;
				color: #000;
			}
		}
	}
	.setting-popover-slider {
		--el-slider-height: 0.4rem;
		height: fit-content;
		.el-slider__runway {
			height: var(--el-slider-height);
			background-color: #e8e8e8;
			border-radius: 0.2rem;
		}
		.el-slider__bar {
			height: var(--el-slider-height);
			background-color: #000;
			border-radius: 0.2rem;
		}
		.el-slider__button-wrapper {
			width: fit-content;
			height: fit-content;
			top: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			align-items: center;
		}
		.el-slider__button {
			width: 1rem;
			height: 1rem;
			background-color: #000;
			border-radius: 50%;
			border: none;
		}
		.el-slider__stop {
			display: none;
		}
	}
</style>
