<script lang="ts" setup>
import FileUploadInput from '@/features/fileUpload/FileUploadInput.vue'
import { useI18n } from '@/composables/useI18n'

import type { IWorkflowNode } from '@repo/workflow'
import type { StartVariable } from '@/nodes/src/start'

defineProps<{
	startNode: IWorkflowNode | null
	visibleVariables: StartVariable[]
	inputValues: Record<string, any>
	jsonDrafts: Record<string, string>
	validationErrors: Record<string, string>
	isRunning: boolean
}>()

defineEmits<{
	run: []
}>()

const { t } = useI18n()

const getInputPlaceholder = (label?: string) =>
	`${t('pages.runWorkflow.inputPanel.enter')}${label || ''}`
const getSelectPlaceholder = (label?: string) =>
	`${t('pages.runWorkflow.inputPanel.select')}${label || ''}`
</script>

<template>
	<div class="tab-pane tab-pane--fill">
		<div v-if="!startNode" class="empty-state">{{ t('pages.runWorkflow.inputPanel.noStart') }}</div>
		<div v-else-if="!visibleVariables.length" class="empty-state">
			{{ t('pages.runWorkflow.inputPanel.noInputs') }}
		</div>

		<el-form v-else label-position="top" class="input-form">
			<el-form-item
				v-for="variable in visibleVariables"
				:key="variable.name"
				:label="variable.label || variable.name"
				:required="variable.is_require"
				:error="validationErrors[variable.name]"
			>
				<div class="w-full">
					<el-input
						v-if="variable.formType === 'text-input'"
						v-model="inputValues[variable.name]"
						:maxlength="variable.max_length"
						:placeholder="getInputPlaceholder(variable.label || variable.name)"
						clearable
					/>

					<el-input
						v-else-if="variable.formType === 'text-area'"
						v-model="inputValues[variable.name]"
						type="textarea"
						:rows="4"
						:maxlength="variable.max_length"
						:placeholder="getInputPlaceholder(variable.label || variable.name)"
					/>

					<el-select
						v-else-if="variable.formType === 'select'"
						v-model="inputValues[variable.name]"
						class="w-full"
						:placeholder="getSelectPlaceholder(variable.label || variable.name)"
					>
						<el-option
							v-for="option in variable.options || []"
							:key="option"
							:label="option"
							:value="option"
						/>
					</el-select>

					<el-input-number
						v-else-if="variable.formType === 'number'"
						v-model="inputValues[variable.name]"
						controls-position="right"
						class="w-full"
					/>

					<div v-else-if="variable.formType === 'checkbox'" class="switch-line">
						<el-switch v-model="inputValues[variable.name]" />
						<span>{{ inputValues[variable.name] ? 'true' : 'false' }}</span>
					</div>

					<FileUploadInput
						v-else-if="variable.formType === 'file'"
						v-model="inputValues[variable.name]"
						:file-types="variable.file_types || []"
						:file-extensions="variable.file_extensions || []"
						:allow-link-input="false"
					/>

					<FileUploadInput
						v-else-if="variable.formType === 'file-list'"
						v-model="inputValues[variable.name]"
						multiple
						:file-types="variable.file_types || []"
						:file-extensions="variable.file_extensions || []"
						:allow-link-input="false"
					/>

					<CodeEditor
						v-else-if="variable.formType === 'json_object'"
						v-model="jsonDrafts[variable.name]"
						:tools="false"
						language="json"
						:height="180"
					/>

					<el-input
						v-else
						v-model="inputValues[variable.name]"
						:placeholder="getInputPlaceholder(variable.label || variable.name)"
						clearable
					/>
				</div>
			</el-form-item>
		</el-form>

		<div class="action-bar">
			<el-button type="primary" class="run-button" :loading="isRunning" @click="$emit('run')">
				{{ t('pages.runWorkflow.inputPanel.run') }}
			</el-button>
		</div>
	</div>
</template>

<style lang="less" scoped>
.tab-pane {
	height: 100%;
	min-height: 0;
	margin-top: 16px;
}

.tab-pane--fill {
	display: flex;
	flex-direction: column;
	padding: 0 16px 16px;
	overflow-y: auto;
}

.empty-state {
	padding: 24px 16px;
	border-radius: 12px;
	background: #f8fafc;
	color: #667085;
	line-height: 1.6;
}

.action-bar {
	margin: 16px 0;
}

.run-button {
	width: 100%;
}

.switch-line {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #344054;
}

:deep(.el-input-number.w-full) {
	width: 100%;
}
</style>
