<script setup lang="ts">
import { useAgentsStore } from '../../stores/agents'
import type { SkillEntry } from '../../stores/agents'

const store = useAgentsStore()

function selectSkill(skill: SkillEntry) {
  store.selectedSkill = skill
}
</script>

<template>
  <div class="skills-manager">
    <!-- Header -->
    <div class="skills-header">
      <h3>Skills</h3>
      <span class="skills-count">{{ store.skills.length }} skills</span>
    </div>

    <!-- Loading -->
    <div v-if="store.skillsLoading" class="skills-loading">Loading skills...</div>

    <!-- Error -->
    <div v-if="store.error" class="skills-error">{{ store.error }}</div>

    <!-- Two-column layout -->
    <div v-if="!store.skillsLoading" class="skills-layout">
      <!-- Left: skills list -->
      <aside class="skills-list">
        <button
          v-for="skill in store.skills"
          :key="skill.name"
          class="skill-item"
          :class="{ active: store.selectedSkill?.name === skill.name }"
          @click="selectSkill(skill)"
        >
          <div class="skill-item-main">
            <span class="skill-name">{{ skill.name }}</span>
            <span v-if="skill.references.length" class="skill-refs">{{ skill.references.length }} files</span>
          </div>
          <p v-if="skill.description" class="skill-desc">{{ skill.description }}</p>
        </button>

        <div v-if="!store.skills.length" class="skills-empty-list">
          <p>No skills found</p>
          <span>Add a SKILL.md to .claude/skills/*/</span>
        </div>
      </aside>

      <!-- Right: skill detail -->
      <main class="skill-detail">
        <template v-if="store.selectedSkill">
          <div class="skill-detail-header">
            <h4>{{ store.selectedSkill.name }}</h4>
            <span class="skill-detail-path" :title="store.selectedSkill.path">{{ store.selectedSkill.path }}</span>
          </div>

          <!-- SKILL.md content -->
          <div class="skill-md-content">
            <pre>{{ store.selectedSkill.skillMdContent }}</pre>
          </div>

          <!-- References -->
          <div v-if="store.selectedSkill.references.length" class="skill-references">
            <h5>Referenced Files</h5>
            <div class="ref-list">
              <div v-for="ref in store.selectedSkill.references" :key="ref.name" class="ref-item">
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/>
                </svg>
                <span>{{ ref.name }}</span>
              </div>
            </div>
          </div>
        </template>

        <div v-else class="skill-detail-empty">
          <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
            <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
          </svg>
          <p>Select a skill to view details</p>
        </div>
      </main>
    </div>
  </div>
</template>

<style scoped>
.skills-manager {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.skills-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.skills-header h3 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.skills-count {
  font-size: 0.6875rem;
  color: var(--text-muted);
  padding: 0.125rem 0.5rem;
  background: var(--bg-hover);
  border-radius: 999px;
}

.skills-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.skills-error {
  padding: 0.625rem 1.25rem;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  font-size: 0.8125rem;
  border-bottom: 1px solid rgba(239, 68, 68, 0.2);
}

/* Two-column layout */
.skills-layout {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.skills-list {
  width: 280px;
  min-width: 280px;
  border-right: 1px solid var(--border-color);
  overflow-y: auto;
  background: var(--bg-secondary);
}

.skill-item {
  width: 100%;
  display: block;
  padding: 0.625rem 0.875rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-color);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}

.skill-item:hover {
  background: var(--bg-hover);
}

.skill-item.active {
  background: rgba(99, 102, 241, 0.08);
}

.skill-item-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.skill-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
}

.skill-refs {
  font-size: 0.625rem;
  color: var(--text-muted);
  padding: 0.0625rem 0.375rem;
  background: var(--bg-hover);
  border-radius: 999px;
  flex-shrink: 0;
}

.skill-desc {
  margin: 0.25rem 0 0;
  font-size: 0.6875rem;
  color: var(--text-muted);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skills-empty-list {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-muted);
}

.skills-empty-list p {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
}

.skills-empty-list span {
  font-size: 0.6875rem;
  opacity: 0.6;
}

/* Skill detail */
.skill-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-primary);
}

.skill-detail-header {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.skill-detail-header h4 {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.skill-detail-path {
  font-size: 0.6875rem;
  color: var(--text-muted);
  font-family: 'Consolas', monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.skill-md-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
}

.skill-md-content pre {
  margin: 0;
  font-size: 0.8125rem;
  font-family: 'Consolas', 'Monaco', monospace;
  color: var(--text-primary);
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.skill-references {
  border-top: 1px solid var(--border-color);
  padding: 0.75rem 1.25rem;
  background: var(--bg-secondary);
}

.skill-references h5 {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
}

.ref-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ref-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.ref-item svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

.skill-detail-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--text-muted);
}

.skill-detail-empty p {
  font-size: 0.875rem;
  margin: 0;
}
</style>
