<template>
	<div class="left-box-wrapper">
		<div class="back" @click="store.resetGenerateState" v-if="store.isGenerating">&lt; 返回</div>
		<div class="left-box" :class="{ 'has-back-btn': store.isGenerating }" v-if="!store.isShowClauseTranslation && !store.isShowSteps">
			<div class="left-box-input">
				<!-- 表单输入区域 -->
				<div class="sider" v-if="!store.isGenerating">
					<!-- 报文主题 -->
					<div class="sider-box">
						<div class="header">报文主题</div>
						<div class="title-box">
							<div class="title">主题名称</div>
							<el-input :disabled="store.isDisableTemplate" style="width: 476px; height: 32px"
								class="title-input" placeholder="输入主题名称，如：大而美法案" v-model="store.writtingTitle" />
						</div>
						<div class="description-box">
							<div class="title">主题描述</div>
							<el-input :disabled="store.isDisableTemplate" class="description-input" type="textarea"
								style="width: 476px" :rows="8" placeholder="输入报文主题描述，如：从科技领域方面分析大而美法案通过后对中国可能产生的影响"
								v-model="store.descText" />
						</div>
					</div>

					<!-- 报文模板 -->
					<div class="sider-box">
						<div class="header">报文模板</div>
						<div class="template-box">
							<div class="template" :class="{
								tempActive: store.tempActiveIndex === index,
								disableTemplate: store.tempActiveIndex !== index && store.isDisableTemplate
							}" v-for="(temp, index) in store.tempList" :key="index"
								@click="!store.isDisableTemplate && store.updateTempActiveIndex(index, temp.title)">
								<div class="header">
									<div class="title">{{ temp.title }}</div>
									<div class="icon">
										<img src="../assets/images/template-icon.png" alt="" />
									</div>
								</div>
								<div class="content">{{ temp.desc }}</div>
								<div class="active-icon" v-if="store.tempActiveIndex === index">
									<img src="../assets/images/active-icon.png" alt="" />
								</div>
								<div class="selected-icon" v-if="store.tempActiveIndex === index">
									<img src="../assets/images/selected-icon.png" alt="" />
								</div>
							</div>
						</div>
					</div>

					<!-- 加载本地文件 -->
					<div class="sider-box">
						<div class="header">加载本地文件</div>
						<el-upload action="" :auto-upload="false" accept=".pdf" limit="1"
							:on-exceed="files => store.handleExceed(files, uploadRef)" ref="uploadRef"
							:on-change="(file, files) => store.handleFileChange(file, files)"
							:file-list="store.uploadFileList" :disabled="store.isDisableTemplate">
							<el-button class="sider-upload-btn" type="primary" :disabled="store.isDisableTemplate">
								<el-icon class="sider-upload-btn-text">
									<Upload />
								</el-icon>
								<span class="sider-upload-btn-text">上传文件</span>
							</el-button>
							<template #tip>
								<div class="sider-upload-btn-tip">支持扩展名：.pdf</div>
							</template>
						</el-upload>
					</div>
				</div>
				<!-- 生成进度展示 -->
				<div class="process-box" v-else>
					<div class="process-main-box">
						<div class="steps-box">
							<div class="steps-header">
								<div class="icon">
									<img src="../assets/images/right-arrow.png" alt="" />
								</div>
								<div class="text">执行步骤：</div>
							</div>
							<div class="steps-content" ref="processContainerRef" v-html="renderedProcess"></div>
						</div>
						<div class="tool-box">
							<div class="tool-header">工具调用</div>
							<div class="tool-main">当前智能体工具：{{ store.curAgentTool || "无" }}</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 提交区域 -->
			<div class="submit-area">
				<div class="tips">
					<div class="tips-icon">
						<img src="../assets/images/tips-icon.png" alt="" />
					</div>
					<div class="tips-text">内容由AI生成，无法确保真实准确，仅供参考</div>
				</div>

				<!-- 生成按钮 -->
				<div class="submit-btn" @click="triggerGenerate" v-if="!store.isGenerating">
					<div class="submit-icon">
						<img src="../assets/images/ai.png" alt="" />
					</div>
					<div class="submit-text">生成报文</div>
				</div>

				<!-- 生成中状态 -->
				<div class="process-footer-box" v-else>
					<div class="footer-left">
						{{ store.isGenerating ? "报文生成中..." : "报文已生成" }}
					</div>
					<div class="footer-right" @click="store.resetGenerateState">
						<div class="icon"></div>
						<div class="text">停止</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 步骤侧边栏（拆分出来） -->
		<div class="left-box process" :class="{ 'has-back-btn': store.isGenerating }" v-if="store.isShowSteps">
			<div class="left-box-input">
				<div class="process-box">
					<div class="process-main-box">
						<div class="steps-box">
							<div class="steps-header">
								<div class="icon">
									<img src="../assets/images/right-arrow.png" alt="" />
								</div>
								<div class="text">执行步骤：</div>
							</div>
							<div class="steps-content" ref="processContainerRef" v-html="renderedProcess"></div>
						</div>
						<div class="tool-box">
							<div class="tool-header">工具调用</div>
							<div class="tool-main">当前智能体工具：{{ store.curAgentTool || "无" }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="submit-area">
				<div class="tips">
					<div class="tips-icon">
						<img src="../assets/images/tips-icon.png" alt="" />
					</div>
					<div class="tips-text">内容由AI生成，无法确保真实准确，仅供参考</div>
				</div>

				<!-- 生成中状态 -->
				<div class="process-footer-box">
					<div class="footer-left">
						{{ store.isGenerating ? "报文生成中..." : "报文已生成" }}
					</div>
					<div class="footer-right" @click="store.resetGenerateState">
						<div class="icon"></div>
						<div class="text">停止</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 条款翻译侧边栏 -->
		<div class="left-box translation-box" :class="{ 'has-back-btn': store.isGenerating }" v-if="store.isShowClauseTranslation">
			<div class="translation-main-box">
				<div class="translation-header-new">
					<div class="header-left">共{{ store.clauseTranslationMessages.length }}章节</div>
					<div class="header-right">
						<el-switch v-model="store.isShowOriginal" inline-prompt active-text="" inactive-text="" />
						<span class="switch-label">显示原文</span>
					</div>
				</div>
				<div class="translation-content" ref="translationContentRef">
					<div class="translation-item"
						:class="{ active: store.highlightClauseId === item.payload?.clause_number }"
						:data-clause-number="item.payload?.clause_number"
						v-for="(item, index) in store.clauseTranslationMessages" :key="index">
						<div class="item-header">
							<div class="index-badge">{{ item.payload?.clause_number }}</div>
							<div class="clause-title">第{{ getChineseNumber(item.payload?.clause_number) }}节 .{{
								item.payload?.clause_section }}</div>
						</div>
						<div class="item-body">
							<div class="translated-text">{{ item.payload?.clause_content_zh }}</div>
							<div class="original-text" v-if="store.isShowOriginal">{{ item.payload?.clause_content }}
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 步骤侧边栏显隐按钮 -->
			<div class="toggle-steps-btn" @click="store.isShowSteps = !store.isShowSteps">
				<div class="arrow" :class="{ 'is-active': store.isShowSteps }"></div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { nextTick, ref, watch } from "vue";
import { ElButton, ElIcon, ElInput, ElUpload, ElSwitch } from "element-plus";
import { Upload } from "@element-plus/icons-vue";
import { useWrittingAsstaintStore } from "@/stores/writtingAsstaintStore";
import { useStream } from "@/hooks/useStream";

// 子组件直接获取Pinia Store（核心优化）
const store = useWrittingAsstaintStore();
// 组件内部引用
const uploadRef = ref(null);
const processContainerRef = ref(null);
const translationContentRef = ref(null);

const emit = defineEmits(["generate"]);
const triggerGenerate = () => {
	emit("generate");
};

// 数字转中文序号
const getChineseNumber = (num) => {
	const zh = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
	const n = parseInt(num);
	if (n <= 10) return zh[n];
	if (n < 20) return '十' + zh[n % 10];
	if (n < 100) {
		return zh[Math.floor(n / 10)] + '十' + (n % 10 === 0 ? '' : zh[n % 10]);
	}
	return num;
};

// Stream处理（纯渲染）
const { renderedProcess, updateProcess, clearContent } = useStream();

// 监听条款高亮并滚动
watch(
	() => store.highlightClauseId,
	async (newId) => {
		if (!newId || !translationContentRef.value) return;
		await nextTick();

		const container = translationContentRef.value;
		const item = container.querySelector(`.translation-item[data-clause-number="${newId}"]`);
		if (!item) return;

		const containerRect = container.getBoundingClientRect();
		const itemRect = item.getBoundingClientRect();
		const delta = itemRect.top - containerRect.top;
		const targetTop = container.scrollTop + delta;

		// 让高亮条款的“标题区域”贴到容器顶部
		container.scrollTo({
			top: Math.max(0, targetTop),
			behavior: 'smooth'
		});
	}
);

// 监听 store.processLog 变化，更新步骤内容并滚动
watch(
	() => store.processLog,
	async (newLog) => {
		if (newLog !== undefined && newLog !== null) {
			await updateProcess(newLog, processContainerRef.value);
		}
	},
	{ immediate: true }
);

// 监听 isShowProcess 变为 false 时清空步骤内容
watch(
	() => store.isShowSubmit,
	(newVal) => {
		if (!newVal) {
			clearContent();
		}
	}
);

defineExpose({
	processContainerRef
});
</script>

<style lang="scss" scoped>
.left-box-wrapper {
	display: flex;
	flex-direction: row;
	height: 100%;
	position: relative;

	.left-box.process {
		padding-top: 40px;
	}

	.left-box {
		display: flex;
		flex-direction: column;
		width: 521px;
		height: 100%;
		padding-top: 22px;
		padding-bottom: 29px;
		box-sizing: border-box;
		border-right: 1px solid rgba(234, 236, 238, 1);
		border-top: 1px solid rgba(234, 236, 238, 1);
		background: rgba(255, 255, 255, 1);
		position: relative;

		&.has-back-btn {
			padding-top: 40px !important;
		}

		.left-box-input {
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow-y: auto;
			overflow-x: hidden;
			scrollbar-width: none;
			padding-inline: 22px;

			.process-box {
				display: flex;
				flex-direction: column;
				gap: 20px;
				height: 100%; // 确保占满

				.process-main-box {
					width: 476px;
					flex: 1;
					display: flex;
					flex-direction: column;

					.steps-box {
						flex: 1;
						display: flex;
						flex-direction: column;

						.steps-header {
							flex-shrink: 0;
							display: flex;

							.icon {
								margin-top: 5px;
								width: 20px;
								height: 20px;

								img {
									width: 100%;
									height: 100%;
								}
							}

							.text {
								height: 30px;
								line-height: 30px;
								font-family: Microsoft YaHei;
								color: #333;
								font-size: 20px;
								font-weight: 700;
								margin-left: 5px;
							}
						}

						.steps-content {
							width: 100%;
							min-height: 100px;
							overflow-x: hidden;
						}
					}

					.tool-box {
						flex-shrink: 0;
						width: 440px;
						height: 160px;
						margin: 20px auto;
						background: #f6f9fe;
						border-radius: 10px;

						.tool-header {
							height: 30px;
							line-height: 30px;
							margin-left: 20px;
							color: var(--color-main-active);
						}

						.tool-main {
							height: 110px;
							width: 400px;
							margin: 0 auto;
							background: #fff;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 40px;
						}
					}
				}
			}



			.sider {
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				gap: 23px;

				.sider-box {
					.header {
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 700;
						line-height: 24px;
					}

					.template-box {
						margin-top: 19px;
						height: 260px;
						display: flex;
						flex-wrap: wrap;
						gap: 16px;

						.template {
							width: 229px;
							height: 120px;
							box-sizing: border-box;
							border: 1px solid rgba(234, 236, 238, 1);
							border-radius: 4px;
							position: relative;
							cursor: pointer;

							.active-icon {
								width: 24px;
								height: 24px;
								position: absolute;
								top: 0;
								right: 0;
								z-index: 99;

								img {
									width: 100%;
									height: 100%;
								}
							}

							.selected-icon {
								width: 8px;
								height: 6px;
								position: absolute;
								top: -4px;
								right: 3px;
								z-index: 100;

								img {
									width: 8px;
									height: 6px;
								}
							}

							.header {
								display: flex;
								justify-content: space-between;
								height: 50px;

								.title {
									height: 24px;
									color: #333;
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 700;
									line-height: 24px;
									margin-left: 15px;
									margin-top: 16px;
								}

								.icon {
									margin-top: 15px;
									margin-right: 16px;
									width: 30px;
									height: 30px;
									border-radius: 15px;
									background: rgba(231, 243, 255, 1);

									img {
										width: 17px;
										height: 14px;
										margin-top: 8px;
										margin-left: 7px;
									}
								}
							}

							.content {
								margin: 0 auto;
								width: 200px;
								height: 48px;
								margin-top: 10px;
								color: rgba(132, 136, 142, 1);
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
							}
						}

						.disableTemplate {
							width: 230px;
							height: 120px;
							box-sizing: border-box;
							border: 1px solid #e4e7ed;
							border-radius: 4px;
							position: relative;
							cursor: not-allowed;
							background-color: #f5f7fa;

							.active-icon {
								width: 24px;
								height: 24px;
								position: absolute;
								top: 0;
								right: 0;
								z-index: 99;

								img {
									width: 100%;
									height: 100%;
								}
							}

							.selected-icon {
								width: 8px;
								height: 6px;
								position: absolute;
								top: -4px;
								right: 3px;
								z-index: 100;

								img {
									width: 8px;
									height: 6px;
								}
							}

							.header {
								display: flex;
								justify-content: space-between;
								height: 50px;

								.title {
									height: 24px;
									color: #c0c4cc;
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 700;
									line-height: 24px;
									margin-left: 15px;
									margin-top: 16px;
								}

								.icon {
									margin-top: 15px;
									margin-right: 16px;
									width: 30px;
									height: 30px;
									border-radius: 15px;
									background: #f0f2f5;

									img {
										width: 17px;
										height: 14px;
										margin-top: 8px;
										margin-left: 7px;
										opacity: 0.5;
									}
								}
							}

							.content {
								margin: 0 auto;
								width: 200px;
								height: 48px;
								margin-top: 10px;
								color: #dcdfe6;
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
							}
						}

						.tempActive {
							border: 1px solid rgba(5, 95, 194, 1);
							background: rgba(246, 250, 255, 1);
						}
					}

					.title-box {
						margin-top: 15px;

						.title {
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
						}

						.title-input {
							margin-top: 15px;
						}
					}

					.description-box {
						margin-top: 24px;

						.title {
							height: 24px;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
						}

						.description-input {
							margin-top: 12px;
							height: 200px;
						}
					}

					.sider-upload-btn {
						width: 476px;
						height: 36px;
						box-sizing: border-box;
						border: 1px dashed rgba(234, 236, 238, 1);
						border-radius: 6px;
						background: rgba(247, 248, 249, 1);
						margin-top: 19px;
					}

					.sider-upload-btn-text {
						color: rgba(59, 65, 75, 1);
						font-family: Microsoft YaHei;
						font-style: Regular;
						font-size: 14px;
						font-weight: 400;
						line-height: 22px;
						letter-spacing: 0px;
						text-align: left;
					}

					.sider-upload-btn-tip {
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-style: Regular;
						font-size: 14px;
						font-weight: 400;
						line-height: 22px;
						letter-spacing: 0px;
						text-align: left;
						margin-top: 8px;
					}
				}
			}
		}



		.translation-main-box {
			flex: 1;
			display: flex;
			flex-direction: column;
			width: 520px;
			gap: 20px;
			padding-inline: 22px;
			overflow: hidden;

			.translation-header-new {
				flex-shrink: 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 16px;
				padding: 0 4px;

				.header-left {
					color: #3b414b;
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
				}

				.header-right {
					display: flex;
					align-items: center;
					gap: 8px;

					.switch-label {
						color: #5f656c;
						font-family: Microsoft YaHei;
						font-size: 14px;
					}
				}
			}

			.translation-content {
				flex: 1;
				width: 100%;
				overflow-x: hidden;
				overflow-y: auto;
				padding-right: 10px;
				position: relative;

				.translation-item {
					margin-bottom: 24px;
					padding-bottom: 24px;
					border-bottom: 1px solid #f2f3f5;

					&:last-child {
						border-bottom: none;
					}

					.item-header {
						display: flex;
						align-items: flex-start;
						gap: 12px;
						margin-bottom: 12px;

						.index-badge {
							flex-shrink: 0;
							width: 24px;
							height: 24px;
							background: #e7f3ff;
							color: #055fc2;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 14px;
							font-weight: 700;
						}

						.clause-title {
							color: #3b414b;
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 24px;
						}
					}

					.item-body {
						padding-left: 36px;
						display: flex;
						flex-direction: column;
						gap: 16px;

						.translated-text {
							color: #3b414b;
							font-family: Microsoft YaHei;
							font-size: 15px;
							font-weight: 400;
							line-height: 1.8;
						}

						.original-text {
							color: #84888e;
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 1.6;
						}
					}

					&.active {
						background: #f6faff;
						border-radius: 8px;
						padding: 16px;
						margin-left: -16px;
						margin-right: -16px;
						border-bottom: none;
						box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
					}
				}
			}
		}

	}

	.back {
		height: 24px;
		line-height: 24px;
		color: var(--color-main-active);
		font-family: Microsoft YaHei;
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		cursor: pointer;
		position: absolute;
		z-index: 1;
		top: 11px;
		left: 21px;
	}

	.translation-box {
		.toggle-steps-btn {
			position: absolute;
			right: -12px;
			top: 50%;
			transform: translateY(-50%);
			width: 12px;
			height: 60px;
			background: #fff;
			border: 1px solid rgba(234, 236, 238, 1);
			border-left: none;
			border-radius: 0 6px 6px 0;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;

			.arrow {
				width: 0;
				height: 0;
				border-top: 6px solid transparent;
				border-bottom: 6px solid transparent;
				border-left: 6px solid var(--color-main-active);
				transform: rotate(0deg);
			}

			.arrow.is-active {
				transform: rotate(180deg);
			}
		}
	}
}



.submit-area {
	flex-shrink: 0;
	margin-top: auto;
	width: 100%;
	min-height: 74px;
	padding-inline: 22px;

	.tips {
		height: 22px;
		display: flex;
		margin-bottom: 18px;

		.tips-icon {
			width: 14px;
			height: 16px;
			margin-top: 3px;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.tips-text {
			margin-left: 8px;
			color: rgba(132, 136, 142, 1);
			font-family: Microsoft YaHei;
			font-size: 14px;
			font-weight: 400;
			line-height: 22px;
		}
	}

	.process-footer-box {
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 100%;

		.footer-left {
			width: 348px;
			height: 36px;
			border-radius: 4px;
			background: rgba(234, 236, 238, 1);
			color: rgba(132, 136, 142, 1);
			font-family: Microsoft YaHei;
			font-size: 16px;
			font-weight: 400;
			text-align: center;
			line-height: 36px;
		}

		.footer-right {
			margin-left: 8px;
			display: flex;
			flex: 1; // 自动填充剩余空间
			height: 36px;
			box-sizing: border-box;
			border: 1px solid var(--color-main-active);
			border-radius: 4px;
			background: rgba(246, 250, 255, 1);
			justify-content: center;
			align-items: center;
			gap: 8px;
			cursor: pointer;

			.icon {
				width: 8px;
				height: 8px;
				border-radius: 2px;
				background: var(--color-main-active);
			}

			.text {
				color: var(--color-main-active);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
			}
		}
	}

	.submit-btn {
		width: 476px;
		height: 36px;
		border-radius: 4px;
		background: rgba(5, 95, 194, 1);
		display: flex;
		justify-content: center;
		cursor: pointer;
		opacity: 1;

		&:hover {
			background: rgba(5, 95, 194, 0.8);
		}

		&[disabled] {
			background: #ccc;
			cursor: not-allowed;
			opacity: 0.6;
		}

		.submit-icon {
			width: 21px;
			height: 15px;
			margin-top: 10px;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.submit-text {
			height: 24px;
			margin-top: 5px;
			color: rgba(255, 255, 255, 1);
			font-family: Microsoft YaHei;
			font-size: 16px;
			font-weight: 400;
			line-height: 24px;
			margin-left: 8px;
		}
	}
}
</style>