<template>
  <div class="source-item" :class="{ 'source-disabled': !source.selected }">
    <div class="source-header">
      <a-checkbox
        :checked="source.selected"
        @change="$emit('toggle', source.id, !source.selected)"
        :disabled="source.ingest_status !== 'completed'"
      />
      <span class="source-type-icon">
        <SearchOutlined v-if="source.source_type === 'search'" />
        <UploadOutlined v-else-if="source.source_type === 'upload'" />
        <FileTextOutlined v-else />
      </span>
      <span class="source-title" :title="source.title">{{ source.title }}</span>
      <a-dropdown :trigger="['click']" placement="bottomRight">
        <MoreOutlined class="source-more" />
        <template #overlay>
          <a-menu>
            <a-menu-item
              v-if="source.ingest_status === 'failed'"
              @click="$emit('retry', source.id)"
            >
              <ReloadOutlined /> 重试入库
            </a-menu-item>
            <a-menu-item danger @click="$emit('delete', source.id)">
              <DeleteOutlined /> 删除
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
    <div class="source-status">
      <template v-if="source.ingest_status === 'completed'">
        <a-tag color="success" size="small">已就绪</a-tag>
      </template>
      <template v-else-if="source.ingest_status === 'processing'">
        <a-tag color="processing" size="small">
          <LoadingOutlined /> 处理中
        </a-tag>
      </template>
      <template v-else-if="source.ingest_status === 'failed'">
        <a-tooltip :title="source.ingest_error || '入库失败'">
          <a-tag color="error" size="small">失败</a-tag>
        </a-tooltip>
      </template>
      <template v-else>
        <a-tag size="small">等待中</a-tag>
      </template>

      <!-- <a-tooltip v-if="source.summary" :title="source.summary" placement="right" :overlay-style="{ maxWidth: '300px' }">
        <InfoCircleOutlined class="source-action-icon" />
      </a-tooltip> -->
      <a-tooltip title="预览原文" v-if="source.ingest_status === 'completed' && source.doc_id">
        <EyeOutlined class="source-action-icon" @click.stop="$emit('preview', source.doc_id)" />
      </a-tooltip>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  SearchOutlined,
  UploadOutlined,
  FileTextOutlined,
  MoreOutlined,
  DeleteOutlined,
  ReloadOutlined,
  LoadingOutlined,
  InfoCircleOutlined,
  EyeOutlined,
} from '@ant-design/icons-vue'
import type { NotebookSource } from '@/types/notebook'

defineProps<{
  source: NotebookSource
}>()

defineEmits<{
  toggle: [id: string, selected: boolean]
  delete: [id: string]
  retry: [id: string]
  preview: [docId: string]
}>()
</script>

<style scoped lang="less">
.source-item {
  padding: 8px 12px;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  margin-bottom: 8px;
  background: #fff;
  transition: all 0.2s;

  &:hover {
    border-color: #d9d9d9;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  }

  &.source-disabled {
    opacity: 0.6;
    background: #fafafa;
  }
}

.source-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.source-type-icon {
  color: #8c8c8c;
  font-size: 14px;
}

.source-title {
  flex: 1;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-action-icon {
  cursor: pointer;
  color: #8c8c8c;
  font-size: 13px;
  padding: 2px;
  flex-shrink: 0;

  &:hover {
    color: #1890ff;
  }
}

.source-more {
  cursor: pointer;
  color: #8c8c8c;
  padding: 2px;
  flex-shrink: 0;

  &:hover {
    color: #1890ff;
  }
}

.source-status {
  margin-top: 4px;
  padding-left: 28px;
  display: flex;
  align-items: center;
  gap: 6px;
}
</style>
