<template>
	<div v-if="isOpen" class="search-dialog-overlay" @click.self="closeDialog">
		<div class="search-dialog-container">
			<!-- 搜索框 -->
			<div class="search-header">
				<el-input v-model="searchQuery" :placeholder="t('shared.searchDialog.placeholder')" clearable
					@keydown.escape="closeDialog" autofocus>
					<template #prefix>
						<el-icon>
							<Search />
						</el-icon>
					</template>
				</el-input>
			</div>

			<!-- 项目 -->
			<div class="search-section" v-if="!searchQuery">
				<div class="section-title">{{ t('shared.searchDialog.sections.projects') }}</div>
				<div class="search-items">
					<div class="search-item" v-for="item in projectItems" :key="item.id" @click="selectItem(item)">
						<span class="item-icon">{{ item.icon }}</span>
						<span class="item-text">{{ item.text }}</span>
					</div>
				</div>
			</div>

			<!-- 工作流程 -->
			<div class="search-section" v-if="!searchQuery">
				<div class="section-title">{{ t('shared.searchDialog.sections.workflows') }}</div>
				<div class="search-items">
					<div class="search-item action-item" @click="handleCreateWorkflow">
						<span class="item-icon">+</span>
						<span class="item-text">{{ t('shared.searchDialog.createWorkflow') }}</span>
					</div>
				</div>
			</div>

			<!-- 搜索结果 -->
			<div class="search-section" v-if="searchQuery">
				<div class="section-title">{{ t('shared.searchDialog.sections.results') }}</div>
				<div class="search-items">
					<div class="search-item" v-for="item in filteredResults" :key="item.id" @click="selectItem(item)">
						<span class="item-icon">{{ item.icon || '→' }}</span>
						<span class="item-text">{{ item.text }}</span>
					</div>
					<div v-if="filteredResults.length === 0" class="no-results">
						{{ t('shared.searchDialog.noResults') }}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { useI18n } from '@/composables/useI18n'

interface SearchItem {
	id: string
	text: string
	icon?: string
	action?: () => void
}

const router = useRouter()
const { t, tm } = useI18n()

const props = defineProps({
	isOpen: {
		type: Boolean,
		required: true
	}
})

const emit = defineEmits(['close', 'select'])

const searchQuery = ref('')

const recentItems = computed<SearchItem[]>(() =>
	((tm('shared.searchDialog.recentItems') as string[]) || []).map((text, index) => ({
		id: String(index + 1),
		text
	}))
)

const projectItems = computed<SearchItem[]>(() =>
	((tm('shared.searchDialog.projectItems') as string[]) || []).map((text, index) => ({
		id: String(index + 4),
		text,
		icon: '📁'
	}))
)

const allItems = computed(() => [...recentItems.value, ...projectItems.value])

const filteredResults = computed(() => {
	if (!searchQuery.value.trim()) {
		return []
	}
	const query = searchQuery.value.toLowerCase()
	return allItems.value.filter((item) => item.text.toLowerCase().includes(query))
})

const closeDialog = () => {
	searchQuery.value = ''
	emit('close')
}

const selectItem = (item: SearchItem) => {
	emit('select', item)
	closeDialog()
}

const handleCreateWorkflow = () => {
	// router.push('/workflow/0')
	closeDialog()
}

const handleKeyDown = (e: KeyboardEvent) => {
	if (e.key === 'Escape' && props.isOpen) {
		closeDialog()
	}
}

onMounted(() => {
	window.addEventListener('keydown', handleKeyDown)
})

onUnmounted(() => {
	window.removeEventListener('keydown', handleKeyDown)
})
</script>

<style lang="less" scoped>
.search-dialog-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.45);
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding-top: 60px;
	z-index: 1000;
	animation: fadeIn 0.2s ease-out;

	@keyframes fadeIn {
		from {
			background: rgba(0, 0, 0, 0);
		}

		to {
			background: rgba(0, 0, 0, 0.45);
		}
	}
}

.search-dialog-container {
	width: 600px;
	max-height: 70vh;
	background: var(--bg-base);
	border-radius: 12px;
	box-shadow:
		0 3px 12px rgba(0, 0, 0, 0.15),
		0 6px 24px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	animation: slideDown 0.3s ease-out;

	@keyframes slideDown {
		from {
			opacity: 0;
			transform: translateY(-20px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

.search-header {
	padding: 16px 20px;
	border-bottom: 1px solid var(--border-light);
	display: flex;
	gap: 12px;
	align-items: center;
	background: var(--bg-container);

	:deep(.el-input) {
		input {
			border-radius: 8px;
			font-size: 14px;

			&::placeholder {
				color: var(--text-placeholder);
			}
		}
	}
}

.search-content {
	flex: 1;
	overflow-y: auto;
	padding: 12px 0;

	&::-webkit-scrollbar {
		width: 6px;
	}

	&::-webkit-scrollbar-track {
		background: transparent;
	}

	&::-webkit-scrollbar-thumb {
		background: #e0e0e0;
		border-radius: 3px;

		&:hover {
			background: #ccc;
		}
	}
}

.search-section {
	padding: 8px 0;
}

.section-title {
	font-size: 12px;
	color: var(--text-tertiary);
	padding: 8px 20px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.search-items {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0 8px;
}

.search-item {
	padding: 10px 16px;
	margin: 0 8px;
	background: transparent;
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 12px;
	transition: all 0.2s ease;
	color: var(--text-primary);
	font-size: 13px;

	&:hover {
		background: var(--bg-container);
		color: #810042;

		.item-icon {
			color: #810042;
		}
	}

	&.action-item {
		color: var(--text-tertiary);

		&:hover {
			color: #810042;
			background: #fff5f5;
		}
	}
}

.item-icon {
	font-size: 14px;
	width: 20px;
	text-align: center;
	color: #ccc;
	transition: color 0.2s ease;
	flex-shrink: 0;
}

.item-text {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.no-results {
	padding: 40px 20px;
	text-align: center;
	color: #999;
	font-size: 14px;
}
</style>
