<template>
	<a-drawer v-model:open="visible" :title="$t('common.taskCenter')" placement="right" :width="400" :destroyOnClose="true">
		<div class="task-drawer">
			<!-- 任务统计 -->
			<div class="task-stats">
				<div class="stat-item">
					<div class="stat-number">{{ totalTasks }}</div>
					<div class="stat-label">{{ $t('common.totalTasks') }}</div>
				</div>
				<div class="stat-item">
					<div class="stat-number pending">{{ pendingTasks }}</div>
					<div class="stat-label">
						{{ $t('common.pendingTasks') }}
					</div>
				</div>
				<div class="stat-item">
					<div class="stat-number completed">
						{{ completedTasks }}
					</div>
					<div class="stat-label">
						{{ $t('common.completedTasks') }}
					</div>
				</div>
			</div>

			<!-- 操作栏 -->
			<div class="task-actions">
				<a-input v-model:value="searchKeyword" :placeholder="$t('common.searchTasks')" allow-clear @input="handleSearch">
					<template #prefix>
						<SearchOutlined />
					</template>
				</a-input>
				<div class="filter-buttons">
					<a-button :type="filterType === 'all' ? 'primary' : 'default'" size="small" @click="setFilter('all')">
						{{ $t('common.all') }}
					</a-button>
					<a-button :type="filterType === 'pending' ? 'primary' : 'default'" size="small" @click="setFilter('pending')">
						{{ $t('common.pending') }}
					</a-button>
					<a-button :type="filterType === 'completed' ? 'primary' : 'default'" size="small" @click="setFilter('completed')">
						{{ $t('common.completed') }}
					</a-button>
				</div>
			</div>

			<!-- 任务列表 -->
			<div class="task-list">
				<div v-if="filteredTasks.length > 0">
					<div v-for="task in filteredTasks" :key="task.id" class="task-item" :class="{ completed: task.completed }">
						<div class="task-checkbox">
							<a-checkbox :checked="task.completed" @change="toggleTask(task)" />
						</div>
						<div class="task-content">
							<div class="task-title">{{ task.title }}</div>
							<div class="task-meta">
								<span class="task-priority" :class="task.priority">
									{{ $t(`common.priority${task.priority.charAt(0).toUpperCase() + task.priority.slice(1)}`) }}
								</span>
								<span class="task-time">{{ task.time }}</span>
							</div>
						</div>
						<div class="task-actions">
							<a-popconfirm :title="$t('common.confirmDelete')" :ok-text="$t('common.confirm')" :cancel-text="$t('common.cancel')" @confirm="deleteTask(task.id)">
								<DeleteOutlined class="action-icon" />
							</a-popconfirm>
						</div>
					</div>
				</div>
				<a-empty v-else :description="$t('common.noTasks')" />
			</div>

			<!-- 底部操作 -->
			<div class="drawer-footer">
				<a-button @click="showAddTask">
					<PlusOutlined />
					{{ $t('common.addTask') }}
				</a-button>
				<a-button danger @click="clearAllTasks">
					{{ $t('common.clearAll') }}
				</a-button>
			</div>
		</div>

		<!-- 添加任务弹窗 -->
		<a-modal v-model:open="addTaskVisible" :title="$t('common.addTask')" :ok-text="$t('common.confirm')" :cancel-text="$t('common.cancel')" @ok="confirmAddTask">
			<a-form layout="vertical">
				<a-form-item :label="$t('common.taskTitle')">
					<a-input v-model:value="newTask.title" :placeholder="$t('common.enterTaskTitle')" />
				</a-form-item>
				<a-form-item :label="$t('common.taskPriority')">
					<a-select v-model:value="newTask.priority">
						<a-select-option value="low">{{ $t('common.priorityLow') }}</a-select-option>
						<a-select-option value="medium">{{ $t('common.priorityMedium') }}</a-select-option>
						<a-select-option value="high">{{ $t('common.priorityHigh') }}</a-select-option>
					</a-select>
				</a-form-item>
			</a-form>
		</a-modal>
	</a-drawer>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { message } from 'ant-design-vue'
import { SearchOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue'
import { useI18n } from 'vue-i18n'

// 定义组件名称
defineOptions({
	name: 'TaskDrawer',
})

const { t } = useI18n()

const visible = defineModel('visible', { type: Boolean, default: false })

const tasks = defineModel('tasks', { type: Array, default: () => [] })

// 搜索关键词
const searchKeyword = ref('')
// 筛选类型：all, pending, completed
const filterType = ref('all')

// 添加任务弹窗
const addTaskVisible = ref(false)
const newTask = ref({
	title: '',
	priority: 'medium',
})

// 统计数据
const totalTasks = computed(() => tasks.value.length)
const pendingTasks = computed(() => tasks.value.filter((t) => !t.completed).length)
const completedTasks = computed(() => tasks.value.filter((t) => t.completed).length)

// 筛选后的任务列表
const filteredTasks = computed(() => {
	let result = [...tasks.value]

	// 按状态筛选
	if (filterType.value === 'pending') {
		result = result.filter((t) => !t.completed)
	} else if (filterType.value === 'completed') {
		result = result.filter((t) => t.completed)
	}

	// 按关键词搜索
	if (searchKeyword.value.trim()) {
		const keyword = searchKeyword.value.toLowerCase()
		result = result.filter((t) => t.title.toLowerCase().includes(keyword))
	}

	return result
})

// 切换任务状态
const toggleTask = (task) => {
	task.completed = !task.completed
}

// 删除任务
const deleteTask = (id) => {
	const index = tasks.value.findIndex((t) => t.id === id)
	if (index > -1) {
		tasks.value.splice(index, 1)
		message.success(t('common.deleted'))
	}
}

// 清空所有任务
const clearAllTasks = () => {
	tasks.value = []
	message.success(t('common.cleared'))
}

// 显示添加任务弹窗
const showAddTask = () => {
	newTask.value = {
		title: '',
		priority: 'medium',
	}
	addTaskVisible.value = true
}

// 确认添加任务
const confirmAddTask = () => {
	if (!newTask.value.title.trim()) {
		message.warning(t('common.pleaseEnterTaskTitle'))
		return
	}

	tasks.value.unshift({
		id: Date.now(),
		title: newTask.value.title,
		priority: newTask.value.priority,
		completed: false,
		time: t('common.justNow'),
	})

	addTaskVisible.value = false
	message.success(t('common.added'))
}

// 设置筛选类型
const setFilter = (type) => {
	filterType.value = type
}

// 搜索处理
const handleSearch = () => {
	// 搜索逻辑在 computed 中自动处理
}

// 监听抽窗关闭，重置搜索和筛选
watch(visible, (newVal) => {
	if (!newVal) {
		searchKeyword.value = ''
		filterType.value = 'all'
	}
})
</script>

<style scoped lang="scss">
.task-drawer {
	display: flex;
	flex-direction: column;
	height: 100%;

	.task-stats {
		display: flex;
		gap: 16px;
		margin-bottom: 20px;
		padding: 16px;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 8px;

		.stat-item {
			flex: 1;
			text-align: center;

			.stat-number {
				font-size: 28px;
				font-weight: bold;
				color: #fff;
				margin-bottom: 4px;

				&.pending {
					color: #ffd666;
				}

				&.completed {
					color: #95de64;
				}
			}

			.stat-label {
				font-size: 12px;
				color: rgba(255, 255, 255, 0.9);
			}
		}
	}

	.task-actions {
		margin-bottom: 16px;

		:deep(.ant-input-affix-wrapper) {
			margin-bottom: 12px;
		}

		.filter-buttons {
			display: flex;
			gap: 8px;

			.ant-btn {
				flex: 1;
			}
		}
	}

	.task-list {
		flex: 1;
		overflow-y: auto;
		margin-bottom: 16px;
		padding-right: 8px;

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

		&::-webkit-scrollbar-track {
			background: #f1f1f1;
			border-radius: 3px;
		}

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

			&:hover {
				background: #a8a8a8;
			}
		}

		.task-item {
			display: flex;
			align-items: center;
			padding: 12px;
			margin-bottom: 8px;
			background-color: #f9f9f9;
			border-radius: 6px;
			transition: all 0.2s;

			&:hover {
				background-color: #f0f0f0;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
			}

			&.completed {
				.task-title {
					text-decoration: line-through;
					color: #999;
				}

				.task-content {
					opacity: 0.6;
				}
			}

			.task-checkbox {
				margin-right: 12px;
				flex-shrink: 0;
			}

			.task-content {
				flex: 1;
				min-width: 0;

				.task-title {
					font-size: 14px;
					color: #333;
					margin-bottom: 4px;
					font-weight: 500;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.task-meta {
					display: flex;
					align-items: center;
					gap: 8px;
					font-size: 12px;

					.task-priority {
						padding: 2px 8px;
						border-radius: 10px;
						font-weight: 500;

						&.high {
							background-color: #fff1f0;
							color: #ff4d4f;
						}

						&.medium {
							background-color: #fff7e6;
							color: #fa8c16;
						}

						&.low {
							background-color: #f6ffed;
							color: #52c41a;
						}
					}

					.task-time {
						color: #999;
					}
				}
			}

			.task-actions {
				margin-left: 8px;
				flex-shrink: 0;

				.action-icon {
					font-size: 16px;
					color: #999;
					cursor: pointer;
					transition: color 0.2s;

					&:hover {
						color: #ff4d4f;
					}
				}
			}
		}
	}

	.drawer-footer {
		padding-top: 16px;
		border-top: 1px solid #f0f0f0;
		display: flex;
		gap: 12px;

		.ant-btn {
			flex: 1;
		}
	}
}
</style>
