<template>
  <div class="file-list-container">
    <!-- 顶部工具栏 -->
    <div class="file-toolbar">
      <!-- 左侧面包屑 -->
      <div class="toolbar-left">
        <div class="toolbar-breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item
              v-for="(folder, index) in breadcrumbItems"
              :key="folder.id"
              @click.native="handleBreadcrumbClick(folder, index)"
              class="breadcrumb-item-clickable"
              :class="{
                'breadcrumb-last-item': index === breadcrumbItems.length - 1,
              }"
            >
              <span class="breadcrumb-item-text">{{
                folder.name === "我的文档" && locale !== "zh-CN"
                  ? "My Documents"
                  : folder.name
              }}</span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>

      <!-- 右侧搜索和筛选 -->
      <div class="toolbar-right">
        <!-- 搜索框 -->
        <div class="search-input-container">
          <el-input
            v-model="fileNameSearch"
            :placeholder="
              t('KnowledgeBase.fileNameSearchPlaceholder') ||
              '输入文件名进行全局搜索'
            "
            class="search-input"
            clearable
            @input="handleSearch"
          >
            <template #prefix>
              <el-icon class="el-input__icon"><Search /></el-icon>
            </template>
          </el-input>
        </div>

        <!-- 筛选按钮 -->
        <div class="filter-container">
          <el-button class="filter-btn" @click="toggleFilterPanel">
            <el-icon><Operation /></el-icon>
            {{ t("KnowledgeBase.filter") || "筛选" }}
            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
          </el-button>

          <!-- 筛选面板 -->
          <div v-if="showFilterPanel" class="custom-filter-panel" @click.stop>
            <!-- 文件类型筛选 -->
            <div class="filter-section">
              <div class="filter-section-title">
                {{ t("KnowledgeBase.fileType") || "文件类型" }}
              </div>
              <div class="filter-options">
                <el-checkbox-group
                  v-model="selectedFileTypes"
                  @change="handleFileTypeFilter"
                >
                  <el-checkbox label="doc">
                    <img
                      src="/word_icon.svg"
                      alt="Word"
                      class="file-type-icon"
                    />
                    {{ t("KnowledgeBase.document") || "文档" }}
                  </el-checkbox>
                  <el-checkbox label="xls">
                    <img
                      src="/excel_icon.svg"
                      alt="Excel"
                      class="file-type-icon"
                    />
                    {{ t("KnowledgeBase.spreadsheet") || "表格" }}
                  </el-checkbox>
                  <el-checkbox label="ppt">
                    <img src="/PPT_icon.svg" alt="PPT" class="file-type-icon" />
                    {{ t("KnowledgeBase.presentation") || "演示文稿" }}
                  </el-checkbox>
                  <el-checkbox label="md">
                    <img src="/md_icon.svg" alt="MD" class="file-type-icon" />
                    {{ t("KnowledgeBase.markdown") || "Markdown" }}
                  </el-checkbox>
                  <el-checkbox label="pdf">
                    <img src="/pdf_icon.svg" alt="PDF" class="file-type-icon" />
                    {{ t("KnowledgeBase.pdf") || "PDF" }}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
            </div>

            <!-- 时间筛选 -->
            <div class="filter-section">
              <div class="filter-section-title">
                {{ t("KnowledgeBase.modifyTime") || "修改时间" }}
              </div>
              <div class="filter-options">
                <el-radio-group
                  v-model="selectedTimeFilter"
                  @change="handleTimeFilter"
                >
                  <el-radio label="all">{{
                    t("KnowledgeBase.allTime") || "全部时间"
                  }}</el-radio>
                  <el-radio label="7days">{{
                    t("KnowledgeBase.last7Days") || "最近7天"
                  }}</el-radio>
                  <el-radio label="30days">{{
                    t("KnowledgeBase.last30Days") || "最近30天"
                  }}</el-radio>
                </el-radio-group>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 文件表格 -->
    <div class="file-table-container">
      <el-table
        ref="fileTableRef"
        :data="filteredFiles"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        @row-dblclick="handleRowDblClick"
        @row-contextmenu="handleRowContextMenu"
        @sort-change="handleSortChange"
        :default-sort="{ prop: 'createdAt', order: 'descending' }"
        :highlight-current-row="true"
        class="knowledge-table"
        style="width: 100%"
      >
        <el-table-column type="selection" width="40" align="center" />
        <el-table-column
          prop="name"
          :label="t('KnowledgeBase.fileName') || '文件名称'"
          min-width="200"
          sortable="custom"
        >
          <template #default="scope">
            <el-tooltip
              :content="getDragTooltip(scope.row)"
              :disabled="scope.row.isFolder || scope.row.knowledgeStatus === 'completed'"
              placement="top"
              :show-after="500"
            >
              <div
                class="file-info"
                :class="{ 
                  'folder-info': scope.row.isFolder,
                  'is-not-ready': !scope.row.isFolder && scope.row.knowledgeStatus !== 'completed',
                  'is-processing': scope.row.knowledgeStatus === 'processing'
                }"
                @click="handleItemClick(scope.row)"
                @dblclick="handleFileDoubleClick(scope.row)"
                draggable="true"
                @dragstart="handleRowDragStart($event, scope.row)"
              >
                <img
                  :src="getFileIcon(scope.row)"
                  class="file-icon"
                  :alt="getFileTypeText(scope.row)"
                />
                <span class="file-name">{{ scope.row.name }}</span>
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="fileType"
          :label="t('KnowledgeBase.fileType') || '类型'"
          width="80"
          align="left"
          sortable="custom"
        >
          <template #default="scope">
            <div class="file-type-badge">
              {{ getFileTypeText(scope.row) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="size"
          :label="t('KnowledgeBase.fileSize') || '大小'"
          width="120"
          align="left"
          sortable="custom"
        >
          <template #default="scope">
            {{ scope.row.isFolder ? "-" : formatFileSize(scope.row.size || 0) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="knowledgeStatus"
          width="160"
          align="left"
          sortable="custom"
        >
          <template #header>
            <span class="status-header">
              {{ t('KnowledgeBase.knowledgeStatus') || '知识库状态' }}
              <el-tooltip
                :content="t('KnowledgeBase.knowledgeStatusTip') || '状态为进行中或不支持时，无法进行对话及对文件提问'"
                placement="top"
              >
                <el-icon class="status-help-icon"><QuestionFilled /></el-icon>
              </el-tooltip>
            </span>
          </template>
          <template #default="scope">
            <template v-if="!scope.row.isFolder">
              <div class="status-cell">
                <el-tag
                  :type="getStatusTagType(scope.row.knowledgeStatus)"
                  size="small"
                  class="status-tag"
                >
                  {{ getStatusLabel(scope.row.knowledgeStatus) }}
                </el-tag>
                <el-tooltip
                  v-if="scope.row.knowledgeStatus === 'failed'"
                  :content="t('KnowledgeBase.retry') || '重试'"
                  placement="top"
                >
                  <el-icon
                    class="retry-icon"
                    :class="{ 'is-loading': !!retryLoadingMap[String(scope.row.id)] }"
                    @click.stop="handleRetryKnowledgeUpload(scope.row)"
                  >
                    <RefreshLeft v-if="!retryLoadingMap[String(scope.row.id)]" />
                    <Loading v-else />
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
            <template v-else>-</template>
          </template>
        </el-table-column>
        <el-table-column
          prop="createdAt"
          :label="t('KnowledgeBase.uploadTime') || '上传时间'"
          width="180"
          align="left"
          sortable="custom"
        >
          <template #default="scope">
            {{ formatDateTime(scope.row.createdAt) }}
          </template>
        </el-table-column>
        <template #empty>
          <div class="empty-state">
            <div class="empty-state-img" v-html="emptyStateSvg" />
            <p class="empty-state-text">{{ t('KnowledgeBase.emptyState') || '暂无数据' }}</p>
          </div>
        </template>
      </el-table>
    </div>

    <!-- 选中状态工具栏 -->
    <div v-if="selectedFiles.length > 0" class="selection-toolbar">
      <div class="selection-info">
        <el-icon><Check /></el-icon>
        <span>已选择 {{ selectedFiles.length }} 个文件</span>
      </div>
      <div class="selection-actions">
        <button class="selection-btn danger" @click="handleBatchDelete">
          <el-icon><Delete /></el-icon>
          {{ t("KnowledgeBase.batchDelete") || "批量删除" }}
        </button>
        <button class="selection-btn" @click="handleBatchMove">
          <el-icon><Rank /></el-icon>
          {{ t("KnowledgeBase.batchMove") || "批量移动" }}
        </button>
        <button class="selection-btn cancel" @click="clearSelection">
          {{ t("KnowledgeBase.cancelSelection") || "取消选择" }}
        </button>
      </div>
    </div>

    <!-- 文件夹选择对话框 -->
    <FolderPickerDialog
      v-model:visible="folderPickerVisible"
      :exclude-ids="batchMoveExcludeIds"
      @confirm="handleBatchMoveConfirm"
      @cancel="folderPickerVisible = false"
    />

    <!-- 右键菜单 -->
    <div
      v-if="showContextMenu"
      class="context-menu"
      :style="{ left: contextMenuX + 'px', top: contextMenuY + 'px' }"
      @click.stop
    >
      <div class="context-menu-item" @click="handleEditFile">
        <el-icon><View v-if="contextMenuFile?.isFolder" /><Edit v-else /></el-icon>
        {{ contextMenuFile?.isFolder ? (t("KnowledgeBase.open") || "打开") : (t("KnowledgeBase.edit") || "编辑") }}
      </div>
      <div class="context-menu-item" @click="handleRenameFile">
        <el-icon><Edit /></el-icon>
        {{ t("KnowledgeBase.rename") || "重命名" }}
      </div>
      <div class="context-menu-item" @click="handleDownloadFile">
        <el-icon><Download /></el-icon>
        {{ t("KnowledgeBase.download") || "下载" }}
      </div>
      <div class="context-menu-item danger" @click="handleDeleteFile">
        <el-icon><Delete /></el-icon>
        {{ t("KnowledgeBase.delete") || "删除" }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onBeforeUnmount, onMounted } from "vue";
import emptyStateSvg from "@/assets/empty-state.svg?raw";
import { useI18n } from "vue-i18n";
import { useAppStore } from "@/stores/app";
import { ElTable, ElMessage, ElMessageBox, ElTag } from "element-plus";
import {
  Search,
  Operation,
  ArrowDown,
  Check,
  Delete,
  Download,
  Edit,
  View,
  QuestionFilled,
  Rank,
  RefreshLeft,
  Loading,
} from "@element-plus/icons-vue";
import {
  getFiles,
  deleteFile,
  batchDeleteFiles,
  moveFile,
  moveFolder,
  searchFiles,
  retryKnowledgeUpload,
  type FileItem,
  type FolderItem,
} from "@/api/files";
import { formatFileSize } from "@/utils/fileDragHandler";
import FolderPickerDialog from "@/components/common/FolderPickerDialog.vue";

interface Props {
  currentFolderId?: string | number;
  currentFolderName?: string;
  currentFolderPath?: FolderItem[];
}

const props = withDefaults(defineProps<Props>(), {
  currentFolderId: -1,
  currentFolderName: "所有文件",
  currentFolderPath: () => [],
});

const { t, locale } = useI18n();
const appStore = useAppStore();
const fileTableRef = ref<InstanceType<typeof ElTable>>();

// 状态
const fileList = ref<FileItem[]>([]);
const selectedFiles = ref<FileItem[]>([]);
const lastSelectedIndex = ref(-1);
const fileNameSearch = ref("");
const showFilterPanel = ref(false);
const selectedFileTypes = ref<string[]>([]);
const selectedTimeFilter = ref("all");

// 知识库重试：逐行 loading
const retryLoadingMap = ref<Record<string, boolean>>({});

// 排序（默认：上传时间倒序）
type SortOrder = "ascending" | "descending" | null;
const sortState = ref<{ prop: string; order: SortOrder }>({
  prop: "createdAt",
  order: "descending",
});

// 右键菜单
const showContextMenu = ref(false);
const contextMenuX = ref(0);
const contextMenuY = ref(0);
const contextMenuFile = ref<FileItem | null>(null);

const emit = defineEmits<{
  (e: "create-file"): void;
  (e: "rename-file", file: FileItem): void;
  (e: "rename-folder", folder: FolderItem): void;
  (e: "file-deleted"): void;
  (e: "folder-deleted"): void;
  (e: "delete-folder", folderId: string | number): void;
  (e: "upload-files", files: File[]): void;
  (e: "file-click", file: FileItem): void;
  (e: "folder-click", folder: FolderItem): void;
  (e: "breadcrumb-click", data: { folder: FolderItem; index: number }): void;
  (e: "download-file", file: FileItem): void;
  (e: "download-folder", folder: FolderItem): void;
}>();

// 面包屑
const breadcrumbItems = computed(() => props.currentFolderPath || []);

const getSortableTime = (item: any): number => {
  const raw = item?.createdAt || item?.updatedAt || "";
  const t = new Date(raw).getTime();
  return Number.isFinite(t) ? t : 0;
};

const getStatusRank = (status?: string): number => {
  // 数字越小越靠前（升序）
  const rank: Record<string, number> = {
    completed: 1,
    processing: 2,
    not_processed: 3,
    not_supported: 4,
    failed: 5,
  };
  return rank[status || ""] ?? 99;
};

const getSortValue = (item: any, prop: string): string | number => {
  switch (prop) {
    case "name":
    case "fileName": {
      return String(item?.name || item?.fileName || "").toLowerCase();
    }
    case "fileType": {
      return getFileTypeFromName(item);
    }
    case "size": {
      return Number(item?.size || 0);
    }
    case "knowledgeStatus": {
      return getStatusRank(item?.knowledgeStatus);
    }
    case "createdAt":
    case "updatedAt": {
      return getSortableTime(item);
    }
    default: {
      // 兜底：尝试直接取字段
      const v = item?.[prop];
      if (typeof v === "number") return v;
      return String(v ?? "").toLowerCase();
    }
  }
};

const compareBySort = (a: any, b: any): number => {
  const { prop, order } = sortState.value;
  if (!order) return 0;

  const va = getSortValue(a, prop);
  const vb = getSortValue(b, prop);
  let res = 0;

  if (typeof va === "number" && typeof vb === "number") {
    res = va - vb;
  } else {
    res = String(va).localeCompare(String(vb), "zh-Hans-CN", {
      numeric: true,
      sensitivity: "base",
    });
  }

  return order === "ascending" ? res : -res;
};

// 过滤后的文件列表（前端二次过滤和排序）
const filteredFiles = computed(() => {
  let items = fileList.value;

  // 如果没有搜索，则保留文件夹；如果有筛选，则根据筛选条件决定是否保留文件夹
  // 通常文件夹不参与文件类型筛选，或者在筛选时被过滤掉
  if (selectedFileTypes.value.length > 0) {
    items = items.filter((item) => {
      if ((item as any).isFolder) return false; // 筛选文件类型时，通常隐藏文件夹
      const fileType = getFileTypeFromName(item);
      return selectedFileTypes.value.includes(fileType);
    });
  }

  // 时间筛选
  if (selectedTimeFilter.value !== "all") {
    const now = new Date();
    items = items.filter((item) => {
      const itemDate = new Date(item.updatedAt || item.createdAt || "");

      switch (selectedTimeFilter.value) {
        case "7days":
          const sevenDaysAgo = new Date(
            now.getTime() - 7 * 24 * 60 * 60 * 1000,
          );
          return itemDate >= sevenDaysAgo;
        case "30days":
          const thirtyDaysAgo = new Date(
            now.getTime() - 30 * 24 * 60 * 60 * 1000,
          );
          return itemDate >= thirtyDaysAgo;
        default:
          return true;
      }
    });
  }

  // 排序：文件夹在前；同组内按表头排序（默认上传时间倒序）
  return [...items].sort((a: any, b: any) => {
    if (a.isFolder && !b.isFolder) return -1;
    if (!a.isFolder && b.isFolder) return 1;
    return compareBySort(a, b);
  });
});

// 加载文件列表（包含文件和文件夹）
const loadFiles = async (keyword = "") => {
  try {
    let response;
    if (keyword) {
      // 如果有关键字，执行全局搜索
      response = await searchFiles({ keyword });
    } else {
      // 否则加载当前目录
      const folderId =
        (props.currentFolderId === "root" || props.currentFolderId === -1) ? undefined : props.currentFolderId;
      response = await getFiles(folderId);
    }

    if (response && response.data) {
      const items = Array.isArray(response.data)
        ? response.data
        : response.data.files || response.data.items || [];

      // 转换数据格式，确保文件夹和文件都被包含
      fileList.value = items.map((item: any) => ({
        ...item,
        isFolder: !!(item.isFolder || item.folder || item.type === "folder"),
      }));
    }
  } catch (error) {
    console.error("加载文件列表失败:", error);
    fileList.value = [];
  }
};

// 获取文件图标 (返回SVG路径，与 FileTreeNode.vue 保持一致)
const getFileIcon = (item: any): string => {
  if (item.isFolder) {
    return "/wenjian.svg";
  }
  const fileName = item.name || item.fileName || "";
  // 如果没有文件名或文件名不包含点号，返回默认图标
  if (
    !fileName ||
    typeof fileName !== "string" ||
    fileName.indexOf(".") === -1
  ) {
    return "/TXT_icon.svg";
  }

  // 提取扩展名（使用与 FileTreeNode.vue 相同的逻辑）
  const extension = fileName.split(".").pop()?.toLowerCase();

  const iconMap: Record<string, string> = {
    md: "/md_icon.svg",
    pdf: "/pdf_icon.svg",
    doc: "/word_icon.svg",
    docx: "/word_icon.svg",
    xls: "/excel_icon.svg",
    xlsx: "/excel_icon.svg",
    ppt: "/PPT_icon.svg",
    pptx: "/PPT_icon.svg",
    txt: "/TXT_icon.svg",
    jpg: "/jpg_icon.svg",
    jpeg: "/jpg_icon.svg",
    png: "/png_icon.svg",
    gif: "/gif_icon.svg",
    // 其他图片格式
    webp: "/jpg_icon.svg",
    svg: "/jpg_icon.svg",
    bmp: "/jpg_icon.svg",
    ico: "/jpg_icon.svg",
    tiff: "/jpg_icon.svg",
    tif: "/jpg_icon.svg",
    // 音频文件
    mp3: "/mp3.svg",
    wav: "/mp3.svg",
    ogg: "/mp3.svg",
    m4a: "/mp3.svg",
    aac: "/mp3.svg",
    flac: "/mp3.svg",
    wma: "/mp3.svg",
    // 视频文件
    mp4: "/mp4.svg",
    avi: "/mp4.svg",
    mkv: "/mp4.svg",
    mov: "/mp4.svg",
    wmv: "/mp4.svg",
    flv: "/mp4.svg",
    webm: "/mp4.svg",
    m4v: "/mp4.svg",
  };

  return iconMap[extension || ""] || "/TXT_icon.svg";
};

// 获取文件类型文本
const getFileTypeText = (item: any): string => {
  if (item.isFolder) {
    return "folder";
  }
  const fileName = item.name || item.fileName || "";
  const ext = fileName.split(".").pop()?.toUpperCase();
  return ext || "FILE";
};

// 从文件名获取文件类型
const getFileTypeFromName = (item: any): string => {
  if (item.isFolder) return "folder";
  const fileName = item.name || item.fileName || "";
  const ext = fileName.split(".").pop()?.toLowerCase();
  const typeMap: Record<string, string> = {
    doc: "doc",
    docx: "doc",
    xls: "xls",
    xlsx: "xls",
    ppt: "ppt",
    pptx: "ppt",
    pdf: "pdf",
    md: "md",
  };
  return typeMap[ext || ""] || "other";
};

// 获取知识库状态标签类型
type StatusTagType = "success" | "primary" | "warning" | "info" | "danger";
const getStatusTagType = (status?: string): StatusTagType => {
  switch (status) {
    case "completed":
      return "success";
    case "processing":
      return "primary";
    case "failed":
      return "danger";
    case "not_processed":
    case "not_supported":
      return "info";
    default:
      return "info";
  }
};

// 获取知识库状态显示文本
const getStatusLabel = (status?: string): string => {
  const statusMap: Record<string, string> = {
    not_supported: t("KnowledgeBase.statusNotSupported") || "不支持",
    not_processed: t("KnowledgeBase.statusNotProcessed") || "未处理",
    processing: t("KnowledgeBase.statusProcessing") || "处理中",
    completed: t("KnowledgeBase.statusCompleted") || "已完成",
    failed: t("KnowledgeBase.statusFailed") || "失败",
  };
  return statusMap[status || ""] || status || "未处理";
};

// 格式化日期时间
const formatDateTime = (dateTime?: string): string => {
  if (!dateTime) return "";
  try {
    const date = new Date(dateTime);

    if (isNaN(date.getTime())) {
      return "";
    }

    // 格式化为 YYYY-MM-DD HH:mm 格式
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, "0");
    const day = date.getDate().toString().padStart(2, "0");
    const hours = date.getHours().toString().padStart(2, "0");
    const minutes = date.getMinutes().toString().padStart(2, "0");

    return `${year}-${month}-${day} ${hours}:${minutes}`;
  } catch (error) {
    console.error("日期格式化失败:", error, dateTime);
    return "";
  }
};

const PROCESSING_STATUSES = new Set(["processing", "pending", "queued", "in_progress"]);
const FAILED_STATUSES = new Set(["failed", "error", "parse_failed"]);

const getKnowledgeStatusHint = (status?: string): string => {
  if (!status || status === "completed") return "";
  if (status === "not_supported")
    return t("KnowledgeBase.statusUnsupportedHint") || "该文件不支持知识库解析";
  if (PROCESSING_STATUSES.has(status))
    return t("KnowledgeBase.statusProcessingHint") || "文件正在解析中，请稍后再试";
  if (FAILED_STATUSES.has(status))
    return t("KnowledgeBase.statusFailedHint") || "文件解析失败，请重试后再提问";
  if (status === "not_processed")
    return t("KnowledgeBase.statusNotProcessedHint") || "文件尚未开始解析，请稍后再试";
  return t("KnowledgeBase.statusNotReady") || "文件解析未完成，无法拖拽提问";
};

// 获取拖拽提示文本
const getDragTooltip = (row: FileItem) => {
  if (row.isFolder) return "";
  return getKnowledgeStatusHint(row.knowledgeStatus);
};

const handleRetryKnowledgeUpload = async (row: FileItem) => {
  if (!row || row.isFolder) return;
  const key = String(row.id);
  if (retryLoadingMap.value[key]) return;

  retryLoadingMap.value = { ...retryLoadingMap.value, [key]: true };
  try {
    const res: any = await retryKnowledgeUpload(row.id);
    const msg =
      res?.data?.message ||
      t("KnowledgeBase.retrySuccess") ||
      t("common.success") ||
      "操作成功";
    ElMessage.success(msg);
    await loadFiles(fileNameSearch.value);
  } catch (e) {
    ElMessage.error(t("KnowledgeBase.retryFailed") || "重试失败");
  } finally {
    const next = { ...retryLoadingMap.value };
    delete next[key];
    retryLoadingMap.value = next;
  }
};

// 处理选择变化
const handleSelectionChange = (selection: FileItem[]) => {
  selectedFiles.value = selection;
};

// 处理行点击（实现 Shift/Ctrl 多选）
const handleRowClick = (row: FileItem, _column: any, event: MouseEvent) => {
  const index = filteredFiles.value.findIndex((item) => item.id === row.id);
  if (index === -1) return;

  if (event.shiftKey && lastSelectedIndex.value !== -1) {
    // 阻止文本选择
    window.getSelection()?.removeAllRanges();

    const start = Math.min(lastSelectedIndex.value, index);
    const end = Math.max(lastSelectedIndex.value, index);

    // Shift 点击：选择范围内所有行
    fileTableRef.value?.clearSelection();
    for (let i = start; i <= end; i++) {
      fileTableRef.value?.toggleRowSelection(filteredFiles.value[i], true);
    }
  } else if (event.ctrlKey || event.metaKey) {
    // Ctrl/Cmd 点击：切换当前行选中状态
    fileTableRef.value?.toggleRowSelection(row, undefined);
    lastSelectedIndex.value = index;
  } else {
    // 普通点击：更新最后一次点击的索引
    lastSelectedIndex.value = index;

    // 如果点击的不是多选框列（通常 column.type 为 selection），
    // 且不是文件夹（文件夹点击会触发 handleItemClick 导航），
    // 则执行单选逻辑：清除其他并选中当前
    if (_column && _column.type !== "selection" && !row.isFolder) {
      fileTableRef.value?.clearSelection();
      fileTableRef.value?.toggleRowSelection(row, true);
    }
  }
};

// 清除选择
const clearSelection = () => {
  fileTableRef.value?.clearSelection();
  selectedFiles.value = [];
};

// 处理搜索
const handleSearch = () => {
  // 搜索逻辑已在 loadFiles 中处理
  loadFiles(fileNameSearch.value);
};

// 切换筛选面板
const toggleFilterPanel = () => {
  showFilterPanel.value = !showFilterPanel.value;
};

// 处理文件类型筛选
const handleFileTypeFilter = () => {
  // 筛选逻辑已在computed中处理
};

// 处理时间筛选
const handleTimeFilter = () => {
  // 筛选逻辑已在computed中处理
};

// 处理面包屑点击
const handleBreadcrumbClick = (folder: FolderItem, index: number) => {
  emit("breadcrumb-click", { folder, index });
};

// 处理行双击
const handleRowDblClick = (row: any) => {
  if (row.isFolder) {
    emit("folder-click", row);
  } else {
    emit("file-click", row);
  }
};

// 处理项点击
const handleItemClick = (item: any) => {
  if (item.isFolder) {
    emit("folder-click", item);
  }
};

// 处理文件双击
const handleFileDoubleClick = (item: any) => {
  if (item.isFolder) {
    emit("folder-click", item);
  } else {
    emit("file-click", item);
  }
};

// 处理行拖拽开始
const handleRowDragStart = (event: DragEvent, row: FileItem) => {
  try {
    console.log("🚀 FileList 开始拖拽:", row);

    // 如果有多选，则拖拽这些多选；否则拖拽当前行
    const files =
      selectedFiles.value && selectedFiles.value.length > 0
        ? selectedFiles.value
        : [row];

    // 检查是否有不支持或解析失败的文件（解析中的文件允许拖拽，以便支持拖拽预览）
    const unsupportedFiles = files.filter(
      (f) =>
        !f.isFolder &&
        f.knowledgeStatus !== "completed" &&
        f.knowledgeStatus !== "processing",
    );
    if (unsupportedFiles.length > 0) {
      event.preventDefault(); // 阻止拖拽

      // 显示提示
      const firstUnsupported = unsupportedFiles[0];
      if (!firstUnsupported) return;
      ElMessage.warning(getKnowledgeStatusHint(firstUnsupported.knowledgeStatus));
      return;
    }

    const payload = {
      from: "FileList",
      type: files.length > 1 ? "files" : "file",
      files: files.map((f) => ({
        id: f.id,
        name: f.name,
        type: getFileTypeFromName(f),
        size: f.size || 0,
        knowledgeStatus: f.knowledgeStatus,
      })),
      node: files.length === 1 ? files[0] : null,
    };

    console.log("📦 FileList 拖拽数据:", payload);

    // 设置拖拽数据
    event.dataTransfer!.setData("application/json", JSON.stringify(payload));
    event.dataTransfer!.setData("text/plain", JSON.stringify(payload)); // 备用格式

    // 设置拖拽效果 - 改为copy以匹配AgentChat的期望
    event.dataTransfer!.effectAllowed = "copy";

    console.log("✅ FileList 拖拽数据设置完成");
  } catch (e) {
    console.error("❌ 设置拖拽数据失败:", e);
  }
};

// 处理表头排序
const handleSortChange = (payload: { prop: string; order: SortOrder }) => {
  // Element Plus：order 可能为 ascending/descending/null
  // 为了满足“默认上传时间倒序”，当用户取消排序时回到默认排序
  if (!payload?.order || !payload?.prop) {
    sortState.value = { prop: "createdAt", order: "descending" };
    return;
  }
  sortState.value = { prop: payload.prop, order: payload.order };
};

// 处理右键菜单
const handleRowContextMenu = (
  row: FileItem,
  _column: any,
  event: MouseEvent,
) => {
  event.preventDefault();
  contextMenuX.value = event.clientX;
  contextMenuY.value = event.clientY;
  showContextMenu.value = true;
  contextMenuFile.value = row;
};

// 关闭右键菜单
const closeContextMenu = () => {
  showContextMenu.value = false;
};

// 处理编辑文件
const handleEditFile = () => {
  if (contextMenuFile.value) {
    if (contextMenuFile.value.isFolder) {
      emit("folder-click", contextMenuFile.value as any);
    } else {
      emit("file-click", contextMenuFile.value);
    }
  }
  closeContextMenu();
};

// 处理重命名文件
const handleRenameFile = () => {
  if (contextMenuFile.value) {
    if (contextMenuFile.value.isFolder) {
      emit("rename-folder", contextMenuFile.value as any);
    } else {
      emit("rename-file", contextMenuFile.value);
    }
  }
  closeContextMenu();
};

// 处理下载文件
const handleDownloadFile = () => {
  if (contextMenuFile.value) {
    if (contextMenuFile.value.isFolder) {
      emit("download-folder", contextMenuFile.value as any);
    } else {
      emit("download-file", contextMenuFile.value);
    }
  }
  closeContextMenu();
};

// 处理删除文件
const handleDeleteFile = () => {
  if (contextMenuFile.value) {
    const isFolder = contextMenuFile.value.isFolder;
    const confirmMessage = isFolder
      ? t("KnowledgeBase.confirmDeleteFolder", { name: contextMenuFile.value.name })
      : t("KnowledgeBase.confirmDeleteFile", { name: contextMenuFile.value.name });

    ElMessageBox.confirm(
      confirmMessage || `确定删除${isFolder ? "文件夹" : "文件"} "${contextMenuFile.value.name}" 吗？`,
      t("common.warning"),
      {
        confirmButtonText: t("common.confirm"),
        cancelButtonText: t("common.cancel"),
        type: "warning",
      },
    )
      .then(async () => {
        try {
          if (isFolder) {
            emit("delete-folder", contextMenuFile.value!.id);
          } else {
            await deleteFile(contextMenuFile.value!.id);
            ElMessage.success(t("KnowledgeBase.deleteFileSuccess"));
            await loadFiles(fileNameSearch.value);
            emit("file-deleted");
          }
        } catch (error) {
          console.error(`删除${isFolder ? "文件夹" : "文件"}失败:`, error);
          ElMessage.error(isFolder ? t("KnowledgeBase.deleteFolderFailed") : t("KnowledgeBase.deleteFileFailed"));
        }
      })
      .catch(() => {
        ElMessage.info(t("KnowledgeBase.operationCanceled"));
      });
  }
  closeContextMenu();
};

// 处理批量删除
const handleBatchDelete = () => {
  ElMessageBox.confirm(
    t("KnowledgeBase.confirmBatchDelete", {
      count: selectedFiles.value.length,
    }) || `确定删除选中的 ${selectedFiles.value.length} 个项目吗？`,
    t("common.warning"),
    {
      confirmButtonText: t("common.confirm"),
      cancelButtonText: t("common.cancel"),
      type: "warning",
    },
  )
    .then(async () => {
      try {
        const ids = selectedFiles.value.map((item) => item.id);
        const hasFolder = selectedFiles.value.some((item: any) => item.isFolder);
        
        await batchDeleteFiles(ids);
        ElMessage.success(t("KnowledgeBase.deleteSuccess") || "删除成功");
        
        // 如果删除了文件夹，需要通知父组件刷新树结构
        if (hasFolder) {
          emit("folder-deleted");
        }
        
        clearSelection();
        await loadFiles(fileNameSearch.value);
        emit("file-deleted");
      } catch (error) {
        console.error("批量删除失败:", error);
        ElMessage.error(t("KnowledgeBase.deleteFailed") || "删除失败");
      }
    })
    .catch(() => {
      ElMessage.info(t("KnowledgeBase.operationCanceled"));
    });
};


// ==================== 批量移动 ====================
const folderPickerVisible = ref(false);

// 排除被移动的文件夹自身（避免移动到自身或子文件夹内）
const batchMoveExcludeIds = computed(() => {
  return selectedFiles.value
    .filter((f: any) => f.isFolder)
    .map((f) => String(f.id));
});

// 打开文件夹选择对话框
const handleBatchMove = () => {
  if (selectedFiles.value.length === 0) return;
  folderPickerVisible.value = true;
};

// 确认批量移动
const handleBatchMoveConfirm = async (targetFolderId: string | number | null) => {
  if (selectedFiles.value.length === 0) return;

  const movePromises = selectedFiles.value.map((item: any) => {
    if (item.isFolder) {
      return moveFolder(item.id, targetFolderId);
    }
    return moveFile(item.id, targetFolderId);
  });

  const results = await Promise.allSettled(movePromises);
  const successCount = results.filter((r) => r.status === "fulfilled").length;
  const failCount = results.filter((r) => r.status === "rejected").length;

  if (failCount === 0) {
    ElMessage.success(`成功移动 ${successCount} 项`);
  } else if (successCount === 0) {
    ElMessage.error("移动失败");
  } else {
    ElMessage.warning(`${successCount} 项移动成功，${failCount} 项移动失败`);
  }

  clearSelection();
  await loadFiles(fileNameSearch.value);
};

// 刷新文件列表
const refresh = () => {
  console.log("FileList 收到刷新事件");
  setTimeout(() => {
    loadFiles(fileNameSearch.value);
  }, 500);
};

// 处理中文件轮询
const POLL_INTERVAL = 10000; // 10秒
let pollTimer: ReturnType<typeof setInterval> | null = null;

const hasProcessingFiles = computed(() =>
  fileList.value.some((f) => !f.isFolder && f.knowledgeStatus === "processing")
);

const startPolling = () => {
  if (pollTimer) return;
  pollTimer = setInterval(() => {
    loadFiles(fileNameSearch.value || "");
  }, POLL_INTERVAL);
};

const stopPolling = () => {
  if (pollTimer) {
    clearInterval(pollTimer);
    pollTimer = null;
  }
};

watch(hasProcessingFiles, (val) => {
  if (val) {
    startPolling();
  } else {
    stopPolling();
  }
});

defineExpose({
  refresh,
});

onMounted(() => {
  // 监听文件列表刷新信号
  watch(
    () => appStore.refreshFileHierarchySignal,
    () => {
      refresh();
    }
  );

  // 监听刷新文件列表事件
  window.addEventListener("refresh-file-hierarchy", refresh);
});

watch(
  () => props.currentFolderId,
  () => {
    loadFiles();
  },
  { immediate: true },
);

// 添加全局点击事件监听，关闭右键菜单和筛选面板
const handleGlobalClick = (event: MouseEvent) => {
  const target = event.target as HTMLElement;

  // 检查点击是否在筛选容器内
  const filterContainer = target.closest(".filter-container");
  if (!filterContainer) {
    showFilterPanel.value = false;
  }

  // 检查点击是否在右键菜单内
  const contextMenu = target.closest(".context-menu");
  if (!contextMenu) {
    closeContextMenu();
  }
};

document.addEventListener("click", handleGlobalClick);

// 组件卸载时移除事件监听器
onBeforeUnmount(() => {
  stopPolling();

  // 移除刷新文件列表事件监听
  window.removeEventListener("refresh-file-hierarchy", refresh);

  document.removeEventListener("click", handleGlobalClick);
});
</script>

<style scoped lang="scss">
.file-list-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg);
  position: relative;
}

.file-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--color-bg);
  gap: 16px;
}

