<template>
  <div class="documents-tab">
    <div v-if="!conversationId" class="documents-tab__empty">
      <FolderOpenOutlined />
      <span>未选择对话</span>
    </div>

    <template v-else>
      <div class="documents-tab__header">
        <FolderOpenOutlined />
        <span>文档列表</span>
        <a-badge
          v-if="documents.length > 0"
          :count="documents.length"
          :number-style="{ backgroundColor: '#1890ff' }"
        />
      </div>

      <div class="documents-tab__body">
        <a-spin v-if="loading" size="small" />
        <a-empty
          v-else-if="documents.length === 0"
          description="暂无文档"
          :image="simpleImage"
        />
        <div v-else class="documents-tab__list">
          <div
            v-for="doc in documents"
            :key="doc.id"
            class="documents-tab__item"
          >
            <DocumentCard :document="doc" />
            <div class="documents-tab__item-time">{{ formatTime(doc.created_at) }}</div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { computed, watch } from 'vue'
import { FolderOpenOutlined } from '@ant-design/icons-vue'
import { Empty } from 'ant-design-vue'
import DocumentCard from '@/components/chat/messages/DocumentCard.vue'
import { useDocumentsStore } from '@/stores/documents'
import { useChatStore } from '@/stores/chat'

const documentsStore = useDocumentsStore()
const chatStore = useChatStore()

const conversationId = computed(() => chatStore.currentConversationId)
const documents = computed(() =>
  conversationId.value ? documentsStore.getDocuments(conversationId.value) : [],
)
const loading = computed(() =>
  conversationId.value ? documentsStore.loadingConversations.has(conversationId.value) : false,
)

const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE

function formatTime(iso: string): string {
  if (!iso) return ''
  const d = new Date(iso)
  // ponytail: guard against Invalid Date — new Date('garbage').toLocaleString
  // returns "Invalid Date" string which leaks into the UI.
  if (isNaN(d.getTime())) return ''
  return d.toLocaleString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  })
}

watch(
  conversationId,
  (newId) => {
    if (newId) {
      documentsStore.fetchDocuments(newId)
    }
  },
  { immediate: true },
)
</script>

<style scoped>
.documents-tab {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--space-3);
}

.documents-tab__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--text-tertiary);
  font-size: var(--font-sm);
}

.documents-tab__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  flex-shrink: 0;
}

.documents-tab__body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.documents-tab__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.documents-tab__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.documents-tab__item-time {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  padding-left: var(--space-1);
}
</style>
