<template>
  <div class="skills-tab">
    <div v-if="skillsStore.isLoading" class="skills-tab__loading">
      <a-spin size="small" />
      <span>加载{{ title }}...</span>
    </div>

    <div v-else-if="skillsStore.error" class="skills-tab__error">
      <WarningOutlined />
      <span>{{ skillsStore.error }}</span>
    </div>

    <div v-else-if="visibleSkills.length === 0" class="skills-tab__empty">
      <component :is="emptyIcon" />
      <span>{{ emptyText }}</span>
    </div>

    <div v-else class="skills-tab__list">
      <div
        v-for="skill in visibleSkills"
        :key="skill.name"
        class="skills-tab__item"
        :class="`skills-tab__item--${skill.category || 'business_skill'}`"
        @click="openSkill(skill.name)"
      >
        <div class="skills-tab__item-header">
          <component :is="iconFor(skill)" class="skills-tab__item-icon" />
          <span class="skills-tab__item-name" :title="skill.name">{{ skill.name }}</span>
          <a-badge
            class="skills-tab__item-status"
            :status="skill.status === 'active' ? 'success' : 'default'"
            :text="skill.status === 'active' ? '正常' : skill.status"
          />
        </div>
        <p class="skills-tab__item-desc">{{ skill.description || '暂无描述' }}</p>
        <div class="skills-tab__item-tags">
          <a-tag v-for="cap in skill.capabilities.slice(0, 3)" :key="cap" size="small">
            {{ cap }}
          </a-tag>
          <span v-if="skill.capabilities.length > 3" class="skills-tab__item-more">
            +{{ skill.capabilities.length - 3 }}
          </span>
        </div>
      </div>
    </div>

    <SkillDetail
      :visible="detailVisible"
      :skill="skillsStore.selectedSkill"
      @close="closeDetail"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import {
  AppstoreOutlined,
  ThunderboltOutlined,
  WarningOutlined,
} from '@ant-design/icons-vue'
import { useSkillsStore } from '@/stores/skills'
import type { ISkillInfo } from '@/api/skills'
import SkillDetail from '@/components/skills/SkillDetail.vue'

const props = withDefaults(
  defineProps<{
    /** 'agent_template' = 执行引擎, 'business_skill' = 业务技能, undefined = 全部 */
    category?: 'agent_template' | 'business_skill'
  }>(),
  {
    category: undefined,
  }
)

const skillsStore = useSkillsStore()
const detailVisible = ref(false)

const isEngine = (skill: ISkillInfo) => skill.category === 'agent_template'

const visibleSkills = computed(() => {
  if (!props.category) return skillsStore.skills
  return skillsStore.skills.filter((s) => s.category === props.category)
})

const title = computed(() => {
  if (props.category === 'agent_template') return '执行引擎列表'
  if (props.category === 'business_skill') return '技能列表'
  return '技能列表'
})

const emptyIcon = computed(() =>
  props.category === 'agent_template' ? ThunderboltOutlined : AppstoreOutlined
)

const emptyText = computed(() => {
  if (props.category === 'agent_template') return '暂无已注册执行引擎'
  if (props.category === 'business_skill') return '暂无已注册业务技能'
  return '暂无已注册技能'
})

function iconFor(skill: ISkillInfo) {
  return isEngine(skill) ? ThunderboltOutlined : AppstoreOutlined
}

async function openSkill(name: string): Promise<void> {
  await skillsStore.fetchSkillDetail(name)
  detailVisible.value = true
}

function closeDetail(): void {
  detailVisible.value = false
  skillsStore.clearSelectedSkill()
}

onMounted(() => {
  // ponytail: previously only fetched when store was empty, causing stale
  // data after skills were modified elsewhere. Always fetch on mount —
  // the store handles deduplication and this tab is not mounted often.
  skillsStore.fetchSkills()
})
</script>

<style scoped>
.skills-tab {
  height: 100%;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
}

.skills-tab__loading,
.skills-tab__error,
.skills-tab__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8) 0;
  color: var(--text-tertiary);
  font-size: var(--font-sm);
}

.skills-tab__error {
  color: var(--color-error);
}

.skills-tab__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.skills-tab__item {
  padding: var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.skills-tab__item:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-color-hover);
}

.skills-tab__item-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  min-width: 0;
}

.skills-tab__item-icon {
  flex-shrink: 0;
  color: var(--color-primary);
  font-size: var(--font-sm);
  margin-top: 2px;
}

.skills-tab__item--agent_template .skills-tab__item-icon {
  color: var(--accent-board);
}

.skills-tab__item-name {
  flex: 1;
  min-width: 0;
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills-tab__item-status {
  flex-shrink: 0;
}

.skills-tab__item-desc {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin: 0 0 var(--space-2);
  line-height: var(--leading-normal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.skills-tab__item-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.skills-tab__item-more {
  font-size: var(--font-xs);
  color: var(--text-placeholder);
}
</style>