.toolbar-left {
  flex: 1;
  min-width: 0;
}

.toolbar-breadcrumb {
  :deep(.el-breadcrumb) {
    font-size: 16px;
    line-height: 1;

    .el-breadcrumb__inner {
      color: var(--color-text);
      font-weight: 400;
    }

    .el-breadcrumb__separator {
      color: var(--color-text-secondary);
      margin: 0 8px;
    }
  }
}

.breadcrumb-item-clickable {
  cursor: pointer;

  &:hover .breadcrumb-item-text {
    color: var(--color-primary);
  }

  &.breadcrumb-last-item .breadcrumb-item-text {
    font-weight: 600;
  }
}

.toolbar-right {
  display: flex;
  gap: 12px;
  align-items: center;
}

.search-input-container {
  min-width: 200px;
}

.filter-container {
  position: relative;
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 4px;
}

.custom-filter-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px;
  min-width: 250px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.filter-section {
  margin-bottom: 16px;

  &:last-child {
    margin-bottom: 0;
  }
}

.filter-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 12px;
}

.filter-options {
  display: flex;
  flex-direction: column;
  gap: 8px;

  :deep(.el-checkbox),
  :deep(.el-radio) {
    display: flex;
    align-items: center;
    margin-right: 0;

    .el-checkbox__label,
    .el-radio__label {
      display: flex;
      align-items: center;
      gap: 4px;
    }
  }
}

