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

const props = defineProps<{
  doc: any
}>()

const emit = defineEmits(['close'])

const {
  activeDocumentContent,
  isLoadingDocumentContent,
  openDocument,
  getFileTypeColor,
  formatFileSize,
} = useKnowledgeView()

watch(() => props.doc, (newDoc) => {
  if (newDoc) {
    openDocument(newDoc)
  }
}, { immediate: true })
</script>

<template>
  <div class="knowledge-hud-preview" @click.self="emit('close')">
    <div class="hud-frame-jarvis">
      <!-- Outer scan decoration -->
      <div class="tech-corner tl"></div>
      <div class="tech-corner tr"></div>
      <div class="tech-corner bl"></div>
      <div class="tech-corner br"></div>

      <header class="hud-header-jarvis">
        <div class="header-left-tech">
          <Terminal :size="16" class="glow-cyan" />
          <div class="title-stack">
            <span class="sub-kicker">SECURE_DATA_PROJECTOR // V3.0</span>
            <h3 class="main-title-jarvis">{{ props.doc?.title.toUpperCase() }}</h3>
          </div>
        </div>
        <div class="header-right-tech">
          <div class="meta-pillar">
            <span class="meta-label">STATUS</span>
            <span class="meta-val cyan">ENCRYPTED</span>
          </div>
          <div class="meta-pillar">
            <span class="meta-label">TYPE</span>
            <span class="meta-val amber">{{ props.doc?.file_type.toUpperCase() }}</span>
          </div>
          <button class="close-jarvis-btn" @click="emit('close')">ABORT_X</button>
        </div>
      </header>

      <div class="hud-body-jarvis slim-scroll">
        <div v-if="isLoadingDocumentContent" class="decoding-screen">
          <Activity :size="40" class="pulse-tech" />
          <span class="decoding-text">ANALYZING_BYTESTREAM...</span>
          <div class="progress-bar-tech"><div class="progress-fill"></div></div>
        </div>
        <div v-else class="content-matrix-wrap">
          <div class="line-numbers">
            <div v-for="n in 20" :key="n" class="ln">{{ (n * 100).toString(16).toUpperCase() }}</div>
          </div>
          <pre class="preview-content-jarvis">{{ activeDocumentContent || '--- NO_DATA_STREAMS_DETECTED ---' }}</pre>
        </div>
      </div>
      
      <footer class="hud-footer-jarvis">
        <div class="footer-left">
          <ShieldCheck :size="12" />
          <span>AUTHORIZED_ACCESS_ONLY // UID_0x88219</span>
        </div>
        <div class="footer-right">
          <span>PARSING_COMPLETE</span>
          <div class="bit-dot"></div>
        </div>
      </footer>
    </div>
  </div>
</template>

<style scoped>
.hud-header-jarvis { padding: 30px; display: flex; justify-content: space-between; align-items: flex-start; background: rgba(0, 245, 212, 0.05); border-bottom: 1px solid rgba(0, 245, 212, 0.2); }
.header-left-tech { display: flex; gap: 20px; align-items: center; }
.title-stack { display: flex; flex-direction: column; gap: 4px; }
.sub-kicker { font-family: var(--font-mono); font-size: 9px; color: var(--jarvis-cyan); letter-spacing: 0.3em; }
.main-title-jarvis { font-family: var(--font-display); font-size: 26px; color: #fff; margin: 0; text-shadow: 0 0 20px rgba(0, 245, 212, 0.4); }

.header-right-tech { display: flex; gap: 30px; align-items: center; }
.meta-pillar { display: flex; flex-direction: column; gap: 4px; }
.meta-label { font-family: var(--font-mono); font-size: 8px; color: var(--text-dim); }
.meta-val { font-family: var(--font-display); font-size: 11px; font-weight: bold; }
.meta-val.cyan { color: var(--jarvis-cyan); }
.meta-val.amber { color: var(--jarvis-amber); }

.close-jarvis-btn { background: var(--jarvis-amber); color: #000; border: none; font-family: var(--font-display); font-size: 12px; font-weight: 900; padding: 12px 25px; cursor: pointer; transition: 0.3s; }
.close-jarvis-btn:hover { background: #fff; box-shadow: 0 0 20px #fff; }

.hud-body-jarvis { flex: 1; position: relative; overflow-y: auto; background: rgba(0,0,0,0.4); }
.content-matrix-wrap { display: flex; height: 100%; }
.line-numbers { padding: 30px 15px; border-right: 1px solid rgba(255,255,255,0.05); background: rgba(0,0,0,0.2); }
.ln { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); margin-bottom: 15px; }
.preview-content-jarvis { flex: 1; margin: 0; padding: 30px; font-family: 'Share Tech Mono', monospace; font-size: 16px; line-height: 1.8; color: var(--jarvis-cyan); opacity: 0.8; }

.hud-footer-jarvis { padding: 15px 30px; border-top: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; color: var(--text-dim); letter-spacing: 0.1em; }
.footer-right { display: flex; align-items: center; gap: 10px; color: var(--jarvis-cyan); }
.bit-dot { width: 6px; height: 6px; background: var(--jarvis-cyan); box-shadow: 0 0 8px var(--jarvis-cyan); animation: pulse 1s infinite; }

.decoding-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 25px; color: var(--jarvis-cyan); }
.decoding-text { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.4em; }
.progress-bar-tech { width: 300px; height: 2px; background: rgba(0, 245, 212, 0.1); position: relative; overflow: hidden; }
.progress-fill { position: absolute; left: 0; top: 0; height: 100%; width: 50%; background: var(--jarvis-cyan); animation: progress-move 2s infinite; }

@keyframes progress-move { 0% { left: -50%; } 100% { left: 100%; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
</style>
