<script setup lang="ts">
import { FolderOpen, Folder, FileText, ChevronRight, FileSearch, Database } from 'lucide-vue-next'
import type { FolderTree } from '@/api/folder'
import type { Document } from '@/api/document'

interface Props {
  isRoot: boolean
  currentFolder: FolderTree | null
  currentFolderId: string | null
  visibleFolders: FolderTree[]
  documents: Document[]
  highlightedDocumentId: string | null
  uploadError: string
  uploadSuccess: string
  getFileTypeColor: (type: string) => string
  formatFileSize: (size: number) => string
  getStatusLabel: (status?: string, isIndexed?: boolean) => string
}

const props = defineProps<Props>()
const emit = defineEmits(['enterFolder', 'openDocument', 'triggerUpload', 'openRename', 'openDelete'])
</script>

<template>
  <Transition name="content">
    <main v-if="!props.isRoot" class="content-view" :key="props.currentFolderId">
      <header class="content-header">
        <div class="content-title-group">
          <h2>
            <FolderOpen :size="24" />
            <span>{{ props.currentFolder?.name }}</span>
          </h2>
          <div class="mini-actions">
            <button class="btn ghost small" @click="emit('openRename', props.currentFolder)">RENAME</button>
            <button class="btn ghost small danger" @click="emit('openDelete', props.currentFolder)">DELETE</button>
          </div>
        </div>
      </header>

      <div class="content-grid">
        <!-- Feedback Messages -->
        <div v-if="props.uploadError" class="upload-error">{{ props.uploadError }}</div>
        <div v-if="props.uploadSuccess" class="upload-success">{{ props.uploadSuccess }}</div>

        <!-- Subfolders Section -->
        <section v-if="props.visibleFolders.length" class="content-section">
          <div class="section-label">
            <span>SUB-DIRECTORIES</span>
            <div class="section-line"></div>
          </div>
          <div class="file-list">
            <div 
              v-for="folder in props.visibleFolders" 
              :key="folder.id" 
              class="file-card folder-card"
              @click="emit('enterFolder', folder)"
            >
              <div class="file-icon"><Folder :size="20" /></div>
              <div class="file-info">
                <span class="file-name">{{ folder.name }}</span>
                <span class="file-details">{{ folder.children?.length ?? 0 }} ITEMS</span>
              </div>
              <ChevronRight :size="16" class="item-arrow" />
            </div>
          </div>
        </section>

        <!-- Files Section -->
        <section v-if="props.documents.length" class="content-section">
          <div class="section-label">
            <span>DATA OBJECTS</span>
            <div class="section-line"></div>
          </div>
          <div class="file-list">
            <div 
              v-for="doc in props.documents" 
              :key="doc.id" 
              class="file-card"
              :class="{ highlighted: props.highlightedDocumentId === doc.id }"
              @click="emit('openDocument', doc)"
            >
              <div class="file-icon" :style="{ color: props.getFileTypeColor(doc.file_type) }">
                <FileText :size="20" />
              </div>
              <div class="file-info">
                <span class="file-name">{{ doc.title }}</span>
                <div class="file-details">
                  <span>{{ doc.file_type.toUpperCase() }}</span>
                  <span>·</span>
                  <span>{{ props.formatFileSize(doc.file_size) }}</span>
                </div>
              </div>
              <span class="status-pill" :class="(doc.ingestion_status ?? (doc.is_indexed ? 'ready' : 'uploaded')).toLowerCase()">
                {{ props.getStatusLabel(doc.ingestion_status, doc.is_indexed) }}
              </span>
            </div>
          </div>
        </section>

        <div v-if="!props.visibleFolders.length && !props.documents.length" class="empty-state">
          <FileSearch :size="48" class="empty-icon" />
          <span>FOLDER IS EMPTY</span>
          <button class="btn primary" @click="emit('triggerUpload')">UPLOAD FIRST FILE</button>
        </div>
      </div>
    </main>
    
    <main v-else class="content-view">
      <div class="empty-state">
        <div class="pulsing-icon">
          <Database :size="64" class="empty-icon" />
        </div>
        <h3>AWAITING SELECTION</h3>
        <p>SELECT A DIRECTORY NODE TO EXPAND SYSTEM LAYER</p>
      </div>
    </main>
  </Transition>
</template>