.file-type-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;

  .empty-state-img {
    display: flex;
    justify-content: center;
    opacity: 0.85;

    :deep(svg) {
      width: 140px;
      height: auto;
    }
  }

  .empty-state-text {
    margin-top: 16px;
    font-size: 14px;
    color: var(--color-text-secondary, #999);
  }
}

.file-table-container {
  flex: 1;
  overflow: auto;
  padding: 0;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }
}

:deep(.knowledge-table) {
  .el-table__header-wrapper,
  .el-table__body-wrapper {
    background: var(--color-bg);
  }

  .el-table__inner-wrapper::before {
    content: none;
  }

  th {
    background: var(--color-bg);
    color: var(--color-text);
    font-weight: 600;
  }

  td {
    background: var(--color-bg);
    // color: var(--color-text);
    color: #6f6f6f;
  }

  tr:hover td {
    background: var(--color-hover);
  }

  .el-table__body tr.current-row > td {
    background: var(--color-primary-light);
  }
}

.file-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s;

  &:active {
    opacity: 0.7;
  }

  &.is-not-ready {
    opacity: 1;
    filter: none;
    cursor: pointer;

    .file-name {
      color: var(--color-text);
    }

    &:active {
      opacity: 0.7;
    }
  }

  &.is-processing {
    opacity: 1;
    filter: none;
    background: linear-gradient(
      90deg,
      rgba(var(--color-primary-rgb, 30, 112, 255), 0.03) 25%,
      rgba(var(--color-primary-rgb, 30, 112, 255), 0.08) 37%,
      rgba(var(--color-primary-rgb, 30, 112, 255), 0.03) 63%
    );
    background-size: 400% 100%;
    animation: processing-shimmer 2s infinite ease-out;
    border-radius: 4px;

    .file-name {
      color: var(--color-text);
    }

    .processing-text {
      font-size: 12px;
      color: var(--color-primary);
      margin-left: 4px;
      font-weight: normal;
    }
  }

  .file-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .file-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text);
  }
}

