<script setup lang="ts">
import { Database, FolderPlus, Upload, X, ArrowLeft } from 'lucide-vue-next'
import { useKnowledgeView } from '@/pages/knowledge/composables/useKnowledgeView'
import FolderLauncher from './components/FolderLauncher.vue'
import ContentViewer from './components/ContentViewer.vue'
import DocumentHUD from './components/DocumentHUD.vue'
import './KnowledgeView.css'

const {
  folders, documents, currentFolderId, uploadError, uploadSuccess, highlightedDocumentId, uploadInput,
  showNewFolderDialog, newFolderName, newFolderParentId, showRenameDialog, renameFolderName,
  showDeleteDialog, deletingFolder, showDocumentDialog, activeDocument, activeDocumentContent,
  isLoadingDocumentContent, activeDocumentChunks, isLoadingDocumentChunks, currentFolder, isRoot, 
  visibleFolders, breadcrumbs, explorerTitle, enterFolder, goToFolder, goBack, triggerUpload, 
  handleUpload, handleDeleteDocument, openNewFolderDialog, createFolder, openRenameDialog, 
  renameFolder, openDeleteDialog, deleteFolder, openDocument, closeDocumentDialog, 
  getFileTypeColor, formatFileSize, formatDate, getStatusLabel,
} = useKnowledgeView()
</script>

<template>
  <div class="knowledge-view grid-bg scanlines">
    <!-- Header -->
    <header class="page-header">
      <div class="header-left">
        <div class="header-icon"><Database :size="24" /></div>
        <div class="header-title-group">
          <h1>KNOWLEDGE COMMAND</h1>
          <span class="header-sub">{{ explorerTitle }}</span>
        </div>
      </div>
      <div class="header-actions">
        <button class="btn ghost" @click="openNewFolderDialog(currentFolderId)">
          <FolderPlus :size="16" />
          <span>{{ isRoot ? 'NEW ROOT' : 'NEW SUB' }}</span>
        </button>
        <button v-if="!isRoot" class="btn primary" @click="triggerUpload">
          <Upload :size="16" />
          <span>UPLOAD</span>
        </button>
      </div>
    </header>

    <input ref="uploadInput" type="file" class="hidden-upload" accept=".pdf,.md,.txt,.doc,.docx,.csv,.xlsx" @change="handleUpload" />

    <!-- Main Content Area -->
    <div class="staged-shell">
      <div class="toolbar">
        <div class="toolbar-left">
          <button class="nav-btn" :disabled="isRoot" @click="goBack">
            <ArrowLeft :size="16" />
          </button>
          <div class="breadcrumbs">
            <button
              v-for="(crumb, index) in breadcrumbs"
              :key="`${crumb.id ?? 'root'}-${index}`"
              class="breadcrumb-item"
              :class="{ active: crumb.id === currentFolderId || (crumb.id === null && isRoot) }"
              @click="goToFolder(crumb.id)"
            >{{ crumb.name }}</button>
          </div>
        </div>
        <div class="location-tag">{{ isRoot ? 'SYSTEM ROOT' : 'DATA CHANNEL: ' + currentFolder?.name.toUpperCase() }}</div>
      </div>

      <div class="stage-container">
        <FolderLauncher 
          :folders="folders" 
          :currentFolderId="currentFolderId" 
          :breadcrumbs="breadcrumbs" 
          @select="enterFolder" 
        />

        <ContentViewer 
          :isRoot="isRoot"
          :currentFolder="currentFolder"
          :currentFolderId="currentFolderId"
          :visibleFolders="visibleFolders"
          :documents="documents"
          :highlightedDocumentId="highlightedDocumentId"
          :uploadError="uploadError"
          :uploadSuccess="uploadSuccess"
          :getFileTypeColor="getFileTypeColor"
          :formatFileSize="formatFileSize"
          :getStatusLabel="getStatusLabel"
          @enterFolder="enterFolder"
          @openDocument="openDocument"
          @triggerUpload="triggerUpload"
          @openRename="openRenameDialog"
          @openDelete="openDeleteDialog"
        />
      </div>
    </div>

    <!-- HUD Overlay -->
    <DocumentHUD 
      :show="showDocumentDialog"
      :activeDocument="activeDocument"
      :activeDocumentContent="activeDocumentContent"
      :isLoadingDocumentContent="isLoadingDocumentContent"
      :activeDocumentChunks="activeDocumentChunks"
      :isLoadingDocumentChunks="isLoadingDocumentChunks"
      :getFileTypeColor="getFileTypeColor"
      :formatFileSize="formatFileSize"
      :getStatusLabel="getStatusLabel"
      @close="closeDocumentDialog"
    />

    <!-- Dialogs -->
    <div v-if="showNewFolderDialog" class="hud-overlay" @click.self="showNewFolderDialog = false">
      <div class="hud-dialog small holo-card">
        <div class="dialog-header">
          <h3>{{ isRoot && newFolderParentId === null ? 'CREATE ROOT' : 'CREATE SUB' }}</h3>
          <button class="close-btn" @click="showNewFolderDialog = false"><X :size="16" /></button>
        </div>
        <input v-model="newFolderName" class="dialog-input" placeholder="ENTER FOLDER NAME..." @keyup.enter="createFolder" autofocus />
        <div class="dialog-actions">
          <button class="btn ghost" @click="showNewFolderDialog = false">CANCEL</button>
          <button class="btn primary" @click="createFolder">INITIALIZE</button>
        </div>
      </div>
    </div>

    <div v-if="showRenameDialog" class="hud-overlay" @click.self="showRenameDialog = false">
      <div class="hud-dialog small holo-card">
        <div class="dialog-header">
          <h3>RENAME NODE</h3>
          <button class="close-btn" @click="showRenameDialog = false"><X :size="16" /></button>
        </div>
        <input v-model="renameFolderName" class="dialog-input" placeholder="ENTER NEW NAME..." @keyup.enter="renameFolder" autofocus />
        <div class="dialog-actions">
          <button class="btn ghost" @click="showRenameDialog = false">CANCEL</button>
          <button class="btn primary" @click="renameFolder">UPDATE</button>
        </div>
      </div>
    </div>

    <div v-if="showDeleteDialog" class="hud-overlay" @click.self="showDeleteDialog = false">
      <div class="hud-dialog small holo-card">
        <div class="dialog-header">
          <h3>TERMINATE NODE</h3>
          <button class="close-btn" @click="showDeleteDialog = false"><X :size="16" /></button>
        </div>
        <p class="dialog-body">ARE YOU SURE YOU WANT TO DELETE "{{ deletingFolder?.name.toUpperCase() }}"? THIS ACTION IS IRREVERSIBLE.</p>
        <div class="dialog-actions">
          <button class="btn ghost" @click="showDeleteDialog = false">ABORT</button>
          <button class="btn primary danger" @click="deleteFolder">DELETE</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.hidden-upload { display: none; }
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
</style>
