<template>
	<div 
		v-if="flowId && flowStartParams.length > 0" 
		class="mx-auto mb-4 bg-white border-t border-gray-200 shadow-lg flow-params-container dark:border-gray-700 dark:bg-gray-900" 
		style="width: 50%;"
	>
		<!-- 配置区头部 -->
		<div class="flex items-center justify-between px-4 py-3 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-800 dark:to-gray-800">
			<div class="flex items-center space-x-2">
				<div class="w-2 h-2 bg-blue-500 rounded-full"></div>
				<h3 class="text-sm font-medium text-gray-800 dark:text-gray-200">流程参数配置</h3>
				<span class="px-2 py-1 text-xs text-blue-600 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">
					{{ flowStartParams.length }} 个参数
				</span>
			</div>
			<button
				@click="toggleCollapse"
				class="flex items-center px-2 py-1 space-x-1 text-xs text-gray-600 transition-colors rounded dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
			>
				<span>{{ isCollapsed ? '展开' : '收起' }}</span>
				<svg
					:class="{ 'rotate-180': !isCollapsed }"
					class="w-3 h-3 transition-transform duration-200"
					fill="none"
					stroke="currentColor"
					viewBox="0 0 24 24"
				>
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
				</svg>
			</button>
		</div>

		<!-- 配置区内容 -->
		<transition
			enter-active-class="transition-all duration-300 ease-out"
			leave-active-class="transition-all duration-300 ease-in"
			enter-from-class="opacity-0 max-h-0"
			enter-to-class="opacity-100 max-h-96"
			leave-from-class="opacity-100 max-h-96"
			leave-to-class="opacity-0 max-h-0"
		>
			<div v-show="!isCollapsed" class="p-4 space-y-4 overflow-y-auto max-h-96">
				<!-- 对话字段选择 -->
				<div class="p-3 rounded-lg bg-gradient-to-r from-amber-50 dark:from-amber-900/20 dark:to-yellow-900/20 border-amber-200 dark:border-amber-800">
					<div class="p-3 transition-colors border rounded-lg border-amber-200 param-item bg-amber-50/50 dark:bg-amber-900/10 dark:border-amber-800 hover:border-amber-300 dark:hover:border-amber-600">
						<label class="flex items-center justify-between mb-2">
							<span class="text-sm font-medium text-amber-800 dark:text-amber-200">对话字段</span>
							<span class="px-1.5 py-0.5 text-xs bg-amber-100 text-amber-600 dark:bg-amber-900 dark:text-amber-300 rounded">必选</span>
						</label>
						<select
							:value="selectedChatField"
							@change="handleChatFieldChange"
							class="w-full px-3 py-2 text-sm text-gray-900 transition-colors bg-white border rounded-md dark:bg-gray-800 border-amber-300 dark:border-amber-700 dark:text-gray-100 focus:ring-2 focus:ring-amber-500 focus:border-transparent"
						>
							<option value="">请选择对话字段</option>
							<option v-for="option in chatFieldOptions" :key="option.value" :value="option.value">
								{{ option.label }}
							</option>
						</select>
						<div class="flex items-start mt-2 space-x-2 text-xs text-amber-700 dark:text-amber-300">
							<svg class="w-3 h-3 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
								<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
							</svg>
							<span>选择的字段值将自动使用底部输入框的内容</span>
						</div>
					</div>
				</div>

				<!-- 其他参数配置 -->
				<div v-if="displayParams.length > 0">
					<div class="flex items-center mb-3 space-x-2">
						<svg class="w-4 h-4 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20">
							<path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM15 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4z" />
						</svg>
						<span class="text-sm font-medium text-gray-700 dark:text-gray-300">其他参数</span>
						<span class="text-xs text-gray-500 dark:text-gray-400">({{ displayParams.length }} 个)</span>
					</div>
					<div class="space-y-4">
						<div v-for="(param, index) in displayParams" :key="index" class="p-3 transition-colors border border-gray-200 rounded-lg param-item bg-gray-50 dark:bg-gray-800 dark:border-gray-700 hover:border-blue-300 dark:hover:border-blue-600">
							<label class="flex items-center justify-between mb-2">
								<span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ param.name }}</span>
								<span v-if="param.required" class="px-1.5 py-0.5 text-xs bg-red-100 text-red-600 dark:bg-red-900 dark:text-red-300 rounded">必填</span>
							</label>
							<input
								v-if="param.inputType === 'input'"
								v-model="param.value"
								@input="handleParamChange"
								type="text"
								class="w-full px-3 py-2 text-sm text-gray-900 transition-colors bg-white border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
								:placeholder="`请输入${param.name}`"
							/>
							<input
								v-else-if="param.inputType === 'number'"
								v-model.number="param.value"
								@input="handleParamChange"
								type="number"
								class="w-full px-3 py-2 text-sm text-gray-900 transition-colors bg-white border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
								:placeholder="`请输入${param.name}`"
							/>
							<textarea
								v-else-if="param.inputType === 'textarea'"
								v-model="param.value"
								@input="handleParamChange"
								rows="2"
								class="w-full px-3 py-2 text-sm text-gray-900 transition-colors bg-white border border-gray-300 rounded-md resize-none dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
								:placeholder="`请输入${param.name}`"
							></textarea>
							<select
								v-else-if="param.inputType === 'select'"
								v-model="param.value"
								@change="handleParamChange"
								class="w-full px-3 py-2 text-sm text-gray-900 transition-colors bg-white border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
							>
								<option value="">请选择{{ param.name }}</option>
								<option v-for="option in param.options" :key="option.value" :value="option.value">
									{{ option.label }}
								</option>
							</select>
							<div v-if="param.type === 'prompt' || param.type === 'message'" class="flex items-center mt-2 space-x-1 text-xs text-blue-600 dark:text-blue-400">
								<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
									<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
								</svg>
								<span>此参数将自动使用您的消息内容</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</transition>
	</div>
