<template>
  <div class="skill-card" :class="`skill-card--${skill.category || 'business_skill'}`" @click="$emit('click')">
    <a-card hoverable size="small">
      <template #title>
        <div class="skill-card__title">
          <component :is="titleIcon" class="skill-card__icon" />
          <span>{{ skill.name }}</span>
        </div>
      </template>
      <template #extra>
        <div class="skill-card__badges">
          <a-tag
            :color="isEngine ? 'purple' : 'blue'"
            class="skill-card__type-tag"
            :title="isEngine ? '执行引擎模板' : '业务领域技能'"
          >
            {{ isEngine ? '引擎' : '技能' }}
          </a-tag>
          <a-badge
            :status="skill.status === 'active' ? 'success' : 'default'"
            :text="skill.status === 'active' ? '正常' : skill.status"
          />
        </div>
      </template>
      <p class="skill-card__desc">{{ skill.description || '暂无描述' }}</p>
      <div v-if="modeText" class="skill-card__mode">
        <span class="skill-card__mode-label">{{ modeLabel }}:</span>
        <code class="skill-card__mode-value">{{ modeText }}</code>
      </div>
      <div class="skill-card__tags">
        <a-tag v-for="cap in skill.capabilities" :key="cap" color="blue">
          {{ cap }}
        </a-tag>
      </div>
      <div v-if="skill.dependencies.length > 0" class="skill-card__deps">
        <span class="skill-card__deps-label">依赖:</span>
        <a-tag v-for="dep in skill.dependencies.slice(0, 3)" :key="dep">
          {{ dep }}
        </a-tag>
        <span v-if="skill.dependencies.length > 3" class="skill-card__more">
          +{{ skill.dependencies.length - 3 }}
        </span>
      </div>
      <div class="skill-card__footer">
        <span v-if="skill.version" class="skill-card__version">v{{ skill.version }}</span>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ThunderboltOutlined, AppstoreOutlined } from '@ant-design/icons-vue'
import type { ISkillInfo } from '@/api/skills'

const props = defineProps<{
  skill: ISkillInfo
}>()

defineEmits<{
  click: []
}>()

const isEngine = computed(() => props.skill.category === 'agent_template')

// Differentiate icon by category: engine = thunderbolt, business = appstore
const titleIcon = computed(() => (isEngine.value ? ThunderboltOutlined : AppstoreOutlined))

// Show the most relevant mode field.
// Agent templates: execution_mode (react/direct/rewoo/...).
// Business skills: agent_type (the domain identifier).
const modeText = computed(() =>
  isEngine.value ? props.skill.execution_mode : props.skill.agent_type
)
const modeLabel = computed(() => (isEngine.value ? '执行模式' : '领域类型'))
</script>

<style scoped>
.skill-card {
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.skill-card:hover {
  transform: translateY(-1px);
}

.skill-card__title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.skill-card__icon {
  color: var(--color-primary);
}

.skill-card--agent_template .skill-card__icon {
  color: var(--accent-board); /* purple — matches the 引擎 tag, dark-mode aware */
}

.skill-card__badges {
  display: flex;
  align-items: center;
  gap: 6px;
}

.skill-card__type-tag {
  margin-right: 0;
}

.skill-card__mode {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: var(--space-2);
  font-size: var(--font-xs);
}

.skill-card__mode-label {
  color: var(--text-placeholder);
}

.skill-card__mode-value {
  font-family: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  padding: 1px 4px;
  border-radius: 3px;
}

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

.skill-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--space-2);
}

.skill-card__deps {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.skill-card__deps-label {
  font-size: var(--font-xs);
  color: var(--text-placeholder);
}

.skill-card__more {
  font-size: var(--font-xs);
  color: var(--text-placeholder);
}

.skill-card__footer {
  margin-top: var(--space-2);
  display: flex;
  justify-content: flex-end;
}

.skill-card__version {
  font-size: var(--font-xs);
  color: var(--text-placeholder);
  font-family: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
}
</style>