.folder-info {
  &:hover {
    .file-name {
      color: var(--color-primary);
      text-decoration: underline;
    }
  }
}

.status-header {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.status-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.retry-icon {
  cursor: pointer;
  transition: all 0.2s ease;
  color: #d32f2f;
}

.retry-icon:hover {
  color: #d32f2f;
}

.retry-icon.is-loading {
  cursor: not-allowed;
  color: inherit;
  transform: none;
}

.retry-icon.is-loading:hover {
  color: inherit;
  transform: none;
}

.status-help-icon {
  font-size: 14px;
  color: var(--color-text-secondary);
  cursor: help;

  &:hover {
    color: var(--color-primary);
  }
}

.file-type-badge {
  display: inline-block;
  padding: 2px 0px;
  border-radius: 4px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 500;
}

.selection-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
  flex-shrink: 0;
}

.selection-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--color-text);
}

.selection-actions {
  display: flex;
  gap: 8px;
}

.selection-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    background: var(--color-hover);
    border-color: var(--color-primary);
  }

  &.danger {
    color: var(--color-danger);
    border-color: var(--color-danger);

    &:hover {
      background: rgba(255, 77, 79, 0.1);
    }
  }

  &.cancel {
    background: transparent;
  }
}

.context-menu {
  position: fixed;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 4px 0;
  z-index: 2000;
  min-width: 160px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  cursor: pointer;
  color: var(--color-text);
  font-size: 14px;
  transition: all 0.2s ease;

  &:hover {
    background: var(--color-hover);
    color: var(--color-primary);
  }

  &.danger {
    color: var(--color-danger);

    &:hover {
      background: rgba(255, 77, 79, 0.1);
    }
  }
}

