<template>
	<div class="management-page">
		<div class="page-head">
			<div>
				<h1>{{ t('pages.skills.title') }}</h1>
				<p>{{ t('pages.skills.subtitle') }}</p>
			</div>
		</div>

		<el-card class="list-card">
			<div class="toolbar">
				<div class="toolbar-left">
					<el-input
						v-model="keyword"
						clearable
						:placeholder="t('pages.skills.searchPlaceholder')"
						class="search-input"
					>
						<template #prefix>
							<el-icon><Search /></el-icon>
						</template>
					</el-input>
					<div class="toolbar-actions">
						<el-button @click="loadSkills" :loading="loading">
							<el-icon><Refresh /></el-icon>
							{{ t('pages.skills.refresh') }}
						</el-button>
					</div>
				</div>
			</div>

			<div v-loading="loading" class="card-grid">
				<el-empty v-if="!visibleList.length && !loading" :description="t('pages.skills.noSkills')" 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 || t('pages.skills.noDescription') }}</div>
				</div>
			</div>
		</el-card>
	</div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useI18n } from '@/composables/useI18n'

const { t } = useI18n()
import { Search, Refresh } 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">
.management-page {
	padding: 24px;
	min-height: 100%;
	box-sizing: border-box;
}

.page-head {
	margin-bottom: 20px;

	h1 {
		margin: 0;
		font-size: 28px;
		color: var(--text-primary);
	}

	p {
		margin: 6px 0 0;
		font-size: 14px;
		color: var(--text-secondary);
	}
}
.list-card {
	border-radius: 18px;
	margin-bottom: 16px;
}

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

.toolbar-left {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.toolbar-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;

	.el-button + .el-button {
		margin-left: 0;
	}
}

.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 var(--border-light);
	background: var(--bg-base);
	box-shadow: var(--shadow-sm);
}

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

.skill-card__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--text-primary);
}

.skill-card__desc {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-tertiary);
}

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

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