<script setup lang="ts">
import { X, Loader } from 'lucide-vue-next'
import type { Document, DocumentChunk } from '@/api/document'

interface Props {
  show: boolean
  activeDocument: Document | null
  activeDocumentContent: string
  isLoadingDocumentContent: boolean
  activeDocumentChunks: DocumentChunk[]
  isLoadingDocumentChunks: boolean
  getFileTypeColor: (type: string) => string
  formatFileSize: (size: number) => string
  getStatusLabel: (status?: string, isIndexed?: boolean) => string
}

const props = defineProps<Props>()
const emit = defineEmits(['close'])
</script>

<template>
  <Transition name="fade">
    <div v-if="props.show && props.activeDocument" class="hud-overlay" @click.self="emit('close')">
      <div class="hud-container">
        <header class="hud-header">
          <div class="hud-title-group">
            <span class="panel-kicker">PHASE 03 // DATA PREVIEW</span>
            <h3>{{ props.activeDocument.title }}</h3>
            <div class="hud-meta-row">
              <span class="file-badge" :style="{ color: props.getFileTypeColor(props.activeDocument.file_type), borderColor: props.getFileTypeColor(props.activeDocument.file_type) }">
                {{ props.activeDocument.file_type.toUpperCase() }}
              </span>
              <span>SIZE: {{ props.formatFileSize(props.activeDocument.file_size) }}</span>
              <span>CHUNKS: {{ props.activeDocument.chunk_count }}</span>
              <span class="status-pill">{{ props.getStatusLabel(props.activeDocument.ingestion_status, props.activeDocument.is_indexed) }}</span>
            </div>
          </div>
          <button class="close-hud" @click="emit('close')"><X :size="20" /></button>
        </header>

        <div class="hud-body">
          <div class="hud-preview-panel">
            <span class="panel-label">RAW CONTENT</span>
            <div v-if="props.isLoadingDocumentContent" class="preview-loading">
              <Loader :size="24" class="spin" />
              <span>DECRYPTING DATA...</span>
            </div>
            <pre v-else class="preview-content">{{ props.activeDocumentContent || 'NO CONTENT DETECTED' }}</pre>
          </div>

          <div class="hud-chunks-panel">
            <span class="panel-label">KNOWLEDGE CHUNKS</span>
            <div v-if="props.isLoadingDocumentChunks" class="preview-loading">
              <Loader :size="20" class="spin" />
              <span>CHUNKING DATA...</span>
            </div>
            <div v-else class="chunk-list">
              <div v-for="chunk in props.activeDocumentChunks" :key="chunk.id" class="chunk-card">
                <span class="chunk-index">CHUNK #{{ chunk.chunk_index + 1 }}</span>
                <p class="chunk-content">{{ chunk.content.substring(0, 200) }}...</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Transition>
</template>