/* 确保选择框正确显示，移除文本截断 */
:deep(.knowledge-table .el-table__selection) {
  width: 40px !important;
  min-width: 40px !important;
}

:deep(.knowledge-table .el-table__selection .cell) {
  padding: 0 !important;
  text-align: center !important;
  overflow: visible !important;
}

:deep(.knowledge-table .el-table__selection .el-checkbox) {
  margin: 0 !important;
}

:deep(
  .knowledge-table .el-table__selection .el-checkbox__input .el-checkbox__inner
) {
  border-radius: 50% !important;
  width: 16px !important;
  height: 16px !important;
}

:deep(
  .knowledge-table
    .el-table__selection
    .el-checkbox__input.is-checked
    .el-checkbox__inner
) {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

:deep(
  .knowledge-table
    .el-table__selection
    .el-checkbox__input.is-checked
    .el-checkbox__inner::after
) {
  border-color: #fff !important;
  width: 4px !important;
  height: 8px !important;
  left: 5px !important;
  top: 2px !important;
}

/* 移除表格单元格的文本截断 */
:deep(.knowledge-table .el-table__cell) {
  overflow: visible !important;
}

:deep(.knowledge-table .el-table__cell .cell) {
  overflow: visible !important;
}

@keyframes processing-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

@keyframes icon-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.92);
    opacity: 0.8;
  }
}
</style>