</template>

<script setup lang="ts">
import type { FlowParam, FlowParamsValidationResult, ChatFieldOption } from '../ts/flow-params';

const props = defineProps<{
	flowId: string;
	flowStartParams: FlowParam[];
	selectedChatField: string;
	isCollapsed: boolean;
}>();

const emit = defineEmits<{
	'update:selectedChatField': [value: string];
	'update:isCollapsed': [value: boolean];
	'paramsChange': [params: FlowParam[]];
}>();

// 计算属性：过滤掉对话字段的参数列表
const displayParams = computed(() => {
	return props.flowStartParams.filter(param => param.name !== props.selectedChatField);
});

// 计算属性：可用作对话字段的参数选项
const chatFieldOptions = computed((): ChatFieldOption[] => {
	return props.flowStartParams.map(param => ({
		label: param.name,
		value: param.name
	}));
});

// 处理折叠状态切换
const toggleCollapse = () => {
	emit('update:isCollapsed', !props.isCollapsed);
};

// 处理对话字段变更
const handleChatFieldChange = (event: Event) => {
	const target = event.target as HTMLSelectElement;
	emit('update:selectedChatField', target.value);
};

// 处理参数值变更
const handleParamChange = () => {
	// 触发参数变更事件，通知父组件
	emit('paramsChange', props.flowStartParams);
};

// 验证必填参数
const validateRequiredParams = (): FlowParamsValidationResult => {
	const missingParams = props.flowStartParams.filter(param => 
		param.required && 
		param.type !== 'prompt' && 
		param.type !== 'message' && 
		param.name !== props.selectedChatField && // 排除对话字段
		!param.value
	);
	
	return {
		isValid: missingParams.length === 0,
		missingParams: missingParams.map(p => p.name)
	};
};

// 对外暴露方法
defineExpose({
	validateRequiredParams
});
</script>

<style scoped>
.flow-params-container {
	position: relative;
	z-index: 10;
	box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
}

.param-item {
	transition: all 0.2s ease-in-out;
}

.param-item:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 自定义滚动条样式 */
.max-h-96::-webkit-scrollbar {
	width: 6px;
}

.max-h-96::-webkit-scrollbar-track {
	background: transparent;
}

.max-h-96::-webkit-scrollbar-thumb {
	background: rgba(156, 163, 175, 0.5);
	border-radius: 3px;
}

.max-h-96::-webkit-scrollbar-thumb:hover {
	background: rgba(156, 163, 175, 0.7);
}

/* 深色模式下的滚动条 */
.dark .max-h-96::-webkit-scrollbar-thumb {
	background: rgba(75, 85, 99, 0.5);
}

.dark .max-h-96::-webkit-scrollbar-thumb:hover {
	background: rgba(75, 85, 99, 0.7);
}

/* 确保过渡动画平滑 */
.transition-all {
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
</style>
