<script setup lang="ts">
import { ChevronRight, Loader, Hash, Activity, Plus } from 'lucide-vue-next'
import { useKnowledgeView } from '@/pages/knowledge/composables/useKnowledgeView'
import './KnowledgeHud.css'

const { folders, isLoadingDocuments, openNewFolderDialog } = useKnowledgeView()

const emit = defineEmits<{
  (e: 'select-folder', folder: any): void
}>()

function handleSelect(folder: any) {
  emit('select-folder', folder)
}
</script>

<template>
  <div class="knowledge-launcher">
    <div class="launcher-header-jarvis">
      <div class="header-main">
        <Hash :size="10" class="tech-icon" />
        <span class="launcher-title">DIRECTORY_0x{{ folders.length }}</span>
      </div>
      <button class="action-btn-jarvis" @click="openNewFolderDialog(null)">
        <Plus :size="10" />
        <span>Init_Node</span>
      </button>
    </div>
    
    <div class="folder-scroll">
      <button 
        v-for="(folder, index) in folders" 
        :key="folder.id" 
        class="folder-node-jarvis"
        @click="handleSelect(folder)"
      >
        <span class="node-coord">[{{ index.toString().padStart(2, '0') }}]</span>
        <span class="node-name">{{ folder.name }}</span>
        <Activity :size="10" class="tech-activity" />
      </button>
    </div>
    
    <div class="launcher-footer-tech">
      <div class="status-pulse"></div>
      <span>SYSTEM_STREAM_ACTIVE</span>
    </div>
  </div>
</template>

<style scoped>
.header-main { display: flex; align-items: center; gap: 6px; }
.tech-icon { color: var(--jarvis-cyan); }
.node-coord { font-family: var(--font-mono); font-size: 8px; color: var(--jarvis-cyan); opacity: 0.5; }
.node-name { flex: 1; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.05em; }
.tech-activity { opacity: 0.3; color: var(--jarvis-cyan); }
.launcher-footer-tech { padding: 6px 12px; display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 7px; color: var(--text-dim); border-top: 1px solid rgba(255,255,255,0.05); }
.status-pulse { width: 4px; height: 4px; border-radius: 50%; background: var(--jarvis-cyan); box-shadow: 0 0 5px var(--jarvis-cyan); animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
</style>
