<template>
	<div class="skills-panel">
		<div class="toolbar">
			<el-input
				v-model="keyword"
				clearable
				placeholder="搜索技能名称或描述"
				class="search-input"
			>
				<template #prefix>
					<el-icon><Search /></el-icon>
				</template>
			</el-input>
			<el-button @click="loadSkills" :loading="loading">刷新</el-button>
		</div>

		<div v-loading="loading" class="card-grid">
			<el-empty v-if="!visibleList.length && !loading" description="暂无 Skills" class="empty" />
			<div v-for="item in visibleList" :key="item.name" class="skill-card">
				<div class="skill-card__top">
					<div class="skill-card__title">{{ item.name }}</div>
					<el-tag effect="plain" type="info">Skill</el-tag>
				</div>
				<div class="skill-card__desc">{{ item.description || '暂无描述' }}</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { resource } from '@repo/api-service'

type SkillsListResponse = Awaited<ReturnType<typeof resource.postSkillsList>>
type SkillItem = NonNullable<SkillsListResponse['result']>[number]

const keyword = ref('')
const loading = ref(false)
const list = ref<SkillItem[]>([])

const visibleList = computed(() => {
	const value = keyword.value.trim().toLowerCase()
	if (!value) return list.value
	return list.value.filter((item) =>
		[item.name, item.description].some((field) => field?.toLowerCase().includes(value))
	)
})

async function loadSkills() {
	loading.value = true
	try {
		const res = await resource.postSkillsList({})
		if (res?.isSuccess) {
			list.value = (res.result || []) as SkillItem[]
		}
	} finally {
		loading.value = false
	}
}

onMounted(() => {
	loadSkills()
})
</script>

<style scoped lang="less">
.skills-panel {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.search-input {
	width: 320px;
}

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
	min-height: 180px;
}

.skill-card {
	padding: 16px;
	border-radius: 18px;
	border: 1px solid #e5e7eb;
	background: #fff;
	box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
}

.skill-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.skill-card__title {
	font-size: 18px;
	font-weight: 700;
	color: #111827;
}

.skill-card__desc {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.6;
	color: #6b7280;
}

.empty {
	grid-column: 1 / -1;
	padding: 24px 0;
}

@media (max-width: 768px) {
	.search-input {
		width: 100%;
	}
}
</style>
