<template>
	<div class="command-list">
		<div v-for="command in commandList" :key="command.id" class="command-card" @click="handleCommandClick(command)">
			<div class="command-icon">
				<el-icon :size="32" color="#3b82f6">
					<Lightning />
				</el-icon>
			</div>
			<div class="command-content">
				<h3 class="command-name">{{ command.name }}</h3>
				<p class="command-desc">{{ command.description }}</p>
				<div class="command-trigger">
					<el-tag size="small" type="info">{{ command.trigger }}</el-tag>
				</div>
			</div>
			<div class="command-actions">
				<el-button text size="small" @click.stop="handleEdit(command)">
					<el-icon><Edit /></el-icon>
				</el-button>
				<el-button text size="small" type="danger" @click.stop="handleDelete(command)">
					<el-icon><Delete /></el-icon>
				</el-button>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Lightning, Edit, Delete } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

interface Command {
	id: number;
	name: string;
	description: string;
	trigger: string;
	action: string;
}

const commandList = ref<Command[]>([
	{
		id: 1,
		name: '快速创建组件',
		description: '快速创建一个 Vue 组件模板，包含基础结构和样式',
		trigger: '/component',
		action: 'create_component',
	},
	{
		id: 2,
		name: '生成 API 接口',
		description: '根据接口文档快速生成 API 请求函数',
		trigger: '/api',
		action: 'generate_api',
	},
	{
		id: 3,
		name: '代码格式化',
		description: '格式化当前文件的代码，统一代码风格',
		trigger: '/format',
		action: 'format_code',
	},
	{
		id: 4,
		name: '添加类型定义',
		description: '为 JavaScript 代码添加 TypeScript 类型定义',
		trigger: '/types',
		action: 'add_types',
	},
	{
		id: 5,
		name: '生成测试用例',
		description: '为当前组件或函数生成单元测试代码',
		trigger: '/test',
		action: 'generate_test',
	},
	{
		id: 6,
		name: '优化性能',
		description: '分析代码并提供性能优化建议',
		trigger: '/optimize',
		action: 'optimize_code',
	},
]);

const handleCommandClick = (command: Command) => {
	ElMessage.success(`执行指令: ${command.name}`);
};

const handleEdit = (command: Command) => {
	ElMessage.info(`编辑指令: ${command.name}`);
};

const handleDelete = (command: Command) => {
	ElMessage.warning(`删除指令: ${command.name}`);
};
</script>

<style scoped lang="scss">
.command-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	gap: 16px;
}

.command-card {
	background: #ffffff;
	border-radius: 12px;
	padding: 20px;
	border: 1px solid #e5e7eb;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	gap: 16px;
	align-items: flex-start;

	&:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		transform: translateY(-2px);
		border-color: #3b82f6;
		background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
	}
}

.command-icon {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
	border-radius: 12px;
}

.command-content {
	flex: 1;
	min-width: 0;
}

.command-name {
	font-size: 16px;
	font-weight: 600;
	color: #1f2937;
	margin: 0 0 8px 0;
}

.command-desc {
	font-size: 13px;
	color: #6b7280;
	line-height: 1.5;
	margin: 0 0 12px 0;
}

.command-trigger {
	display: inline-block;
}

.command-actions {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
</style>
